@import url("colores.css");

body{
    background-image: linear-gradient(to bottom, #006db2, #0d5595, #0f3f78, #0b2a5c, #041741);
}

.section-indice {
    margin-top: 10%;
    position: relative;
    padding: 2rem 7% 1rem;
    overflow: hidden;
    
}

.texts h1 {
    color: var(--orangered);
    font-size: 1.9rem;
    font-weight: 800;
}

.texts p {
    color: var(--whitecolor);
    font-size: 1.5rem;
    font-weight: 450;
}

.texts span{
    color: var(--rojo);
    font-size: 1.5rem;
    font-weight: 600;
}

.marcas-container {
    background-image: url(/src/Marcas/portada-banner.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    height: auto;
    border-radius: 2rem;
    display: block;
    top: 5rem;
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
    padding-top: 2rem;
    padding-bottom: 8rem;
    
}

.marcas-container .marcas-box:nth-child(1) {
    display: grid;
    grid-template-columns: 22% 22% 22% 22%;
    justify-content: center;
    gap: 2rem;
    width: 100%;
    position: relative;
}

.marcas-box:nth-child(2) {
    position: relative;
    margin-top: 1rem;
    display: grid;
    grid-template-columns: 22% 22% 22%;
    justify-content: center;
    gap: 2rem;
    width: 100%;
}

.marcas-box .marcas {
    position: relative;
    background: #0000006e;
    height: 25rem;
    border-radius: 2rem;
    border: .3rem solid var(--plata);
    text-align: center;
    z-index: 1500;
}

.marcas-box .marcas a img {
    top: 1rem;
    width: 95%;
    height: 40%;
    padding: 5px;
    transition: .3s ease;
    background: var(--whitecolor);
    border-radius: 2rem;
    padding: 3%;
    position: relative;
    opacity: 1;
}

.marcas-box .marcas p {
    top: 30%;
    transform: translateY(-50%);
    position: relative;
    font-size: 2em;
    font-weight: 500;
    color: var(--whitecolor);
    cursor: pointer;
}

.section-indice .circle-a {
    position: absolute;
    width: 50rem;
    height: 50rem;
    border-radius: 50%;
    background: var(--shadow-color);
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
    top: 20%;
    left: 10%;
}

.section-indice .circle-a::after {
    content: "";
    position: absolute;
    width: 35rem;
    height: 35rem;
    border-radius: 50%;
    background: var(--shadow-color);
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
    top: 80%;
    left: 120%;
}

.section-indice .circle-a::before {
    content: "";
    position: absolute;
    width: 70rem;
    height: 70rem;
    border-radius: 50%;
    background: var(--shadow-color);
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
    top: -30%;
    left: 240%;
}

.section-truper {
    background-image: url("/src/Marcas/TRUPER_portada.jpg");
    background-position: center;
    background-size: cover;
    display: none;
    background-color: #ec600b;
}

.section-pretul {
    background-image: url("/src/Marcas/TRUPER_portada.jpg");
    background-position: center;
    background-size: cover;
    display: none;
    background-color: #ec600b;
}

.section-klintek {
    background-image: url("/src/Marcas/KLINTEK_portada.jpg");
    background-position: center;
    background-size: cover;
    display: none;
    background-color: #016e69;
}

.section-foset {
    background-image: url("/src/Marcas/FOSET_portada.jpg");
    background-position: center;
    background-size: cover;
    display: none;
    background-color: #006db2;
}

.section-hermex {
    background-image: url("/src/Marcas/HRMEX_portada.jpg");
    background-position: center;
    background-size: cover;
    display: none;
    background-color: #920c27;
}

.section-volteck {
    background-image: url("/src/Marcas/VOLTECK_portada.jpg");
    background-position: center;
    background-size: cover;
    display: none;
    background-color: #253692;
}

.section-fiero {
    background-image: url("/src/Marcas/FIERO_portada.jpg");
    background-position: center;
    background-size: cover;
    display: none;
    background-color: #d3063e;
}

/*Responsive productos Truper*/

@media (max-width:1670px) {

    .marcas-box .marcas p {
        top: 30%;
        transform: translateY(-50%);
        position: relative;
        font-size: 1.8em;
        font-weight: 500;
        color: var(--whitecolor);
    }

}

@media (max-width:1600px){
    .section-indice {
        margin-top: 13%;
        
        
    }
}

@media(max-width:1350px) {

    .section-indice {
        margin-top: 15%;       
    }
    
    .marcas-box .marcas p {
        top: 30%;
        transform: translateY(-50%);
        position: relative;
        font-size: 1.6em;
        font-weight: 500;
        color: var(--whitecolor);
    }

    .marcas-box .marcas{
        height: 22rem;
    }
}

@media(max-width:1160px) {
    
    .section-indice {
        margin-top: 18%;       
    }
    

    .marcas-box .marcas p {
        top: 30%;
        transform: translateY(-50%);
        position: relative;
        font-size: 1.4em;
        font-weight: 500;
        color: var(--whitecolor);
    }

    .marcas-box .marcas{
        height: 20rem;
    }
}

@media (max-width:900px){
    .section-indice {
        margin-top: 22%;       
    }
    
}

@media(max-width:840px){
    .marcas-box .marcas p {
        top: 30%;
        transform: translateY(-50%);
        position: relative;
        font-size: 1.2em;
        font-weight: 450;
        color: var(--whitecolor);
    }

    .marcas-box .marcas{
        height: 15rem;
    }
}

@media(max-width:700px){
    .marcas-container .marcas-box:nth-child(1),
    .marcas-box:nth-child(2){
        position: relative;
        margin-top: 1rem;
        display: grid;
        grid-template-columns: 45% 45%;
        justify-content: center;
        gap: 2rem;
        width: 100%; 
    }

    section{
        height: auto;
        max-height: 200vh;
    }

    

    .section-indice{
        overflow-y: visible;
        
        height: 100rem;
    }
    
}

@media(max-width:600px){
    .section-truper {
        background-image: url("/src/Marcas/TRUPER_portada_vertical.jpg");
        background-position: center;
        background-size: cover;
        display: none;
        margin: 0;
    }
    
    .section-pretul {
        background-image: url("/src/Marcas/TRUPER_portada_vertical.jpg");
        background-position: center;
        background-size: cover;
        display: none;
    }
    
    .section-klintek {
        background-image: url("/src/Marcas/KLINTEK_portada_vertical.jpg");
        background-position: center;
        background-size: cover;
        display: none;
    }
    
    .section-foset {
        background-image: url("/src/Marcas/FOSET_portada_vertical.jpg");
        background-position: center;
        background-size: cover;
        display: none;
    }
    
    .section-hermex {
        background-image: url("/src/Marcas/HRMEX_portada_vertical.jpg");
        background-position: center;
        background-size: cover;
        display: none;
    }
    
    .section-volteck {
        background-image: url("/src/Marcas/VOLTECK_portada_vertical.jpg");
        background-position: center;
        background-size: cover;
        display: none;
    }
    
    .section-fiero {
        background-image: url("/src/Marcas/FIERO_portada_vertical.jpg");
        background-position: center;
        background-size: cover;
        display: none;
    }
}

@media (max-width:500px){
    .section-indice {
        margin-top: 28%;       
    }
}

@media(max-width:400px){
    .section-indice{
        margin-top: 33%; 
        height: auto;
        min-height: 150vh;
        max-height: 300vh;
    }
}

@media(max-width:375px){

    .section-indice{
        height: auto;
        min-height: 210vh;
        max-height: 400vh;
    }

    .marcas-container .marcas-box:nth-child(1),
    .marcas-box:nth-child(2){
        position: relative;
        margin-top: 1rem;
        display: grid;
        grid-template-columns: 95%;
        justify-content: center;
        gap: 2rem;
        width: 100%; 
    }
}

@media (max-width:350px){
    .section-indice {
        margin-top: 35%;       
    }
}