.container-test {
    margin-bottom: 150rem;
}

/* --- SEÇÃO BANNER --- */
/*foto banner principal*/
.banner {
    background-image: url('../media/market/banner.png');
    background-size: cover;
    background-position: center;
    height: 38rem;
    width: 100%;
    display: flex;
    align-items: center;
}

/*titulo do banner */
.banner-titulo {
    color: var(--light);
    font-size: 3rem;
    font-weight: 600;
    margin-left: -4.2rem;
}

/*sub titulo-banner */
.banner-sub-titulo {
    color: var(--light);
    font-size: 1.5rem;
    font-weight: 300;
    margin-top: 5rem;
    margin-left: -4rem;
}

/*paragrafo do banner principal*/
.banner-paragrafo {
    color: var(--light);
    font-size: 1rem;
    font-weight: 300;
    max-width: 22rem;
    margin-left: -4rem;
    margin-bottom: 6rem;
}

/*botão contratar card princiál*/
.btn-contratar {
    background-color: var(--accent);
    color: var(--dark);
    margin-left: -4rem;
    margin-bottom: -4rem;
}

/*botão dentro do banner */
.btn-contratar:hover {
    background-color: var(--accent);
    color: var(--dark);
}

/*imagem dos radios dentro do banner*/
.img-radios {
    margin-top: -25rem;
    margin-left: 25rem;
    height: 38rem;
}

/*imagem pequena anatel dentro do banner*/
.img-banner-anatel {
    margin-left: -4.5rem;
    height: 3rem;
}

/*imagem pequena dentro do banner motorola solutions*/
.img-banner-motorola-solutions {
    height: 3rem;
    margin-left: 0.5rem;
}

/* --- FILTROS E CLASSITICAR --- */

.container-botões-filtros {
    padding-left: 1.5rem;
    margin-right: 1.5rem;
}

/*botão filtros */
.botton-filtros {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 4rem;
}

/*botão todos os filtros*/
.btn-filtros {
    background-color: #5F5C59;
}

/*hover do botão todos os filtros*/
.btn-filtros:hover {
    background-color: var(--gray);
}

/*botão classificar filtros*/
.bnt-classificar {
    background-color: var(--light);
    color: var(--dark);
}

/*hover botão classificar*/
.bnt-classificar:hover {
    background-color: var(--light);
    color: var(--dark);
}

/*paragrafo filtros*/
.paragrafo-filtros {
    margin-bottom: 0rem;
    margin-left: auto;
    font-weight: 500;
}

/* --- CONTAINERS DE GRADE (LAYOUT) --- */
/*regras para os cards de radio principais*/
.container-cards-flex-principal {
    display: flex;
    width: 100%;
    background-color: rgb(255, 255, 255);
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
}

/*regras para os cards de radio*/
.container-cards-flex {
    display: flex;
    width: 100%;
    background-color: rgb(255, 255, 255);
    flex-wrap: wrap;
    gap: 1rem;
}

/* --- CARDS DE RÁDIO --- */

/*regras do card principal dos radios*/
.card-principal {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-width: 35rem;
    max-width: 38rem;
    min-height: 23rem;
    max-height: 23rem;
    gap: 2rem;
    background-color: #5F5C59;
    border-radius: 1rem;
}

/*regras dos cards com botão mais alugado*/
.card-generico {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: calc((100% - 35rem - 2rem) / 2);
    min-height: 23rem;
    max-height: 23rem;
    padding: 1.5rem;
    gap: 1rem;
    background-color: #D9D9D9;
    border-radius: 1rem;
    overflow: hidden;
}

/*regras dos 4 cards genericos*/
.card-generico-for {
    display: flex;
    flex-direction: row;
    min-width: 18rem;
    width: calc((100% - 3rem) / 4);
    min-height: 23rem;
    max-height: 23rem;
    background-color: #D9D9D9;
    border-radius: 1rem;
    overflow: hidden;
    padding: 1rem;
}

/*div principal que engloba as imagens*/
.row-radio {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: -10rem;
    margin-left: -14rem;
}

