/* ==========================================================
   BLOG NUMBERPRO
   Identidade Visual Premium
========================================================== */

:root{

    --verde:#16a36a;
    --verde-hover:#0f7d51;
    --verde-claro:#e8f7f0;

    --cinza-bg:#f5f7f8;
    --cinza-card:#ffffff;

    --texto:#243746;
    --texto-sec:#667788;

    --borda:#e7ecef;

    --radius:22px;

    --sombra:
        0 12px 35px rgba(15,45,70,.07);

}

*{

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--cinza-bg);

    color:var(--texto);

    font-family:'Inter',sans-serif;

    font-size:16px;

    line-height:1.7;

}


/* ===========================
   NAVBAR
=========================== */

.navbar{

    background:#fff !important;

    box-shadow:0 10px 35px rgba(0,0,0,.05);

    padding:18px 0;

}

.navbar-brand{

    color:var(--verde)!important;

    font-size:1.55rem;

    font-weight:800;

    letter-spacing:-.5px;

}

.navbar .nav-link{

    color:var(--texto);

    font-weight:600;

}

.navbar .nav-link:hover{

    color:var(--verde);

}


/* ===========================
   CONTAINER
=========================== */

.container{

    max-width:1250px;

}


/* ===========================
   HERO
=========================== */

.hero-blog{

    background:#fff;

    border-radius:32px;

    padding:70px 60px;

    margin:45px 0;

    box-shadow:var(--sombra);

}

.hero-blog h1{

    font-size:3rem;

    font-weight:800;

    color:var(--verde);

    margin-bottom:15px;

}

.hero-blog p{

    color:var(--texto-sec);

    font-size:1.1rem;

}


/* ===========================
   INPUTS
=========================== */

.form-control{

    border:2px solid #1ac88d;

    border-radius:18px;

    min-height:56px;

    padding:14px 22px;

    box-shadow:none;

}

.form-control:focus{

    border-color:var(--verde);

    box-shadow:0 0 0 .2rem rgba(22,163,106,.12);

}


/* ===========================
   BOTÕES
=========================== */

.btn{

    border-radius:18px;

    min-height:56px;

    padding:0 26px;

    font-weight:700;

    transition:.25s;

    border:none;

}

.btn-dark,
.btn-success{

    background:linear-gradient(
        135deg,
        #19b878,
        #0f7d51
    );

}

.btn-dark:hover,
.btn-success:hover{

    background:linear-gradient(
        135deg,
        #149865,
        #0b6d46
    );

    transform:translateY(-2px);

}


/* ===========================
   CARDS
=========================== */

.card{

    border:none;

    border-radius:26px;

    overflow:hidden;

    background:#fff;

    box-shadow:var(--sombra);

    transition:.30s;

}

.card::before{

    content:"";

    display:block;

    height:5px;

    background:linear-gradient(
        90deg,
        #17bb79,
        #0f7d51
    );

}

.card:hover{

    transform:translateY(-8px);

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

}

.card-img-top{

    height:230px;

    object-fit:cover;

}

.card-body{

    padding:28px;

}

.card-title{

    font-size:1.35rem;

    font-weight:700;

    color:var(--texto);

    line-height:1.4;

    margin-top:12px;

}

.card-text{

    color:var(--texto-sec);

    margin:18px 0;

}


/* ===========================
   BADGES
=========================== */

.badge{

    background:var(--verde-claro);

    color:var(--verde);

    border-radius:30px;

    padding:9px 18px;

    font-weight:700;

    font-size:.82rem;

    letter-spacing:.5px;

    text-transform:uppercase;

}


/* ===========================
   ARTIGO
=========================== */

.conteudo{

    background:#fff;

    padding:45px;

    border-radius:28px;

    box-shadow:var(--sombra);

    margin-top:35px;

    font-size:1.08rem;

    line-height:2;

}

.conteudo img{

    max-width:100%;

    border-radius:18px;

    margin:30px 0;

}

.conteudo table{

    width:100%;

    margin:30px 0;

}

.conteudo iframe{

    max-width:100%;

}


/* ===========================
   PAGINAÇÃO
=========================== */

.pagination{

    margin:55px 0;

    gap:10px;

}

.page-link{

    border:none;

    border-radius:14px;

    color:var(--texto);

    min-width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:0 4px 12px rgba(0,0,0,.05);

}

.page-link:hover{

    background:var(--verde);

    color:#fff;

}

.page-item.active .page-link{

    background:var(--verde);

    color:#fff;

}


/* ===========================
   FOOTER
=========================== */

footer{

    background:#fff!important;

    color:var(--texto-sec)!important;

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

    margin-top:90px;

    padding:55px 0!important;

}


/* ===========================
   ADMIN
=========================== */

.tabela{

    width:100%;

    border-collapse:collapse;

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    box-shadow:var(--sombra);

}

.tabela th{

    background:var(--verde);

    color:#fff;

}

.tabela th,
.tabela td{

    padding:16px;

    border-bottom:1px solid #edf2f5;

}

.tabela tr:hover{

    background:#fafcfd;

}


/* ===========================
   CAMPOS
=========================== */

.barra{

    margin-bottom:25px;

}

.linha{

    margin-bottom:24px;

}

.linha label{

    display:block;

    margin-bottom:10px;

    font-weight:700;

    color:var(--texto);

}


/* ===========================
   LISTA CATEGORIAS
=========================== */

#listaCategorias{

    background:#fff;

    border:1px solid #e7ecef;

    border-radius:18px;

    overflow:hidden;

    box-shadow:var(--sombra);

    position:relative;

    z-index:999;

}

#listaCategorias div{

    padding:12px 18px;

    cursor:pointer;

}

#listaCategorias div:hover{

    background:#eefaf5;

}


/* ===========================
   PREVIEW
=========================== */

#preview{

    max-width:260px;

    border-radius:18px;

    border:2px solid #eef1f4;

}


/* ===========================
   RESPONSIVO
=========================== */

@media(max-width:991px){

    .hero-blog{

        padding:45px 30px;

        text-align:center;

    }

    .hero-blog h1{

        font-size:2.3rem;

    }

}

@media(max-width:768px){

    .card-img-top{

        height:210px;

    }

    .conteudo{

        padding:28px;

        font-size:1rem;

    }

    .btn{

        width:100%;

    }

}