/*{border: 1px solid black;}*/

.html {font-family: 'Roboto Condensed', sans-serif;
margin: 0; padding: 0;}

.header {font-size: 10px; width: 100%;
         position: fixed; border: none;
         margin: auto; max-width: 1500px;}


#brick{position: absolute; opacity: 1;
          z-index: -1;
          object-fit: cover;
          height: 150px;
          width: 100%; top: 0px;}
         
.imgira{position:absolute; top: 3px; left: 30px; height: 68px;
       animation-name: logo;
          animation-duration: 7s;
          animation-delay: 3s;
          animation-iteration-count: infinite;
          -webkit-animation-duration: 7s;
          -moz-animation-duration: 7s;}
        
@keyframes logo {100% {transform: rotateY(360deg);}}
@-webkit-keyframes logo {100% {transform: rotateY(360deg);}}

#ancho{max-width: 1360px;}

.nav{border-radius: 10px; background: rgb(199, 198, 198, 0.4);
    margin: 0px 30px; padding: 0px 0px; text-align: center;}
ul{list-style: none;margin-bottom: 5px; margin-top: 5px; padding: 0px 0px;
     font-size: 18px; border: none}
ul li{display: inline-block; border-radius: 10px; margin: 0px 20px;}
ul li a {text-decoration: none; display: block;
     padding: 0px 20px; color:black;
     border: 1px solid rgb(136, 134, 134); border-radius: 10px;
     transition: 0.5s;}
ul li a:hover{background: rgb(209, 79, 79); color: white;
                 border-radius: 10px;}

.item-r{float:right;}

.body{background-attachment:fixed; background-image: url(/img/Fondo_web.png);
   max-width: 1500px; margin: auto}
     /*fixed, dejo la img del back fija, si pusiera scroll, se desplazaria junto a la pag*/

/*.divback{background-attachment:fixed; margin-left: 0px; margin-right: 0px;
  margin-bottom: 0px; height: 80vh; background: url(img/pexelsA.jpg); max-width: 1350px;
margin-top: 250px; margin: 0px auto; border: solid red 3px;}
*/
.h1 {padding: 0px 25px; width: initial;
    margin:5px 0px; font-size: 0px; border:none} 

.img{border: none; width: 300px;} 

.h2{margin: 0px 0px; width: initial; font-size: 20px; letter-spacing: 1px;
   font-family: 'Orbitron', Georgia, 'Times New Roman', Times, serif;
   padding-left: 30px;}

.imga{width: 200px; height: 50px; border-radius: 3px;
       box-shadow: grey -2px -2px 5px;}

.imga1{width: 250px; height: 50px; margin-left: 65px; border-radius: 3px; 
  box-shadow: grey -2px -2px 5px;}

        
h1 {padding: 0px 35px; padding-top: 20px; font-size: 30px;}

section{width: 93%; margin: 0px auto; margin-top: 170px;
        background:rgba(225, 224, 225, 0.5); border-radius: 0px;
      margin-bottom: 20px;}

section p {text-align:left; color: black; font-weight:normal;
  padding-left: 0px; padding-bottom: 15px; font-size: 25px;}


.section {width: 95%; margin: 0px auto;  font-size: 20px;
    font-family: 'Roboto Condensed', sans-serif; 
    background:rgba(225, 224, 224, 0.5); border-radius: 0px;
    margin-top: 30px; margin-bottom: 50px; padding-bottom: 15px;
    padding-left: 25px;}

.section p{font-size: 22px; padding: 0px 30px; margin: 0px 0px;}

h5 {font-weight: bold; font-size:30px; text-align: center; 
  margin-bottom: 30px;}
h4 {font-weight: bold; font-size:25px;
       padding: 0px 30px; margin: 0px 0px;}

.main{position: relative; z-index: -5; 
    height: 210px; width: auto; padding-top: 10px;}

#imgmain{position: absolute; height: 200px; width: 100%;
      left: 0px; top: 0px; z-index: -1; object-fit: cover;}

#textmain{color: black; font-size: 22px; text-align: center;
        padding-top: 5px;}


.footer{text-align: center; background: linear-gradient(0deg, rgb(119, 115, 115) 30%, white);
      padding-bottom: 10px; font-family: 'Roboto Condensed', sans-serif;
    }

