/*==================================================
BLOG.CSS
==================================================*/

:root{

    --blog-primary:#00d084;

    --blog-secondary:#00a76f;

    --blog-dark:#0f172a;

    --blog-card:#1a2333;

    --blog-text:#f5f5f5;

    --blog-text2:#bfc7d5;

    --blog-border:rgba(255,255,255,.08);

    --blog-shadow:0 15px 40px rgba(0,0,0,.25);

    --radius:18px;

    --transition:.35s;

}

/*==================================================
MAIN
==================================================*/

.blog-container{

    width:min(1400px,95%);

    margin:50px auto;

}

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

.blog-hero{

    position:relative;

    overflow:hidden;

    min-height:480px;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:80px 40px;

    margin:35px auto;

    background:

    linear-gradient(rgba(8,18,35,.75),

    rgba(8,18,35,.82)),

    url("../img/blog/blog-hero.webp")

    center/cover;

}

.blog-hero-overlay{

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle,

    transparent,

    rgba(0,0,0,.55));

}

.blog-hero-content{

    position:relative;

    z-index:2;

    max-width:900px;

}

.blog-badge{

    display:inline-block;

    background:var(--blog-primary);

    color:#fff;

    padding:10px 22px;

    border-radius:100px;

    font-size:.85rem;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    margin-bottom:22px;

}

.blog-hero h1{

    color:#fff;

    font-size:3.1rem;

    line-height:1.2;

    margin-bottom:20px;

}

.blog-hero p{

    color:#fff;

    opacity:.92;

    font-size:1.15rem;

    line-height:1.8;

    max-width:760px;

    margin:auto;

}

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-top:35px;

    flex-wrap:wrap;

}

.btn-principal{

    background:var(--blog-primary);

    color:#fff;

    padding:15px 35px;

    border-radius:12px;

    font-weight:700;

    text-decoration:none;

    transition:var(--transition);

}

.btn-principal:hover{

    transform:translateY(-4px);

    background:var(--blog-secondary);

}

.btn-secundario{

    border:2px solid #fff;

    color:#fff;

    padding:15px 35px;

    border-radius:12px;

    text-decoration:none;

    font-weight:700;

    transition:var(--transition);

}

.btn-secundario:hover{

    background:#fff;

    color:#111;

}

/*==================================================
PESQUISA
==================================================*/

.blog-search-section{

    margin:40px 0;

}

.blog-search-box{

    background:#fff;

    border-radius:50px;

    display:flex;

    align-items:center;

    padding:18px 28px;

    box-shadow:var(--blog-shadow);

}

.blog-search-box i{

    font-size:20px;

    color:#777;

    margin-right:15px;

}

.blog-search-box input{

    flex:1;

    border:none;

    outline:none;

    background:none;

    font-size:16px;

    color:#333;

}/*==================================================
CATEGORIAS
==================================================*/

.blog-categorias{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

    justify-content:center;

    margin:50px 0;

}

.blog-categorias .categoria{

    background:#ffffff;

    border:2px solid transparent;

    color:#222;

    padding:12px 22px;

    border-radius:40px;

    cursor:pointer;

    font-size:.95rem;

    font-weight:600;

    transition:var(--transition);

}

.blog-categorias .categoria:hover{

    background:var(--blog-primary);

    color:#fff;

    transform:translateY(-4px);

}

.blog-categorias .categoria.active{

    background:var(--blog-primary);

    color:#fff;

    border-color:var(--blog-primary);

}

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

.artigo-destaque{

    display:grid;

    grid-template-columns:1.1fr 1fr;

    gap:35px;

    align-items:center;

    background:var(--blog-card);

    border-radius:22px;

    overflow:hidden;

    box-shadow:var(--blog-shadow);

    margin:60px 0;

}

.destaque-imagem{

    position:relative;

    overflow:hidden;

}

.destaque-imagem img{

    width:100%;

    height:100%;

    min-height:460px;

    object-fit:cover;

    transition:.6s;

}

.artigo-destaque:hover img{

    transform:scale(1.06);

}

.badge-destaque{

    position:absolute;

    top:20px;

    left:20px;

    background:#ff3d00;

    color:#fff;

    padding:10px 18px;

    border-radius:40px;

    font-size:.82rem;

    font-weight:700;

    text-transform:uppercase;

    box-shadow:0 10px 25px rgba(0,0,0,.3);

}

