/* =====================================================================
   Slide do topo da home (cadastrado no painel em "Banners da home")

   Fica atrás do conteúdo do topo, ocupando o container inteiro, como o
   slideshow de fundo do Elementor que ele substitui.
   ===================================================================== */

.vsg-banners {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: #2b2520;
}

.vsg-banners__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s ease, visibility 0s linear .6s;
}

.vsg-banners__slide.is-ativo {
    z-index: 1;
    opacity: 1;
    visibility: visible;
    transition: opacity .6s ease, visibility 0s;
}

.vsg-banners__slide picture,
.vsg-banners__slide img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.vsg-banners__slide img {
    object-fit: cover;
    object-position: center;
}

/* mesmo escurecimento das fotos originais, para o texto aparecer */
.vsg-banners__slide--escuro::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #000;
    opacity: var(--vsg-banner-escuro, .7);
    pointer-events: none;
}

.vsg-banners__link {
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* ---------------- setas (só em quem tem mouse) ----------------
   Cores da marca: marrom com seta amarela; amarelo com seta marrom
   ao passar o mouse. O tema pinta todo <button> de rosa no hover,
   por isso as cores aqui são travadas. */
.vsg-banners .vsg-banners__seta {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: none;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0 !important;
    border-radius: 50%;
    background: rgba(70, 58, 48, .82) !important;
    color: #FFDB15 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25) !important;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity .25s ease, background-color .2s ease, color .2s ease;
}

.vsg-banners .vsg-banners__seta svg { width: 22px; height: 22px; }

.vsg-banners .vsg-banners__seta:hover,
.vsg-banners .vsg-banners__seta:active {
    background: #FFDB15 !important;
    color: #463A30 !important;
}

.vsg-banners .vsg-banners__seta:focus { background: rgba(70, 58, 48, .82) !important; color: #FFDB15 !important; outline: none; }
.vsg-banners .vsg-banners__seta:focus-visible { opacity: 1; outline: 2px solid #FFDB15; outline-offset: 3px; }
.vsg-banners__seta--anterior { left: 24px; }
.vsg-banners__seta--proximo { right: 24px; }

@media (hover: hover) {
    .vsg-banners .vsg-banners__seta { display: grid; }
    .vsg-com-banners:hover .vsg-banners__seta { opacity: 1; }
}

/* ------- o conteúdo do topo deixa o clique chegar ao banner ------- */
.vsg-com-banners > .e-con-inner,
.vsg-com-banners > .e-con-inner .e-con,
.vsg-com-banners > .e-con-inner .elementor-widget {
    pointer-events: none;
}

.vsg-com-banners > .e-con-inner a,
.vsg-com-banners > .e-con-inner button {
    pointer-events: auto;
}

/* título do topo: troca junto com o banner e fica ~25% menor que o
   original (85px no computador, 34px no celular), acompanhando a tela */
.vsg-com-banners .elementor-heading-title[data-vsg-titulo] {
    font-size: clamp(28px, 4.4vw, 64px) !important;
    line-height: 1.15 !important;
    transition: opacity .35s ease;
}

@media (prefers-reduced-motion: reduce) {
    .vsg-banners__slide,
    .vsg-banners__slide.is-ativo,
    [data-vsg-titulo] { transition: none; }
}