/* Header Styles - Flutuante sobre a imagem (não consome espaço vertical) */
.Header_appHeader__3lDdI.before-scrolling {
    background: linear-gradient(to bottom, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%);
    transition: all 0.3s ease-in-out;
    padding: 0 !important;
    margin: 0 !important;
    height: auto;
    position: absolute;   /* flutua sobre a imagem, sem consumir altura */
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: block;
}

.Header_appHeaderContainer__MSPJv.before-scrolling {
    background: transparent;
    padding: 0 !important;
    margin: 0 !important;
    display: block;
}

.Header_appHeaderWrap__2rUwY {
    padding: 0 !important;
    margin: 0 !important;
    display: block;
}

.Header_appHeaderWrap__2rUwY .row {
    padding: 4px 8px !important;
    margin: 0 !important;
    gap: 0 !important;
    min-height: auto;
    display: flex;
    align-items: center;
}

.Header_appHeaderWrap__2rUwY img {
    max-height: 20px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block;
}

.Header_appHeaderWrap__2rUwY .btn {
    padding: 0 4px !important;
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    min-height: auto;
    display: flex;
    align-items: center;
}

.Header_appHeaderWrap__2rUwY .col-auto {
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
}

.Header_appHeaderWrap__2rUwY .col {
    padding: 0 !important;
    margin: 0 !important;
    flex: 1;
}

.Header_appHeaderWrap__2rUwY a {
    display: flex;
    align-items: center;
    padding: 0 !important;
    margin: 0 !important;
}

/* Hide navigation bar completely */
.nav-principal-horizontal {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Container */
.Header_appHeader__3lDdI.before-scrolling .container {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
}

/* Frame padrão da imagem da rifa: proporção fixa (quadrada) que RECORTA a
   imagem em vez de esticá-la. A posição vertical do recorte é controlada por
   --rifa-img-pos (definido inline por rifa, editável no admin). */
.SorteioTpl_destaque__3vnWR .SorteioTpl_imagemContainer__2-pl4,
#imagemContainer {
    width: 100% !important;
    height: auto !important;
    overflow: hidden;
    position: relative;
}
.SorteioTpl_imagemContainer__2-pl4 .carousel,
.SorteioTpl_imagemContainer__2-pl4 .carousel-inner,
.SorteioTpl_imagemContainer__2-pl4 .carousel-item {
    height: auto !important;
}
/* O frame fica na PRÓPRIA imagem (não depende da altura do carousel):
   cada imagem vira uma caixa 3:2 e o conteúdo é recortado via object-fit. */
.SorteioTpl_imagem__2GXxI {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 3 / 2 !important;   /* banner padrão (~595x400), como antes */
    height: auto !important;
    object-fit: cover !important;
    object-position: var(--rifa-img-pos, center 50%) !important;
}

/* Garantir que o container da imagem comece no topo da página */
.sorteio-header,
.app-main-off {
    position: relative;
}

/* Hide header on scroll */
body.scrolled .Header_appHeader__3lDdI.before-scrolling {
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}