/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

html{
    height: 100%;
    background-color: #353533;

}
main {
    background-color: #131313;

}
header {
    background-color: #353533;
    width: 100%;
    height: 6vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding-left: 5vw;
    padding-right: 5vw;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

.header_logo{
    width: 8vw;

}

.header_lista {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.header_lista a {
    font-family: 'Karma', serif;
    font-size: 1.2vw;
    font-weight: 400;   
    padding: 0.5vw;
    padding-left: 1vw;
    padding-right: 1vw;
    margin-right: 1vw;
}


.header_menu_v1 {
    color: white ;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;

}
.header_menu_v1:hover{
    background-color: #cc9d54;
    border-radius: 2vw;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;

}
.header_menu_v2 {
    color: #cc9d54 ;
    -webkit-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
}
.header_menu_v2:hover{
    background-color: white;
    border-radius: 2vw;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;

}


.menu_busqueda{
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.menu_busqueda form{
  display: -ms-grid;
  display: grid;
    width: 95%;
    -ms-grid-columns: 1fr 1vw 1fr 1vw 3fr 1vw 1.2fr 1vw 1fr;
    grid-template-columns: 1fr 1fr 3fr 1.2fr 1fr;
    padding: 0.5vw;
    gap: 1vw;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-pack: distribute;
        justify-content: space-around;
}

.cont_select{
    width: 100%;
    height: 2vw;
    background-color: #cc9d54;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    position: relative;
    border-radius: 2vw;
    text-align-last: center;
    -ms-text-align-last: center;
    -moz-text-align-last: center;
    cursor: pointer;

}
.select{
    appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
    outline: 0; 
    border: 0;
  border-radius: 0;
    width: 100%;
    height: 100%;
    background-color: #cc9d54;
    font-family: 'Karma', serif;
      font-size: 1vw;
    font-weight: 400;
    border-radius: 2vw;
    text-align-last: center;
    -ms-text-align-last: center;
    -moz-text-align-last: center;
    cursor: pointer;
    padding-right: 1vw;
}

.cont_select i {
    position: absolute;
    right: 1vw;
    font-size: 1.1vw;
    color: black;
}


.buscar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 100%;
    height: 100%;
    font-family: 'Karma', serif;
    font-size: 1vw;
    font-weight: 400;
    color: rgb(0, 0, 0);
    cursor: pointer;
    background-color: #ffffff;
    border: none;
    border-radius: 2vw;
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);

}
.botton {
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.botton:hover {
    -webkit-transform: scale(1.04);
        -ms-transform: scale(1.04);
            transform: scale(1.04);
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.carousel_fondo{
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}
.cont_carousel{
    top: 5vw;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

}

.carousel{
    width: 90%;

}

.cont_elemento_carousel{
    width: 95%;
    height: 24vw;
    padding-bottom: 3vw;
    padding-top: 0.5vw;
    background-color: #faf5f5;
    -webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
            box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); /* Propiedad de sombra */
    margin: auto;
    margin-top: 2vw;
    margin-bottom: 0.5vw;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    border-radius: 2vw;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}
.cont_elemento_carousel:hover{
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    border: 0.15vw solid #ff6701;
    -webkit-transform-origin: center bottom;
        -ms-transform-origin: center bottom;
            transform-origin: center bottom; /* Puedes ajustar según tus necesidades */

    -webkit-transform: scale(1.05);

        -ms-transform: scale(1.05);

            transform: scale(1.05);
}


.prev{
    position: absolute;
    left: 1vw;
    background-color: rgba(255, 255, 255, 0.8);
    width: 4.5vw;
    height: 4.5vw;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    cursor: pointer;
    border: none;
}
.prev i{
    font-size: 2vw;
}
.next{
    position: absolute;
    right: 1vw;
    background-color: rgba(255, 255, 255, 0.8);
    width: 4.5vw;
    height: 4.5vw;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    cursor: pointer;
    border: none;
}
.next i{
    font-size: 2vw;
}
.marca_agua{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 25%;
    opacity: 0.3;
}
.cont_carousel_elemento_img{
    width: 88%;
    margin: auto;
    position: relative;

}
.carousel_elemento_img{
    width: 100%;
    aspect-ratio: 16/9;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 2vw;
    border: 0.15vw solid #ff6701;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

.carousel_elemento_img_texto{
    bottom: 12%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.60);
    padding: 0.1vw;
    position: absolute;
    text-align: center;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    font-family: 'Karma', serif;
    font-size: 1.4vw;
    font-weight: 400;
    color: white;
}

.cont_carousel_elemento_texto{
    width: 90%;
    margin: auto;
    margin-top: 0.2vw;
}

.carousel_elemento_texto_titulo{
    text-align: center;
    font-family: 'Karma', serif;
    font-size: 1.4vw;
    font-weight: 400;
    color: #9f7533;
}
.carousel_elemento_texto_precio{
    text-align: center;
    font-family: 'Karma', serif;
    font-size: 1.1vw;
    font-weight: 600;
    color: #353533;
}
.carousel_elemento_texto_ubicacion{
    text-align: center;
    font-family: 'Karma', serif;
    font-size: 1.1vw;
    font-weight: 400;
    color: #353533;
}
.carousel_elemento_texto_ubicacion i{
    color: #9f7533;
    font-size: 1vw;
}

.cont_carousel_elemento_caracteristicas{
    width: 98%;
    margin: auto;
    display:-ms-grid;
    display:grid;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-grid-columns: auto auto auto;
    grid-template-columns: auto auto auto;
}
.elemento_caracteristicas{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    border-right: #cc9d54 0.1vw solid;
}

.carousel_elemento_caracteristicas{
    font-family: 'Karma', serif;
    font-size: 0.9vw;
    font-weight: 400;
    color: #353533;
    padding-left: 0.4vw;
}

.iconos{
    width: 1.2vw;
}

.cont_elementos{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-right: 1vw;
    margin-top: 0.2vw;
    margin-left: 1vw;
}




footer{
    width: 100%;
    height: 5vw;
    padding-top: 1vw;
    padding-bottom: 1vw;
    background-color: #353533;
}
.cont_footer_texto{
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
footer p{
    font-family: 'Karma', serif;
    font-size: 1vw;
    font-weight: 400;
    color: white;
    margin-right: 4vw;
    margin-left: 2vw;
}
footer a{
    font-family: 'Karma', serif;
    font-size: 1vw;
    font-weight: 400;
    color: white;
    margin-right: 4vw;
    margin-left: 2vw;
}

.cert{
    padding-top: 2vw;
    padding-left: 1vw;
    font-size: 1.2vw;
    font-weight: 900;
}
@media (max-width:800px) {
  
    header {
        height: 15vw;
    }
    
.header_logo{
    width: 15vw;

}



.header_lista a {
    font-size: 2.5vw;
}


.header_lista a {
    font-size: 2vw;
}
.menu_busqueda form{
      padding: 1vw;
      -ms-grid-columns: 1fr 1fr 2fr 1.2fr 0.8fr;
      grid-template-columns: 1fr 1fr 2fr 1.2fr 0.8fr;
}
.cont_select{
    height: 3vw;
}
.cont_select select{
    font-size: 2vw;
}
.cont_select i{
    font-size: 1.5vw;
}
.cont_elemento_carousel{
    height: 38vw;
}
    .buscar {
        font-size: 1.5vw;
    }
    #lupa{
        font-size: 1vw;
    }

    .prev{
        width: 6.5vw;
        height: 6.5vw;
}
.prev i{
    font-size: 3vw;
}
.next{
    width: 6.5vw;
    height: 6.5vw;
}
.next i{
    font-size: 3vw;
}
.cont_elemento_carousel{
    height: 40vw;
}

.carousel_elemento_img_texto{
    padding: 0.4vw;
    font-size: 2.8vw;
}
.carousel_elemento_texto_titulo{

    font-size: 2.3vw;
}
.carousel_elemento_texto_precio{
    font-size: 2.1vw;

}
.carousel_elemento_texto_ubicacion{
    font-size: 2vw;

}
.carousel_elemento_caracteristicas{
    font-size: 1.8vw;
}
.iconos{
    width: 2vw;
}

footer{
    height: 20vw;
}
footer p{
    font-size: 3vw;
}
footer a{
    font-size: 3vw;
}
.cert{
    padding-top: 5vw;
    padding-left: 2vw;
    font-size: 3.5vw;
}
}