html {
    box-sizing: border-box;
    font-size: 62.5%;
  }
  *, *:before, *:after {
    box-sizing: inherit;
  }

:root {
    --font1: 'Montserrat', sans-serif;
    --font2: 'Roboto', sans-serif;
    --font3: 'Saira Condensed', sans-serif;
    --negro: #000000;
    --blanco: #ffffff;
    --rojo: #E20613;
    --gris: #9C9B9B;
    --grisclaro: #d5d5d5;
    
    }

/*root*/

h1{
    text-align: center;
}

a{
    text-decoration: none;
}

body{
    background-color: var(--negro);
}

/* cookies */

/* Estilos para la ventana modal */
.modal {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 0, 0, .4);
    padding: 20px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    backdrop-filter: blur(55px);
    border: var(--rojo) solid 2px;

    
  }
  
  .modal p {
    margin: 0;
    color: var(--blanco);
    font-family: var(--font1);
    font-size: 1.6rem;
    padding-bottom: 1rem;
  }
  
  .modal button {
    background-color: var(--negro);
    color: #fff;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
    font-family: var(--font2);
    font-size: 1.5rem;
    margin-top: 2rem;
  }
  
/* cookies */

.contenedor{
    display: block;
    width: 100%;
}



.titulo_header{
    display: flex;
    justify-content: center;
    padding-top: 10px;
    align-items: center;
}

@media (min-width: 960px){
    .titulo_header{
        margin-right: 20rem;
        justify-content:end;
        color: var(--negro);

    }
    }


.min__hero{
    display: flex;
    width: auto;
    height: 3rem;
    margin-left: 1rem;
    margin-top: -1rem;
}

.contenedor__nav{
    display: block;
    background-color: var(--grisclaro);
    box-shadow: 1px 1px 10px var(--negro);
}

@media (min-width: 768px){
    .contenedor__nav{
        display: grid;
    }
}

@media (min-width: 960px){
    .contenedor__nav{
        display: grid;
        grid-template-columns: 50% 50%;
        grid-template-rows: 50% 50%;
        height: 15rem;
    }
}

.nav__titulo{
    font-family: var(--font1);
    font-size: 2rem;
    margin-top: 0%;
    
    width: 300px;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    background: #e0e0e0;
    box-shadow:  17px 17px 27px #b8b8b8,
             -17px -17px 27px #ffffff;
   
}

@media (min-width: 768px){
    .nav__titulo{
        display: flex;
        font-size: 2rem;
        padding-left: 1rem;
        
     
    }
 
}

@media (min-width: 960px){
    .nav__titulo{
       grid-column: 2 / 3;
       font-size: 2rem;
       
     
    }
 
}

.nav__img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 10rem;
    padding: 5px;
    transition: all .5s ease-in-out;
}

@media (min-width: 768px){
    .nav__img{
        display: block;
        height: 12rem;
        width: auto;
        transition: all .5s ease-in-out;
    }
}

@media (min-width: 960px){
    .nav__img{
       grid-column: 1 / 2;
       grid-row: 1 / 2;
       width: 12rem;
       margin-top: 1.6rem;
       height: auto;
       margin-left: 10rem;
     
    }
 
}

.nav__img:hover{
    width: 13rem;
}

.navlink{
    display: block;
    padding-top: 1REM;
}

@media (min-width: 768px){
    .navlink{
        display: flex;
        margin: auto;
        
    }
}

@media (min-width: 960px){
    .navlink{
        grid-column: 2/3;
        margin-right: 10rem;
        
    }
}   

.navlink__enlace{
    display: block;
    font-family: var(--font1);
    font-size: 2rem;
    text-align: center;
    justify-content: center;
    color: var(--negro);
    padding: 0.2rem;
    border-radius: 1.5rem;
    transition: all .3s ease-in-out;
}
@media (min-width: 768px){
    .navlink__enlace{
        font-size: 2rem;
        align-items: center;
        justify-content: center;
        
    }
}

@media (min-width: 960px){
    .navlink__enlace{
        font-size: 1.6rem;  
        
    }

}

.navlink__enlace:hover{
    font-size: 2.2rem;
    box-shadow: 0px 0px 5px var(--rojo);
    color: #E20613;
    background-color: transparent;
    border-radius: 1.5rem;
    margin-left: 2rem;
    margin-right: 2rem;
    
}
@media (min-width: 768px){
    .navlink__enlace:hover{
      font-size: 2.2rem;
      box-shadow: 0px 0px 5px var(--rojo);
      color: #E20613;
      background-color: transparent
    }
}

@media (min-width: 960px){
    .navlink__enlace:hover{
      font-size: 2rem;
      box-shadow: 0px 0px 5px var(--rojo);
      color: #E20613;
      background-color: transparent
    }
}

.navlink__enlace{
    display: flex;
    justify-content: center;
    margin-bottom: 0.5rem;
    margin-right: 1rem;
}

@media (min-width: 768px){
    .navlink__enlace{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
        margin-right: 1rem;
        padding: .5rem;

    }
}

@media (min-width: 960px){
    .navlink__enlace{
       align-items: center;
       padding-bottom: 0%;
       padding: .5rem;
        
    }
}

.navlink__a{
    text-decoration: none;
    color: var(--negro);
    margin-right: 1rem;}


.icon{
    width: 2rem;
}


@media (min-width: 960px){
    .icon{
        width: 2rem;
        height: auto;
    }

}

/* footer inicio */


.contenedor-footer{
    display: block;
}



