:root{
    --Base: #B70800;
    --Contraste: #D00900;
    --Fundo: #FAFAFA;
    --Escuro: #000000;
    --Claro: #808A9F;
    --Sombra-Suave: rgba(0, 0, 0, 0.1);
    --Sombra-Media: rgba(0, 0, 0, 0.15);
    --Hover-Background: rgba(183, 8, 0, 0.05);
    --Border-Light: rgba(0, 0, 0, 0.08);
}

#displayimovel{
    &{
        display: flex;
        width: 100vw;
        height: 37vw;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        transition: height 0.5s;
        overflow: hidden;
    }
    .mobile &{
        height: 60vh;
    }
    &:has(.ativo){
        height: auto;
    }
}


#displayimovel #allimages{
    &{
        width: 80%;
        height: 80%;
        gap: 2%;
        padding: 4%;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: flex-start;
        align-content: flex-start;
        align-items: flex-start;
        border-radius: 5rem;
        position: relative;
        overflow-y: scroll;

    }
    .mobile &{
        height: 90%;
        width:  90%;
    }

    .desktop &:has(.ativo){
        width: 100vh;
        height: 75vh;
        padding: 0;
    }


    .mobile &:has(.ativo){
        width: 100vw;
        height: 75vw;
        padding: 0;
    }

}

#displayimovel #allimages a{
    &{
        width: 15%;
        height: auto;        
    }

    .mobile &{
        width: 30%;
    }
}

#displayimovel #allimages:has(.ativo) a:has(img){
    display: none;
}

#displayimovel #allimages a img{
    &{
        border: 1px solid #fafafa;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 20rem;
        transition: border-radius 0.2s, transform 0.5s;
        position: relative;
         z-index: 0;

    }
    .desktop .foco &{
        width: 100%;
    }


    &:hover{
        transform: scale(1.5);
        z-index: 9999;
        border-radius: 20rem;
    }
}

#displayimovel #allimages iframe{
    width: 1rem;
    height: 1rem;
}
#displayimovel #allimages iframe.ativo{
    width: 100%;
    height: 100%;
}
#displayimovel #allimages iframe.ativo + a{

    width: 50rem;
    height: 50rem;
    position: absolute;
    left: 0;
    top: 0;
    background-color: transparent;
    background-image: url('/static/icons/fechar.v20250828151340.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

#detalhes{
    &{
        display: flex;
        min-height: 468rem;
        justify-content: center;
        align-items: center;
        gap: 25rem;
        flex-shrink: 0;
        align-self: stretch;
        margin-bottom: 20vh;
    }

    .mobile &{
        flex-direction: column-reverse;
    }
}


#detalhes #valor-contatos{
    &{
        display: flex;
        padding: 5vw;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10rem;
        border-radius: 5rem;
        background: #FAFAFA;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    }
    .mobile &{
        width: 100%;
    }
}


#detalhes #valor-contatos span, #detalhes #valor-contatos span a{
    width: 100%;
    font-size: 20rem;
    color: var(--Valor, #33A000);
    text-align: center;
}

#detalhes #txt-local{
    display: flex;
    width: 326rem;
    padding: 10rem 13rem;
    align-items: center;
    gap: 4rem;
    flex-direction: row;
    justify-content: center;
}

#detalhes #txt-local span{   
    &{
        color: var(--Localizao, #C2534F);
        font-size: 14rem;
        font-weight: 400;
        width: auto;
    }

    .desktop &{
        font-size: 16rem;
    }

    .mobile &{
        width: 90%;
    }
}

#detalhes #txt-local img{
    width: 21rem;
    height: 25rem;
    object-fit: contain;
}


#detalhes #contatos{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 7rem;
}

#detalhes #contatos h2{
    color: #34495E;
    text-align: center;
    font-size: 16rem;
    font-weight: 700;

}
#detalhes #contatos .icones{
    display: flex;
    align-items: center;
    gap: 15rem;
}