.destaque-info{

    padding:40px;

}

.categoria-artigo{

    display:inline-block;

    background:rgba(0,208,132,.15);

    color:var(--blog-primary);

    padding:8px 18px;

    border-radius:30px;

    font-weight:700;

    margin-bottom:18px;

}

.destaque-info h2{

    color:#fff;

    font-size:2.2rem;

    line-height:1.3;

    margin-bottom:20px;

}

.destaque-info p{

    color:var(--blog-text2);

    line-height:1.9;

    font-size:1rem;

    margin-bottom:25px;

}

.artigo-meta{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

    color:#bfc7d5;

    font-size:.92rem;

    margin-bottom:30px;

}

.artigo-meta span{

    display:flex;

    align-items:center;

    gap:8px;

}

.btn-artigo{

    display:inline-block;

    padding:14px 30px;

    background:var(--blog-primary);

    color:#fff;

    border-radius:12px;

    text-decoration:none;

    font-weight:700;

    transition:var(--transition);

}

.btn-artigo:hover{

    background:var(--blog-secondary);

    transform:translateY(-4px);

}

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

.titulo-blog{

    text-align:center;

    margin:70px 0 40px;

}

.titulo-blog h2{

    color:#fff;

    font-size:2.3rem;

    margin-bottom:12px;

}

.titulo-blog p{

    color:var(--blog-text2);

    font-size:1rem;

}

/*==================================================
GRID
==================================================*/

.blog-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:30px;

}

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

.blog-card{

    background:var(--blog-card);

    border-radius:20px;

    overflow:hidden;

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

    transition:.4s;

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

}

.blog-card:hover{

    transform:translateY(-10px);

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

}

.blog-card img{

    width:100%;

    height:230px;

    object-fit:cover;

    transition:.5s;

}

.blog-card:hover img{

    transform:scale(1.08);

}

.blog-card-body{

    padding:28px;

}

.blog-card-body .categoria{

    display:inline-block;

    background:rgba(0,208,132,.18);

    color:var(--blog-primary);

    padding:7px 15px;

    border-radius:30px;

    font-size:.82rem;

    font-weight:700;

    margin-bottom:16px;

}

.blog-card-body h3{

    color:#fff;

    font-size:1.35rem;

    line-height:1.4;

    margin-bottom:15px;

}

.blog-card-body p{

    color:var(--blog-text2);

    line-height:1.8;

    margin-bottom:25px;

}

.card-meta{

    display:flex;

    justify-content:space-between;

    color:#bfc7d5;

    font-size:.88rem;

    margin-bottom:25px;

}

.card-meta span{

    display:flex;

    align-items:center;

    gap:6px;

}

.btn-blog{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:100%;

    padding:14px;

    background:var(--blog-primary);

    color:#fff;

    border-radius:12px;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

}

.btn-blog:hover{

    background:var(--blog-secondary);

    letter-spacing:.5px;

}/*==================================================
BLOG EXTRA
==================================================*/

.blog-extra{

    margin:70px 0;

}

.blog-sidebar{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:30px;

}

/*==================================================
BOXES
==================================================*/

.sidebar-box{

    background:var(--blog-card);

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

    border-radius:20px;

    padding:28px;

    box-shadow:var(--blog-shadow);

    transition:.35s;

}

.sidebar-box:hover{

    transform:translateY(-6px);

}

.sidebar-box h3{

    color:#fff;

    font-size:1.35rem;

    margin-bottom:22px;

    display:flex;

    align-items:center;

    gap:10px;

}

/*==================================================
MAIS LIDOS
==================================================*/

.lista-populares{

    list-style:none;

    display:flex;

    flex-direction:column;

    gap:18px;

}

.lista-populares li{

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

    padding-bottom:15px;

}

.lista-populares li:last-child{

    border:none;

    padding-bottom:0;

}

.lista-populares a{

    color:var(--blog-text);

    text-decoration:none;

    line-height:1.7;

    transition:.3s;

    display:block;

}

.lista-populares a:hover{

    color:var(--blog-primary);

    padding-left:8px;

}

/*==================================================
TAGS
==================================================*/

.tags{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}