.contenedor__nav-footer{
    display: block;
    background-color: var(--negro);
    
}

@media (min-width: 960px){
   .contenedor__nav-footer{
        display: grid;
    }

}




.titulo_footer{
    display: flex;
    justify-content: center;
    padding-top: 10px;
    align-items: center;
}
.nav__titulo--footer{
    font-family: var(--font1);
    font-size: 2rem;
    margin-top: 0%;
    padding-top: 1rem;
    color: var(--blanco);
}

.nav__img--footer{
    width: 20rem;
    margin: auto;
    display: flex;
    padding-top: 2rem;

}

.nav-right{
    display: block;
    color: var(--blanco);
    text-align: center;
    font-family: var(--font2);
    font-size: 1.5rem;
    padding-bottom: 1rem;
}

/* footer final */


/* body */

.main__contenedor{
    display: block;
    grid-template-columns: 50% 50%;
    background-color: var(--negro);
    margin: 0 auto;
    background-color: var(--negro);
    max-width: 1440px;
}

@media (min-width: 768px){
    .main__contenedor{
        display: grid;
        grid-template-columns: 50% 50%;
        grid-template-rows: 10% 90%;
        
    }
 

}

.main__contenedor--h2{
    display: block;
    text-align: center;
    color: var(--blanco);
    font-family: var(--font1);
    font-size: 3rem;
    margin: 0 2rem;
    grid-column: 1/3;

}

@media (min-width: 768px){
    .main__contenedor--h2{
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 3.5rem;
        margin: 0 2rem;
        padding: 2rem;
    }    
    }

.main__contenedor--video{
    width: 100%;
    height: 400px;
    grid-column: 1/2;
    margin: auto 0;
    padding-left: 2rem;

}

.main__contenedor--img{
    width: 100%;
    grid-column: 2/3;
}

.main__contenedor--video{
    width: 100%;
    margin: 0 auto;
}

.main__contenedor--linea{
    display: block;
    margin: auto;
    width: 300px;
    padding-top: 2rem;
    display:300px;
}

/* SLIDER */

.carrousel{
    max-width: 1440px;
    background-color: var(--negro);
    margin: auto;
   
    

}

.carrousel__img{
    width: 100%;
    padding: 2rem, 9rem;
    background-repeat: no-repeat;
    margin: auto;


}



.slider-container {
    max-width: 1440px;
    margin: auto;
    overflow: hidden;
    background-color: var(--negro);
    margin-bottom: 0rem;
  }
  
  .slider {
    display: flex;
    transition: transform 0.5s ease-in-out;
  }
  
  .slide {
    min-width: 100%;
    box-sizing: border-box;
  }
  
  img {
    width: 100%;
    height: auto;
  }

  /* sliderr hero referencias  */

  .section__allmotos{
    display: none;
  }
  @media (min-width: 768px){
    .section__allmotos{
        display: block;
    }
  }

  .container__referencia--h2{
    color: var(--blanco);
    font-family: var(--font1);
    text-align: center;
    font-size: 2rem;
  }

  

.container__referencia{
    display: block;
    max-width: 1440px;
    height: auto;
    margin: auto;
}

.referencias__hero{
    border: 1px solid var(--rojo);
    width: 100%;
    height:auto;
    transition: all 0.5s ease-in-out;
}

.referencias__hero:hover{
    box-shadow: 0px 0px 20px var(--rojo);
    
}  

  @media (min-width: 768px){
    .container__referencia{
        display: grid;
        grid-template-columns: 25% 25% 25% 25%;
        border: 1px solid var(--rojo);
        width: 100%;
        height: auto;
        margin-left: 1rem auto ;
        margin-right: 1rem auto;
        margin-top: 1rem;
      }
      .referencias__hero{
        border: 1px solid var(--rojo);
        height: auto;

      } 
    }


    @media (min-width: 768px){
        .container__referencia--h2{
            color: var(--blanco);
            font-family: var(--font1);
            text-align: center;
            font-size: 3rem;
            display: block;
          }
        }

.referencias__hero h3{
        color: var(--blanco);
        text-align: center;
        font-size: 2rem;
        font-family: var(--font1);
    }
  

.referencia__hero--h4{
        color: var(--blanco);
        text-align: center;
        font-family: var(--font1);
        font-size: 1.7rem;
        margin-bottom: 1rem;
    }

.referencia__hero--img{
    display: flex;
    max-width: 50rem;
    justify-content: center;
    align-items: center;
    margin: auto;
}

.main__financieras{
    display: block;
    background-color: var(--negro);
    max-width: 1440px;
    margin: auto;
}

.financieras__contenedor1{
    background-color: var(--negro);
}

.financieras__h3{
    color: var(--blanco);
    text-align: center;
    font-family: var(--font1);
    font-size: 2rem;
    margin: 0%;
    padding-top: 2rem;
    padding-bottom: 1rem;
}
@media (min-width: 768px){
    .financieras__h3{
    font-size: 3rem;
}
}
.financieras__contenedor2{
    display: flex;
}
.financierahor{
    margin: auto;
    max-width: 1440px;
    margin-top: 2rem;
    margin-bottom: 2rem;
    padding: 1rem;  
}

@media (min-width:768px){
    .financierahor{
        padding: 3rem;
    }
}

/* CONTACTO*/


.contact__section{
    border: 1px solid var(--rojo);
    max-width: 1440px;
    margin: auto;
    padding-bottom: 1rem;
    transition: all 0.5s ease-in-out;
}