.footermensaje{text-align: center; background: linear-gradient(0deg, rgb(119, 115, 115) 30%, white);
        padding-bottom: 10px; margin-top: 260px; font-family: 'Roboto Condensed', sans-serif;
        padding-top: 15px;}

#imgmail{border-radius: 5px; box-shadow: grey -3px -3px 5px;}
#imgwapp{border-radius:5px; box-shadow: grey -3px -3px 5px;}


.divfoot2{display:flex; justify-content: center;}
.divfoot{display:flex; justify-content: center;}

#margen{margin-left: 100px;}
#margen2{margin-left: 220px;}

.footexto{font-size: 22px; font-weight: lighter; margin-bottom: 0px;}



.gri{display: grid; grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(3, 1fr); 
  width: 95%; margin: auto; column-gap: 10px; row-gap: 10px; border-radius: 0px;}

#it1{grid-column-start:1; grid-column-end: 10;
  grid-row-start: 1; grid-row-end: 4;
 font-size: 26px; font-family: 'Roboto Condensed', sans-serif;
 padding: 10px 20px;  line-height: 40px;
 }

#it2{grid-column-start: 10; grid-column-end: 13; width: 100%; 
  margin: 0px auto; margin-top: 20px;}

#it3{grid-column-start: 10; grid-column-end: 13; width: 100%; 
    margin: 0px auto; margin-top: 10px;}

#it12{grid-column-start: 10; grid-column-end: 13; width: 100%; 
margin: 0px auto;}


#icarrusel{height: 150px; width: 100%; padding: 5px;}



.carousel {
  overflow: hidden;
  width: 90%; margin: auto;
  /*max-width: 600px;*/
  border: 2px solid #ccc;
  /*background-color: #fff;*/
  position: relative;
}

.carousel-track {
  display: flex;
  width: max-content; /* Asegura que el ancho se ajuste al contenido */
  animation: scroll 21s linear infinite;
}

.carousel-track img {
  width: 100%; /* Las imágenes se adaptan al ancho del contenedor */
  height: 200px;
  display: block;
}

/* Animación continua */
@keyframes scroll {
  from {
      transform: translateX(0);
  }
  to {
      transform: translateX(calc(-100% / 2));
  }
}

.carrunew{margin-top: 0px; margin-bottom: 20px; width: 100%;
    background-color: rgb(255, 255, 255, 0); margin-bottom: 100px;
  z-index: -2; position: relative;}
.carrunew h1 {font-size: 30px; text-align: center; font-family: 'Roboto Condensed', sans-serif;
   }

#maincaruselnew{height: 600px; margin-bottom: 50px;
padding-bottom: 100px; max-width: 1500px;}

/*main{position: relative;}*/
.grilla{display: grid; grid-template-columns: repeat(2, 1fr);
  margin-bottom: 0px; text-align: center; padding-bottom: 100px;
width: 90%; margin: auto; align-content: center;}

#imagencarrou{position: absolute; width: 100%; height: 600px; z-index: -2; 
  object-fit: cover; max-width: 1500px;}

#texto{font-size: 25px; text-align: center; padding-top: 15px;
font-family: 'Roboto Condensed', sans-serif; margin-top: 0px; margin-bottom: 10px;}

#item1{grid-column-start: 1; width: 200px; margin: auto; z-index: -1;}
#item2{grid-column-start: 2; width: 200px; margin: auto; z-index: -2;}
/*habia usado una grilla de 12 fr, y que el item1: grid-column-start: 3 grid-column-end: span 4*/

#icarru{height: 70px; width: 170px;}


#arrow{position:absolute; bottom: 110px; right: 5px; position:fixed;
  visibility: hidden; z-index: 5; color: rgb(236, 51, 51);
  border-radius: 20px; max-width: 1500px;}
.cambioColor2 i{visibility: visible;}

#navidad{position:absolute; top: 0px; right: 0px; position:fixed;
         z-index: 1; width: 50%; visibility: visible;}