.tags a{

    text-decoration:none;

    padding:10px 18px;

    border-radius:30px;

    background:#111827;

    color:#fff;

    transition:.3s;

    font-size:.9rem;

}

.tags a:hover{

    background:var(--blog-primary);

    transform:translateY(-3px);

}

/*==================================================
NEWSLETTER
==================================================*/

.newsletter-blog p{

    color:var(--blog-text2);

    line-height:1.8;

    margin-bottom:20px;

}

.newsletter-blog form{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.newsletter-blog input{

    height:50px;

    border:none;

    outline:none;

    border-radius:12px;

    padding:0 18px;

    background:#fff;

    color:#333;

}

.newsletter-blog button{

    height:50px;

    border:none;

    border-radius:12px;

    background:var(--blog-primary);

    color:#fff;

    cursor:pointer;

    font-size:15px;

    font-weight:700;

    transition:.35s;

}

.newsletter-blog button:hover{

    background:var(--blog-secondary);

}

/*==================================================
REDES SOCIAIS
==================================================*/

.social-blog{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

.social-blog a{

    width:55px;

    height:55px;

    border-radius:50%;

    background:#111827;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:22px;

    transition:.35s;

}

.social-blog a:hover{

    background:var(--blog-primary);

    transform:translateY(-5px) rotate(360deg);

}

/*==================================================
CTA SIDEBAR
==================================================*/

.destaque-plataformas{

    text-align:center;

}

.destaque-plataformas p{

    color:var(--blog-text2);

    margin:18px 0 25px;

    line-height:1.8;

}

.btn-sidebar{

    display:inline-block;

    padding:14px 30px;

    background:var(--blog-primary);

    color:#fff;

    text-decoration:none;

    border-radius:12px;

    font-weight:700;

    transition:.35s;

}

.btn-sidebar:hover{

    background:var(--blog-secondary);

    transform:translateY(-4px);

}

/*==================================================
ESTATÍSTICAS
==================================================*/

.stats-blog{

    display:grid;

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

    gap:18px;

}

.stats-blog div{

    background:#111827;

    border-radius:15px;

    padding:20px;

    text-align:center;

}

.stats-blog strong{

    display:block;

    color:var(--blog-primary);

    font-size:2rem;

    margin-bottom:8px;

}

.stats-blog span{

    color:var(--blog-text2);

    font-size:.9rem;

}

/*==================================================
CTA FINAL
==================================================*/

.blog-cta{

    margin:90px 0;

}

.cta-blog-box{

    background:linear-gradient(135deg,#00d084,#009966);

    border-radius:25px;

    padding:70px 35px;

    text-align:center;

    color:#fff;

    overflow:hidden;

    position:relative;

}

.cta-blog-box::before{

    content:"";

    position:absolute;

    width:300px;

    height:300px;

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

    border-radius:50%;

    top:-120px;

    right:-120px;

}

.cta-blog-box::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

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

    border-radius:50%;

    bottom:-90px;

    left:-90px;

}

.cta-blog-box>*{

    position:relative;

    z-index:2;

}

.cta-blog-box h2{

    font-size:2.4rem;

    margin-bottom:20px;

}

.cta-blog-box p{

    max-width:760px;

    margin:auto;

    line-height:1.9;

    font-size:1.05rem;

}

.btn-blog-principal{

    display:inline-block;

    margin-top:35px;

    background:#fff;

    color:#00a76f;

    text-decoration:none;

    padding:16px 42px;

    border-radius:12px;

    font-weight:700;

    transition:.35s;

}

.btn-blog-principal:hover{

    transform:translateY(-5px);

    box-shadow:0 20px 40px rgba(0,0,0,.25);

}

/*==================================================
LAYOUT ATUAL DO BLOG
==================================================*/

.blog-page {
    background:
        radial-gradient(circle at 20% 0%, rgba(0,208,132,.11), transparent 34rem),
        #07110c;
}

.blog-page > main.container {
    width:min(1180px, calc(100% - 32px));
    margin:32px auto 80px;
}

.hero-blog {
    position:relative;
    overflow:hidden;
    min-height:360px;
    display:grid;
    place-items:center;
    padding:64px clamp(22px,6vw,72px);
    border:1px solid rgba(255,255,255,.09);
    border-radius:28px;
    text-align:center;
    background:
        linear-gradient(135deg,rgba(5,19,12,.92),rgba(8,45,28,.72)),
        url("../img/blog/como-escolher-plataforma.png") center/cover;
    box-shadow:0 30px 80px rgba(0,0,0,.32);
}

.hero-blog::after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to top,rgba(4,13,8,.45),transparent);
}

