/* HERO */
.section-hero {
	width: 100%;
    height: 888px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    padding: 90px 0;
    text-align: center;
    display: flex;
    align-items: center;
}
.section-hero .hero_content {
	max-width: max-content;
    margin: auto;
}
.section-hero h2 {
	font-family: var(--font-science);
    font-size: clamp(1.5rem, 20vw, 9.063rem);
    line-height: clamp(1.5rem, 15vw, 6.125rem);
}
.section-hero .sub_title {
	font-family: var(--font-south-assign);
    color: var(--color-gold-light);
    font-size: clamp(1.5rem, 10vw, 3.75rem);
    line-height: clamp(1.5rem, 10vw, 2.75rem);
    text-align: center;
    transform: rotate(-5deg);
    position: relative;
    right: -4%;
    top: 25px;
}
.section-hero .box_text {
	max-width: 675px;
  margin-right: auto;
    margin-left: auto;
    margin-top: 80px;
}
.section-hero .box_text p {
	font-size: 2.125rem;
    line-height: 2.75rem;
}

.divider_gradient-3 {
	background: linear-gradient(180deg, #b99468, #b99468);
    height: 1em;
    -webkit-box-shadow: 0px 20px 70px 80px #b99468;
    box-shadow: 0px 0px 60px 120px #b99468;
    position: relative;
    z-index: 1;
}

.section-hero_Cocktails {}
.section-hero_Cocktails::before {
	content: '';
    position: absolute;
    bottom: -42px;
    right: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: #B99468;
    background: linear-gradient(0deg, rgba(185, 148, 104, 1) 0%, rgba(185, 148, 104, 0) 100%);
    pointer-events: none;
}
.section-hero_Cocktails::after {
	content: '';
}

@media (max-width: 768px) {
  .section-hero {
      height: 600px;
  }
}

/* FILTER */
.cocktails-filter {	
	position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
}
.cocktails-filter::before {
	content: '';
	background-image: url("../img/collection-bg-01.jpg") !important;
    background-repeat: repeat;
    background-size: cover;
    position: absolute;
    inset: 0;
    z-index: 3;
    opacity: 0;
}
.cocktails-filter::after {
	content: '';
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgb(185 148 104 / 50%);
    z-index: 4;
    opacity: 0;
}

.layout-filter {
	display: grid;
    grid-template-columns: repeat(7, 1fr);
    align-items: center;
    gap: 10px;
    padding-right: 12px;
    padding-left: 12px;
    max-width: 1359px;
    margin: auto;
    position: relative;
    z-index: 5;
}
.layout-filter .span_text {
	font-family: var(--font-engravers-bold);
    font-size: 1.125rem;
    line-height: 1;
    color: var(--color-white);
    letter-spacing: .10em;
}

.btn_filter {
  position: relative;
    width: 100%;
    max-width: 167px;
    appearance: none;
    background-color: transparent;
    border: 1px solid #fff;
    border-radius: 40px;
    color: var(--color-white);
    font-family: var(--font-engravers-bold);
    text-transform: uppercase;
    font-size: 1rem;
    line-height: 1;
    letter-spacing: .10em;
    padding: 11px 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.btn_filter::after {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M14.037 20.937a1 1 0 0 1-.518-.145l-3.334-2a2.55 2.55 0 0 1-1.233-2.176v-4.525a1.53 1.53 0 0 0-.284-.891L4.013 4.658a1.01 1.01 0 0 1 .822-1.6h14.33a1.009 1.009 0 0 1 .822 1.6L15.332 11.2a1.53 1.53 0 0 0-.285.891v7.834a1.013 1.013 0 0 1-1.01 1.012M4.835 4.063l4.647 6.557a2.5 2.5 0 0 1 .47 1.471v4.524a1.54 1.54 0 0 0 .747 1.318l3.334 2l.014-7.843a2.5 2.5 0 0 1 .471-1.471l4.654-6.542Z'/%3E%3C/svg%3E");
    pointer-events: none;
}

.wrapper_select {
	position: relative;
}
.wrapper_select::before {
	content: '';
  display: inline-block;
  width: 1.5em;
    height: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%23fff' d='M831.9 340.9L512 652.7L192.1 340.9a30.6 30.6 0 0 0-42.7 0a29 29 0 0 0 0 41.6l340.3 331.7a32 32 0 0 0 44.6 0l340.3-331.7a29 29 0 0 0 0-41.7a30.6 30.6 0 0 0-42.7 0z'/%3E%3C/svg%3E");

  position: absolute;
    top: 0;
    right: 22px;
    bottom: 0;
    pointer-events: none;
}

.wrapper_select .select_filter {
  width: 100%;
  appearance: none;
  background-color: transparent;
  border: 1px solid #fff;
  border-radius: 40px;
  color: var(--color-white);
  font-family: var(--font-engravers-bold);
  text-transform: uppercase;
  font-size: 1.125rem;
  line-height: 1;
  letter-spacing: .10em;
  padding: 11px 22px;
  cursor: pointer;
}
.wrapper_select .select_filter option {
  color: var(--color-black);
}

.btn_select_filter {
	font-family: var(--font-engravers-bold);
    padding: 9px 0;
    color: var(--color-white);
    text-align: center;
    text-decoration: none;
    font-size: 1.125rem;
    line-height: 1;
    position: relative;
    transition: all .5s ease;
    max-width: 100%;
    display: inline-block;
    width: max-content;
    letter-spacing: .10em;
    text-transform: uppercase;
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid #fff;
    margin-left: auto;
}

.section-gradient {
	position: relative;
}
.section-gradient::before {
	content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 20%;
    background: #B99468;
    background: linear-gradient(0deg, rgba(185, 148, 104, 0) 0%, rgba(185, 148, 104, 1) 100%);
    z-index: 0;
    pointer-events: none;
}
.section-gradient::after {
	content: '';
	position: absolute;
    top: -20%;
    right: 0;
    left: 0;
    width: 100%;
    height: 20%;
    background: #B99468;
    background: linear-gradient(180deg, rgba(185, 148, 104, 0) 0%, rgba(185, 148, 104, 1) 100%);
    z-index: 0;
    pointer-events: none;
}

@media (max-width: 768px) {
	.layout-filter {
		grid-template-columns: 2fr 1fr;
        gap: 40px;
	}
  .layout-filter .span_text,
  .layout-filter .wrapper_select {
    display: none !important;
  }
  .btn_select_filter {
    font-size: 1rem;
  }
  .section-gradient::before {
    top: 0;
    height: 2%;
  }
  .section-gradient::after {
    top: -2%;
    height: 2%;
  }
  .cocktails-filter {
      top: -20px;
  }
}
@media (min-width: 769px) {
  .btn_filter {
    display: none !important;
  }
}

/* COCKTAILS */
.section-cocktails-recipe {
	background-image: url('../img/collection-bg-01.jpg') !important;
    background-repeat: repeat;
    background-size: contain;
    padding: 120px 0 145px;
    color: var(--color-gold-light);
    text-align: center;
}
.section-cocktails-recipe h2 {
	font-family: var(--font-science);
    font-size: clamp(1.5rem, 13vw, 7.813rem);
    line-height: clamp(1.5rem, 10vw, 5.25rem);
    margin-bottom: 30px;
}
.section-cocktails-recipe p {
	color: var(--color-black);
    font-size: clamp(1rem, 5vw, 1.375rem);
    line-height: clamp(1rem, 7vw, 1.875rem);
}
.section-cocktails-recipe .cocktails_grid {
	display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    row-gap: 60px;
    margin-top: 40px;
}
.section-cocktails-recipe .recipe_item {}
.section-cocktails-recipe .recipe_item .recipe_cocktail_image {}
.section-cocktails-recipe .recipe_item .item_content {
	position: relative;
    top: 0px;
    margin-top: 30px;
}
.section-cocktails-recipe .recipe_item .item_content h3 {
	font-family: var(--font-science);
    font-size: clamp(1.5rem, 2vw, 2.875rem);
    line-height: clamp(1.5rem, 2vw, 2.625rem);
    color: var(--color-black);
    margin-bottom: 20px;
}
.section-cocktails-recipe .recipe_item .item_content .cta.cta-dorado:hover {
	color: var(--color-black);
    border-color: var(--color-black);
}
.section-cocktails-recipe .recipe_item .presentation:hover {
    transform: scale(1.1);
}
.section-cocktails-recipe .cta-2 {
	margin: auto;
  margin-top: 60px;
}
.section-cocktails-recipe .cta-2:hover {
	border-color: var(--color-black);
}
.section-cocktails-recipe .cta-2:hover::before {
    inset: 0px;
    background-color: var(--color-black);
}

@media (max-width: 1199px) {
  .section-cocktails-recipe .cocktails_grid {
      grid-template-columns: 1fr 1fr 1fr;
  }
}
@media (max-width: 768px) {
	.section-cocktails-recipe .cocktails_grid {
	    grid-template-columns: 1fr 1fr;
	}
  .section-cocktails-recipe {
    padding: 0px 0 145px;
  }
}
@media (max-width: 575px) {
  .section-cocktails-recipe .cocktails_grid {
      grid-template-columns: 1fr;
      row-gap: 30px;
  }  
}

/* EXPLORE */
.section-explore {
	position: relative;
	text-align: center;
	padding: 240px 0;
	background-image: url('../img/collection-Cocktails-fondo.jpg');
	background-position: center top;
    background-size: cover;
    min-height: 956px;
}
.section-explore::before {
	    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: #B99468;
    background: linear-gradient(0deg, rgba(185, 148, 104, 1) 0%, rgba(185, 148, 104, 0) 100%);
}
.section-explore .explore_content {}
.section-explore h2 {
	font-family: var(--font-science);
    font-size: clamp(1.5rem, 17vw, 6.25rem);
    line-height: clamp(1.5rem, 13vw, 4.25rem);
    margin-bottom: 30px;
}
.section-explore p {
	font-size: 1.375rem;
    line-height: 1.875rem;
}
.section-explore .cta {
	margin: auto;
    color: var(--color-white);
    border-bottom: 2px solid #fff;
    margin-top: 30px;
}
.section-explore .image_float {
	position: absolute;
    z-index: 1;
}
.section-explore .image_float.image_01 {
	top: 100px;
    left: 10%;
}
.section-explore .image_float.image_02 {
	bottom: 300px;
    right: 10%;
}

/* COLLECTION MORE */
.section-cokstails-find {
	background-color: var(--color-gold-light);
	padding: 120px 0;
  position: relative;
}
.section-cokstails-find .sello {
  position: absolute;
    top: -76px;
    left: 50%;
    transform: translateX(-50%);
}
.cokstails-find_header {
  text-align: center;
    color: var(--color-black);
    max-width: 690px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 60px;
}
.cokstails-find_header .sub {
  font-family: var(--font-engravers-bold);
    font-size: clamp(1rem, 1vw, 1.125rem);
    line-height: clamp(1rem, 1vw, 1rem);
    letter-spacing: .10em;
    margin-bottom: 20px;
}
.cokstails-find_header .title {
  font-size: clamp(1.5rem, 8vw, 2.688rem);
    line-height: clamp(1.5rem, 10vw, 3.688rem);
}

.card_more {
	color: var(--color-black);
}
.card_more h4 {
	font-family: var(--font-science);
    font-size: clamp(1.5rem, 8vw, 2.875rem);
    line-height: clamp(1.5rem, 8vw, 2rem);
    margin-top: 30px;
    margin-bottom: 20px;
}
.card_more p {
	font-size: 1.375rem;
    line-height: 1.875rem;
    margin-bottom: 20px;
}
.card_more:last-child {
	position: relative;
    top: -65px;
}
.section-cokstails-find .card_more .image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel-cocktails.carousel {}
.carousel-cocktails.carousel .illustrator {
  display: block;
    margin: auto;
    margin-bottom: -22px;
}
.carousel-cocktails.carousel .wrapper-ctrl {
  display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 60px;
}
.carousel-cocktails.carousel .ctrl {
  position: relative;
  top: 0;
  translate: 0;
}
.carousel-cocktails.carousel .ctrl.prev {
  left: 0;
}
.carousel-cocktails.carousel .ctrl.next {
  right: 0;
}

@media (max-width: 768px) {
	.section-hero .box_text {
	    max-width: 88%;
	    margin-right: auto;
	    margin-left: auto;
	}
	.section-hero .box_text p {
	    font-size: 1.125rem;
	    line-height: 1.75rem;
	}
	.section-explore .image_float.image_01 {
	    top: 5%;
	    left: 10%;
	    width: 112px;
	}
	.section-explore .image_float.image_02 {
	    bottom: 20%;
	    right: 10%;
	    width: 112px;
	}
  .card_more:last-child {
	    top: 0;
	}
  .card_more h4 {
	    margin-top: 10px;
    	margin-bottom: 10px;
	}
	.card_more p {
	    font-size: 1rem;
	    line-height: 1.5rem;
	    margin-bottom: 10px;
	}
  .section-cokstails-find .sello {
      position: absolute;
      top: -50px;
      width: 100px;
  }
  .cokstails-find_header {
      margin-bottom: 40px;
  }
  .carousel-cocktails.carousel .illustrator {
      margin-bottom: 0;
  }
  .carousel-cocktails.carousel .wrapper-ctrl {
      margin-bottom: 40px;
  }
  .carousel.carousel-cocktails {
    display: flex;
    flex-direction: column;
  }
  .carousel-cocktails.carousel .illustrator {
      margin-bottom: 40px;
  }
  .carousel-cocktails.carousel .wrapper-ctrl {
      margin-top: 40px;
      margin-bottom: 0;
      order: 3;
  }
  .carousel-cocktails.carousel .ctrl {
      display: block;
  }
  .carousel-cocktails.carousel .card_more {}
  .section-cokstails-find {
      padding: 120px 0 40px;
  }
}

@media (max-width: 768px) {}
@media (min-width: 769px) {}

.main-blur.is-blurred {
filter: blur(3px) brightness(0.94);
pointer-events: none;
}

/* -- ========== PANEL FILTRO ========== */
/* ---------- Overlay behind the sheet (dims + catches taps) ---------- */
.scrim {
  position:fixed;
  inset:0;
  background:rgba(20,14,6,0.25);
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
  z-index:1009;
}
.scrim.is-active {
  opacity:1;
  pointer-events:auto;
}
/* ---------- Fixed filter panel ---------- */
.filter-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 480px;
  margin: 0 auto;
  background: var(--color-gold-dark);
  padding: 26px 20px 24px;
  transform: translateY(-100%);
  transition: transform .4s cubic-bezier(.32, .72, .24, 1);
  z-index: 1010;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, .25)
}
.filter-panel.is-active{
  transform:translateY(0);
}
.filter-panel .filter-head {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:22px;
}
.filter-panel .filter-head h6 {
  font-family: var(--font-engravers-bold);
  margin: 0;
  font-size: 0.875rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--color-white);
}
.filter-panel .close-btn {
  position:absolute;
  left:0;
  background:none;
  border:none;
  color:#fff;
  cursor:pointer;
  padding:0;
  line-height:0;
}
.filter-panel .close-btn svg{width:24px;height:24px;}
.filter-panel .accordion {
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-bottom:22px;
}
.filter-panel .facet {
  border: 1px solid var(--color-white);
  border-radius: 20px;
  transition: border-radius .25s ease;
  overflow: hidden;
}
.filter-panel .facet.is-open {}
.filter-panel .facet-trigger {
  font-family: var(--font-engravers-bold);
  font-size: 1.25rem;
  width: 100%;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 8px 22px;
  cursor: pointer;
  color: var(--color-white);
}
.filter-panel .facet-trigger .label{
  font-size: 1rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}
