/* =========================================================
   PORTAL VIVA ACRE
   HOME PREMIUM 2026
   CSS CONSOLIDADO
========================================================= */


/* =========================================================
   RESET
========================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:"DM Sans", Arial, sans-serif;
    color:#17221c;
    background:#f5f7f4;
    overflow-x:hidden;
}

img{
    display:block;
    max-width:100%;
}

a{
    color:inherit;
}


/* =========================================================
   CABEÇALHO
========================================================= */

.site-header{
    position:sticky;
    top:0;
    z-index:1000;

    width:100%;
    height:76px;

    display:grid;
    grid-template-columns:60px minmax(180px,1fr) auto;

    align-items:center;

    padding-left:max(24px, calc((100vw - 1400px) / 2));
    padding-right:max(24px, calc((100vw - 1400px) / 2));

    background:rgba(20,32,25,.94);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

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

    box-shadow:
        0 4px 20px rgba(0,0,0,.08);

    transition:
        height .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}


/* HEADER AO ROLAR */

.site-header.header-scroll{
    height:68px;

    background:rgba(16,27,21,.98);

    box-shadow:
        0 8px 28px rgba(0,0,0,.14);
}


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

.menu-btn{
    width:40px;
    height:40px;

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

    justify-self:start;

    padding:0;

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

    border-radius:11px;

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

    color:rgba(255,255,255,.92);

    font-size:17px;

    cursor:pointer;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease;
}

.menu-btn:hover{
    background:#e5c83d;
    border-color:#e5c83d;

    color:#17221c;

    transform:translateY(-1px);
}


/* =========================================================
   LOGO
========================================================= */

.logo{
    height:100%;
    min-width:0;

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

    overflow:hidden;
}

.logo a{
    height:100%;

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

    text-decoration:none;
}

.logo img{
    width:auto;
    height:61px;

    max-width:240px;

    object-fit:contain;

    transition:
        height .3s ease,
        transform .3s ease,
        opacity .3s ease;
}

.site-header.header-scroll .logo img{
    height:55px;
}

.logo img:hover{
    transform:scale(1.025);
}


/* =========================================================
   MENU SUPERIOR
========================================================= */

.top-links{
    display:flex;
    align-items:center;
    justify-content:flex-end;

    gap:22px;

    white-space:nowrap;
}

.top-links nav{
    display:flex;
    align-items:center;

    gap:24px;
}

.top-links nav a{
    position:relative;

    height:76px;

    display:flex;
    align-items:center;

    padding:0 2px;

    text-decoration:none;

    color:rgba(255,255,255,.72);

    font-size:13px;
    font-weight:600;

    transition:color .25s ease;
}

.site-header.header-scroll .top-links nav a{
    height:68px;
}

.top-links nav a:hover,
.top-links nav a.active{
    color:#fff;
}

.top-links nav a::after{
    content:"";

    position:absolute;

    left:50%;
    bottom:0;

    width:0;
    height:2px;

    transform:translateX(-50%);

    border-radius:5px;

    background:#e5c83d;

    transition:width .25s ease;
}

.top-links nav a:hover::after,
.top-links nav a.active::after{
    width:22px;
}


/* =========================================================
   REDES SOCIAIS DO HEADER
========================================================= */

.social{
    display:flex;
    align-items:center;

    gap:7px;

    padding-left:18px;

    border-left:1px solid rgba(255,255,255,.09);
}

.social a{
    width:35px;
    height:35px;

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

    border-radius:10px;

    text-decoration:none;

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

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

    color:rgba(255,255,255,.88);

    font-size:15px;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}

.social a:hover{
    background:#e5c83d;

    color:#17221c;

    transform:translateY(-2px);
}


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