.hero-blog .hero-content {
    position:relative;
    z-index:1;
    max-width:780px;
}

.hero-blog .tag {
    display:inline-flex;
    padding:9px 16px;
    margin-bottom:18px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:999px;
    background:rgba(0,208,132,.16);
    color:#baffdf;
    font-size:.82rem;
    font-weight:800;
    letter-spacing:.05em;
}

.hero-blog h1 {
    margin:0 0 18px;
    color:#fff;
    font-size:clamp(2rem,5vw,3.65rem);
    line-height:1.08;
}

.hero-blog p {
    max-width:670px;
    margin:auto;
    color:#d4e2da;
    font-size:clamp(.98rem,2vw,1.12rem);
    line-height:1.75;
}

.pesquisa-blog {
    max-width:760px;
    margin:-29px auto 62px;
    position:relative;
    z-index:2;
}

.pesquisa-blog .search-box {
    display:flex;
    align-items:center;
    gap:13px;
    min-height:58px;
    padding:0 22px;
    border:1px solid rgba(0,208,132,.3);
    border-radius:18px;
    background:#fff;
    box-shadow:0 18px 45px rgba(0,0,0,.28);
    color:#18794e;
}

.pesquisa-blog input {
    width:100%;
    border:0;
    outline:0;
    background:transparent;
    color:#142119;
    font:inherit;
}

.section-title {
    margin:58px 0 24px;
}

.section-title h2 {
    display:flex;
    align-items:center;
    gap:12px;
    margin:0;
    color:#fff;
    font-size:clamp(1.45rem,3vw,2rem);
}

.section-title i { color:var(--blog-primary); }

.artigo-destaque {
    display:block;
    margin:0 0 76px;
    background:transparent;
    box-shadow:none;
    overflow:visible;
}

.post-card {
    display:flex;
    flex-direction:column;
    min-width:0;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.09);
    border-radius:22px;
    background:linear-gradient(155deg,#16231c,#101914);
    box-shadow:0 18px 48px rgba(0,0,0,.22);
    transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}

.post-card:hover {
    transform:translateY(-5px);
    border-color:rgba(0,208,132,.48);
    box-shadow:0 24px 60px rgba(0,0,0,.32);
}

.post-card > img {
    display:block;
    width:100%;
    aspect-ratio:16/9;
    height:auto;
    object-fit:cover;
    background:#0d1711;
}

.post-card.destaque {
    display:grid;
    grid-template-columns:minmax(0,1.18fr) minmax(320px,.82fr);
}

.post-card.destaque > img {
    height:100%;
    min-height:390px;
}

.post-info {
    display:flex;
    flex:1;
    flex-direction:column;
    align-items:flex-start;
    padding:clamp(22px,3.5vw,38px);
}

.post-info .categoria {
    display:inline-flex;
    padding:7px 13px;
    margin-bottom:16px;
    border-radius:999px;
    background:rgba(0,208,132,.14);
    color:#5ef0b8;
    font-size:.78rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.post-info h3 {
    margin:0 0 13px;
    color:#fff;
    font-size:clamp(1.2rem,2vw,1.52rem);
    line-height:1.3;
}

.post-card.destaque h3 { font-size:clamp(1.65rem,3vw,2.25rem); }

.post-info p {
    margin:0 0 22px;
    color:#b9c9c0;
    line-height:1.72;
}

.post-meta {
    display:flex;
    flex-wrap:wrap;
    gap:10px 18px;
    margin-top:auto;
    margin-bottom:22px;
    color:#91a59a;
    font-size:.84rem;
}

.cards-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px;
}

.post-info .btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:46px;
    width:100%;
    margin-top:auto;
    padding:12px 20px;
    border:1px solid transparent;
    border-radius:12px;
    background:linear-gradient(135deg,#00d084,#00a76f);
    color:#04150c;
    font-weight:800;
    text-decoration:none;
    box-shadow:0 10px 24px rgba(0,208,132,.18);
    transition:transform .2s ease,filter .2s ease,box-shadow .2s ease;
}