.contact__section:hover{
    box-shadow: 1px 1px 20px var(--rojo);
}

.contact__container--titulo{
    max-width: 1440px;
    text-align: center;
    display: flex;
}

.contact__container--titulo h2{
    color: var(--blanco);
    text-align: center;
    font-family: var(--font1);
    font-size: 2rem;
    margin: auto;
    padding-bottom: 1rem;
    padding-top: 1rem;

}

@media (min-width: 768px){
    .contact__container--titulo h2{
        color: var(--blanco);
        text-align: center;
        font-family: var(--font1);
        font-size: 3rem;
        margin: auto;
        padding-bottom: 1rem;
        padding-top: 1rem;
    
    }
}

@media (min-width: 768px){
    .contact__header{
    display: block;
    grid-template-columns: 50% 50%;
    margin: auto;
    
}
}

.contact__header{
    display: grid;
    
}

.contact__container{
    padding: 1rem;
    transition: all 0.5s ease-in-out;
}

.contact__container--a{
    font-size: 2rem;
    font-family: var(--font2);
    color: var(--blanco);
    text-align: center;
    text-shadow: none;
}


.icon__contact{
    text-align: center;
    margin: auto;
    display: flex;
    padding: 1rem;
}

/* maps  */

.maps{
    display: block;
    min-width: 1440px;
    border: 1px solid var(--rojo);
    
}
.container1__maps{
    padding: 1rem;
    max-width: 1440px;
    margin: auto;
   justify-content: center;
}
.maps__h2{
    display: block;
    color: var(--blanco);
    text-align: center;
    font-family: var(--font1);
    font-size: 4rem;
    margin: auto;

}

.container2__maps{
    display: block;
    border: 1px solid var(--rojo);
    transition: all 0.5s ease-in-out;
}

.container2__maps:hover{
    box-shadow: 1px 1px 20px var(--rojo);

}
.maps__frame{
    margin: 1rem;
    width: 100%;
}
.maps__p{
    color: var(--blanco);
    display: flex;
    font-size: 2rem;
    font-family: var(--font2);
    margin: 1rem;
    justify-content:center;
    margin: auto;
    white-space: pre-line;
    text-align: center;
    padding: 2rem;
    

}
@media (min-width:768px){
    .maps__p{
        color: var(--blanco);
        display: flex;
        font-size: 3rem;
        font-family: var(--font2);
        margin: 1rem;
        justify-content:center;
        margin: auto;
        white-space: pre-line;
        text-align: center;
        padding: 2rem;
}
}

@media (min-width: 980px){
    .container2__maps{
        display: grid;
        grid-template-columns: 30% 70%;
        max-width: 1440px;
        margin: auto;
}

}

.maps__frame{
    display: block;
    max-width: 800px;
    margin: auto;
}


@media (min-width: 768px){
    .maps__frame{
        display: flex;
    }
}


/* video home */

@media (min-width: 768px){

.contenedor__vhome{
    max-width: 1440px;
    margin: 2rem auto;
    position: relative;
    display: flex;
}
.vhome__h2{
    display: none;
    position: absolute;
    color: var(--rojo);
    font-size: 3rem;
    font-family: var(--font1);
    padding: 2rem;
    display: inline-flex;
    top: 30%;
    left: 2%;
    border-radius: 2rem;
}
.vhome__video{
    width: 100%;
    margin: auto;
}
.vhome__p{
    position: absolute;
    color: var(--blanco);
    font-size: 2rem;
    font-family: var(--font1);
    background-color: var(--rojo);
    padding: 2rem;
    display: inline-flex;
    top: 50%;
    left: 2%;
    border-radius: 2rem;
}
}


.vhome__video{
    width: 100%;
    margin: auto;
}

/* video home  */


/* PAGINA MOTOS */

/* SECTION1 */
.section1__container--trabajo{
    display: flex;
    margin-top: 1rem;
}

.motos__section1{
    border: 1px solid var(--rojo);
    max-width: 1440px;
    margin: auto;
    transition: all .5s ease-in-out;
    border-radius: 2rem;
}


.trabajo__img{
    display: inline-flex;
    margin: auto;
    max-width: 1440px;
    border-radius: 2rem;
    padding: 1rem;
}

.trabajo{
    display: block;
    max-width: 1440px;
    justify-content:space-between;
    grid-template-columns: 33.3% 33.3% 33.3%;
    margin: auto;
    
}

@media (min-width: 960px){
    .trabajo{
        display: grid;
        margin-top: 2rem;
    }
}


.eco100__logo{
    display: block;
    max-width: 20rem;
    margin: auto;
    background-color: #E20613;
    padding: 1.5rem;
    border-radius: 1rem;
}
.eco100__moto{
    display: block;
    max-width: 90%;
    text-align: center;
    min-width: 36rem;
    margin: auto;
    padding: 1rem;
    transition: all .3s ease-in-out;
}
.eco100__moto:hover{
    max-width: 93%;

}
.carrusel__precio{
    font-size: 2rem;
    font-family: var(--font2);
    color: var(--blanco);
    text-align: center;
    background-color: var(--rojo);
    width: 90%;
    margin: 2rem auto;
    padding: .5rem;
    border-radius: 1rem;
    display: flex;
    justify-content: center;
}
/* SECTION1 TRABAJO */
/* SECTION2 URBANAS */

.section1__container--trabajo{
    display: flex;
    margin-top: 1rem;
}

.motos__section2{
    border: 1px solid var(--rojo);
    max-width: 1440px;
    margin: auto;
    transition: all .5s ease-in-out;
    border-radius: 2rem;
    margin-top: 2rem;
}


