:root {

         --bg-color: hsl(224 71% 4%);

            --text-color: #ffffff;

           --header-bg: linear-gradient(to right, #000000e6, #1e3a8ae6);

            --card-bg: #252525;

            --search-bg: #333333;

            --accent-color: #ff0000;

            --cor-link: #fff;

            --paginacao: linear-gradient(to right, #000000e6 0%, #1e3a8ae6 13%);

            /*--linha: linear-gradient(to left, #000000e6 0%, #1e3a8ae6 60%);*/

        }



        .light-mode {

            --bg-color: #ffffff;

            --text-color: #333333;

            --header-bg: #f5f5f5;

            --card-bg: #f0f0f0;

            --search-bg: #e0e0e0;

            --cor-link: #333;

            --paginacao: #ebebeb;

        }



        * {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

            transition: background-color 0.3s, color 0.3s;

        }

        ul,li {

        list-style: none;

        margin: 0;

        padding: 0;

        }

        

        a {text-decoration: none;}



        body {

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

            background-color: var(--bg-color);

            color: var(--text-color);

            padding-top: 60px;

        }

  

        h1, h2, .logo, .menu a {

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

            

        }

     

            .admin-bar header {

                margin-top: 32px;

            }

            .admin-bar .search-bar {

            top: 90px;

            }



        header {

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 60px;

            border-bottom: 1px solid #e5e7eb1a;

            background: var(--header-bg);

            display: flex;

            justify-content: space-between;

            align-items: center;

            padding: 0 20px;

            z-index: 1000;

            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

        }



        .headerint {

             width: 100%;

             display: flex;

             justify-content: space-between;

        }



        .logo {

            font-size: 24px;

            font-weight: bold;

            color: var(--accent-color);

            display: flex;

            align-items: center;

        }

        .logo a {

           color: var(--cor-link);

        } 



         .menu {display: flex;}



        .menu ul {

            display: flex;

            align-items: anchor-center;

            gap: 20px;

        }



        .menu-item a {

            color: var(--text-color);

            text-decoration: none;

            font-size: 15px;

            padding: 5px 10px;

            border-radius: 4px;

            font-weight: 600;

            letter-spacing: 0.5px;

        }



        .menu-item a:hover {

            background-color: rgba(255, 255, 255, 0.1);

        }



        .header-right {

            display: flex;

            align-items: center;

            gap: 15px;

        }



        .search-bar {

            position: fixed;

            top: 60px;

            left: 0;

            width: 100%;

            background: var(--header-bg);

            padding: 15px 20px;

            z-index: 999;

            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

            transform: translateY(-100%);

            opacity: 0;

            transition: transform 0.3s, opacity 0.3s;

        }





            .close-icon {

            display: none;

            }







        .search-bar.active {

            transform: translateY(0);

            opacity: 1;

        }



        .search-bar input {

            width: 100%;

            max-width: 800px;

            margin: 0 auto;

            display: block;

            padding: 10px 15px;

            border-radius: 20px;

            border: none;

            background-color: #f3f3f3;

            color: var(--text-color);

            font-size: 16px;

                border: 1px solid #33333359;

        }



        .search-btn, .theme-toggle {

            background: none;

            border: none;

            color: var(--text-color);

            font-size: 20px;

            cursor: pointer;

            width: 40px;

            height: 40px;

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

        }



        .search-btn span {margin-top: 8px;}



        .search-btn:hover, .theme-toggle:hover {

            background-color: rgba(255, 255, 255, 0.1);

        }



        .theme-toggle svg {

            width: 20px;

            height: 20px;

        }



        .hamburger {

            display: none;

            font-size: 24px;

            cursor: pointer;

            background: none;

            border: none;

            color: var(--text-color);

        }



        .container {

            max-width: 1300px;

            margin: 0 auto;

            padding: 20px;

        }



        .videos-grid {

            display: grid;

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

            gap: 20px;

        }



        .video-card {

            background-color: var(--card-bg);

            border-radius: 8px;

            overflow: hidden;

            cursor: pointer;

        }



        .thumbnail {

            width: 100%;

            height: 0;

            padding-bottom: 56.25%; /* 16:9 aspect ratio */

            background-color: #555;

            position: relative;

        }



        .thumbnail img {

            position: absolute;

            width: 100%;

            height: 100%;

            object-fit: cover;

        }



        .video-info {

            padding: 10px;

        }



        .video-title {

            font-size: 14px;

            margin-bottom: 5px;

            display: -webkit-box;

            -webkit-line-clamp: 2;

            -webkit-box-orient: vertical;

            overflow: hidden;

        }

        .video-title a { 

            color: var(--cor-link);

            letter-spacing: 0.5px;

        }







        .video-channel {

            font-size: 12px;

            display: flex;

    justify-content: space-between;

        }

        .video-channel a {

            color: #aaa;

        }







.thumbnail {

    width: 100%;

    height: 0;

    padding-bottom: 56.25%; /* 16:9 aspect ratio */

    background-color: #555;

    position: relative;

    overflow: hidden;

}



.thumbnail img {

    position: absolute;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.3s ease;

}



.video-card:hover .thumbnail img {

    transform: scale(1.1);

}





        @media (max-width: 768px) {

            .hamburger {

                display: block;

                margin-top: 7px;

            }



            .headerint {

                padding: 0px !important;

            }



            .menu {

                position: fixed;

                top: 60px;

                left: -100%;

                width: 80%;

                height: calc(100vh - 60px);

                background-color: var(--header-bg);

                flex-direction: column;

                align-items: center;

                padding-top: 20px;

                transition: left 0.3s;

            }



            .menu.active {

                left: 0;

                background: #030711;

            }



            @media (max-width: 720px){

                .menu ul {display: block;width: 86%;}

                .menu li {margin-bottom: 20px;}

            }



            .videos-grid {

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

            }

        }



       /* @media (max-width: 480px) {

            .videos-grid {

                grid-template-columns: 1fr;

            }

        }

        */

        /* footer */

        footer {

            background-color: var(--footer-bg);

            padding: 30px 0;

            margin-top: 40px;

            border-top: 1px solid #eeeeee1a;

        }



        .footerint {



        }



        .footer-container {

            max-width: 1300px;

            margin: 0 auto;

            padding: 0 20px;

            display: flex;

            flex-wrap: wrap;

            justify-content: space-between;

        }



        .footer-section {

            flex: 1;

            min-width: 200px;

            margin-bottom: 20px;

        }



        .footer-section h3 {

            font-size: 18px;

        }



        .footer-section ul {

            list-style: none;

        }



        .footer-section ul li {

            margin-bottom: 10px;

        }



        .footer-section ul li a {

            color: var(--text-color);

            text-decoration: none;

            font-size: 14px;

        }



        .footer-section ul li a:hover {

            text-decoration: underline;

        }



        .footer-bottom {

            text-align: center;

            padding-top: 20px;

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

            margin-top: 20px;

            font-size: 14px;

        }

/* paginação */

.paginacao {

    margin: 30px 0;

    text-align: center;

}



.paginacao .page-numbers {

    display: inline-block;

    margin: 0 5px;

    padding: 10px 15px;

    color: var(--text-color);

    background: var(--paginacao);

    text-decoration: none;

    border-radius: 5px;

    font-weight: 600;

    transition: background 0.3s, color 0.3s;

}



.paginacao .page-numbers.current {

    background: white;

    color: #1e3a8a;

}



.paginacao .page-numbers:hover {

    background: #1e3a8a;

    color: white;

}



@media (max-width: 765px){

    .pg {display: none;}

}



.linha {

    background: linear-gradient(to left, #000000e6 0%, #1e3a8ae6 60%);

    height: 2px;

    width: 20%;

    margin: 15px 0;

}



/* single */

.post-title {

    font-size: 20px;

    margin-bottom: 20px;

}



.single-grid {

    display: grid;

    gap: 20px;

    padding: 20px;

}



/* Layout quando TEM sidebar */

.single-grid.has-sidebar {

    grid-template-columns: 1fr 300px;

}



/* Layout quando NÃO tem sidebar */

.single-grid.no-sidebar {

    grid-template-columns: 1fr;

}



.content-area {

    padding: 0px;

    border-radius: 8px;

}



@media (max-width: 768px){

    .content-area {

        padding: 0px;

    }

}



.sidebar-area {

    background: #f5f5f5;

    padding: 20px;

    border-radius: 8px;

}



/* Mobile: sempre 1 coluna */

@media (max-width: 768px) {

    .single-grid.has-sidebar,

    .single-grid.no-sidebar {

        grid-template-columns: 1fr;

    }



    .sidebar-area {

        order: 2;

        margin-top: 20px;

    }

}









/* css curtidas  */

.botao-curtidas-container {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin: 10px 0;

}



.botao-curtidas-svg {

    background: none;

    border: none;

    cursor: pointer;

    padding: 5px;

    display: inline-flex;

    align-items: center;

    gap: 5px;

    transition: all 0.3s ease;

}



.botao-curtidas-svg:not(:disabled):hover {

    transform: translateY(-2px);

}



.botao-curtidas-svg:disabled {

    cursor: default;

    opacity: 1 !important;

}



.icone-curtidas-svg {

    width: 24px;

    height: 24px;

    transition: all 0.3s ease;

    transform-origin: center;

    color: #ff0000ad;

}

.icone-curtidas-svg-post {

        width: 13px;

       height: 13px;

       margin-right: 5px;

}

.num-curtidas {

    display: flex;

    align-items: center;

}



.contador-curtidas {

    font-size: 14px;

    font-weight: bold;

    min-width: 20px;

    text-align: center;

    color: var(--text-color);

}



.feedback-curtidas {

    font-size: 12px;

    color: green;

    opacity: 0;

    transition: opacity 0.3s ease;

    margin-left: 5px;

}



/* informaçõe sdo pots single */

.infopots {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 20px;

    margin: 25px 0;

    padding: 15px 0;

    border-top: 1px solid #ffffff12;

    border-bottom: 1px solid #eeeeee12;

}



.post-categories {

    font-size: 14px;

        display: flex;

    align-items: center;

}



.post-categories a {

    color: #333;

    text-decoration: none;

    font-weight: 500;

    color: var(--text-color);

}



.pasta svg{

  fill: var(--text-color);

  margin-right: 10px;

}



.post-categories a:hover {

    text-decoration: underline;

    color: var(--cor-destaque); /* Substitua pela cor do seu tema */

}



.share-buttons {

    display: flex;

    gap: 12px;

    margin-right: auto;

}



.share-btn {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 32px;

    height: 32px;

    border-radius: 50%;

    color: white;

    transition: transform 0.3s ease;

}



.share-btn:hover {

    transform: translateY(-3px);

}



.share-btn svg {

    width: 18px;

    height: 18px;

}



.twitter {

    background-color: #1DA1F2;

}



.telegram {

    background-color: #0088CC;

}



.whatsapp {

    background-color: #25D366;

}

.share-mobile {display: none;}

/* Ajuste para mobile */

@media (max-width: 768px) {

    .infopots {

        gap: 15px;

        display: flex;

        align-items: center;

        justify-content: space-between;

        padding: 0;

    }

    

    .share-buttons {

        margin-right: 0;

        margin-bottom: 10px;

    }

    .share-pc {display: none;}

    .share-mobile {display: flex;}

}



.div-footer {

    max-width: 1300px;

    padding: 20px;

}



.div-footer a {

    color: var(--text-color);

}



/* video mp4 */

 #gallery-1 img {

     width:100%;

     height: auto;

 }

 .wp-video-shortcode {

     width:100%!important;

 }

 .wp-video {

     width:100%!important;

 }



/* 

  lista categoria 

*/

/* Container principal da lista de categorias */

.listcategory {

    max-width: 1300px;

    margin: auto;

    padding: 0 20px;

    margin-bottom: 30px;

}

.backlinks 

{

    max-width: 1300px;

    margin: auto;

    padding: 0px;

}



/* Grid de categorias */

.likcategoria-grid {

    display: grid;

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



}

.likcategoria-grid li {

    margin-bottom: 10px;

    width: 94%;

}



@media (max-width: 768px) {

    .likcategoria-grid {

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

    }

}



/* Estilo do item da categoria */

.likcategoria li {

    background: var(--paginacao);

    text-align: center;

    transition: all 0.3s ease;

}



.likcategoria li:hover {

    transform: translateY(-2px);

}



.likcategoria a {

    color: var(--text-color);

    text-decoration: none;

    display: block;

    padding: 15px;

}