.post-info .btn::after {
    content:"→";
    margin-left:10px;
    font-size:1.15em;
}

.post-info .btn:hover,
.post-info .btn:focus-visible {
    transform:translateY(-2px);
    filter:brightness(1.08);
    box-shadow:0 14px 30px rgba(0,208,132,.28);
}

.categorias-grid,
.estatisticas {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
}

.categoria-item,
.estatistica {
    padding:22px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:17px;
    background:#101a14;
    color:#dbe8e0;
    text-align:center;
}

.categoria-item i {
    display:block;
    margin-bottom:10px;
    color:var(--blog-primary);
    font-size:1.4rem;
}

/* Menu lateral confiável em qualquer largura */
.blog-page .sidebar {
    display:block;
    overflow-y:auto;
    overscroll-behavior:contain;
    z-index:12000;
}

.blog-page #overlay { z-index:11990; }
.blog-page .topo { z-index:1100; }

/* Notificação editorial para computador e celular */
.blog-page .blog-notificacao {
    position:fixed;
    right:24px;
    bottom:24px;
    display:grid;
    grid-template-columns:112px minmax(0,1fr);
    width:min(430px,calc(100vw - 32px));
    max-width:none;
    min-height:148px;
    padding:12px;
    overflow:visible;
    border:1px solid rgba(0,208,132,.34);
    border-radius:20px;
    background:rgba(8,20,13,.97);
    box-shadow:0 24px 70px rgba(0,0,0,.5);
    backdrop-filter:blur(16px);
    transform:translateY(28px);
    opacity:0;
    visibility:hidden;
    z-index:13000;
}

.blog-page .blog-notificacao.mostrar {
    transform:translateY(0);
    opacity:1;
    visibility:visible;
}

.blog-page .blog-notificacao > img {
    width:112px;
    height:100%;
    min-height:124px;
    border-radius:14px;
    object-fit:cover;
}

.blog-page .blog-notificacao .notificacao-info {
    display:flex;
    min-width:0;
    padding:6px 8px 4px 16px;
    gap:3px;
}

.blog-page .blog-notificacao strong {
    padding-right:24px;
    color:#fff;
    font-size:1rem;
    line-height:1.3;
}

.blog-page .blog-notificacao span {
    color:#54e8ad;
    font-size:.76rem;
    font-weight:800;
    text-transform:uppercase;
}

.blog-page .blog-notificacao p {
    margin:5px 0 10px;
    color:#b9c9c0;
    font-size:.82rem;
    line-height:1.45;
}

.blog-page .blog-notificacao .btn-notificacao {
    width:auto;
    min-height:38px;
    height:auto;
    margin:auto 0 0;
    padding:9px 14px;
    border-radius:10px;
    color:#04150c;
    font-size:.82rem;
}

.blog-page .blog-notificacao .notificacao-fechar {
    top:8px;
    right:8px;
    z-index:2;
}

@media (max-width:900px) {
    .post-card.destaque { grid-template-columns:1fr; }
    .post-card.destaque > img { min-height:0; }
    .cards-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:620px) {
    .blog-page > main.container { width:min(100% - 20px,1180px); }
    .hero-blog { min-height:310px; padding:48px 18px; border-radius:20px; }
    .pesquisa-blog { margin:-24px 12px 46px; }
    .cards-grid,
    .categorias-grid,
    .estatisticas { grid-template-columns:1fr; }
    .post-info { padding:21px; }
    .post-info .btn { min-height:48px; }

    .blog-page .blog-notificacao {
        left:10px;
        right:10px;
        bottom:10px;
        grid-template-columns:82px minmax(0,1fr);
        width:auto;
        min-height:120px;
        padding:9px;
        border-radius:17px;
    }

    .blog-page .blog-notificacao > img {
        width:82px;
        min-height:102px;
        border-radius:11px;
    }

    .blog-page .blog-notificacao .notificacao-info {
        padding:3px 4px 2px 11px;
    }

    .blog-page .blog-notificacao strong { font-size:.9rem; }
    .blog-page .blog-notificacao p { display:none; }
    .blog-page .blog-notificacao .btn-notificacao {
        min-height:36px;
        padding:8px 12px;
    }
}