.urbanas__img{
    display: inline-flex;
    margin: auto;
    max-width: 1440px;
    border-radius: 2rem;
    padding: 1rem;

}

.urbanas{
    display: block;
    max-width: 1440px;
    justify-content:space-between;
    grid-template-columns: 33.3% 33.3% 33.3%;
    margin: auto;
    margin-top: 2rem;

    
}

@media (min-width: 960px){
    .urbanas{
        display: grid;
        margin-top: 2rem;
    }
}


.urbanas__logo{
    display: flex;
    max-width: 20rem;
    margin: auto;
    background-color: #E20613;
    padding: 1.5rem;
    border-radius: 1rem;
    align-items: center;
}
.urbanas__moto{
    display: block;
    max-width: 90%;
    text-align: center;
    min-width: 36rem;
    margin: auto;
    padding: 1rem;
    transition: all .3s ease-in-out;
}
.urbanas__moto:hover{
    max-width: 93%;

}
.carrusel__precio{
    font-size: 2rem;
    font-family: var(--font2);
    color: var(--blanco);
    text-align: center;
    background-color: var(--rojo);
    width: 90%;
    margin: auto;
    padding: .5rem;
    border-radius: 1rem;
    display: flex;
    justify-content: center;
}



/* SECTION2 */
/* SECTION3 DOBLEP */

.section1__container--doblep{
    display: flex;
    margin-top: 1rem;
}

.motos__section3{
    border: 1px solid var(--rojo);
    max-width: 1440px;
    margin: auto;
    transition: all .5s ease-in-out;
    border-radius: 2rem;
    margin-top: 2rem;
}


.doblep__img{
    display: inline-flex;
    margin: auto;
    max-width: 1440px;
    border-radius: 2rem;
    padding: 1rem;

}

.doblep{
    display: block;
    max-width: 1440px;
    justify-content:space-between;
    grid-template-columns: 33.3% 33.3% 33.3%;
    margin: auto;
    
}

@media (min-width: 960px){
    .doblep{
        display: grid;
    }
}


.doblep__logo{
    display: flex;
    max-width: 18rem;
    margin: auto;
    background-color: #E20613;
    padding: 1.5rem;
    border-radius: 1rem;
    align-items: center;
}
.doblep__moto{
    display: block;
    max-width: 90%;
    text-align: center;
    min-width: 36rem;
    margin: auto;
    padding: 1rem;
    transition: all .3s ease-in-out;
}
.doblep__moto:hover{
    max-width: 93%;

}
.carrusel__precio{
    font-size: 2rem;
    font-family: var(--font2);
    color: var(--blanco);
    text-align: center;
    background-color: var(--rojo);
    width: 90%;
    margin: 2rem auto;
    padding: .5rem;
    border-radius: 1rem;
    display: flex;
    justify-content: center;
}

/* SECTION3 */
/* SECTION4 */

.section1__container--auto{
    display: flex;
    margin-top: 1rem;
}

.motos__section4{
    border: 1px solid var(--rojo);
    max-width: 1440px;
    margin: auto;
    transition: all .5s ease-in-out;
    border-radius: 2rem;
    margin-top: 2rem;
}


.auto__img{
    display: inline-flex;
    margin: auto;
    max-width: 1440px;
    border-radius: 2rem;
    padding: 1rem;

}

.auto{
    display: block;
    max-width: 1440px;
    justify-content:space-between;
    grid-template-columns: 33.3% 33.3% 33.3%;
    margin: auto;
    
}

@media (min-width: 960px){
    .auto{
        display: grid;
    }
}


.auto__logo{
    display: flex;
    max-width: 18rem;
    margin: auto;
    background-color: #E20613;
    padding: 1.5rem;
    border-radius: 1rem;
    align-items: center;
}
.auto__moto{
    display: block;
    max-width: 90%;
    text-align: center;
    min-width: 36rem;
    margin: auto;
    padding: 1rem;
    transition: all .3s ease-in-out;
}
.auto__moto:hover{
    max-width: 93%;

}
.carrusel__precio{
    font-size: 2rem;
    font-family: var(--font2);
    color: var(--blanco);
    text-align: center;
    background-color: var(--rojo);
    width: 90%;
    margin: 2rem auto;
    padding: .5rem;
    border-radius: 1rem;
    display: flex;
    justify-content: center;
}

/* SECTION4 */



/* PAGINA MOTOS */
/* Botones */
.botonesid{
    display: none;
}

@media (min-width: 768px){
    .botonesid{
        display: flex;
        background-color: #E20613;
        align-items: center;
    }
}
.contenedor_botones{
    margin: auto;
    padding: 1rem;
    max-width: 1440px;
    background-color: var(--rojo);
    align-items: center;
    max-height: 4rem;

}

.id_boton{
    color: var(--blanco);
    font-size: 1.5rem;
    font-family: var(--font1);
    padding-right: 3rem;
    border-radius: 19px; 
    text-align: center;
    transition: all 0.5s ease-in-out;
}

.id_boton:hover{
    font-size: 1.7rem;
}



/* Botones */


/* MOTO ECO 100 section1 */

.carrusel__motos--eco100{
    display: block;
}

@media (min-width: 768px){
        .carrusel__motos--eco100{
            max-width: 1440px;
            display: grid;
            grid-template-columns: 50% 50%;
            margin: 2rem auto;
    }
}

.motos__logo{
    display: block;
    max-width: 50%;
    margin: 2rem auto;

}