#detalhes #contatos .icones a{
    width: 28rem;
    height: 28rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    display: inline-block;
    margin: 0 10px;
    
    transition: transform 0.3s ease;

    &{}
    &:hover{
        transform: scale(1.2);
    }
}

#detalhes #contatos .icones .wpp{
    background-image: url('/static/icons/wpp-blue.v20250828151340.svg');
}

#detalhes #contatos .icones .instagram{
    background-image: url('/static/icons/instagram-blue.v20250828151340.svg');
}

#detalhes #contatos .icones .facebook{
    background-image: url('/static/icons/facebook-blue.v20250828151340.svg');
}


.comodos_imgs{
    margin-top: 20rem;
    display: flex;
    padding: 50rem 15rem;
    flex-direction: column;
    align-items: center;
    gap: 10rem;
    align-self: stretch;
    border: 1px solid var(--simple-stroke, rgba(0, 0, 0, 0.08));
    box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.25);
}

.comodos_imgs h3{
    display: flex;
    height: 38rem;
    margin-top: -40rem;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;
    color: var(--Fundo, #FAFAFA);
    text-align: center;

    font-size: 20rem;
    font-weight: 700;
    position: relative;
}

.comodos_imgs div{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    &{}
    .desktop &{
        flex-direction: row;
        width: 50%;
    }
    .desktop &:nth-child(odd){
        flex-direction: row-reverse;
    }

    .desktop &:nth-child(even){
        flex-direction: row;
    }

}

.comodos_imgs div img{
    width: 100%;
    height: 25vh;
    object-fit: contain;
    border-radius: 5rem;
    box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.25);
    transition: width 0.5s, height 0.5s, transform 0.5s;
    &{}
    .desktop &{
        width: 45%;
    }

    .mobile &:hover{
        position: absolute;
        z-index: 9999;
        object-fit: fill;
        width: 100vw!important;
        height: auto;
    }
    .mobile &:hover+p{
        margin-top: 25vh;
    }

    .desktop &:hover{
        transform: scale(1.5);
    }

    &:not(:has(+p)){
        margin: 20rem 0;
        width: 100%!important;
        height: 50vh;

    }
}

.comodos_imgs div p{
    display: flex;
    width: 90%;
    padding: 5%;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
    align-self: stretch;
    color: var(--Fundo, #FAFAFA);
    text-align: center;

    text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.40), 1px 1px 0px rgba(0, 0, 0, 0.40);

    font-size: 14rem;
    font-weight: 400;
    &{}
    .desktop &{
        width: 45%;
    }
}




/* Melhorias para o container da tabela */
.tablecontain {
    position: relative;
    width: 40vw;
    max-height: 35vw;
    border-radius: 12rem;
    box-shadow: 0 8rem 32rem rgba(0, 0, 0, 0.12), 0 2rem 8rem rgba(0, 0, 0, 0.08);
    background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
    border: 1px solid var(--Border-Light);
    overflow: hidden;
    backdrop-filter: blur(10rem);
}

/* Melhorias principais para a tabela */
.table{
    display: flex;
    padding: 0;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    background: transparent;
    overflow-y: auto;
    max-height: 35vw;
    position: relative;
    overflow-x: hidden;
}

/* Estilização da barra de scroll */
.table::-webkit-scrollbar {
    width: 6rem;
}

.table::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 3rem;
}

.table::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--Base) 0%, var(--Contraste) 100%);
    border-radius: 3rem;
    transition: background 0.3s ease;
}

.table::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--Contraste) 0%, var(--Base) 100%);
}

/* Melhorias para as linhas da tabela */
.table .row{
    display: flex;
    margin: 0;
    padding: 16rem 24rem;
    justify-content: space-between;
    align-items: center;
    min-height: 56rem;
    border-bottom: 1px solid var(--Border-Light);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    background: transparent;
    color: var(--Escuro);
}


/* Efeito zebra para linhas alternadas */
.table .row:nth-child(even) {
    background: rgba(248, 249, 250, 0.5);
}

