@import url('https://fonts.googleapis.com/css2?family=Anton&family=Titillium+Web:ital,wght@0,400;0,700;1,200&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
}

html{
    scroll-behavior: smooth;
}

/* font-family: 'Anton', sans-serif;    principal */

/* font-family: 'Titillium Web', sans-serif;    secundaria*/


header{
    /* background-color: rgba(211, 200, 0, 0.829); */
    display: flex;
    background-color: #9ab8ba;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 6rem;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.33);
}

.logo{
    max-width: 6rem;
}

.navBar{
    display: flex;
    gap: 2rem;
}

.navBar li .ancla{
    font-family: 'Anton', sans-serif;
    text-transform: uppercase;
    font-size: 1.8rem;
    color: rgb(235, 235, 235);
}

.navBar li .ancla:hover{
    color: rgb(20, 20, 20);
    transition: 1.4s;
}

/* main */

body{
    background-color: #055256;
    /* background-color: rgb(255, 247, 142); */
}

/* .fondo-section{
    max-width: 100%;

}

.fondo{
    width: 100%;
    height: 100vh;
} */

.titulo-section{
    padding: 5rem 6rem;

}

.titulo-section .titulo{
    font-size: 4rem;
    font-family: 'Anton', sans-serif;
    color: rgb(20, 20, 20);
}

.titulo-section .p-titulo{
    font-family: 'Titillium Web', sans-serif; 
    padding-top: 1rem;
    font-size: 1.6rem;
}

.boton-section{
    padding-top: 3rem;
}

.boton-section .boton-covered{
    font-family: 'Anton', sans-serif;
    padding: .5rem 1rem;
    background-color: rgb(20, 20, 20);
    color: rgb(235, 235, 235);
    font-size: 2rem;
    border-radius: .2rem;
}

.arrow-covered{
    margin-left: .5rem;
}

.boton-section .boton-covered:hover{
    /* background-color: rgb(255, 131, 36); */
    /* background-color: rgba(211, 200, 0, 0.829);
    color: rgb(20, 20, 20); */
    /* background-color: #def9fa; */
    background-color: #9ab8ba;
    color: #13282b;
    transition: 2s;
}

.covered-section{
    background-color: rgb(235, 235, 235);
    padding: 0 6rem;
    padding-bottom: 6rem;
}

.covered-section .titulo-covered{
    font-family: 'Anton', sans-serif;
    text-align: center;
    padding: 4rem 0;
    font-size: 4rem;
    color: rgb(20, 20, 20);
}

.covered-section .subtitulo-covered{
    font-family: 'Titillium Web', sans-serif; 
    text-align: center;
    font-size: 1.6rem;
}

.titulo-triangle{
    font-family: 'Titillium Web', sans-serif; 
    text-align: center;
    font-size: 1.4rem;
    padding: 2rem;
}

.triagle-span{
    /* color: rgba(211, 200, 0, 0.929); */
    color: #13282b;
    font-size: 1.6rem;
}

.triangle{
    /* color: rgba(211, 200, 0, 0.929); */
    color: #13282b;
    font-size: 2rem;
}

.cubiertas-grid{
    margin-top: 4rem;
    border-radius: 1rem;
    background-color: rgba(207, 207, 207, 0.311);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.33);
}

.triangles-ruedas{
    width: 12rem;
}

.box-1{
    display: flex;
    gap: 1rem;
}

.p-flex{
    display: flex;
    flex-direction: column;
    padding: 2rem;
    gap: 2rem;
    font-family: 'Titillium Web', sans-serif; 
    font-size: 1.6rem;
}

.p-neumatico{
    color: rgb(20, 20, 20);
}

.p-bold{
    font-weight: 900;
}

.p-cuotas{
    color: rgb(12, 133, 12);
    font-size: 1.2rem;
}

.p-envio{
    color: rgb(12, 133, 12);
    font-size: 1rem;
}


/* CONTACTOS */

.contacto-section{
    padding: 2rem 6rem;
    text-align: center;
    /* background-color: rgb(255, 247, 142); */
    background-color: #9ab8ba;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.33);
}

.contacto-titulo{
    font-family: 'Anton', sans-serif;
    color: rgb(20, 20, 20);
    font-size: 3rem;
}

.titulo-contac{
    padding: 1rem;
    font-family: 'Titillium Web', sans-serif; 
}

.redes-sociales{
    display: flex;
    justify-content: space-around;
    padding: 4rem;
    font-size: 3.2rem;
}

.bi-one,
.bi-two,
.bi-three{
    color: rgb(20, 20, 20);
}

.redes-sociales .bi-one:hover{
    color: rgba(36, 36, 255, 0.938);
    cursor: pointer;
    transition: 1.4s;
}

.redes-sociales .bi-two:hover{
    color: rgba(173, 25, 25, 0.835);
    cursor: pointer;
    transition: 1.4s;
}

.redes-sociales .bi-three:hover{
    color: rgb(0, 113, 21);
    cursor: pointer;
    transition: 1.4s;
}

@media (max-width: 767px){

    header{
        flex-direction: column;
    }

    .navBar{
        margin-top: 1.2rem;
        flex-direction: column;
        text-align: center;
    }

    .titulo-section{
        padding: 2rem 4rem;
        /* text-align: center; */
    }

    .titulo-section .titulo{
        font-size: 3rem;
        
    }

    .titulo-section .p-titulo {
        font-size: 1.2rem;
    }

    
    .boton-section{
        padding-top: 2rem;
    }

    .boton-section .boton-covered{
        padding: .5rem .5rem;
    }

    .covered-section {
        padding: 0 2rem;
        padding-bottom: 2rem;
}

.covered-section .titulo-covered{
    font-size: 3rem;
    padding: 2rem 0;
}

.covered-section .subtitulo-covered{
    font-size: 1.5rem;
}

.covered-section .titulo-triangle{
    font-size: 1rem;
}

.cubiertas-grid {
    margin-top: 2rem;
}

.cubiertas-grid .box-1{
    gap: .5rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.cubiertas-grid .triangles-ruedas{
    width: 8rem;
    justify-content: center;
    align-items: center;
}

.p-cuotas{
    font-size: .9rem;
}

.contacto-section{
    padding: 2rem;
}

.contacto-section .redes-sociales{
    padding: 2.5rem 2rem;
}

}