.filter-panel .facet-trigger .count{
  font-size:11px;
  background:rgba(255,255,255,.22);
  padding:2px 8px;
  border-radius:999px;
  letter-spacing:0;
  text-transform:none;
  font-weight:600;
}
.filter-panel .facet-trigger .chev{
  width:24px;height:24px;
  transition:transform .3s ease;
  flex-shrink:0;
}
.filter-panel .facet.is-open .facet-trigger .chev{
  transform:rotate(180deg);
}
.filter-panel .facet-panel {
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease;
}
.filter-panel .facet.is-open .facet-panel{
  max-height:276px;
}
.filter-panel .facet-options{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:0 20px 18px;
}
.filter-panel .opt{
  border: 1px solid var(--color-white);
  font-family: var(--font-engravers-bold);
  background: transparent;
  color: var(--color-white);
  font-size: 0.75rem;
  line-height: 1;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.filter-panel .opt.selected{
  background: var(--color-white);
  color: var(--color-gold-dark);
}
.filter-panel .clear-all{
  font-family: var(--font-engravers-bold);
  display: block;
  margin: 0 auto 30px;
  background: none;
  border: none;
  color: var(--color-white);
  font-size: 1rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 5px;
  cursor: pointer;
}
.filter-panel .apply-btn{
  width: 100%;
  font-family: var(--font-engravers-bold);
  background: var(--color-white);
  color: var(--color-gold-dark);
  border: none;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 1rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  cursor: pointer;
}
.filter-panel .apply-btn .n{
  opacity:.65;
  font-weight:600;
}
@media (min-width:480px){
  .filter-panel{ bottom:16px; border-radius:28px; }
}