/* ==========================================================================
   1. CONFIGURAÇÕES GERAIS E VARIÁVEIS
   ========================================================================== */
.l04 {
	--border-radious: 100px;
	--background-palette-primary: #000000;
	--background-palette-tertiary: #000000;
}

.l04-button-conteiner:hover .l04-button-text,
.l04-button-conteiner:hover .l04-button-icon {
	background-color: var(--status-hover);
}

.l04 .card-tags-over-img ul.bde-post-meta {
	  gap: 0px !important;
}



/* ==========================================================================
   2. HEADER E NAVEGAÇÃO
   ========================================================================== */

/* 2.1. Estrutura e Transições de Altura */
header.l04-header,
div.l04-header {
  height: 90px !important;
  transition: height 0.3s ease, padding 0.3s ease;}

/* Transição de altura APENAS quando o l01-header tem a classe de scroll */
header.l04-header.l04-scrolled,
div.l04-header.l04-scrolled {
  height: 70px !important;
	padding: 8px;
}

/* 2.2. Itens de menu */
.l04-header .menu-item {
	height: 88px;
    display: flex;
    align-items: center;
    transition: all 0.3s ease-in-out !important;
    transition: all 0.3s ease !important;
}
.l04-header.l04-scrolled .menu-item {
	height: 68px;
    display: flex;
    align-items: center;
}

/* 2.3. Transições de Botões (Estado Normal/Inicial) */
.l04-button-conteiner,
.l04-button-text,
.l04-button-icon {
  transition: all 0.3s ease-in-out !important;
  transition: all 0.3s ease !important;
}


/* 2.4. Ajustes Sticky & Scroll */
.l04-header.l04-scrolled :is(.l04-button-conteiner) {
  height: 48px !important;
}

.l04-header.l04-scrolled :is(.l04-button-text) {
  padding: 12px 14px !important;
  height: 48px !important;
}

.l04-header.l04-scrolled :is(.l04-button-icon) {
  width: 48px !important;
  height: 48px !important;
}

/* ==========================================================================
   3. Ancoras
   ========================================================================== */
/* Estado Normal (antes de colar no topo) */
.l04-ancoras a {
  transition: all 0.3s ease; /* Transição suave */
  height: 64px;
}
.l04-ancoras {
  transition: all 0.3s ease; /* Transição suave */
}

/* Estado Fixo (ativado pelo JavaScript quando cola no topo) */
.l04-ancoras.is-stuck a {
	height: 34px;
}

/* Evita que as secções fiquem escondidas debaixo do header fixo ao clicar */
[id] {
  scroll-margin-top: 88px; /* Compensação: 80px (header) + altura da barra de âncoras */
}

/* Menu ativo */
.l04-ancoras a.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;            /* Espessura da linha */
  background-color: var(--line-destaque); /* Mudar para a cor desejada */
}

.l04-ancoras a.active {
  color: var(--status-selected);
}

.l04-ancoras .button-atom--custom {
    border: none !important;
	border-radius: 0px !important;
}


/* ==========================================================================
   4. Secçao 01 - Destaque
   ========================================================================== */
.l04-01-textos {
	z-index: 50;
}

.l04-header-border {
  -webkit-text-stroke: 8px white; 
	paint-order: stroke fill; /* Faz a borda ir para trás do texto */
}

.l04-text-border {
  -webkit-text-stroke: 4px white; 
	paint-order: stroke fill; /* Faz a borda ir para trás do texto */
}


/* ==========================================================================
   5. Sliders
   ========================================================================== */
/* Estilos gerais das setas de navegaçao */
.l04 .swiper-button-prev,
.l04 .swiper-button-next {
    background-color: var(--background-palette-primary);
    height: 56px;
    width: 56px;
    border-radius: var(--border-radious);
}

.l04 .swiper-button-next:after, 
.l04 .swiper-button-prev:after {
    color: var(--text-secondary);
}

.l04 .swiper-button-prev:hover,
.l04 .swiper-button-next:hover {
    background-color: var(--status-hover);
	z-index: 89;
}

.l04 .swiper-button-next.swiper-button-disabled, 
.l04 .swiper-button-prev.swiper-button-disabled {
    background-color: var(--status-inactive);
	opacity: 1;
}

/* mobile */
@media screen and (max-width: 1023px) {
.l04 .swiper-button-prev,
.l04 .swiper-button-next {
    height: 48px;
    width: 48px;
}
}

/* ------------ Posiçao das setas de navegaçao ------------ */
/* Slider 01 */
.l04-slider-01 .swiper-button-next {
    right: 8px !important;
}

.l04-slider-01 .swiper-button-prev {
    left: calc(100% - 112px) !important;
}

.l04-slider-01 .swiper-button-prev,
.l04-slider-01 .swiper-button-next {
    top: auto;
    bottom: 8px;
}

/* mobile */
@media screen and (max-width: 1023px) {
.l04-slider-01 .swiper-button-prev {
    left: calc(100% - 96px) !important;
}
}


/* Slider 02 */
.l04-slider-02 .swiper-button-prev {
    left: calc(50% - 120px);
}

.l04-slider-02 .swiper-button-next {
    right: calc(50% + 16px);
}

.l04-slider-02 .swiper-button-prev,
.l04-slider-02 .swiper-button-next {
    top: 24px;
}

/* mobile */
/* 2. Especificamente entre 767px e 1024px (Tablets e iPads) */
@media screen and (min-width: 767px) and (max-width: 1024px) {
.l04-slider-02 .swiper-button-prev {
    left: calc(50% - 104px);
}
}

@media screen and (max-width: 767px) {
.l04-slider-02 .swiper-button-prev {
    left: calc(50% - 44px);
}
	
	.l04-slider-02 .swiper-button-next {
    right: calc(50% - 44px);
}
}

@media screen and (min-width: 479px) and (max-width: 767px) {
.l04-slider-02 .swiper-button-prev,
.l04-slider-02 .swiper-button-next {
    top: 300px;
}
}

@media screen and (max-width: 479px) {
.l04-slider-02 .swiper-button-prev,
.l04-slider-02 .swiper-button-next {
    top: 140px;
}
}


/* ==========================================================================
   6. Sliders
   ========================================================================== */
.l04 .card-tags-over-img .ee-postmeta-term {
	background-color: var(--background-neutral-primary) !important;
	color: var(--text-primary) !important;
	border-radius: 0px !important;
	border-bottom: solid 2px var(--line-dark) !important;
	border-right: solid 2px var(--line-dark) !important;
}

.l04 .card-tags-over-img .ee-postmeta-terms-wrap {
    gap: 0px !important;
}