.sidebar{
    position:fixed;

    top:0;
    left:-330px;

    width:310px;
    max-width:90vw;

    height:100vh;
    height:100dvh;

    z-index:2000;

    padding:25px 18px;

    overflow-y:auto;

    background:
        radial-gradient(
            circle at 10% 5%,
            rgba(255,255,255,.08),
            transparent 25%
        ),
        linear-gradient(
            155deg,
            #14271c,
            #075c37
        );

    box-shadow:
        20px 0 60px rgba(0,0,0,.30);

    transition:
        left .35s cubic-bezier(.4,0,.2,1);
}

.sidebar.active{
    left:0;
}


/* CABEÇALHO SIDEBAR */

.sidebar-header{
    min-height:65px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:0 10px 15px;

    margin-bottom:20px;

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

.sidebar-header span{
    color:#fff;

    font-size:13px;
    font-weight:700;

    letter-spacing:1.4px;

    text-transform:uppercase;
}

.sidebar-close{
    width:38px;
    height:38px;

    flex-shrink:0;

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

    border:0;
    border-radius:10px;

    color:#fff;

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

    cursor:pointer;

    transition:.25s ease;
}

.sidebar-close:hover{
    background:#e5c83d;

    color:#17221c;
}


/* =========================================================
   LINKS SIDEBAR
========================================================= */

.sidebar-nav{
    display:flex;
    flex-direction:column;

    gap:6px;
}

.sidebar-nav a{
    min-height:52px;

    display:flex;
    align-items:center;

    gap:14px;

    padding:9px 12px;

    border-radius:12px;

    color:rgba(255,255,255,.88);

    text-decoration:none;

    font-size:14px;
    font-weight:600;

    transition:
        background .25s ease,
        transform .25s ease,
        color .25s ease;
}

.sidebar-nav a > i{
    width:35px;
    height:35px;

    min-width:35px;

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

    border-radius:9px;

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

    color:#e5c83d;

    font-size:14px;

    transition:.25s ease;
}

.sidebar-nav a span{
    flex:1;
}

.sidebar-nav a small{
    padding:4px 6px;

    border-radius:5px;

    background:#e5c83d;

    color:#183123;

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

    letter-spacing:.4px;
}

.sidebar-nav a:hover{
    background:rgba(255,255,255,.09);

    color:#fff;

    transform:translateX(4px);
}

.sidebar-nav a:hover > i{
    background:#e5c83d;

    color:#183123;
}


/* SCROLL SIDEBAR */

.sidebar::-webkit-scrollbar{
    width:4px;
}

.sidebar::-webkit-scrollbar-track{
    background:transparent;
}

.sidebar::-webkit-scrollbar-thumb{
    border-radius:10px;

    background:rgba(255,255,255,.16);
}


/* =========================================================
   OVERLAY SIDEBAR
========================================================= */

.sidebar-overlay{
    position:fixed;

    inset:0;

    z-index:1500;

    background:rgba(0,0,0,.45);

    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);

    opacity:0;
    visibility:hidden;

    pointer-events:none;

    transition:
        opacity .3s ease,
        visibility .3s ease;
}

.sidebar.active ~ .sidebar-overlay{
    opacity:1;
    visibility:visible;

    pointer-events:auto;
}


/* =========================================================
   BANNER PRINCIPAL
========================================================= */

.hero-banner{
    width:100%;

    padding-top:20px;
    padding-left:max(24px, calc((100vw - 1400px) / 2));
    padding-right:max(24px, calc((100vw - 1400px) / 2));
}

.hero-banner-container{
    width:100%;
    max-width:1400px;

    margin:0 auto;

    overflow:hidden;

    border-radius:14px;

    background:#e9ece9;

    box-shadow:
        0 8px 28px rgba(0,0,0,.08);
}

.hero-banner img{
    width:100%;
    height:auto;

    transition:
        opacity .45s ease,
        transform .5s ease;
}

.hero-banner-container:hover img{
    transform:scale(1.004);
}


/* =========================================================
   CONTEÚDO PRINCIPAL
========================================================= */

.pagina-home{
    width:100%;
    max-width:1448px;

    margin:0 auto;

    padding:0 24px 55px;
}

.secao{
    margin-top:62px;
}