.motos__moto{
    display: block;
    max-width: 80%;
    margin: auto;
}

@media (min-width: 768px){
    .motos__logo, 
    .motos__moto{
        display: grid;
        max-width: 80%;
        align-items: center;
        justify-content: center;
        margin: auto;
    }
} 

@media (min-width: 768px){
    .motos_sellos{
        display: flex;
    }
}

.motos_sellos{
    max-width: 450px;
    margin: auto;
    grid-column: 2 / 3 ;
    display: block;
}

/* MOTO ECO 100 section1 */

/* MOTO ECO 100 section12 */

.motossection{
    display: block;
    max-width: 758px;
    margin: auto;

}
.motossection__h2{
    display: block;
    color: var(--blanco);
    font-family: var(--font1);
    text-align: center;
    font-size: 3rem;
    background-color: var(--rojo);
    padding: 1rem;
    border-radius: 1rem;

}
.motossection__p{
    color: var(--blanco);
    font-family: var(--font3);
    font-size: 2.5rem;
    text-align: center;
    padding: 1rem 2rem;
    line-height: 3rem;
}

/* MOTO ECO 100 section2 */

/* MOTO ECO 100 section3 video */
.video__motos-contenedor{
    display: flex;
    max-width: 1440px;
    margin: auto;
}
.video__motos{
    max-width: 100%;
    margin: auto;

}
/* MOTO ECO 100 section3 video  */

/* MOTO ECO 100 section4 ficha tecnica  */

.contenedor_ficha{
    display: block;
    margin: auto;
}

@media (min-width: 768px){
    .contenedor_ficha{
        display: grid;
        margin: auto;
        max-width: 1440px;

    }
}
.ficha__tecnica{
    display: block;


}

@media (min-width: 768px){
    .ficha__tecnica{
        display: grid;
        grid-template-columns: 25% 25% 25% 25%;
        max-width: 1440px;
        margin:  2rem auto;     
    }
}

.motor__h2{

    color: var(--blanco);
    font-family: var(--font1);
    text-align: center;
    font-size: 3rem;
    padding: 1rem;
    

}
.iconmotor{
    display: flex;
    margin: auto;
    text-align: center;
    background-color: var(--rojo);
    width: 15rem;
    height: 15rem;
    padding: 1rem;
    border-radius: 50%;
    padding: 2rem 2rem;

}
.motor__p{
    color: var(--blanco);
    font-family: var(--font3);
    font-size: 2.5rem;
    text-align: center;
    line-height: 3rem;
}

.precio__moto{
    display: block;
}
.precio__moto--h2{
    color: var(--blanco);
    font-family: var(--font3);
    font-size: 3.5rem;
    text-align: center;
    background-color: var(--rojo);
    padding: 2rem;
}
.precio__moto--p{
    color: var(--blanco);
    font-family: var(--font3);
    font-size: 2rem;
    text-align: center;
}
/* MOTO ECO 100 section4 ficha tecnica  */

/* garantia  */

.contenedor__garantia{
    display: block;
    margin-top: 1rem;
    margin-bottom: 1rem;

}

.garantia__img{
    max-width: 1440px;
    margin: auto;
}

/* garantia  */


.contenedor__colores{
    max-width: 1440px;
    height: auto;
    margin: auto;
}
.colores-h2{
    color: var(--blanco);
    font-family: var(--font1);
    font-size: 3rem;
    text-align: center;
    padding-top: 2rem;
}
.color-select{
    width: 25%;
    height: 5rem;
    margin: auto;
    background-color: var(--grisclaro);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 3rem;
    border-radius: 2rem;
}

.color-select div {
    background: cyan;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    margin-right: 3rem;
    cursor: pointer;
    margin: auto;
    justify-content: center;
}

.color-select #negro{
    background: var(--negro);
}
.color-select #lila{
    background: violet;
}


/* hunk160r colores */

.contenedor__colores--hunk160r{
    max-width: 1440px;
    height: auto;
    margin: auto;
}

.color-select-hunk160r{
    width: 50%;
    height: 5rem;
    margin: auto;
    background-color: var(--grisclaro);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 3rem;
    border-radius: 2rem;
}

.color-select-hunk160r div {
    background: cyan;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    margin-right: 3rem;
    cursor: pointer;
    margin: auto;
    justify-content: center;
}

.color-select-hunk160r #azul{
    background: rgb(36, 36, 184);
}
.color-select-hunk160r #blanco{
    background: var(--blanco);
}
.color-select-hunk160r #negro{
    background: var(--negro)
}
.color-select-hunk160r #rojo{
    background: var(--rojo);
}
.color-select-hunk160r #verde{
    background: greenyellow;
}
.color-select-hunk160r #cafe{
    background: rgb(190, 104, 28);
}

.imagenes{
    max-width: 800px;
    display: flex;
    margin: auto;
    padding: 1rem;
}
/* hunk160r colores */

/* quienes somos info */




.contenedor--info{
display: block;
        
}
@media (min-width:768px) {
    .contenedor--info{
        max-width: 1440px;
        display: grid;
        margin: auto;
        gap: 2rem;
    }
}

.info__h2{
        max-width: 1440px;
        color: var(--blanco);
        font-family: var(--font1);
        font-size: 2.5rem;
        text-align: center;
        background-color: var(--rojo);
        padding: 2rem;
        grid-column: 1/3;
        margin: auto;
    
}
.info__p{
        color: var(--blanco);
        font-family: var(--font2);
        font-size: 2rem;
        margin: auto;
        text-align: center;
        padding: 3rem;
        white-space: pre-line ;
        grid-column: 1 /2;
}
.info__img{
        display: grid;
        max-width: 400px;
        justify-content:center ;
        align-items: center;
        margin: auto;
        padding: 3rem;
}