/* Hover effect melhorado */
.table .row:hover {
    background: var(--Hover-Background);
    transform: translateX(4rem);
    box-shadow: inset 4rem 0 0 var(--Base);
    border-left: 4rem solid var(--Base);
    margin-left: -4rem;
    padding-left: 24rem;
}

/* Primeira linha com destaque especial */
.table .row:first-child {
    background: linear-gradient(135deg, var(--Base) 0%, var(--Contraste) 100%);
    color: white;
    font-weight: 600;
    border-bottom: 2px solid var(--Contraste);
}

.table .row:first-child .nome-info,
.table .row:first-child .valor {
    color: white;
    font-weight: 600;
}

.table .row:has(.redundante) {
    display: none;
}

.table .row:first-child:hover {
    background: linear-gradient(135deg, var(--Contraste) 0%, var(--Base) 100%);
    transform: translateX(0);
    box-shadow: none;
    border-left: none;
    margin-left: 0;
}

/* Última linha sem borda */
.table .row:last-child {
    border-bottom: none;
}

.table .template-row{
    display: none;
}

.table .row:has(.descricao){
    flex-direction: column;
    text-align: center;
    padding: 20rem 24rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-left: 4rem solid var(--Base);
    margin: 8rem 0;
    border-radius: 0 8rem 8rem 0;
}

.table .row:has(.descricao):hover {
    transform: translateX(0);
    box-shadow: 0 4rem 16rem rgba(0, 0, 0, 0.1);
    border-left: 6rem solid var(--Contraste);
}


/* Melhorias para os spans */
.table .row span{
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 14rem;
    font-weight: 400;
    line-height: 1.4;
    transition: all 0.3s ease;
}

.table .row span.descricao{
    text-align: center;
    font-size: 15rem;
    line-height: 1.5;
    color: var(--Escuro);
    font-weight: 500;
}

.table .row .nome-info{
    color: var(--Claro);
    font-weight: 500;
    flex: 1;
    text-transform: uppercase;
    font-size: 12rem;
    letter-spacing: 0.5rem;
}

.table .row .valor{
    color: var(--Escuro);
    text-align: right;
    font-weight: 600;
    flex: 1;
    font-size: 15rem;
}


/* Responsividade melhorada */
@media (max-width: 768px) {
    .tablecontain {
        width: 90vw;
        max-height: 50vh;
    }
    
    .table {
        max-height: 50vh;
    }
    
    .table .row {
        padding: 12rem 16rem;
        min-height: 48rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 4rem;
    }
    
    .table .row .nome-info,
    .table .row .valor {
        text-align: left;
        flex: none;
        width: 100%;
    }
    
    .table .row .valor {
        font-size: 16rem;
        font-weight: 700;
        color: var(--Base);
    }
    
    .table .row:hover {
        transform: none;
        margin-left: 0;
        padding-left: 16rem;
        border-left: none;
        box-shadow: 0 2rem 8rem rgba(0, 0, 0, 0.1);
    }
}

@media (max-width: 480px) {
    .tablecontain {
        width: 95vw;
        border-radius: 8rem;
    }
    
    .table .row {
        padding: 10rem 12rem;
        min-height: 44rem;
    }
    
    .table .row span {
        font-size: 13rem;
    }
    
    .table .row .nome-info {
        font-size: 11rem;
    }
    
    .table .row .valor {
        font-size: 15rem;
    }
}

/* Animação de entrada */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.table .row {
    animation: fadeInUp 0.6s ease-out;
    animation-fill-mode: both;
}

.table .row:nth-child(1) { animation-delay: 0.1s; }
.table .row:nth-child(2) { animation-delay: 0.2s; }
.table .row:nth-child(3) { animation-delay: 0.3s; }
.table .row:nth-child(4) { animation-delay: 0.4s; }
.table .row:nth-child(5) { animation-delay: 0.5s; }
.table .row:nth-child(n+6) { animation-delay: 0.6s; }