/* =========================================================
   CABEÇALHOS DAS SEÇÕES
========================================================= */

.secao-cabecalho{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;

    gap:30px;

    margin-bottom:27px;
}

.secao-tag{
    display:inline-flex;
    align-items:center;

    gap:8px;

    margin-bottom:10px;

    color:#087847;

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

    letter-spacing:1.4px;

    text-transform:uppercase;
}

.secao-cabecalho h1,
.secao-cabecalho h2,
.sobre-viva h2{
    font-family:"Playfair Display", Georgia, serif;

    color:#16241b;

    line-height:1.12;

    letter-spacing:-.5px;
}

.secao-cabecalho h1,
.secao-cabecalho h2{
    margin-bottom:9px;

    font-size:39px;
}

.secao-cabecalho p{
    max-width:570px;

    color:#6a746d;

    font-size:14px;
    line-height:1.65;
}

.ver-todos{
    flex-shrink:0;

    display:flex;
    align-items:center;

    gap:9px;

    padding:10px 14px;

    border-radius:9px;

    text-decoration:none;

    color:#31513e;

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

    transition:
        gap .25s ease,
        background .25s ease;
}

.ver-todos:hover{
    gap:14px;

    background:#e8eee9;
}


/* =========================================================
   GRID DE NOTÍCIAS
========================================================= */

.noticias-grid{
    display:grid;

    grid-template-columns:
        minmax(0,1.65fr)
        minmax(330px,.85fr);

    gap:20px;
}


/* =========================================================
   NOTÍCIA PRINCIPAL
========================================================= */

.noticia-principal{
    position:relative;

    min-height:530px;

    overflow:hidden;

    border-radius:18px;

    background:#17221c;

    box-shadow:
        0 12px 32px rgba(0,0,0,.12);
}

.noticia-principal > a{
    position:absolute;

    inset:0;

    display:block;

    text-decoration:none;
}

.noticia-principal img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .7s ease;
}

.noticia-principal:hover img{
    transform:scale(1.045);
}

.noticia-gradiente{
    position:absolute;

    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.02) 20%,
            rgba(7,16,11,.18) 48%,
            rgba(7,16,11,.93) 100%
        );
}

.principal-overlay{
    position:absolute;

    left:0;
    right:0;
    bottom:0;

    padding:34px;

    color:#fff;
}

.badge-noticia{
    display:inline-block;

    margin-bottom:13px;

    padding:6px 10px;

    border-radius:6px;

    background:#e5c83d;

    color:#17221c;

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

    letter-spacing:1.2px;
}

.principal-overlay h2{
    max-width:760px;

    margin-bottom:11px;

    font-family:"Playfair Display", Georgia, serif;

    color:#fff;

    font-size:31px;
    line-height:1.17;

    letter-spacing:-.3px;
}

.principal-overlay p{
    max-width:700px;

    margin-bottom:18px;

    color:rgba(255,255,255,.82);

    font-size:13px;
    line-height:1.6;
}

.ler-materia{
    display:flex;
    align-items:center;

    gap:8px;

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

    transition:gap .25s ease;
}

.noticia-principal:hover .ler-materia{
    gap:13px;
}


/* =========================================================
   NOTÍCIAS LATERAIS
========================================================= */

.noticias-laterais{
    display:flex;
    flex-direction:column;

    gap:14px;
}

.mini-noticia{
    flex:1;

    min-height:0;

    overflow:hidden;

    border:1px solid #e8ece8;

    border-radius:14px;

    background:#fff;

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

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.mini-noticia > a{
    height:100%;

    display:grid;

    grid-template-columns:140px 1fr;

    text-decoration:none;

    color:#17221c;
}

.mini-noticia:hover{
    transform:translateY(-3px);

    border-color:#dde4de;

    box-shadow:
        0 13px 28px rgba(0,0,0,.09);
}

.mini-imagem{
    min-width:0;

    overflow:hidden;

    background:#e8ece9;
}

.mini-imagem img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .5s ease;
}