/* quienes somos info */

/* botones para facebook */


.container__socialmedia{
    display: grid;
}

@media (min-width:768px){
    .container__socialmedia{
        display: grid;
        grid-template-columns: 50% 50%;
        max-width: 1440px;
        margin: 0 auto;
    }
}
.socialmedia__facebook{
    margin: 1rem;
    margin: auto;
    max-width: 360px;
}


.link__facebook{
    grid-template-columns: 1 / 2;
    margin: auto;

}
.feed__facebook{
    margin: auto;
    margin-bottom: 2rem;
    max-width: 360px;

}
.btn-76-facebook{
    display: flex;
    margin: 2rem auto;


}

.btn-76-facebook,
.btn-76-facebook *,
.btn-76-facebook :after,
.btn-76-facebook :before,
.btn-76-facebook:after,
.btn-76-facebook:before {
  border: 0 solid;
  box-sizing: border-box;
}
.btn-76-facebook {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: 150%;
  line-height: 1.5;
  margin: auto;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
}
.btn-76-facebook:disabled {
  cursor: default;
}
.btn-76-facebook:-moz-focusring {
  outline: auto;
}
.btn-76-facebook svg {
  display: block;
  vertical-align: middle;
}
.btn-76-facebook [hidden] {
  display: none;
}
.btn-76-facebook {
  --neon: #0ea5e9;
  box-sizing: border-box;
  display: block;
  font-weight: 900;
  -webkit-mask-image: none;
  outline: 4px solid #fff;
  outline-offset: -4px;
  overflow: hidden;
  padding: 1.2rem 3rem;
  position: relative;
  text-transform: uppercase;
  transition: 0.2s linear 0.1s;
}
.btn-76-facebook:hover {
  background: var(--neon);
  box-shadow: 0 0 5px var(--neon), 0 0 25px var(--neon), 0 0 50px var(--neon),
    0 0 100px var(--neon);
  color: #fff;
  outline-color: transparent;
  transition: 0.2s linear 0.6s;
}
.btn-76-facebook span {
  display: block;
  inset: 0;
  position: absolute;
}
.btn-76-facebook .top {
  border-top: 4px solid var(--neon);
  opacity: 0;
  transform: translateX(calc(-100% + var(--progress, 0%)));
  transition: none;
}
.btn-76-facebook:hover .top {
  --progress: 100%;
  opacity: 1;
  transition: transform 0.2s linear;
}
.btn-76-facebook .right {
  border-right: 4px solid var(--neon);
  opacity: 0;
  transform: translateY(calc(-100% + var(--progress, 0%)));
  transition: none;
}
.btn-76-facebook:hover .right {
  --progress: 100%;
  opacity: 1;
  transition: transform 0.2s linear 0.2s;
}
.btn-76-facebook .bottom {
  border-bottom: 4px solid var(--neon);
  opacity: 0;
  transform: translateX(calc(100% - var(--progress, 0%)));
  transition: none;
}
.btn-76-facebook:hover .bottom {
  --progress: 100%;
  opacity: 1;
  transition: transform 0.2s linear 0.4s;
}
.btn-76-facebook.left {
  border-left: 4px solid var(--neon);
  opacity: 0;
  transform: translateY(calc(100% - var(--progress, 0%)));
  transition: none;
}
.btn-76-facebook:hover .left {
  --progress: 100%;
  opacity: 1;
  transition: transform 0.2s linear 0.6s;
}

/* botones para facebook */

/* botones para insta */


.socialmedia__instagram{
    min-width: 360px;
    height: auto;
    margin: auto;
}

.feed__instagram{
    width: 360px;

}

.link__insta{
    grid-template-columns: 2 / 3;
    margin: auto;

}

.btn-76-insta{
    display: flex;
    margin: 1rem auto;

}

.instagram-media{
    margin: 2rem;
}
.btn-76-insta,
.btn-76-insta *,
.btn-76-insta :after,
.btn-76-insta :before,
.btn-76-insta:after,
.btn-76-insta:before {
  border: 0 solid;
  box-sizing: border-box;
}
.btn-76-insta {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: 150%;
  line-height: 1.5;
  margin: auto;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
}
.btn-76-insta:disabled {
  cursor: default;
}
.btn-76-insta:-moz-focusring {
  outline: auto;
}
.btn-76-insta svg {
  display: block;
  vertical-align: middle;
}
.btn-76-insta [hidden] {
  display: none;
}
.btn-76-insta {
  --neon: #fc07e3;
  box-sizing: border-box;
  display: block;
  font-weight: 900;
  -webkit-mask-image: none;
  outline: 4px solid #fff;
  outline-offset: -4px;
  overflow: hidden;
  padding: 1.2rem 3rem;
  position: relative;
  text-transform: uppercase;
  transition: 0.2s linear 0.1s;
}
.btn-76-insta:hover {
  background: var(--neon);
  box-shadow: 0 0 5px var(--neon), 0 0 25px var(--neon), 0 0 50px var(--neon),
    0 0 100px var(--neon);
  color: #fff;
  outline-color: transparent;
  transition: 0.2s linear 0.6s;
}
.btn-76-insta span {
  display: block;
  inset: 0;
  position: absolute;
}
.btn-76-insta .top {
  border-top: 4px solid var(--neon);
  opacity: 0;
  transform: translateX(calc(-100% + var(--progress, 0%)));
  transition: none;
}
.btn-76-insta:hover .top {
  --progress: 100%;
  opacity: 1;
  transition: transform 0.2s linear;
}
.btn-76-insta .right {
  border-right: 4px solid var(--neon);
  opacity: 0;
  transform: translateY(calc(-100% + var(--progress, 0%)));
  transition: none;
}
.btn-76-insta:hover .right {
  --progress: 100%;
  opacity: 1;
  transition: transform 0.2s linear 0.2s;
}
.btn-76-insta .bottom {
  border-bottom: 4px solid var(--neon);
  opacity: 0;
  transform: translateX(calc(100% - var(--progress, 0%)));
  transition: none;
}
.btn-76-insta:hover .bottom {
  --progress: 100%;
  opacity: 1;
  transition: transform 0.2s linear 0.4s;
}
.btn-76-insta.left {
  border-left: 4px solid var(--neon);
  opacity: 0;
  transform: translateY(calc(100% - var(--progress, 0%)));
  transition: none;
}
.btn-76-insta:hover .left {
  --progress: 100%;
  opacity: 1;
  transition: transform 0.2s linear 0.6s;
}
/* botones para insta */