@media screen and (min-width: 1300px){
section{max-width: 1250px; margin-top: 170px; margin-bottom: 50px;}
.footer{margin-top: 0px;}
#it1{font-size: 30px;}
.gri{column-gap: 80px;}
.section p{font-size: 25px; padding: 0px 30px; margin: 0px 0px;}
h5 {font-weight: bold; font-size:35px; text-align: center; 
    margin-bottom: 30px;}
h4 {font-weight: bold; font-size:30px;
    padding: 0px 30px; margin: 0px 0px;}
#texto {font-size: 30px;}
.carrunew h1{font-size: 35px;}
#maincaruselnew{margin-bottom: 50px;}
#navidad{top: 0px; right: 0px; width: 42%; max-width: px;}
}


@media screen and (max-width: 720px){ 
  #margen{margin-left: 50px;}
  #margen2{margin-left: 150px;}
 .gri{display: grid; grid-template-columns: repeat(12, 1fr);
      width: 95%; margin: auto; column-gap: 10px;
      margin-top: 100px; margin-bottom: 50px;}
#textmain{font-size: 20px;}
#texto{font-size: 22px;}
#it1{grid-column-start:1; grid-column-end: 13; font-size: 26px;
     padding: 10px 10px; line-height: normal;}
.section {margin-top: 0px;}
.section h5{margin-bottom: 10px;}
#it2{grid-column-start: 1; grid-column-end: 5; width: 90%; 
  margin: 0px auto;}

#it3{grid-column-start: 5; grid-column-end: 9; width: 90%; 
    margin: 0px auto;}

#it12{grid-column-start: 9; grid-column-end: 13; width: 90%; 
margin: 0px auto; padding-bottom: 10px;}
#maincaruselnew{height: 550px; padding-bottom: 100px; max-width: 1500px; 
  margin-bottom: 50px;}
#imagencarrou{height: 550px;}

#icarru{height: 80px; width: 90%; padding: 5px;}
.carrunew{margin-top: 0px; width: 100%;
  background-color: rgb(255, 255, 255, 0); margin-bottom: 50px;
z-index: -2; position: relative;}
.carrunew div{height: 200px;}
.grilla{display: grid; grid-template-columns: repeat(2, 1fr);
  margin-bottom: 0px; text-align: center; padding-bottom: 0px;
width: 90%; margin: auto; align-content: center;}
}




@media screen and (max-width: 650px){
.divfoot{display:flex; flex-direction: column; align-items: center;}
.nav{margin: 0px 20px;}
section{width: 93%; margin: 0px auto; margin-top: 140px;
  background:rgba(225, 224, 225, 0.5); border-radius: 0px;
  margin-bottom: 20px; text-align: center;}
ul{list-style: none; margin-bottom: 5px; margin-top: 5px; padding: 0px 0px;
    font-size: 16px; border: none}
ul li a {padding: 0px 15px;}
#textmain{font-size: 18px;}
.main{height: 170px;}
#imgmain{height: 170px;}
.imga{width: 180px; height: 40px; border-radius: 3px;
  box-shadow: grey -2px -2px 5px;}

.imga1{width: 220px; height: 40px; margin-left: 65px; border-radius: 3px; 
box-shadow: grey -2px -2px 5px;}
#margen{margin-left: 0px;}
#margen2{margin-left: 30px;}
.section {font-size: 20px; margin-top: 10px; margin-bottom: 0px; padding-bottom: 15px;
   padding-left: 10px;}
.section h4{text-align: left;}
.section h5{font-size: 25px;}
.section p{font-size: 20px; line-height: 24px;}
#maincaruselnew{height: 550px; padding-bottom: 100px; max-width: 1500px;
  margin-bottom: 50px;}
#imagencarrou{height: 550px;}
.gri{display: grid; grid-template-columns: repeat(12, 1fr);
      width: 95%; margin: auto; column-gap: 10px;}
#texto{font-size: 18px;}
#it1{grid-column-start:1; grid-column-end: 13; font-size: 20px;
      padding: 10px 10px; line-height: normal;}
#item1{grid-column-start: 1; width: 170px; margin: auto; z-index: -1; height: 60px;}
#item2{grid-column-start: 2; width: 170px; margin: auto; z-index: -2; height: 60px;}
.grilla{height: 100px; margin-bottom: 50px;}
#icarru{height: 60px; width: 150px;}
#it2{grid-column-start: 1; grid-column-end: 5; width: 100%; 
  margin: 0px auto;}

