#js-header {
  max-width: 1700px;
  margin: auto;
}

:root {
  --primary: #10312b;
  --primary-header: rgba(16, 49, 43, 0.9);
  --primary-opacity: #10312b96;
  --primary-hover: #2a554d;
  --body: #575756;
  --brown: #856d2b;
  --brown-v1: #b4a175;
  --brown-v2: #cdbe9f;
  --brown-light: #f5f3ee;
  --green-light: #819e11;
  --gray-light: rgba(91, 91, 91, 0.218);
}

.g-color-green-light {
  color: var(--green-light);
}
.g-brd-green-light {
  border-color: var(--green-light);
}
.color-brown {
  color: var(--brown);
}
.u-btn-outline-green:hover {
  color: #fff;
  background-color: var(--green-light);
}
.u-btn-outline-green {
  color: #fff;
  border-color: var(--green-light);
}
.bg-brown-v1 {
  background-color: var(--brown-v1);
}
.bg-brown-v2 {
  background-color: var(--brown-v2);
}
.brd-brown-v2 {
  color: var(--brown-v2);
}
.color-brown-v2 {
  color: var(--brown-v2);
}
.color-brown-v1--hover:hover {
  color: var(--brown-v1) !important;
}
.brd-plantas {
  border-radius: 15px 15px 0px 0px;
}
a.active.nav-link {
  background: #fff;
  border-left: 15px solid #fff;
  margin-left: -15px !important;
  transition: ease-in-out 0.2s;
}
html {
  scroll-behavior: smooth;
}

main {
  max-width: 1700px;
  margin: auto;
  background-color: var(--brown-light);
}

js-header {
  max-width: 1700px;
  margin: auto;
}

body,
header {
  font-family: "Montserrat", sans-serif;
  color: var(--primary);
}

.hamburger-inner,
.hamburger-inner:after,
.hamburger-inner:before {
  background-color: #fff;
}

/* ------------ overlay multiply ----------- */
.mix-blend-mode::after {
  content: "";
  mix-blend-mode: multiply;
  position: absolute;
  background-color: var(--primary-header);
  inset: 0;
  z-index: -1;
}

.green-stripe {
  mix-blend-mode: multiply;
  background-color: var(--primary);
  height: 15px;
  width: 100%;
  position: absolute;
  bottom: 30px;
}

.brown-stripe {
  background-color: var(--brown);
  height: 15px;
  width: 100%;
}

.btn-primary {
  color: #fff !important;
}
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary) !important;
}
[class*="u-heading-v4-"] {
  border-left-width: 10px;
}
.u-nav-v1-1 li .nav-link {
  border: 1px solid var(--primary);
}

.close {
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--primary);
  opacity: 1;
}

/* Select formulario */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 1px;
  text-overflow: "";
}
.input-box {
  overflow: hidden;
  width: 230px;
  position: relative;
}
.input-box::after {
  background-color: var(--primary-opacity);
  border-radius: 3px;
  color: white;
  content: "\f078";
  display: table-cell;
  font-family: var(--fa-style-family, "Font Awesome 6 Free");
  font-size: 16px;
  font-weight: var(--fa-style, 900);
  height: 23px;
  line-height: 1;
  overflow: hidden;
  padding-top: 3px;
  pointer-events: none;
  position: absolute;
  right: 4px;
  text-align: center;
  top: 4px;
  width: 27px;
}
textarea {
  resize: none;
}
.modal {
  z-index: 9999;
}

.icon-beneficio {
  width: 100px;
  min-height: 110px;
  transition: all 0.3s;
}

.icon-beneficio:hover {
  filter: drop-shadow(0px 0px 15px rgba(128, 128, 128, 0.422));
}
.brd-left {
  border-left: 1px solid #fff;
  margin-left: 25px;
}

.boton-flotante {
  z-index: 9;
  position: fixed;
  bottom: 120px;
  right: 30px;
  border-radius: 50%;
}
.boton-flotante img {
  width: 70px;
  height: 70px;
  transition: all 0.3s;
}
.wsp img:hover {
  width: 80px;
}
.g-placeholder-primary::placeholder {
  color: var(--primary);
  font-weight: 500;
  opacity: 0.85;
}

/* huincha */
[class*="u-heading-v1-"]::before,
[class*="u-heading-v1-"]::after {
  border-top-width: 2px;
}
.tour-virtual {
  transition: all 0.2s;
}
.tour-virtual:hover {
  filter: drop-shadow(4px 7px 10px rgb(114, 114, 114));
}

/* youtuve video */
.playerWrap {
  position: relative;
}
/* .playerWrap.paused::after ,*/
.playerWrap.ended::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  cursor: pointer;
  background-color: black;
  background-repeat: no-repeat;
  background-position: center;
}

.playerWrap.ended::after {
  background-size: 35%;
  background-image: url("../img/logos/logo_vlr.png");
}

/* .playerWrap.paused::after {
  width: calc(100%);
  background-size: 128px 128px;
  background-image: url("https://i.ya-webdesign.com/images/play-button-png-16.png");
} */

#portada {
  height: 100%;
  background-position: center;
  background-size: cover;
}
.gradient-slider {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.57) 50%);
}

/* ---------------medias querys------------ */

@media (max-width: 992px) {
  .g-pos-custom {
    background-position: -260px 0px;
  }
  .boton-flotante {
    bottom: 76px;
    right: 21px;
  }
  .boton-flotante img {
    width: 60px;
    height: 60px;
  }
  .slider-1 {
    width: 500px;
    margin-top: 50px;
  }
}

@media (min-width: 768px) {
  .slider-1,
  .slider-2,
  .slider-3 {
    max-width: 520px;
  }
  .g-width-340--md {
    width: 350px;
  }
}

@media (min-width: 767.9px) {
  .h-500 {
    height: 500px !important;
  }
  .border-box div:not(:last-child) {
    border-right: 1px solid var(--gray-light);
  }
}

@media (max-width: 767.9px) {
  .h-500 {
    height: 500px !important;
  }
  .g-pos-custom {
    background-position: -258px 13px;
  }
  .g-width-340--md {
    width: 340px;
  }
}

@media (max-width: 575px) {
  .h3,
  h3 {
    font-size: 1.5rem;
  }
  .g-pos-custom {
    background-position: -580px 13px;
  }
  .g-mt-minus-10 {
    margin-top: 0px !important;
  }
  .g-left-30 {
    left: 0px !important;
  }
  .g-right-30 {
    right: 0px !important;
  }
  .gradient-slider {
    background: rgba(255, 255, 255, 0.5);
  }
  .g-width-340--md {
    width: 300px;
  }
}