.mini-noticia:hover .mini-imagem img{
    transform:scale(1.05);
}

.mini-conteudo{
    min-width:0;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:16px;
}

.mini-tag{
    margin-bottom:6px;

    color:#087847;

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

    letter-spacing:1px;
}

.mini-conteudo h3{
    margin-bottom:7px;

    font-family:"Playfair Display", Georgia, serif;

    font-size:17px;
    line-height:1.25;

    overflow-wrap:anywhere;
}

.mini-conteudo p{
    display:-webkit-box;

    overflow:hidden;

    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;

    margin-bottom:9px;

    color:#737c76;

    font-size:11.5px;
    line-height:1.45;
}

.mini-leia{
    display:flex;
    align-items:center;

    gap:6px;

    color:#31513e;

    font-size:10.5px;
    font-weight:700;
}


/* =========================================================
   BANNERS
========================================================= */

.banner-destaques,
.banner-publicidade{
    width:100%;

    margin:45px 0;

    overflow:hidden;

    border-radius:14px;

    background:#e9ece9;

    box-shadow:
        0 8px 25px rgba(0,0,0,.07);
}

.banner-destaques a,
.banner-publicidade a{
    display:block;

    width:100%;
}

.banner-destaques img,
.banner-publicidade img{
    width:100%;
    height:auto;

    transition:
        opacity .4s ease,
        transform .5s ease;
}

.banner-destaques:hover img,
.banner-publicidade:hover img{
    transform:scale(1.004);
}


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

.cards{
    display:grid;

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

    gap:20px;
}

.card-link{
    display:block;

    height:100%;

    text-decoration:none;

    color:inherit;
}

.card{
    position:relative;

    height:100%;

    overflow:hidden;

    border:1px solid #e7ebe7;

    border-radius:16px;

    background:#fff;

    box-shadow:
        0 6px 20px rgba(0,0,0,.055);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.card:hover{
    transform:translateY(-5px);

    border-color:rgba(8,120,71,.20);

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

.card-imagem{
    position:relative;

    height:215px;

    overflow:hidden;

    background:#e8ece9;
}

.card-imagem img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .6s ease;
}

.card:hover .card-imagem img{
    transform:scale(1.05);
}

.card-overlay{
    position:absolute;

    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(10,27,17,.35)
        );
}

.card-icone{
    position:absolute;

    left:16px;
    bottom:16px;

    width:40px;
    height:40px;

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

    border-radius:10px;

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

    color:#087847;

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

    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}

.card:hover .card-icone{
    background:#087847;

    color:#fff;

    transform:translateY(-3px);
}

.card-selo{
    position:absolute;

    top:14px;
    right:14px;

    padding:7px 9px;

    border-radius:7px;

    background:#e5c83d;

    color:#17221c;

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

    letter-spacing:.7px;
}

.card-conteudo{
    padding:20px;
}

.card-conteudo h3{
    margin-bottom:7px;

    font-family:"Playfair Display", Georgia, serif;

    color:#17221c;

    font-size:21px;
    line-height:1.25;
}

.card-conteudo p{
    min-height:42px;

    color:#737b75;

    font-size:13px;
    line-height:1.55;
}

.card-acao{
    display:flex;
    align-items:center;

    gap:7px;

    margin-top:16px;

    color:#087847;

    font-size:11.5px;
    font-weight:700;

    transition:gap .25s ease;
}

.card:hover .card-acao{
    gap:12px;
}


/* VIVA+ */

.card-vivamais{
    border-color:rgba(229,200,61,.45);
}


/* REVISTA DIGITAL */

.card-revista-imagem{
    padding:30px;

    background:
        linear-gradient(
            135deg,
            #17291e,
            #087847
        );
}

.card-revista-imagem img{
    object-fit:contain;
}


/* =========================================================
   SOBRE O PORTAL
========================================================= */