#it3{grid-column-start: 5; grid-column-end: 9; width: 100%; 
    margin: 0px auto;}

#it12{grid-column-start: 9; grid-column-end: 13; width: 100%; 
margin: 0px auto; padding-bottom: 10px;}
.carrunew h1{font-size: 25px;}
.carousel{height: 60px;}
}



@media screen and (max-width: 430px){
.h2{font-size: 18px;}
ul li a {padding: 0px 8px;}
.imga{width: 110px; height: 35px;}
.imga1{width: 180px; margin-left: 25px; height: 35px;}
section{width: 95%;}
section p{font-size: 22px;}
section h1{padding-left: 25px;}
.main{height: 160px; margin-bottom: 50px;}
#imgmain{height: 160px;}
.section h5{font-size: 25px;}
.section h4{font-size: 22px;}
.section p{font-size: 19px; line-height: 24px;}
.section{padding: 0px; margin: auto; width: 100%;}

.gri{display: grid; grid-template-columns: repeat(12, 1fr);
       width: 95%; margin: 0px auto; column-gap: 10px;}

#it1{grid-column-start:1; grid-column-end: 13; font-size: 20px;
        padding: 0px 15px;}

#it2{grid-column-start: 1; grid-column-end: 5; width: 100%; 
  }

#it3{grid-column-start: 5; grid-column-end: 9; width: 100%; 
    }

#it12{grid-column-start: 9; grid-column-end: 13; width: 100%; 
padding-bottom: 0px;}

#icarru{height: 80px; width: 100%;}
#item1{grid-column-start: 1; width: 170px; height: 85px;}
#item2{grid-column-start: 2; width: 170px; height: 85px;}
#maincaruselnew{height: 600px; margin-bottom: 0px;
  padding-bottom: 100px; max-width: 1500px;}
#carus{height: 140px;}
.carousel{height: 80px;}
.carousel-track img {
  width: 100%; /* Las imágenes se adaptan al ancho del contenedor */
  height: 140px; display: block;}
.carrunew{height: 260px;}
#imagencarrou{height: 550px;}
#icarrusel{height: 100px;}
}



@media screen and (max-width: 380px){
.h2{font-size: 16px; margin: 0px auto;}
.nav ul{font-size: 16px;}
ul li a{padding: 0px 10px;}
.imgira{left: 40px;}
.h1{padding: 0px 35px;}
section{width: 95%;}
section h1{font-size: 28px; padding-left: 20px;}
section p{font-size: 19px; padding-left: 20px;}
.footexto{font-size: 16px;}
.imga{width: 90px; height: 30px;}
.imga1{width: 160px; margin-left: 25px; height: 30px;}
.section{width: 100%;}
.section p{font-size: 20px; line-height: 24px;}
.gri{display: grid; grid-template-columns: repeat(2, 1fr);
    width: 95%; margin: auto; column-gap: 10px;}

#it1{grid-column-start:1; grid-column-end: 13;
    font-size: 20px; padding: 0px 10px;}

#it2{grid-column-start: 1; grid-column-end: 13; width: 75%; 
  margin: 0px auto;}

#it3{grid-column-start: 1; grid-column-end: 13; width: 75%; 
    margin: 0px auto;}

#it12{grid-column-start: 1; grid-column-end: 13; width: 75%; 
margin: 0px auto; padding-bottom: 10px;}
#icarrusel{height: 150px;}

#imagencarrou{height: 550px;}
#icarru{height: 80px; width: 100%;}
#item1{grid-column-start: 1; width: 160px; height: 80px;}
#item2{grid-column-start: 2; width: 160px; height: 80px;}
#maincaruselnew{height: 550px; margin-bottom: 20px;}

}


/*SCROLLBAR
/* width */
::-webkit-scrollbar {
  width: 10px;}

/* Track */
::-webkit-scrollbar-track {
  background: #e9e6e6;
border-radius: 10px;}

/* Handle */
::-webkit-scrollbar-thumb {
  background: rgb(185, 183, 183);
border-radius: 10px;}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgb(209, 79, 79);}