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

body{

    font-family:Arial,sans-serif;

    color:#1b1b1b;

    

    background-image:

    linear-gradient(
        rgba(255, 247, 170, 0.88),
        rgba(190, 235, 180, 0.90)
    ),

    url("../imagens/portalviva.png");

    background-repeat:repeat;

    background-size:350px;

    background-attachment:fixed;

}

/* CABEÇALHO */

header{

    position:sticky;
    top:0;
    z-index:1000;

    height:90px;

    display:grid;
    grid-template-columns:80px 1fr 350px;

    align-items:center;

    padding:0 25px;

    background:rgba(40,40,40,0.75);

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

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

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

.menu-btn{
    color:white;
    font-size:30px;
    cursor:pointer;
}

/* LOGO */

.logo{
    display:flex;
    justify-content:center;
    align-items:center;
    height: 100%;
    overflow: hidden;
}

.logo img{
    display: block;
    height: 78px;
    width:auto;
    max-height:calc(100% - 12px);
    object-fit: contain;
}

.logo img:hover{

    transform:scale(1.05);
}

/* MENU DIREITO */
.top-links{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:20px;
}

.top-links a{

    color:white;

    text-decoration:none;

    font-weight:600;

    transition:.3s;
}

.top-links a:hover{

    color:#ffd700;

    transform:translateY(-2px);
}

.social{
    display:flex;
    gap:15px;
}

.social a{

    width:38px;
    height:38px;

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

    border-radius:50%;

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

    color:white;

    transition:.3s;
}

.social a:hover{

    background:#27db24;

    color:#222;

    transform:translateY(-3px);
}

/* =========================================================
   MENU LATERAL PREMIUM - PORTAL VIVA ACRE
========================================================= */

/* BOTÃO HAMBÚRGUER */

.menu-btn{

    width:45px;
    height:45px;

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

    color:#fff;

    font-size:24px;

    cursor:pointer;

    border-radius:50%;

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

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

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

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

    transition:.3s ease;
}

.menu-btn:hover{

    color:#ffd700;

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

    transform:scale(1.07);
}


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

.sidebar{

    position:fixed;

    left:-310px;
    top:0;

    width:290px;
    height:100vh;

    padding:
        100px
        15px
        25px;

    z-index:999;

    overflow-y:auto;

    /* VIDRO ESCURO ELEGANTE */

    background:

        radial-gradient(
            circle at 20% 5%,
            rgba(255,255,255,.13),
            transparent 25%
        ),

        linear-gradient(
            150deg,
            rgba(17,35,27,.96),
            rgba(8,75,45,.91)
        );

    backdrop-filter:
        blur(24px)
        saturate(160%);

    -webkit-backdrop-filter:
        blur(24px)
        saturate(160%);

    border-right:
        1px solid rgba(255,255,255,.14);

    box-shadow:
        18px 0 55px rgba(0,0,0,.35);

    opacity:0;

    visibility:hidden;

    transform:translateX(-20px);

    transition:
        left .4s ease,
        opacity .3s ease,
        transform .4s ease,
        visibility .4s;
}


/* MENU ABERTO */

.sidebar.active{

    left:0;

    opacity:1;

    visibility:visible;

    transform:translateX(0);
}


/* =========================================================
   TEXTO PORTAL VIVA ACRE
========================================================= */

.sidebar::before{

    content:"PORTAL  VIVA ACRE";

    position:absolute;

    top:34px;
    left:25px;

    color:#fff;

    font-size:14px;

    font-weight:800;

    letter-spacing:1.4px;

    padding-left:15px;

    border-left:3px solid #ffd700;
}


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

.sidebar a{

    position:relative;

    display:flex;

    align-items:center;

    gap:13px;

    width:100%;

    min-height:53px;

    margin-bottom:5px;

    padding:
        7px
        12px;

    border-radius:13px;

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

    text-decoration:none;

    font-size:14px;

    font-weight:600;

    border:
        1px solid transparent;

    transition:.25s ease;
}


/* =========================================================
   QUADRADO DOS ÍCONES
========================================================= */

.sidebar a::before{

    width:37px;
    height:37px;

    min-width:37px;

    display:flex;

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

    border-radius:10px;

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

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

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

    font-family:
        "Font Awesome 6 Free";

    font-weight:900;

    font-size:14px;

    transition:.25s ease;
}

/* =========================================================
   ÍCONES DO SIDEBAR
   Identificados pelo link, não pela posição
========================================================= */

/* REVISTA DIGITAL */
.sidebar a[href*="revistadigital"]::before{
    content:"\f518"; /* livro aberto */
}


/* GASTRONOMIA */
.sidebar a[href*="gastronomia"]::before{
    content:"\f2e7"; /* garfo e faca */
}


/* TURISMO */
.sidebar a[href*="turismo"]::before{
    content:"\f3c5"; /* localização */
}


/* SAÚDE */
.sidebar a[href*="saude"]::before{
    content:"\f21e"; /* coração / pulso */
}


/* ESPORTE */
.sidebar a[href*="esporte"]::before{
    content:"\f1e3"; /* bola */
}


/* EDUCAÇÃO */
.sidebar a[href*="educacao"]::before{
    content:"\f19d"; /* formatura */
}


/* NOTÍCIAS */
.sidebar a[href*="noticias"]::before{
    content:"\f1ea"; /* jornal */
}


/* PARCEIROS */
.sidebar a[href*="parceiros"]::before{
    content:"\f2b5"; /* aperto de mãos */
}


/* VIVA MAIS DESCONTOS */
.sidebar a[href*="vivamais"]::before{
    content:"\f3ff"; /* ticket */
}


/* CONTATO */
.sidebar a[href*="contato"]::before{
    content:"\f0e0"; /* envelope */
}


/* QUEM SOMOS / SOBRE */
.sidebar a[href*="sobre"]::before{
    content:"\f05a"; /* informações */
}


/* INÍCIO - INDEX */
.sidebar a[href$="index.php"]::before{
    content:"\f015"; /* casa */
}


/* ACADEMIAS */
.sidebar a[href*="academias"]::before{
    content:"\f44b"; /* halter */
}


/* HOTÉIS / HOSPEDAGEM */
.sidebar a[href*="hoteis"]::before,
.sidebar a[href*="hospedagem"]::before{
    content:"\f236"; /* cama */
}


/* ECOTURISMO */
.sidebar a[href*="ecoturismo"]::before{
    content:"\f06c"; /* folha */
}

/* =========================================================
   HOVER
========================================================= */

.sidebar a:hover{

    padding-left:12px;

    color:#fff;

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

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

    transform:
        translateX(5px);

    box-shadow:
        0 7px 18px rgba(0,0,0,.08);
}


/* ÍCONE NO HOVER */

.sidebar a:hover::before{

    color:#263a2e;

    background:#ffd83d;

    border-color:
        rgba(255,216,61,.45);

    box-shadow:
        0 5px 15px rgba(255,216,61,.15);

    transform:scale(1.05);
}


/* =========================================================
   LINHA DOURADA AO PASSAR MOUSE
========================================================= */

.sidebar a::after{

    content:"";

    position:absolute;

    left:0;

    width:3px;
    height:0;

    border-radius:5px;

    background:#ffd83d;

    transition:.25s ease;
}


.sidebar a:hover::after{

    height:27px;
}


/* =========================================================
   SCROLLBAR
========================================================= */

.sidebar::-webkit-scrollbar{

    width:4px;
}


.sidebar::-webkit-scrollbar-track{

    background:transparent;
}


.sidebar::-webkit-scrollbar-thumb{

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

    border-radius:10px;
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:768px){

    .menu-btn{

        width:41px;
        height:41px;

        font-size:21px;

        justify-self:start;
    }


    .sidebar{

        width:285px;

        max-width:87vw;

        left:-100%;

        padding:
            90px
            13px
            20px;
    }


    .sidebar.active{

        left:0;
    }


    .sidebar::before{

        top:30px;
        left:22px;

        font-size:13px;
    }


    .sidebar a{

        min-height:50px;

        font-size:14px;

        padding:
            6px
            10px;
    }


    .sidebar a::before{

        width:35px;
        height:35px;

        min-width:35px;

        font-size:13px;
    }

}

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

.banner-principal{
    width:100%;
    padding:18px 20px;
    display:flex;
    justify-content:center;
}

.banner-principal img{
    display:block;

    width:100%;
    max-width:1400px;

    /* mantém a proporção original */
    height:auto;

    border-radius:14px;

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

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

@media (max-width:768px){

    .banner-principal{
        padding:10px;
    }

    .banner-principal img{
        width:100%;
        height:auto;
        border-radius:8px;
    }
}

/* CONTEÚDO */

.conteudo{
    max-width:1400px;
    margin:auto;
    padding:20px;
}

.materias{
    width:100%;
}

.anuncios{
    display:none;
}

/* GRID DOS CARDS NO DESKTOP */
.cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
    margin-top:20px;
}

/* GRID DOS CARDS NO CELULAR */
@media (max-width:768px){

    .cards{
        grid-template-columns:1fr;
        gap:20px;
    }

}

.card-link{
    text-decoration:none;
    color:inherit;
    display:block;
}

.card{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

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

    position:relative;

    transition:.35s ease;

    cursor:pointer;

    box-shadow:
        0 8px 18px rgba(0,0,0,.10),
        0 18px 40px rgba(0,0,0,.12),
        0 0 15px rgba(0,177,64,.10);

}

.card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:5px;

    background:linear-gradient(
        90deg,
        #ffd700,
        #00b140,
        #00ff66
    );

}

