/*
 * PescWeb TV Web — SJ TheCool visual recovery
 * Joomla 4/5 + Helix 3 compatibility layer
 */
#sp-header-top { background:#f5f5f5; min-height:32px; }
#sp-header-center { background:#fff; margin:0; padding:18px 0; }
#sp-header-bottom { background:#2796bd; min-height:55px; position:relative; z-index:1000; }
#sp-header-bottom .sp-megamenu-parent,
#sp-header-bottom .nav.menu { list-style:none; margin:0; padding:0; float:left; }
#sp-header-bottom .sp-megamenu-parent > li,
#sp-header-bottom .nav.menu > li { display:inline-block; position:relative; margin:0; padding:0; }
#sp-header-bottom .sp-megamenu-parent > li > a,
#sp-header-bottom .nav.menu > li > a {
 display:block; line-height:55px; min-height:55px; padding:0 15px;
 color:#fff; font-size:13px; text-decoration:none; white-space:nowrap;
 transition:background-color .25s ease,color .25s ease;
}
#sp-header-bottom .sp-megamenu-parent > li:hover > a,
#sp-header-bottom .sp-megamenu-parent > li.active > a,
#sp-header-bottom .nav.menu > li:hover > a,
#sp-header-bottom .nav.menu > li.active > a { background:rgba(0,0,0,.12); color:#fff; }
#sp-header-bottom ul.nav, #sp-header-bottom ul.nav-child { list-style:none; margin:0; padding:0; }
#sp-main-body { background:#fff; }
#sp-position1 { width:100%; }
#sp-position1 .sp-module > ul, #sp-position1 .sp-module-content > ul {
 list-style:none; margin:0; padding:0;
}
#sp-bottom { background:#f5f5f5; }
#sp-position1 img, #sp-position1 iframe, #sp-position1 video { max-width:100%; }
@media (max-width:767px) {
 #sp-header-bottom .sp-megamenu-parent, #sp-header-bottom .nav.menu { float:none; width:100%; }
 #sp-header-bottom .sp-megamenu-parent > li, #sp-header-bottom .nav.menu > li { display:block; width:100%; }
 #sp-header-bottom .sp-megamenu-parent > li > a, #sp-header-bottom .nav.menu > li > a { line-height:44px; min-height:44px; }
}



/* ============================================================
   PescWeb TV Web — V5
   APENAS alinhamento dos módulos custom-1 e custom-2.
   Não altera banner, imagens, TV, menu ou layout geral.
   ============================================================ */

/* Informação Sobre a TV — 3 colunas */
ul.custom-1 {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
    margin: 0 -15px !important;
    padding: 0 !important;
    list-style: none !important;
    box-sizing: border-box !important;
}

ul.custom-1 > li.item {
    float: none !important;
    display: block !important;
    flex: 1 1 33.333333% !important;
    width: 33.333333% !important;
    margin: 0 !important;
    padding: 0 15px !important;
    list-style: none !important;
    box-sizing: border-box !important;
}

ul.custom-1 > li.item::before,
ul.custom-1 > li.item::after {
    display: none !important;
    content: none !important;
}

ul.custom-1 > li.item .main {
    width: 100%;
    box-sizing: border-box;
}

/* Painel abaixo da TV — 4 colunas */
ul.custom-2.banner {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
    margin: 0 -15px !important;
    padding: 0 0 55px !important;
    list-style: none !important;
    box-sizing: border-box !important;
}

ul.custom-2.banner > li.item {
    float: none !important;
    display: block !important;
    flex: 1 1 25% !important;
    width: 25% !important;
    margin: 0 !important;
    padding: 0 15px !important;
    list-style: none !important;
    box-sizing: border-box !important;
}

ul.custom-2.banner > li.item::before,
ul.custom-2.banner > li.item::after {
    display: none !important;
    content: none !important;
}

ul.custom-2.banner > li.item .main {
    width: 100%;
    box-sizing: border-box;
}

/* Mantém as imagens do painel intactas e alinhadas */
ul.custom-2.banner > li.item .main > a {
    display: block;
    position: relative;
    overflow: hidden;
    line-height: 0;
}

ul.custom-2.banner > li.item .main > a img {
    display: block;
    width: 100%;
    height: auto;
}

/* Em telas menores, somente reorganiza as colunas */
@media (max-width: 767px) {
    ul.custom-1 {
        flex-wrap: wrap !important;
    }

    ul.custom-1 > li.item {
        flex: 0 0 100% !important;
        width: 100% !important;
        margin-bottom: 20px !important;
    }

    ul.custom-2.banner {
        flex-wrap: wrap !important;
    }

    ul.custom-2.banner > li.item {
        flex: 0 0 50% !important;
        width: 50% !important;
        margin-bottom: 20px !important;
    }
}

@media (max-width: 480px) {
    ul.custom-2.banner > li.item {
        flex-basis: 100% !important;
        width: 100% !important;
    }
}