/*imagem radio solo card principal*/
.radio-solo {
    margin-left: 14rem;
    margin-bottom: -5rem;
    height: 28rem;
}

/*titulo card principal*/
.titulo-principal {
    color: var(--light);
    font-size: 2rem;
    font-weight: 600;
    padding-left: 2rem;
    white-space: nowrap;
}

/*paragrafo principal dentro do card principal*/
.paragrafo-principal {
    color: var(--light);
    font-size: var(--text-size-md);
    max-width: 17rem;
    font-weight: 300;
    padding-left: 2rem;
}

/*imagem motorola dentro do card principal*/
.img-card-motorola-solutions {
    height: 3rem;
    margin: auto;
    margin-left: 2rem;
}

.img-card-hakivision {
    height: 0.8rem;
    margin: auto;
    margin-left: 2.5rem;
}

/*imagem dell usada no card principal dos notebooks*/
.imagem-dell {
    height: 1rem;
    margin-left: 2rem;
}

/*botão mais alugado ao topo dos card principais*/
.botton-mais-alugado {
    height: 1.4rem;
    width: 7rem;
    border-radius: 1rem;
    align-items: center;
    text-align: center;

}

.bodycam-logos {
    display: flex;
    flex-direction: column;
}

/*regras de todas as imagens de radio principais*/
.radio {
    margin-left: -0.5rem;
    height: 19rem;
    margin-top: 1rem;
}

/*regras de todas as imagens de radio genericas*/
.radio-for {
    margin-left: 1rem;
    height: 18rem;
    margin-top: 1rem;
}

/*#portatil dentro dos radios*/
.portatil {
    padding-top: 2.5rem;
    font-weight: 600;
    margin-left: -0.1rem;
    font-size: var(--text-size-sm);
}

/*#portatil */
.portatil-for {
    padding-top: 1.5rem;
    font-weight: 600;
    margin-left: -0.1rem;
    font-size: var(--text-size-sm);
}

.link-radios {
    font-size: 1rem;
}

.flecha-alugue {
    font-size: 18px !important;
    vertical-align: middle;
    margin-left: 2px;
    margin-top: 5px;
    font-variation-settings: 'wght' 300;
}

.titulo {
    font-weight: 600;
    white-space: nowrap;
    margin-top: -1rem;
    font-size: var(--text-size-md);
}

.titulo-for {
    font-weight: 600;
    margin-top: -1rem;
    font-size: var(--text-size-md);
    max-width: 1rem;
}

.paragrafo {
    min-width: 10rem;
    font-size: var(--text-size-sm);
}

.paragrafo-for {
    font-size: var(--text-size-sm);
    min-width: 10rem;
}

.partir {
    margin-top: 2rem;
    font-size: var(--text-size-sm);
}

.partir-for {
    margin-top: 1rem;
    font-size: var(--text-size-sm);
}

.price {
    font-weight: 600;
    white-space: nowrap;
    margin-top: -1rem;
    font-size: 1rem;
}

.price-for {
    font-weight: 600;
    white-space: nowrap;
    margin-top: -1rem;
    font-size: 1rem;
}

/* --- ÍCONES --- */

.icons {
    display: flex;
    flex-direction: column;
    gap: 17rem;
    margin-left: 1rem;
}

.love {
    height: 1.5rem;
    width: 1.5rem;
    flex-direction: flex-end;
    margin-left: -2rem;
}

.love-for {
    height: 1.5rem;
    width: 1.5rem;
    flex-direction: flex-end;
    margin-left: -1rem;
}

.document {
    height: 1.8rem;
    width: 1.8rem;
    flex-direction: flex-end;
    margin-left: -2rem;
}

.document-for {
    height: 1.8rem;
    width: 1.8rem;
    flex-direction: flex-end;
    margin-left: -1rem;
}

/* --- BODYCAM --- */
.container-cards-flex-bodycam {
    display: flex;
    width: 100%;
    background-color: rgb(255, 255, 255);
    flex-wrap: wrap;
    justify-content: space-between;
}

.container-cards-flex-bodycam-for {
    display: flex;
    width: 100%;
    background-color: rgb(255, 255, 255);
    flex-wrap: wrap;
    gap: 1rem;

}