.container2__maps2{
    display: block;
}

.maps__h2{
    color: var(--blanco);
    display: flex;
    font-size: 3rem;
    font-family: var(--font2);
    margin: 1rem;
    justify-content:center;
    margin: auto;
    white-space: pre-line;
    text-align: center;
    padding: 1rem;
}

.maps__p2{
    color: var(--blanco);
    display: flex;
    font-size: 2.5rem;
    font-family: var(--font2);
    margin: 1rem;
    justify-content:center;
    margin: auto;
    white-space: pre-line;
    text-align: center;
    padding: 1rem;
}

/* NOTICIAS  */

/* seccion1 */

.contenedor__noticias{
    display: block;
}


.noticias__h2{
    color: var(--blanco);
    font-family: var(--font1);
    font-size: 2.5rem;
    text-align: center;
    background-color: var(--rojo);
    margin: 0 auto;
    padding: 2rem;
    max-width: 1440px;

}
.noticias__img{
    padding: 0%;
    max-width: 1440px;
    display: block;
    margin: auto;
}
/* seccion1 */

/* seccion2 */
.noticias__articulo1{
    display: block;
}
@media (min-width: 768px){
    .noticias__articulo1{
        display: grid;
        grid-template-columns: repeat(2,1fr) ;
        grid-template-rows: 20% 80%;
        max-width: 1440px;
        margin: auto;
        gap: 1rem;
        margin-bottom: 2rem;
    }
}

.articulo1__h2{
    color: var(--blanco);
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    font-family: var(--font1);
    font-size: 3rem;
    padding-left: 1rem;
}
.articulo1__h3{
    color: var(--blanco);
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    font-family: var(--font1);
    font-size: 1.3rem;
    padding-left: 1rem;
    
    
}
.articulo1__p{
    color: var(--blanco);
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    font-family: var(--font2);
    font-size: 2rem;
    padding: 2rem;
    margin: auto;
    line-height: 1.3;
    text-align: center;
}
.articulo1__img{
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    margin: auto;
    width: 100%;
    margin-left: 1rem;
    border-radius: 2rem;
}

/* seccion2 */
/* seccion3 */
.galeria__clientes{
    display: block;

}
@media (min-width:768px){
    .galeria__clientes{
        display: grid;
        grid-template-columns: repeat(2,1fr);
        max-width: 1440px;
        margin: auto;
    }
}

.slideshow-container {
    position: relative;
    margin: auto;

}
.container__clientes--p{
    color:var(--blanco);
    text-align: center;
    font-family: var(--font1);
    font-size: 2rem;
    white-space: pre-line;
    margin: auto;
    padding: 2rem;
}

.mySlides {
    transition: all 2s ease-in-out;
    max-width: 500px;
    max-height: 500px;
    margin: auto;
    margin-bottom: 1rem;
    margin-top: 1rem;
}

.mySlides.active {
    opacity: 1; /
}

/* seccion3 */
/* carrusel de lineas motos */
.image-gallery{
    display: block;
}

@media (min-width:768px){
    .image-gallery {
        display: flex;
        max-width: 1440px;
        margin: auto;
        transition: all 1s ease-in-out;
    }
    
}

.image-container {
    position: relative;
    margin-right: 20px;
    transition: all 1s ease-in-out;
    margin-bottom: 1rem;
    max-width: 100%;
}



.image-text {
    position: absolute;
    bottom: 100px;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 5px;
    display: none;
    font-size: 3rem;
    font-family: var(--font3);
    transition: all 1s ease-in-out;
    background: var(--negro);

}

/* carrusel de lineas motos */
/* coockies */

.main__cookies{
    display: block;
    max-width: 1440px;
    margin: auto;

}

.contenedor__cookies{
    max-width: 1440px;
    display: flex;
    flex-direction: column;

}
.contenedor__cookies h2{
    color: var(--blanco);
    font-family: var(--font1);
    font-size: 3rem;
    text-align: center;
    display: flex;
    margin: auto;
    padding-top: 2rem;

}

.contenedor__cookies p{
    color: var(--blanco);
    font-family: var(--font2);
    font-size: 1.7rem;
    text-align: justify;
    padding: 2rem;
    white-space: pre-line;
    max-width: 800px;
    margin: auto;
}
/* coockies */

