@charset "utf-8";

/* CSS Document */
body {
  font-family: Arial;
	margin: 0;
	overflow-y: auto;
	overflow-x: hidden;
}
/* ----- Marcas Renovado ----------*/
.gridDes {
  text-align: center;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 0.5fr;
  gap: 10px 0px;
  grid-template-areas:
    "bannerD bannerD bannerD";
}

.bannerDestacado {
  text-align: center;
  grid-area: bannerD; 
}
.gridDes {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 0.5fr;
  gap: 0px 0px;
  grid-template-areas:
  "bannerD bannerD bannerD";
}

.bannerDestacado {
  text-align: center;
  grid-area: bannerD;
}

.gridMinis {
  width: 95%;
  margin: 0 auto;
  text-align: center;
  display: grid;
  grid-template-columns: 0.5fr 0.5fr 0.5fr 0.5fr;
  grid-template-rows: 1fr;
  gap: 0px 20px;
  grid-template-areas:
    "miniTop1 minitop2 minitop3 minitop4"
    "miniTop1 minitop2 minitop3 minitop4";
}


.miniTop1 {
  grid-area: miniTop1; 
}
.minitop2 {
  grid-area: minitop2;
}
.minitop3 {
  grid-area: minitop3;
}
.minitop4 {
  grid-area: minitop4;
}
.gridProBrand {
  text-align: center;
  width: 95%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 0.3fr;
  gap: 0px 20px;
  grid-template-areas:
    "proBrand1 proBrand2 proBrand3 proBrand4";
}
.proBrand1 {
  grid-area: proBrand1;
}
.proBrand2 {
  grid-area: proBrand2;
}
.proBrand3 {
  grid-area: proBrand3;
}
.proBrand4 {
  grid-area: proBrand4;
}


.gridBasicBrand {
  width: 95%;
  margin: 0 auto;
  text-align: center;
  display: grid;
  grid-template-columns: 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr;
  grid-template-rows: 1fr;
  gap: 0px 20px;
  grid-template-areas:
    "basicBrand1 basicBrand2 basicBrand3 basicBrand4 basicBrand5"
    "basicBrand1 basicBrand2 basicBrand3 basicBrand4 basicBrand5";
}
/* 
.basicBrand1 img{ 
  object-fit:fill;
  width:300px;
  height:300px;
  background-color:white;
  
}
.basicBrand2 img{ 
  object-fit:fill;
  width:300px;
  height:300px;
  background-color:white;
  
}
.basicBrand3 img{ 
  object-fit:fill;
  width:300px;
  height:300px;
  background-color:white;
  
}
.basicBrand4 img{ 
  object-fit:fill;
  width:300px;
  height:300px;
  background-color:white;
  
}
.basicBrand5 img{ 
  object-fit:fill;
  width:300px;
  height:300px;
  background-color:white;
  
} */
.basicBrand1 {
  grid-area: basicBrand1;
}
.basicBrand2 {
  grid-area: basicBrand2;
}
.basicBrand3 {
  grid-area: basicBrand3;
}
.basicBrand4 {
  grid-area: basicBrand4;
}
.basicBrand5 {
  grid-area: basicBrand5;
}

/* marcas sin nada */
.marcas_generales {
  text-align: center;
  width: 95%;
  margin: 0 auto; 
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px 2px;
}
@media only screen and (max-width: 1920px) {
  .gridDes a img{
    width: 100%;
    max-width:1920px;
  }
  .bannerDestacado picture img{
    width: 100%;
    max-width:1920px;
  }
  .gridDes picture img{
    width: 100%;
    max-width:1920px;
  }
  .gridProBrand picture img{
    width: 100%;
    max-width:1920px;
  }
  .marcas_generales picture img{
    width: 100%;
    max-width:1920px;
  }
}
@media only screen and (max-width: 1900px) {
  .gridMinis a img{
    width: 100%;
    max-width:1900px;
  }
  .gridBasicBrand a picture img{
    width: 100%;
    max-width:1900px;
  }
}
@media only screen and (max-width: 1700px) {
  .gridDes a img{
    width: 100%;
    max-width:1700px;
  }
}
@media only screen and (max-width: 1300px) {
  .gridBasicBrand a picture img{
    width: 100%;
    max-width:1300px;
  }
  .marcas_generales picture img{
    width: 100%;
    max-width:1300px;
  }
}
@media only screen and (max-width: 980px) {
  .gridMinis {
      width: 95%;
      margin: 0 auto;
      text-align: center;
      display: grid;
      grid-template-columns: 0.5fr 0.5fr ;
      grid-template-rows: 2fr;
      gap: 0px 20px;
      grid-template-areas: "miniTop1 minitop2 " "minitop3 minitop4";
  }
  .gridBasicBrand {
    width: 95%;
    margin: 0 auto;
    text-align: center;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px 20px;
    grid-template-areas:
    " basicBrand1 basicBrand1 basicBrand2 basicBrand2 basicBrand3 basicBrand3"
                    ". basicBrand4 basicBrand4 basicBrand5 basicBrand5 .";
  }
}
@media only screen and (max-width: 800px) {
  .gridMinis a img{
    width: 100%;
    max-width:800px;
  }
  .gridDes picture img{
    width: 100%;
    max-width:800px;
  }
  .gridDes a img{
    width: 100%;
    max-width:800px;
  }
  .gridBasicBrand a picture img{
    width: 100%;
    max-width:800px;
  }
  .gridProBrand picture img{
    width: 100%;
    max-width:800px;
  }
  .marcas_generales picture img{
    width: 100%;
    max-width:800px;
  }
}
@media only screen and (max-width: 520px) { 
  .gridDes {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 0.5fr;
    gap: 0px 0px;
    grid-template-areas:
    "bannerD bannerD bannerD";
  }
  .bannerDestacado { 
    text-align: center;
  }
}

/* fin marcas sin nada*/
/* ----- Marcas ----- */
/*PRuebas de hovers*/

/* Shine */
.hover14 figure {
	position: relative;
}
.hover14 figure::before {
	position: absolute;
	top: 0;
	left: -75%;
	z-index: 2;
	display: block;
	content: '';
	width: 50%;
	height: 100%;
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	-webkit-transform: skewX(-25deg);
	transform: skewX(-25deg);
}
.hover14 figure:hover::before {
	-webkit-animation: shine .75s;
	animation: shine .75s;
}
@-webkit-keyframes shine {
	100% {
		left: 125%;
	}
}
@keyframes shine {
	100% {
		left: 125%;
	}
} 

  figure {
    max-width: 100%;
  }

  .saturar:hover {
    filter: saturate(180%); 
    -webkit-transition: 500ms;}

  .titulosPro,
  .titulosPro2{

    z-index: 15;
    width: 95%;
  }

  .titulosPro h1{
    display: inline-block;
    width: 95%;
    margin: 0 auto;
    border-bottom: 3px solid gray;
    padding-bottom: 10px;
    margin-left: 10px;
    font-size: 24px;
    margin-top: 5px;
  }

  figure {
    margin-left: 0px;
    width: 100%;
  }


  .marcoFoto {
    overflow: hidden; /*esta propiedad evita que la imagen ocupe mas espacio que su contenedor*/
    width:100%;
    border: 5px ;
    box-sizing:border-box;
    float:left;
  }

  .marcoFoto img {
    object-fit: cover;
    transition: all .4s;
    width:100%;
  }

  .marcoFoto img:hover {
    transform:scale(1.2); 
    
  }
  .contenedor{
    max-width:100%;
    width:100%;
  }