.card-principal-bodycam {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-width: 35rem;
    max-width: 38rem;
    min-height: 23rem;
    max-height: 23rem;
    gap: 2rem;
    background-color: #316241E5;
    border-radius: 1rem;
}

.bodycam-generica-img {
    height: 20rem;
    margin-left: 14rem;
    margin-bottom: -9rem;
}

.card-generico-bodycam {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: calc((100% - 35rem - 2rem) / 2);
    min-height: 23rem;
    max-height: 23rem;
    background-color: #D9D9D9;
    border-radius: 1rem;
    padding: 1rem;
}

.card-generico-bodycam-for {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 18rem;
    width: calc((100% - 3rem) / 4);
    min-height: 23rem;
    max-height: 23rem;
    background-color: #D9D9D9;
    border-radius: 1rem;
    padding: 1rem;

}


.superior {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.direita {
    display: flex;
    flex-direction: column;
    text-align: left;

}

.central {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.icons-bodycam {
    display: flex;
    flex-direction: column;
    gap: 17rem;

}

.bodycam-imgs {
    height: 10rem;
    margin-top: -20rem;
}

.link-generico-bodycam-notebook {
    margin-top: -3rem;
}

.link-generico-radios {
    margin-top: 0rem;
    white-space: nowrap;
}


.link-bodycam {
    color: var(--dark);
    font-size: 1rem;
    margin-top: 1rem;


}

/*fim dá estruturação*/

.titulo-bodycam {
    margin-top: 1rem;
    font-size: var(--text-size-md);
    padding: 0;
}

.titulo-bodycam-for {
    font-size: var(--text-size-md);
    padding: 0;
}

.titulo-haKivision-bodycam {
    margin-top: 1rem;
    font-size: var(--text-size-md);
    padding: 0;
}

.paragrafo-partir-bodycam {
    margin-top: 1rem;
    font-size: var(--text-size-md);
    font-weight: 300;
}

.paragrafo-price-bodycam {
    margin-top: -1rem;
    font-weight: 600;
}


/* --- NOTEBOOK --- */
.container-cards-flex-notebook {
    display: flex;
    width: 100%;
    background-color: rgb(255, 255, 255);
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0rem;
}

.container-cards-flex-notebook-for {
    display: flex;
    width: 100%;
    background-color: rgb(255, 255, 255);
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0rem;

}

.card-principal-notebook {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-width: 35rem;
    max-width: 35rem;
    min-height: 23rem;
    max-height: 23rem;
    gap: 2rem;
    background-color: #464674;
    border-radius: 1rem;
}

.notebook-generica-img {
    height: 16rem;
    transform: scaleX(-1);
    margin-left: 5rem;
    margin-bottom: -12rem;
}

/*tamanho espacamento direção e cor dos cards ao lado do card principal*/
.card-generico-notebook {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: calc((100% - 35rem - 2rem) / 2);
    min-height: 23rem;
    max-height: 23rem;
    background-color: #D9D9D9;
    border-radius: 1rem;
    padding: 1rem;
}

.card-generico-notebook-for {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 18rem;
    width: calc((100% - 3rem) / 4);
    min-height: 23rem;
    max-height: 23rem;
    background-color: #D9D9D9;
    border-radius: 1rem;
    padding: 1rem;
}

/*estruturação dos cards ao lado do card principal*/
.superior-notebook {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.direita-notebook {
    display: flex;
    flex-direction: column;
    text-align: left;

}

.central-notebook {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.icons-notebook {
    display: flex;
    flex-direction: column;
    gap: 17rem;

}

.notebook-imgs {
    height: 12rem;
    margin-top: -20rem;
}

.link-generico-notebook {
    margin-top: -3rem;
}

.link-notebook {
    color: var(--dark);
    font-size: 1rem;

}

/*fim dá estruturação*/

.titulo-notebook {
    margin-top: 1rem;
    font-size: var(--text-size-md);
    padding: 0;
}

.titulo-notebook-for {
    font-size: var(--text-size-md);
    padding-top: 1.2rem;
}

.paragrafo-partir-notebook {
    margin-top: 1rem;
    font-size: var(--text-size-sm);
    font-weight: 300;
}

.paragrafo-price-notebook {
    margin-top: -1rem;
    font-weight: 600;
}


/*DESKTOP */
/*card principal desktop*/
.container-cards-flex-desktop {
    display: flex;
    width: 100%;
    background-color: rgb(255, 255, 255);
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0rem;
}

.container-cards-flex-desktop-for {
    display: flex;
    width: 100%;
    background-color: rgb(255, 255, 255);
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0rem;

}

.card-principal-desktop {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-width: 35rem;
    width: calc((100% - 35rem - 2rem) / 2);
    min-height: 23rem;
    max-height: 23rem;
    gap: 2rem;
    background-color: #744646;
    border-radius: 1rem;

}

.desktop-generica-img {
    height: 18rem;
    margin-left: 12rem;
    margin-bottom: -10rem;
}

/*card generico desktop*/
.card-generico-desktop {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: calc((100% - 35rem - 2rem) / 2);
    min-height: 23rem;
    max-height: 23rem;
    padding: 1.5rem;
    gap: 1rem;
    background-color: #D9D9D9;
    border-radius: 1rem;
}

.direita-desktop {
    display: flex;
    flex-direction: column;
}

.span-alugado {
    display: flex;
    flex-direction: column;
}

.desktop-img {
    margin-left: -1.5rem;
    height: 16rem;
    margin-top: 2rem;
}

.titulo-principal-desktop {
    color: var(--light);
    font-size: 2rem;
    font-weight: 600;
    padding-left: 2rem;
    white-space: nowrap;
}

.titulo-desktop {
    font-weight: 600;
    font-size: var(--text-size-md);
    max-width: 10rem;
    padding-top: 1rem;
}

.paragrafo-principal-desktop {
    color: var(--light);
    font-size: var(--text-size-md);
    max-width: 17rem;
    font-weight: 300;
    padding-left: 2rem;

}

.paragrafo-desktop {
    min-width: 10rem;
    font-size: var(--text-size-sm);
}

.paragrafo-partir-desktop {
    margin-top: 0.5rem;
    font-size: var(--text-size-sm);
}

.paragrafo-price-desktop {
    font-weight: 600;
    white-space: nowrap;
    margin-top: -1rem;
    font-size: var(--text-size-md)
}

.icons {
    display: flex;
    flex-direction: column;
    gap: 17rem;
}

.minha-lista {
    font-size: var(--text-size-sm);
    list-style: none;
    padding: 0;
    margin-bottom: auto;
    line-height: 1.2;
    max-width: 8rem;

}

.minha-lista li::before {
    content: "\2022";
    color: black;
    display: inline-block;
    width: 1em;
    font-size: var(--text-size-sm);
    vertical-align: middle;
}

/*CELULARES*/

@media (max-width: 480px) {
    .container-fluid {
        padding-left: 0.4rem !important;
        padding-right: 0.4rem !important;
    }

    .banner-titulo {
        font-size: 2.2rem;
        margin-left: 0;
        text-align: center;
        width: 100%;
        line-height: 1.1;
    }

    .banner-sub-titulo {
        font-size: 1.2rem;
        margin-top: 10rem;
        margin-left: 0;
        text-align: center;
        width: 100%;

    }

    .banner-paragrafo {
        font-size: var(--text-size-sm);
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 2rem;
        text-align: center;
    }

    .btn-contratar {
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 2rem;
        width: fit-content;
        min-width: 200px;
        text-align: center;
        margin-top: 3rem;

    }

    .img-banner-anatel {
        display: block;
        height: 2.5rem;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 1rem;
    }

    .img-banner-motorola-solutions {
        display: block;
        height: 2.5rem;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 1rem;
    }

    /*filtros ->*/
    .botton-filtros {
        flex-direction: column;
        padding: 2rem 1rem;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .btn-filtros,
    .bnt-classificar {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }

    .paragrafo-filtros {
        margin-left: 0;
        margin-top: 1rem;
        width: 100%;
        text-align: center;
    }

    /*CARDS RADIOS*/
    .container-cards-flex-principal,
    .container-cards-flex {
        padding-left: 0 !important;
        padding-right: 0 !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .card-principal {
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin-left: auto;
        margin-right: auto;
        align-items: center;
        text-align: center;
        max-height: 31.1rem;
        height: auto;
        padding: 2rem 1rem;
    }


    .row-radio {
        margin-top: 0 !important;
        margin-left: 0 !important;
        justify-content: center !important;
    }

    .radio-solo {
        margin-left: 0 !important;
        margin-bottom: 0 !important;
        height: 15rem !important;
        width: auto !important;
    }

    /* 3. CARDS GENÉRICOS (R7, R5, R2, etc) */
    .card-generico,
    .card-generico-for {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 22rem !important;
        padding: 1.5rem !important;
        position: relative !important;
        overflow: visible !important;
    }

    .botton-mais-alugado {
        align-self: flex-start !important;
        margin-bottom: -1rem !important;
        font-size: 0.7rem !important;
        order: -2 !important;

    }

    /*CARDS BODYCAMS*/
    .container-cards-flex-bodycam,
    .container-cards-flex-bodycam-for {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        padding: 1rem 0;
    }

    .card-principal-bodycam,
    .card-generico-bodycam,
    .card-generico-bodycam-for {
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        min-height: auto;
        max-height: none;
        height: auto;
        padding: 2rem 1rem;
    }

    .bodycam-generica-img {
        height: 15rem;
        margin-left: 0;
        margin-bottom: 0;
        order: -1;
    }

    /*NOTEBOOK*/
    .container-cards-flex-notebook,
    .container-cards-flex-notebook-for {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1rem;
    }

    .card-principal-notebook,
    .card-generico-notebook,
    .card-generico-notebook-for {
        flex-direction: column;
        width: 100%;
        max-width: 118%;
        min-width: 0;
        min-height: auto;
        max-height: none;
        height: auto;
        padding: 2rem 1rem;
    }

    .notebook-generica-img {
        height: 12rem;
        margin-left: 0;
        margin-bottom: 0;
        order: -1;
        transform: scaleX(-1);
        display: block;
    }

    /*DESKTOP*/
   .container-cards-flex-desktop,
.container-cards-flex-desktop-for {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 1.5rem;
    padding: 0;
}

.card-principal-desktop {
    display: flex;
    flex-direction: column; 
    align-items: center; 
    width: 100%;
    max-width: 118%; 
    min-width: 0;
    min-height: auto;
    max-height: none;
    height: auto;
    padding: 2rem 1rem;
    gap: 1rem;
    margin: 0 auto;
}

.desktop-generica-img {
    height: 10rem;
    width: auto;
    margin-left: 0;
    margin-bottom: 0;
    flex-shrink: 0;
    object-fit: contain;
}

    .card-generico-desktop {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 20rem !important;
        max-height: none !important;
        margin: 0 auto !important;
        padding: 1rem !important;
        position: relative !important;
    }

    .desktop-img {
        height: 12rem !important;
        width: auto !important;
        margin-left: -2rem !important;
        margin-top: 3rem !important;
        flex-shrink: 0 !important;
        object-fit: contain !important;
    }


    .titulo-principal-desktop {
        font-size: 1.2rem !important;
        max-width: 100% !important;
        white-space: normal !important;
        padding-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    .paragrafo-principal-desktop,
    .paragrafo-partir-desktop,
    .minha-lista {
        font-size: 0.8rem !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .paragrafo-price-desktop {
        margin-top: 0.5rem !important;
        font-size: 1.1rem !important;
        white-space: normal !important;
    }

    .botton-mais-alugado {
        order: -1 !important;
        margin-bottom: 0.5rem !important;
        align-self: flex-start !important;
    }

    .radio {
        margin-left: -2rem;
        height: 19rem;
        margin-top: 1rem;
    }

    .radio-for {
        margin-left: 0.2rem;
        height: 16rem;
        margin-top: 1rem;
    }
}