.container__norma{
    display: flex;
    max-width: 1440px;
    margin: auto;
    justify-content: center;
}

.container__norma a {
    color: var(--blanco);
    text-decoration: none;
    font-family: var(--font1);
    font-size: 1.5rem;
    margin-right: 1rem;
}

/* testimonios */
.testimonios{
    max-width: 1440px;
    margin: auto;
    padding: 1rem;
}



.contenedor__testimonios{
    display: block;
    
}

@media (min-width: 768px){
    .contenedor__testimonios{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
}


.testimonio1{
    background-color: var(--blanco);
    border-radius: 2rem;
    box-shadow: 0px 0px 20px var(--blanco);
    margin: 1rem;
    padding: 1rem;

}

.testimonio1 blockquote p{
    color: var(--rojo);
    font-family: var(--font1);
    font-size: 2rem;

}

.footer__nombre{
    font-size: 1.7rem;
}
.footer__nombre footer{
    font-family: var(--font3);
}
.info__testimonios{

    color: var(--blanco);
    font-family: var(--font1);
    font-size: 3rem;
    text-align: center;
    padding: 2rem;
    margin: 1rem;


}

/* testimonios */
/* hipchat */
.hipchat{
    display: flex;
    margin: auto;
    width: 60px;
    width: auto;
}
/* hipchat */
/* whatsapp flotante */
.whatsapp-float {
    display: none;
}

@media (min-width:720px){
    .whatsapp-float{
        visibility: visible ;
        position: fixed;
        bottom: 50%;
        right: 2px;
        transform: translateY(50%);
        z-index: 1000;
        margin: 1px;
        display: flex;
        flex-direction: column;
        border-radius: 2rem;
        backdrop-filter: blur(5px);
        border: 1px solid var(--rojo);
    }
    }


.whatsapp-float img {
    width: 70px; /* Ajusta el tamaño según sea necesario */
    height: auto;
    border: 0;
    transition: all 0.3s ease-in-out;
    margin: 1rem auto;
    
}
.whatsapp-float img:hover{
    width: 80px;
}

.whatsapp-float h2{
    text-decoration: none;
    color: var(--blanco);
    font-family: var(--font3);
    font-size: 1.8rem;
    margin-right: 1rem;
    margin-left: 1rem;
}

/* whatsapp flotante */

/* precio de venta al publico */
.pvsp{
    display: flex;
    max-width: auto;
    max-height: auto;
    justify-content: center;
    align-items: center;

}

@media (min-width:768px){
    .pvsp{
        display: flex;
        max-width: 1440px;
        margin: auto;
        
    
    }
    
}
.pvsp h2{
    color: var(--blanco);
    font-family: var(--font3);
    font-size: 2rem;
    text-align: center;
    margin: auto;
    padding: 2rem;
    justify-content: center;
    align-items: center;

}

/* precio de venta al publico */
/* formulario */
.formmulario{
    display: block;
    margin: auto;
}
form {
    border: 2px solid var(--rojo); /* Borde del formulario */
    padding: 1rem; /* Espacio interior */
    border-radius: 8px; /* Bordes redondeados */
    margin: 2rem, 0rem;
}
.contact_form {
    font-size: 2rem;
    color: var(--blanco);
    font-family: var(--font1); /* Tamaño del texto del legend */
}
label, input {
    display: block; /* Hace que cada input aparezca en una línea nueva */
    margin: 10px 0;
    color:var(--blanco);
    font-size: 1.5rem;
    font-family: var(--font3); /* Margen entre los elementos */
}
input[type="text"], input[type="email"], input[type="tel"] {
    width: 100%; /* Ancho del input */
    padding: 8px; /* Espacio interior del input */
    box-sizing: border-box;
    color: var(--negro);
    font-size: 1.5rem;
    font-family: var(--font1); /* El padding y el borde no afectan el ancho final */
}
input[type="submit"] {
    background-color: var(--rojo); /* Color de fondo del botón */
    color: white; 
    font-family: var(--font1);
    font-size: 2rem;/* Color del texto del botón */
    padding: 10px 20px; /* Espacio interior del botón */
    border: none; /* Sin borde */
    border-radius: 4px; /* Bordes redondeados del botón */
    cursor: pointer; /* Cursor en forma de mano */
    transition: background-color 0.3s; /* Transición suave del color de fondo */
    margin-top: 1rem;
}
input[type="submit"]:hover {
    background-color: #777; /* Color de fondo cuando se pasa el mouse */


}

.titulo_form {
    color: var(--blanco);
    font-family: var(--font3);
    font-size: 2.5rem;
    text-align: center;
}
.asesor_home{
    display: block;
    margin: 1rem 0rem;
    border-radius: 2rem;
}
/* formulario */

@media (min-width:768px){
    .formmulario form{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        margin-bottom: 1rem;
    }
    .titulo_form{
        grid-column: 1/3;
        font-size: 3rem;
    }
    form{
        display: flex;
        align-items: center;
        margin: auto;
        max-width: 100%;

    }
    input[type="text"], input[type="email"], input[type="tel"] {
        width: 100%;
        height: 70px; /* Ancho del input */
        padding: 8px; /* Espacio interior del input */
        box-sizing: border-box;
        color: var(--negro);
        font-size: 1.5rem;
        font-family: var(--font1); /* El padding y el borde no afectan el ancho final */
        }
        .contact_form{
            font-size: 4rem;
        }
        
}