/* =========================================================
   ROYAL PERFUMARIA
   CATEGORIAS
   ========================================================= */

.categorias-modernas{
    width:min(1400px,calc(100% - 50px));
    margin:70px auto;
}

.cabecalho-categorias{
    text-align:center;
    margin-bottom:45px;
}

.categoria-destaque{
    display:block;
    margin-bottom:12px;

    color:#d4af37;

    font-size:12px;
    font-weight:800;

    letter-spacing:4px;

    text-transform:uppercase;
}

.cabecalho-categorias h2{

    color:#fff;

    font-size:42px;

    margin-bottom:15px;

}

.cabecalho-categorias p{

    color:#8e8e8e;

    font-size:17px;

}

.grid-categorias-modernas{

    display:grid;

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

    gap:22px;

}

/* CARD */

.card-categoria-moderna{

    position:relative;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    min-height:210px;

    padding:28px;

    text-decoration:none;

    border-radius:24px;

    color:#fff;

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

    background:

    radial-gradient(

        circle at top right,

        rgba(212,175,55,.09),

        transparent 45%

    ),

    linear-gradient(

        145deg,

        #121212,

        #070707

    );

    transition:
        .35s;

}

.card-categoria-moderna:hover{

    transform:
        translateY(-8px);

    border-color:#d4af37;

    box-shadow:

        0 18px 45px rgba(0,0,0,.45),

        0 0 30px rgba(212,175,55,.10);

}

.icone-categoria{

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

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

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

}

.icone-categoria svg{

    width:28px;

    height:28px;

    stroke:#d4af37;

}

.texto-categoria{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.texto-categoria strong{

    font-size:20px;

    font-weight:700;

}

.texto-categoria span{

    color:#9f9f9f;

    font-size:14px;

}

.seta-categoria{

    position:absolute;

    right:24px;

    bottom:24px;

    font-size:24px;

    color:#d4af37;

    transition:.3s;

}

.card-categoria-moderna:hover .seta-categoria{

    transform:translateX(6px);

}

/* PROMOÇÃO */

.card-categoria-moderna.promocao{

    border-color:rgba(212,175,55,.35);

}

/* RESPONSIVO */

@media(max-width:1000px){

.grid-categorias-modernas{

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

}

}

@media(max-width:760px){

.grid-categorias-modernas{

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

gap:14px;

}

.card-categoria-moderna{

min-height:170px;

padding:20px;

}

.cabecalho-categorias h2{

font-size:34px;

}

}

@media(max-width:430px){

.grid-categorias-modernas{

grid-template-columns:1fr;

}

}