/* Elemento posts mais lidos  . . . . . . . . . . . . . . . . . . . . . . . . . . .*/

.element-mais-lidos .bar-pagination { display: flex; justify-content: center; margin-top: 26px; }
.element-mais-lidos a.bt-load-post { color: #593eff; text-decoration: none; border: solid 1px #593eff; border-radius: 8px; display: inline-flex; justify-content: center; align-items: center; min-width: 428px; height: 42px; font-size: 16px; font-weight: 600; transition: .2s all ease }
.element-mais-lidos a.bt-load-post:hover { background: #593eff; color: #fff; transition: .2s all ease  }

@media (max-width: 768px) {
.element-mais-lidos a.bt-load-post { min-width: 100%; font-size: 12px; height: 32px; }

}

/* Elemento ultimos posts . . . . . . . . . . . . . . . . . . . . . . . . . . .*/

.element-last-posts { background: #ecf1f9 }
.element-last-posts .display-last-posts { display: flex; justify-content: space-between; }
.element-last-posts .display-last-posts .bar { width: 50% }
.element-last-posts .card-post .tag-cat-blog { background: #fff; }
.element-last-posts .card-post .tag-cat-blog:hover { background: #593eff }
.element-last-posts .display-last-posts .lista-last-posts { margin-left: 78px }
.element-last-posts .lista-last-posts { display: flex; flex-direction: column; justify-content: space-between; height: 100% }
.element-last-posts .lista-last-posts .card-post-no-thumb { padding: 30px 0 }
.element-last-posts .lista-last-posts .card-post-no-thumb:first-child { padding: 0 0 30px 0 }
.element-last-posts .lista-last-posts .card-post-no-thumb:not(:last-child) { border-bottom: solid 1px #BDBDBD; }

.element-mais-lidos-paginacao .cards-posts { min-height: 340px;  }

@media (max-width: 768px) {

.element-last-posts .display-last-posts { flex-direction: column; }
.element-last-posts .display-last-posts .bar { width: 100% }
.element-last-posts .display-last-posts .bar-last-post { border-bottom: solid 1px #BDBDBD; padding-bottom: 20px }
.element-last-posts .display-last-posts .lista-last-posts { margin-left: 0px; margin-top: 10px; }
.element-last-posts .lista-last-posts .card-post-no-thumb { padding: 20px 0 }
.element-last-posts .lista-last-posts .card-post-no-thumb:first-child { padding: 20px 0 }

}

/* Elemento banners . . . . . . . . . . . . . . . . . . . . . . . . . . .*/

.element-banner { padding: 16px; box-sizing: border-box; border-radius: 8px; background: #FAFAFA; }
.element-banner .banner-element { background: #ededed; color: #212121; font-size: 12px; display: flex; align-items: center; justify-content: center; height: 287px; border-radius: 4px }
.element-banner .bt-cta { display: flex; align-items: center; justify-content: center; background: #212121; color: #fff; height: 42px; padding: 8px; box-sizing: border-box; font-size: 16px; font-weight: 700; text-decoration: none; border-radius: 8px; transition: .2s all ease }
.element-banner .bt-cta:hover { transform: scale(1.04); transition: .2s all ease }
.element-banner .tit { font-size: 24px; line-height: 135%; display: block; }
.element-banner .text { font-size: 14px; line-height: 135%; display: block; margin-top: 10px; }
.element-banner .bar-cta { display: block; margin-top: 16px }

.element-banner-flat { display: flex; flex-direction: column; transition: transform 0.3s ease; }
.element-banner-flat .tit { font-size: 24px; line-height: 135%; display: block; }
.element-banner-flat:hover { transform: scale(1.02); transition: transform 0.3s ease; }

.element-banner-cat-prod-flat { background: #F5F5F5 }
.element-banner-cat-prod-flat .bt-prod { display: flex; align-items: center; justify-content: center; height: 42px; padding: 8px; box-sizing: border-box; background: #593EFF; color: #fff; font-size: 16px; font-weight: 700; border-radius: 8px; text-decoration: none; transition: .2s all ease }
.element-banner-cat-prod-flat .bt-prod:hover { background: #091CB6;transition: .2s all ease } 
.element-banner-cat-prod-flat .list-bts li:not(:last-child) { margin-bottom: 40px; display: block; }

.single-blog-content .element-banner-image {  }
.element-banner-image { display: flex; justify-content: center; margin: 50px 0 }
.element-banner-image .image { width: 100%; max-width: fit-content; }
.element-banner-image .image-mobile { display: none; }

@media (max-width: 768px) {

.element-banner .tit { font-size: 20px; }
.element-banner .bar-cta { margin-top: 12px }
.element-banner .text { margin-top: 6px }

.element-banner .bt-cta { font-size: 15px }

.element-banner-cat-prod-flat .bt-prod { font-size: 15px }
.element-banner-cat-prod-flat .list-bts li:not(:last-child) { margin-bottom: 20px; }

.element-banner-image { margin: 28px 0 }
.element-banner-image .image-mobile { display: block; }
.element-banner-image .image-desktop.no-mobile { display: none; }

}

/* Elemento vídeos . . . . . . . . . . . . . . . . . . . . . . . . . . .*/

.element-videos-sidebar { background: #F5F5F5 }
.element-videos-sidebar .bar-videos { margin-top: 10px; }

.card-video { display: flex; align-items: center; justify-content: center; border-radius: 8px; background: #fff; width: 100%; height: 192px; position: relative; background-size: cover !important;}
.card-video .bar-thumb { padding: 8px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; height: 100%; border-radius: 8px; background: #000000;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.38) 100%); transition: .2s; }
.card-video .bar-thumb:hover { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.58) 100%); transition: .2s; }
.card-video .bar-thumb .thumb { opacity: 0 }
.card-video .play-text { position: absolute; bottom: 0; padding: 8px; box-sizing: border-box; display: flex; align-items: center; width: 100% }
.card-video .play-text .icon-play { background: url(../img/play-youtube.svg) no-repeat center; display: block; width: 40px; min-width: 40px; height: 40px; margin-right: 6px; transition: .2s }
.card-video .play-text .titulo { font-size: 14px; line-height: 135%; color: #fff; font-weight: 700; transition: .3s }
.card-video:hover .icon-play { transform: translateX(5px); transition: .2s } 
.card-video:hover .play-text .titulo { transform: translateX(8px); transition: .3s } 


/* Container dos vídeos */
.videos-sidebar {
    margin: 20px 0;
}

.videos-sidebar .titside {
    font-size: 1.1em;
    margin-bottom: 16px;
    color: #222;
}

.lista-videos {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Card do vídeo */
.card-video {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease;
    background-size: cover !important;
    background-position: center;
    background-repeat: no-repeat;
}

.card-video:hover {
    transform: scale(1.02);
}

@media (max-width: 768px) {

}

/* Container responsivo com proporção 16:9 */
.video-modal-iframe-container {
    position: relative;
    width: 85%; /* Largura padrão */
    max-width: 800px; /* Desktop */
  	max-height: 450px;
  	height: 100%;
    /*padding-bottom: 56.25%;  16:9 aspect ratio */
    margin: 0 auto;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    overflow: hidden;
}

@media (max-width: 768px) {
    .video-modal-iframe-container {
        width: 95%; /* Ocupa mais largura relativa */
        max-width: 700px; /* Limita o tamanho máximo */
        padding-bottom: 225px; /* Aproximadamente 16:9 para 400px */
        /* Ou mantenha o % e calcule: 400 * 0.5625 = 225px */
    }
}

.video-modal-iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Elemento carrossel . . . . . . . . . . . . . . . . . . . . . . . . . . .*/

/* Container do carrossel */
.element-carrossel .carrossel-container {
    position: relative;
    overflow: hidden;
    width: 100%;
}

/* Wrapper com scroll horizontal suave */
.element-carrossel .carrossel-wrapper {
    display: flex;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
    overscroll-behavior-x: contain;
    gap: 0px;
    scroll-padding: 0;
    padding: 0 16px;
}

/* Estilo dos slides */
.element-carrossel .item-slide {
    min-width: 550px;
    max-width: 550px;
    height: 458px;
    flex: 0 0 auto;
    scroll-snap-align: center;
    background: #f0f0f0;
    border-radius: 8px;
    opacity: 0.5;
    transition: transform 0.3s ease, z-index 0.3s ease;
    transform: scale(0.99);
}

/* Destaque no slide ativo */
.element-carrossel .item-slide.item-slide-ativo {
	min-width: 650px;
    max-width: 650px;
    transform: scale(1);
    z-index: 3;
    opacity: 1;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, z-index 0.3s ease;
}

.element-carrossel.largura_full .item-slide {
	min-width: 100%;
    max-width: 100%;
    height: 400px;
    transform: unset;
}
.element-carrossel.largura_full .item-slide.item-slide-ativo {
	min-width: 100%;
    max-width: 100%;
    transform: unset;
    box-shadow: unset;
}
.element-carrossel.largura_full .carrossel-wrapper { padding: 0px }
.element-carrossel.largura_full .card-banner,
.element-carrossel.largura_full .card-video
{ border-radius: 0px }

.element-carrossel.largura_full .carrossel-pagination { position: absolute; bottom: 10px; z-index: 999; margin-bottom: 0px; width: 100% }

/* Paginação (dots) */
.element-carrossel-default .carrossel-pagination {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.element-carrossel-default .carrossel-pagination .dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ccc;
    cursor: pointer;
    transition: background 0.3s;
}

.carrossel-pagination .dot.active {
    background: #6a1b9a;
}

.element-carrossel .element-banner-image,
.element-carrossel .element-banner-image a { width: 100%; height: 100%; margin: 0 }
.element-carrossel .card-banner { width: 100%; height: 100%; background-size: cover !important; border-radius: 8px }
.element-carrossel .card-video { height: 100% }
.element-carrossel .card-video:hover { transform: none; }

.element-carrossel .item-slide .card-video,
.element-carrossel .item-slide .element-banner-image
 { pointer-events: none; }
.element-carrossel .item-slide.item-slide-ativo .card-video,
.element-carrossel .item-slide.item-slide-ativo .element-banner-image
 { pointer-events: inherit; }

 .carrossel-container {
    position: relative;
}

.carrossel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background-color: unset !important;
    background: none;
    border: solid 1px #fff;
    border-radius: 8px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 9;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transition: background 0.3s ease, transform 0.2s ease;
    opacity: 0;
    pointer-events: none; /* Oculta até o hover */
}

.carrossel-btn:hover,
.carrossel-btn:active,
.carrossel-btn:focus {
	border: none;
	background-color: #4a2ecc !important;
    background: #4a2ecc;
    transform: translateY(-50%) scale(1.05);
    outline: none;
}

.carrossel-container:hover .carrossel-btn {
    opacity: 1;
    pointer-events: auto;
    color: #fff;
}

.carrossel-btn.prev {
    left: 10px;
}

.carrossel-btn.next {
    right: 10px;
}

.carrossel-btn svg { min-width: 24px; }


@media (max-width: 768px) {

.element-carrossel .carrossel-wrapper { padding: 0 8px }

.element-carrossel .item-slide {
    min-width: 100%;
    max-width: 100%;
    height: 300px;
}

.element-carrossel .item-slide.item-slide-ativo {
	min-width: 100%;
    max-width: 100%;
 }

.carrossel-btn {
	display: none;
    opacity: 1;
    pointer-events: auto;
}

.element-carrossel-default .carrossel-pagination {
	gap: 10px;
}

.element-carrossel-default .carrossel-pagination .dot {
    width: 10px;
    height: 10px;
 }

}

/* Header hero blog nav . . . . . . . . . . . . . . . . . . . . . . . . . . .*/

.hero-blog-nav .content { display: flex; flex-direction: column; align-items: center; }
.hero-blog-nav .content .bar-logo .logo { width: 100%; max-width: 246px; }
.hero-blog-nav .content .bar-tit { padding: 20px 0 }
.hero-blog-nav .content .bar-tit .tit { font-size: 20px; line-height: 135%; color: #593eff; text-align: center; }
.hero-blog-nav .content .bar-search { margin-left: 0px; }
.hero-blog-nav .content .bar-search .box-input { width: 590px }
.hero-blog-nav .content .bar-menu { padding-top: 20px; }
.hero-blog-nav .content .bar-menu .menu-nav-blog { margin-left: 0; flex-wrap: wrap; }

@media (max-width: 768px) {

.hero-blog-nav .content .bar-logo .logo { max-width: 170px; }
.hero-blog-nav .content .bar-tit { padding: 10px 0 }
.hero-blog-nav .content .bar-menu { padding-top: 10px; }
.hero-blog-nav .content .bar-tit .tit { font-size: 16px; }
.hero-blog-nav .content .bar-search .box-input { width: 100% }
.hero-blog-nav .content .bar-menu .menu-nav-blog li { width: inherit; margin: 3px }
.hero-blog-nav .content .bar-menu .menu-nav-blog li a { height: 28px }

}

/* Search . . . . . . . . . . . . . . . . . . . . . . . . . . .*/

.element-carrossel-search { background: #ECF1F9 }


/* Shorts . . . . . . . . . . . . . . . . . . . . . . . . . . .*/


.grade-shorts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px; 
}

.card-short .bar-thumb { position: relative; border-radius: 8px }
.card-short .bar-thumb.capa-youtube .thumb { display: none; }
.card-short .bar-thumb .thumb { width: 100%; max-width: fit-content; display: block; border-radius: 8px }
.card-short .bar-thumb .thumb-fallback { width: 100%; max-width: fit-content; display: none; border-radius: 8px; opacity: 0; pointer-events: none; }
.card-short .bar-thumb.capa-youtube .thumb-fallback { display: block; }
.card-short .bar-thumb .mascara { background: #000; opacity: 0; display: block; width: 100%; height: 100%; border-radius: 8px; position: absolute; left: 0; top: 0; transition: .2s }
.card-short:hover .bar-thumb .mascara { opacity: .2; transition: .2s }
.card-short .bar-text { padding-top: 12px; }
.card-short .bar-text .tit { font-size: 20px; line-height: 135%; color: #212121 }
.card-short .bar-text time { font-size: 14px; line-height: 135%; color: #212121; padding-top: 12px; display: block; }

.bar-carrossel-shorts .card-short { max-width: 312px }

/* Container do carrossel */
.element-shorts .carrossel-shorts-container {
    position: relative;
    overflow: hidden;
    width: 100%;
}

/* Wrapper com scroll horizontal suave */
.element-shorts .carrossel-shorts-wrapper {
    display: flex;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
    overscroll-behavior-x: contain;
    padding: 10px 0;
    gap: 14px;
    scroll-padding: 0;
    padding: 0 16px;
}

/* Estilo dos slides */
.element-shorts .item-slide {
    min-width: 312px;
    max-width: 312px;
    flex: 0 0 auto;
    scroll-snap-align: center;
    transition: transform 0.3s ease, z-index 0.3s ease;
    transform: scale(0.99);
}

.carrossel-shorts-container:hover .carrossel-btn {
    opacity: 1;
    pointer-events: auto;
}


@media (max-width: 768px) {

.grade-shorts { grid-template-columns: repeat(2, 1fr) }
.card-short .bar-text { padding-top: 6px; }
.card-short .bar-text .tit { font-size: 12px }
.card-short .bar-text time { font-size: 10px; padding-top: 6px }

.element-shorts .item-slide { max-width: 166px; min-width: 166px; }
.bar-carrossel-shorts .card-short { max-width: 100% }

}