.sobre-viva{
    position:relative;

    display:grid;

    grid-template-columns:
        minmax(0,1.25fr)
        minmax(250px,.75fr);

    align-items:center;

    gap:50px;

    margin-top:70px;

    padding:55px 60px;

    overflow:hidden;

    border-radius:20px;

    background:
        linear-gradient(
            135deg,
            #15271c,
            #075d38
        );

    color:#fff;

    box-shadow:
        0 15px 40px rgba(0,0,0,.11);
}

.sobre-viva::after{
    content:"";

    position:absolute;

    width:400px;
    height:400px;

    right:-160px;
    top:-180px;

    border-radius:50%;

    background:rgba(229,200,61,.09);

    pointer-events:none;
}

.sobre-conteudo{
    position:relative;

    z-index:2;
}

.sobre-viva .secao-tag{
    color:#e5c83d;
}

.sobre-viva h2{
    max-width:600px;

    margin-bottom:16px;

    color:#fff;

    font-size:38px;
}

.sobre-viva p{
    max-width:650px;

    margin-bottom:13px;

    color:rgba(255,255,255,.76);

    font-size:14px;
    line-height:1.75;
}

.sobre-acoes{
    display:flex;

    flex-wrap:wrap;

    gap:11px;

    margin-top:26px;
}

.btn-principal,
.btn-secundario{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:8px;

    min-height:42px;

    padding:11px 17px;

    border-radius:9px;

    text-decoration:none;

    font-size:11.5px;
    font-weight:700;

    transition:
        transform .25s ease,
        background .25s ease;
}

.btn-principal{
    background:#e5c83d;

    color:#17221c;
}

.btn-principal:hover{
    background:#f0d852;

    transform:translateY(-2px);
}

.btn-secundario{
    border:1px solid rgba(255,255,255,.18);

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

    color:#fff;
}

.btn-secundario:hover{
    background:rgba(255,255,255,.12);

    transform:translateY(-2px);
}