.card:hover{

    transform:translateY(-10px) scale(1.02);

    box-shadow:
        0 18px 35px rgba(0,0,0,.18),
        0 30px 60px rgba(0,0,0,.20),
        0 0 25px rgba(0,255,102,.30);

}

.anuncio{
    height:250px;

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

    font-size:22px;
    font-weight:bold;

    background:white;

    border-radius:16px;

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

    transition:.3s;
}
/* RODAPÉ */

footer{
background:#2e2e2e;
color:white;

padding:30px;

text-align:center;
margin-top:40px;
}

footer img{
height:60px;
margin-bottom:10px;
}

.footer-social{
margin-top:10px;
}

.footer-social i{
font-size:24px;
margin:0 10px;
}

.card img{
    width:100%;
    height:220px;
    object-fit:cover;
}

.card h3{
    padding:15px;
    font-size:20px;
}

.card p{
    padding:0 15px 20px;
    color:#666;
}

.sobre-viva{
    background:white;
    padding:40px;
    margin-top:40px;
    border-radius:16px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.sobre-viva h2{
    margin-bottom:20px;
}

.sobre-viva p{
    line-height:1.8;
    margin-bottom:15px;
}

.banner-publicidade{
    width:100%;
    margin-top:35px;
}

.banner-publicidade a{
    display:block;
    width:100%;
}

.banner-publicidade img{
    display:block;

    width:100%;
    height:auto;

    border-radius:14px;

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

.anuncio-link{
text-decoration:none;
color:inherit;
}

.anuncio-box{
background:#fff;
border-radius:12px;
overflow:hidden;
box-shadow:0 4px 12px rgba(0,0,0,.1);
transition:.3s;
}

.anuncio-box:hover{
transform:translateY(-5px);
}

.anuncio-box img{
width:100%;
height:220px;
object-fit:cover;
display:block;
}

.anuncio-box h3{
padding:15px 15px 5px;
}

.anuncio-box p{
padding:0 15px 15px;
}

.ultimas-noticias h2{

    display:inline-flex;
    align-items:center;
    gap:12px;

    margin:45px 0 30px;
    padding:16px 32px;

    background:#fff;

    color:#111;

    font-size:32px;
    font-weight:800;
    letter-spacing:.5px;

    border-radius:16px;

    border-left:8px solid #00b140;
    border-bottom:2px solid rgba(0,177,64,.20);

    box-shadow:
        0 0 10px rgba(255,215,0,.35),
        0 0 25px rgba(57,255,20,.18),
        0 12px 30px rgba(0,0,0,.18);

    position:relative;
    transition:.35s ease;

}

.ultimas-noticias h2::before{

    content:"📰";

    font-size:30px;

}
.sobre-viva,
.banner-publicidade{

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

}

.materias h2{

    display:inline-flex;
    align-items:center;
    gap:12px;

    margin:45px 0 30px;
    padding:16px 32px;

    background:#fff;

    color:#111;

    font-size:32px;
    font-weight:800;
    letter-spacing:.5px;

    border-radius:16px;

    border-left:8px solid #ffd700;
    border-bottom:2px solid rgba(255,215,0,.30);

    box-shadow:
        0 0 10px rgba(255,215,0,.45),
        0 0 25px rgba(0,177,64,.18),
        0 12px 30px rgba(0,0,0,.18);

    position:relative;
    transition:.35s ease;

}


.materias h2::before{

    content:"⭐";

    font-size:28px;

}
.materias h2::before{

    content:"⭐";

    font-size:28px;

}

/* =======================================================
   ÚLTIMAS NOTÍCIAS - NOVO LAYOUT
=======================================================*/

.noticias-grid{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:25px;
    margin-top:25px;
}

.noticia-principal{
    position:relative;
    border-radius:18px;
    overflow:hidden;
    min-height:600px;
    box-shadow:0 15px 35px rgba(0,0,0,.20);
}

.noticia-principal a{
    display:block;
    width:100%;
    height:100%;
    text-decoration:none;
}

.noticia-principal img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.4s;
}

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

.principal-overlay{

    position:absolute;

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

    padding:35px;

    background:linear-gradient(
        transparent,
        rgba(0,0,0,.88)
    );

    color:#fff;
}

.principal-overlay h2{

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

    line-height:1.3;

    margin-bottom:10px;

    color:#000000;

    text-shadow:2px 2px 8px rgba(255, 255, 255, 0.75);
}

.principal-overlay p{

    font-size:15px;

    line-height:1.5;

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

    text-shadow:1px 1px 5px rgba(0,0,0,.70);
}

.noticias-laterais{

    display:flex;
    flex-direction:column;
    gap:18px;
}

.mini-noticia{

    display:flex;

    background:#fff;

    border-radius:15px;

    overflow:hidden;

    text-decoration:none;

    color:#222;

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

    transition:.3s;
}

.mini-noticia:hover{

    transform:translateY(-5px);

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

.mini-noticia img{

    width:160px;
    height:130px;
    object-fit:cover;
}

.mini-conteudo{

    padding:15px;
}

.mini-conteudo h3{

    font-size:18px;
    margin-bottom:10px;
}

.mini-conteudo p{

    color:#666;
    font-size:14px;
    line-height:1.5;
}

@media(max-width:900px){

    .noticias-grid{

        grid-template-columns:1fr;
    }

    .noticia-principal{

        min-height:420px;
    }

}

/* =========================================
   BANNER ROTATIVO DESTAQUES
========================================= */

.banner-destaques{
    width:100%;
    margin:35px 0;
}

.banner-destaques a{
    display:block;
    width:100%;
}

.banner-destaques img{
    display:block;

    width:100%;
    height:auto;

    border-radius:14px;

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

    transition:opacity .4s ease;
}

@media (max-width:768px){

    .banner-destaques{
        margin:20px 0;
    }

    .banner-destaques img{
        width:100%;
        height:auto;
        border-radius:8px;
    }
}

/* =====================================================
   RESPONSIVIDADE GERAL - CELULAR
===================================================== */

@media (max-width: 768px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* CABEÇALHO */
    header {
        width: 100%;
        height: 75px;

        display: grid;
        grid-template-columns: 55px 1fr 55px;

        align-items: center;

        padding: 0 10px;
    }

    /* botão menu */
    .menu-btn {
        font-size: 26px;
        justify-self: start;
    }

    /* logo centralizada */
    .logo {
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: 0;
    }

    .logo img {
        height: 68px;
        width: auto;
        max-width: 100%;
        object-fit: contain;
    }

    /* esconde Home / Contato / Sobre no celular */
    .top-links {
        display: none;
    }

    /* CONTEÚDO */
    .conteudo {
        width: 100%;
        max-width: 100%;
        padding: 12px;
    }

    /* BANNER PRINCIPAL */
    .banner-principal {
        width: 100%;
        padding: 10px;
    }

    .banner-principal img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    /* BANNER DO MEIO */
    .banner-destaques {
        width: 100%;
        margin: 20px 0;
    }

    .banner-destaques img {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    /* BANNER INFERIOR */
    .banner-publicidade {
        width: 100%;
    }

    .banner-publicidade img {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    /* CARDS */
    .cards {
        grid-template-columns: 1fr;
        width: 100%;
        gap: 20px;
    }

    .card {
        width: 100%;
        max-width: 100%;
    }

    /* NOTÍCIAS */
    .noticias-grid {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .noticia-principal {
        width: 100%;
        min-height: 380px;
    }

    /* NOTÍCIAS PEQUENAS */
    .mini-noticia {
        width: 100%;
    }

    .mini-noticia img {
        width: 120px;
        min-width: 120px;
        height: 110px;
    }

    .mini-conteudo {
        min-width: 0;
        padding: 12px;
    }

    .mini-conteudo h3 {
        font-size: 16px;
        overflow-wrap: break-word;
    }

    /* SOBRE */
    .sobre-viva {
        width: 100%;
        padding: 25px 20px;
    }
}