.sobre-decoracao{
    position:relative;

    z-index:1;

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

.sobre-logo{
    width:240px;
    height:240px;

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

    padding:32px;

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

    border-radius:50%;

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

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}

.sobre-logo img{
    width:100%;
    height:auto;

    object-fit:contain;
}


/* =========================================================
   RODAPÉ
========================================================= */

.footer{
    margin-top:45px;

    padding:55px 25px 0;

    background:#111d16;

    color:#fff;
}

.footer-container{
    width:100%;
    max-width:1350px;

    margin:0 auto;

    display:grid;

    grid-template-columns:
        1.5fr
        .7fr
        .7fr
        1fr;

    gap:55px;
}

.footer-marca img{
    width:175px;
    height:auto;

    margin-bottom:17px;
}

.footer-marca p,
.footer-contato p{
    max-width:300px;

    color:rgba(255,255,255,.58);

    font-size:12.5px;
    line-height:1.7;
}

.footer h4{
    margin-bottom:17px;

    color:#fff;

    font-size:13px;
}

.footer-links{
    display:flex;
    flex-direction:column;

    gap:10px;
}

.footer-links a{
    color:rgba(255,255,255,.60);

    text-decoration:none;

    font-size:12px;

    transition:color .2s ease;
}

.footer-links a:hover{
    color:#e5c83d;
}

.footer-social{
    display:flex;

    gap:8px;

    margin-top:17px;
}

.footer-social a{
    width:38px;
    height:38px;

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

    border-radius:10px;

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

    color:#fff;

    text-decoration:none;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}

.footer-social a:hover{
    background:#e5c83d;

    color:#17221c;

    transform:translateY(-2px);
}

.footer-bottom{
    max-width:1350px;

    margin:42px auto 0;

    padding:19px 0;

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

    text-align:center;

    color:rgba(255,255,255,.40);

    font-size:11px;
}


/* =========================================================
   WHATSAPP FLUTUANTE
========================================================= */

.whatsapp-flutuante{
    position:fixed;

    right:22px;
    bottom:22px;

    z-index:900;

    width:52px;
    height:52px;

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

    border-radius:50%;

    background:#25d366;

    color:#fff;

    text-decoration:none;

    font-size:23px;

    box-shadow:
        0 8px 24px rgba(0,0,0,.20);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.whatsapp-flutuante:hover{
    transform:
        translateY(-3px)
        scale(1.04);

    box-shadow:
        0 12px 28px rgba(0,0,0,.24);
}


/* =========================================================
   ANIMAÇÕES DE ENTRADA
========================================================= */

.elemento-animado{
    opacity:0;

    transform:translateY(20px);

    transition:
        opacity .65s ease,
        transform .65s ease;
}

.elemento-visivel{
    opacity:1;

    transform:translateY(0);
}


/* =========================================================
   TABLET / NOTEBOOK MENOR
========================================================= */

@media(max-width:1100px){

    .site-header{
        grid-template-columns:
            55px
            1fr
            auto;

        padding:0 20px;
    }

    .logo img{
        max-width:210px;
    }

    .top-links{
        gap:16px;
    }

    .top-links nav{
        gap:17px;
    }

    .social{
        padding-left:13px;
    }

    .hero-banner{
        padding-left:20px;
        padding-right:20px;
    }

    .noticias-grid{
        grid-template-columns:1fr;
    }

    .noticia-principal{
        min-height:500px;
    }

    .noticias-laterais{
        display:grid;

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

        gap:14px;
    }

    .mini-noticia > a{
        display:block;
    }

    .mini-imagem{
        height:165px;
    }

    .mini-conteudo{
        min-height:160px;
    }

    .cards{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .sobre-viva{
        grid-template-columns:1fr;

        gap:25px;
    }

    .sobre-decoracao{
        display:none;
    }

    .footer-container{
        grid-template-columns:
            1.4fr
            1fr
            1fr;

        gap:40px;
    }

    .footer-contato{
        grid-column:1 / -1;
    }
}


/* =========================================================
   TABLET PEQUENO
========================================================= */

@media(max-width:850px){

    .top-links nav{
        gap:14px;
    }

    .top-links nav a{
        font-size:12px;
    }

    .social{
        gap:5px;

        padding-left:10px;
    }

    .social a{
        width:32px;
        height:32px;
    }

    .noticias-laterais{
        grid-template-columns:1fr;
    }

    .mini-noticia > a{
        display:grid;

        grid-template-columns:150px 1fr;
    }

    .mini-imagem{
        height:auto;
    }

    .mini-conteudo{
        min-height:135px;
    }
}


/* =========================================================
   CELULAR
========================================================= */

@media(max-width:768px){

    body{
        background:#f5f7f4;
    }


    /* HEADER */

    .site-header{
        height:68px;

        grid-template-columns:
            48px
            1fr
            48px;

        padding:0 10px;
    }

    .site-header.header-scroll{
        height:64px;
    }


    /* MENU */

    .menu-btn{
        width:38px;
        height:38px;

        border-radius:10px;

        font-size:16px;
    }


    /* LOGO */

    .logo img{
        height:58px;

        max-width:205px;
    }

    .site-header.header-scroll .logo img{
        height:54px;
    }


    /* LINKS SUPERIORES */

    .top-links{
        display:none;
    }


    /* SIDEBAR */

    .sidebar{
        width:290px;
        max-width:88vw;

        padding:20px 14px;
    }

    .sidebar-header{
        min-height:58px;

        margin-bottom:14px;
    }

    .sidebar-header span{
        font-size:12px;
    }

    .sidebar-nav{
        gap:5px;
    }

    .sidebar-nav a{
        min-height:49px;

        padding:7px 10px;

        font-size:13px;
    }

    .sidebar-nav a > i{
        width:33px;
        height:33px;

        min-width:33px;

        font-size:13px;
    }


    /* BANNER PRINCIPAL */

    .hero-banner{
        padding:
            10px
            10px
            0;
    }

    .hero-banner-container{
        border-radius:9px;
    }


    /* CONTEÚDO */

    .pagina-home{
        padding:
            0
            12px
            38px;
    }


    /* SEÇÕES */

    .secao{
        margin-top:42px;
    }

    .secao-cabecalho{
        align-items:flex-start;

        margin-bottom:20px;
    }

    .secao-cabecalho h1,
    .secao-cabecalho h2{
        font-size:29px;

        letter-spacing:-.3px;
    }

    .secao-cabecalho p{
        font-size:13px;
    }

    .ver-todos{
        display:none;
    }


    /* NOTÍCIAS */

    .noticias-grid{
        display:block;
    }

    .noticia-principal{
        min-height:390px;

        margin-bottom:14px;

        border-radius:15px;
    }

    .principal-overlay{
        padding:22px 18px;
    }

    .badge-noticia{
        margin-bottom:10px;

        font-size:8px;
    }

    .principal-overlay h2{
        font-size:23px;

        line-height:1.18;
    }

    .principal-overlay p{
        display:-webkit-box;

        overflow:hidden;

        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;

        margin-bottom:14px;

        font-size:12px;
    }

    .noticias-laterais{
        display:flex;

        flex-direction:column;

        gap:11px;
    }

    .mini-noticia{
        border-radius:13px;
    }

    .mini-noticia > a{
        display:grid;

        grid-template-columns:115px 1fr;
    }

    .mini-imagem{
        height:auto;
        min-height:120px;
    }

    .mini-conteudo{
        min-height:0;

        padding:13px;
    }

    .mini-conteudo h3{
        font-size:16px;
    }

    .mini-conteudo p{
        display:none;
    }

    .mini-leia{
        margin-top:5px;
    }


    /* BANNERS */

    .banner-destaques,
    .banner-publicidade{
        margin:32px 0;

        border-radius:9px;
    }


    /* CARDS */

    .cards{
        grid-template-columns:1fr;

        gap:15px;
    }

    .card{
        border-radius:15px;
    }

    .card-imagem{
        height:205px;
    }

    .card-conteudo{
        padding:18px;
    }

    .card-conteudo h3{
        font-size:21px;
    }

    .card-conteudo p{
        min-height:0;

        font-size:12.5px;
    }


    /* SOBRE */

    .sobre-viva{
        margin-top:45px;

        padding:32px 22px;

        border-radius:17px;
    }

    .sobre-viva h2{
        font-size:29px;
    }

    .sobre-viva p{
        font-size:13px;
    }

    .sobre-acoes{
        flex-direction:column;
    }

    .btn-principal,
    .btn-secundario{
        width:100%;
    }


    /* FOOTER */

    .footer{
        padding:
            45px
            22px
            0;
    }

    .footer-container{
        grid-template-columns:1fr;

        gap:32px;
    }

    .footer-contato{
        grid-column:auto;
    }

    .footer-bottom{
        margin-top:32px;
    }


    /* WHATSAPP */

    .whatsapp-flutuante{
        width:49px;
        height:49px;

        right:15px;
        bottom:15px;

        font-size:21px;
    }
}


/* =========================================================
   CELULARES PEQUENOS
========================================================= */

@media(max-width:390px){

    .site-header{
        grid-template-columns:
            45px
            1fr
            45px;
    }

    .logo img{
        height:55px;

        max-width:185px;
    }

    .secao-cabecalho h1,
    .secao-cabecalho h2{
        font-size:27px;
    }

    .noticia-principal{
        min-height:365px;
    }

    .principal-overlay h2{
        font-size:21px;
    }

    .mini-noticia > a{
        grid-template-columns:105px 1fr;
    }

    .mini-conteudo{
        padding:11px;
    }

    .mini-conteudo h3{
        font-size:15px;
    }

    .card-imagem{
        height:195px;
    }
}


/* =========================================================
   ACESSIBILIDADE
========================================================= */

@media(prefers-reduced-motion:reduce){

    html{
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after{
        transition:none !important;
        animation:none !important;
    }

    .elemento-animado{
        opacity:1;
        transform:none;
    }
}