@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url("https://use.typekit.net/xuz3kly.css");
/* CSS Document */

:root {
  --font-general: "Poppins", sans-serif;
  --font-show: "anisette-petite", sans-serif;
  --dark: #000;
  --light: #f8f3ec;
  --color-1: #a6613a;
  --color-2: #729a5b;
  --white: #fff;
  --shadow: 0 0 3rem rgba(0,0,0,0.2);
}

html {
  font-size: 10px; /* 1rem = 10px */
  box-sizing: border-box;
  scroll-behavior: smooth;
  font-optical-sizing: auto;
  font-style: normal;
}


*, *::before, *::after {
  box-sizing: inherit;
}

body {
  font-family: var(--font-general);
  margin: 0;
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background-color: var(--light);
}

body.no-scroll {
  overflow-x: hidden;
}

.container {
  width: 100%;
  margin: 0 auto;
  padding: 0 6rem;
}

/*-----------------
HEADER
------------------*/
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  padding: 2rem 6rem;
}

/* NAVBAR */
.navbar {
  transition: all 0.3s ease;
  background-color: #FFF;
  border-radius: 2rem;
  margin: 0 auto;
  width: 100%;
}
/* NAVBAR */
.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2rem 6rem;
  transition: all 0.3s ease;
}

/* LOGO */
.navbar .navbar-inner .logo {
  width: 20rem;
  transition: all 0.3s ease;
}
.navbar .navbar-inner .logo img {
  width: 100%;
  height: auto
}

/* EFECTO */
.header.scrolled .navbar {
  box-shadow: var(--shadow);
  width: 85%;
}
.header.scrolled .navbar .navbar-inner {
  padding: 1.6rem 3.6rem;
}
.header.scrolled  .navbar .navbar-inner .logo {
  width: 14rem;
}


/* NAV */
.nav {
  display: flex;
  align-items: center;
  gap: 3rem;
}

.nav-item {
font-size: 1.4rem;
text-decoration: none;
font-weight: 500;
letter-spacing: .1rem;
color: var(--dark);
outline: none;
}

.nav .btn-home, .mobile-home, .btn-menu {
  color: transparent;
  background-image: url("images/icon-home.svg?v=1.3");
  background-position: center center;
  background-size: 100% auto;
  background-repeat: no-repeat;
  width: 2rem;
  height: 2rem;
  transition: all 0.3s ease;
}
/* HOVER */
.nav .btn-home:hover {
  transform: scale(1.1);
}
.btn-menu {
  background-image: url("images/icon-menu.svg?v=1.3");
  border: none;
  background-color: transparent;
}

.whatsapp {
color: transparent;
  text-decoration: none;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  background-position: center center;
  background-size: 100% auto;
  background-repeat: no-repeat;
  width: 4rem;
  height: 4rem;
background-image: url("images/icon-whatsapp.svg");
}
.whatsapp:hover {
  transform: scale(1.2);
}

/* MOBILE ELEMENTS */
.menu-toggle {
  display: none;
}
.mobile-home {
  display: none;
}



/* SEARCH */

.search-btn, .icon-mobile-search {
  width: 2.6rem;
  height: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.search-btn img, .icon-mobile-search img {
  width: 2rem;
  height: auto;
  display: block;
}

.icon-mobile-search {
display: none;
}

/* LANGUAGE */

.lang-select {
  position: relative;
}

.lang-select select {
  appearance: none;
  -webkit-appearance: none;
  min-width: 7rem;
  height: 3rem;
  padding: 0 2rem 0 1rem;
  border: .1rem solid var(--dark);
  border-radius: .8rem;
  background: transparent;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .4rem;
  color: var(--dark);
  cursor: pointer;
  outline: none;
}

/* FLECHA */

.lang-select::after {
  content: "";
  position: absolute;
  right: 1rem;
  top: 50%;
  width: .8rem;
  height: .8rem;
  border-right: .18rem solid var(--dark);
  border-bottom: .18rem solid var(--dark);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}




/*-----------------
PRODUCTS DROPDOWN
------------------*/

.nav-dropdown {
  position: relative;
  outline: none;
}


/* PANEL */

.products-dropdown {
  position: absolute;
  top: calc(100% + 3rem);
  left: 50%;
  width: 80rem;
  padding: 3rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  background-color: var(--white);
  border-radius: 2rem;
  box-shadow: var(--shadow);
  transform:
    translateX(-50%)
    translateY(-1rem);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity .25s ease,
    transform .25s ease,
    visibility .25s ease;
  z-index: 9999;
}


/* ABIERTO */

.nav-dropdown.open .products-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform:
    translateX(-50%)
    translateY(0);
}


/* CATEGORIA */

.dropdown-category {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--dark);
  text-decoration: none;
  text-align: center;
}

/* IMAGE */

.dropdown-image {
  width: 100%;
  aspect-ratio: 1.2 / 1;
  overflow: hidden;
  border-radius: 1.5rem;
  margin-bottom: 1.5rem;
}

.dropdown-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}

.dropdown-category:hover .dropdown-image img {
  transform: scale(1.03);
}

/* TITLE */
.dropdown-category h3 {
  margin: 0 0 1rem;
  font-size: 2rem;
  line-height: 1;
  font-weight: 300;
  letter-spacing: .2rem;
  color: var(--dark);
  font-family: var(--font-show);
}

/* ICON */
.dropdown-icon {
  width: 2rem;
  height: auto;
  margin-bottom: 1rem;
}

/* TEXT */
.dropdown-category p {
  margin: 0;
  max-width: 20rem;
  font-size: 1.4rem;
  line-height: 1.8rem;
  font-weight: 300;
  color: var(--dark);
}

.products-dropdown::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 100%;
  width: 100%;
  height: 3rem;
}



/*-----------------
SIDE MENU
------------------*/

.side-menu {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  background: var(--light);
  z-index: 9999;
  transform: translateX(100%);
  transition: transform 0.35s ease;
}

/* ACTIVE */
.side-menu.active {
  transform: translateX(0);
}

/* INNER */
.side-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 4rem;
}

/* CLOSE */
.side-close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  width: 6rem;
  height: 6rem;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 3rem;
  line-height: 1;
  color: var(--dark);
}

/* TOP */
.side-top {
  margin-bottom: 6rem;
}

.side-top img {
  width: 18rem;
}

/* NAV */
.side-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.side-nav a {
  font-size: 2.4rem;
  line-height: 3rem;
  text-decoration: none;
  color: var(--dark);
  font-weight: 600;
}
.side-footer {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: 1.6rem;
  line-height: 2.4rem;
  color: var(--dark);
}
.side-footer-item {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.side-footer-item  .icon {
  width: 2.6rem;
}
.side-footer-item .value {
  color: var(--dark);
  font-weight: 500;
  font-size: 1.6rem;
}





/*-----------------
MAIN BANNER
------------------*/

.hero {
  display: flex;
  align-items: center;
  min-height: 100dvh;
  position: relative;
  background-color: var(--dark);
  z-index: 1;
}
.hero-int {
  min-height: 30vw;
  align-items: flex-end;
}
.hero-content {
  width: 50%;
  padding: 6rem;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-content h1 {
  font-size: 5rem;
  line-height: 5rem;
  font-weight: 300;
  font-family: var(--font-show);
  color: var(--light);
  margin: 0;
  margin-bottom: 2rem;
}
.hero-content p {
  font-size: 2rem;
  line-height: 3rem;
  font-weight: 400;
  color: var(--light);
  margin: 0;
  margin-bottom: 4rem;
}

.hero .img {
  width: 100%;
  height: 100%;
  position: absolute;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  z-index: 1;
  top: 0;
  left: 0;
}

.shadow {
background: var(--dark);
background: linear-gradient(
  270deg,
  color-mix(in srgb, var(--dark) 0%, transparent) 0%,
  var(--dark) 100%
);
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
 mix-blend-mode: multiply;
 opacity: .5;
}


/*-----------------
BTN  
------------------*/
.btn-primary {
  display: inline-flex;
  align-items: center;
  height: 5rem;
  padding: 0 2rem;
  border-radius: 9999rem;
  background-color: var(--white);
  color: var(--dark);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.2rem;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.3s ease;
}

/* HOVER */
.btn-primary:hover {
  transform: translateY(-.4rem);
}



/*-----------------
HOME - ABOUT
------------------*/

.intro {
  position: relative;
  z-index: 3;
  padding: 0;
  background-color: var(--dark);
  overflow: visible;
}

.intro::before, .intro::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 10rem;
  z-index: 1;
  background-repeat: repeat-x;
  background-size: auto 100%;
  pointer-events: none;
}

.intro::before {
  top: -10rem;
  background-image: url("images/texture-black-top.svg");
  background-position: left bottom;
}

.intro::after {
  bottom: -10rem;
  background-image: url("images/texture-black-bottom.svg");
  background-position: left top;
}

.split-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
/*  grid-template-columns: 1.25fr 1fr 1fr;*/
  gap: 6rem;
  width: 100%;
/*  max-width: 100rem;*/
}

/* COLUMNAS */
.about-box {
  display: flex;
  align-items: flex-start;
}

/* PRIMERA COLUMNA */
.intro .about-box h2 {
  margin: 0;
  font-size: 8rem;
  line-height: 7rem;
  font-weight: 300;
  color: var(--light);
  font-family: var(--font-show);
}

/* SEGUNDA Y TERCERA */

.intro .about-box h3 {
  margin: 0;
  font-size: 5rem;
  line-height: 4rem;
  font-weight: 300;
  color: var(--light);
  font-family: var(--font-show);
}




/*-----------------
PARTNERS
------------------*/

.partners {
    padding: 4rem 0 6rem;
}

.partners-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6rem;
}


/* CARD */

.partner-card {
    min-height: 40rem;
    display: flex;
    align-items: center;
    padding: 4rem;
    border-radius: 2rem;
    color: var(--white);
}

.partner-retailers {
    background-color: var(--color-2);
}

.partner-brands {
    background-color: var(--color-1);
}


/* CONTENT */

.partner-content {
    max-width: 34rem;
}

.partner-content h2 {
    margin: 0 0 3rem;
    font-size: 4rem;
    line-height: 3.6rem;
    font-weight: 300;
    letter-spacing: .4rem;
    color: var(--white);
}

.partner-content p {
    margin: 0 0 2.8rem;
    font-size: 1.45rem;
    line-height: 1.3;
    font-weight: 300;
    color: var(--white);
}


/* BUTTON */

.partner-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2rem;
    border-radius: 3rem;
    background: var(--white);
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: .2rem;
    color: var(--dark);
    text-decoration: none;
    transition:
        transform .3s ease,
        opacity .3s ease;
}

.partner-btn:hover {
    transform: translateY(-.2rem);
    opacity: .9;
}

.partner-retailers .partner-btn {
    color: var(--color-2);
}

.partner-brands .partner-btn {
    color: var(--color-1);
}


/*-----------------
BRANDS - HOME
------------------*/

.brands {
    padding: 6rem 0;
    padding-top: 0;
}

.brands-box {
    background: var(--white);
    border-radius: 2rem;
    padding: 6rem;
}

/* HEADER */

.brands-header {
    text-align: center;
    margin-bottom: 6rem;
}

.brands-header h2 {
    margin: 0;
    font-size: 4rem;
    font-weight: 300;
    letter-spacing: .4rem;
    color: var(--dark);
    font-family: var(--font-show);
}


/* LOGOS */

.brands-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    gap: 6rem;
}

.brand-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 10rem;
}

.brand-item img {
    display: block;
    width: 100%;
    max-width: 18rem;
    height: auto;
    object-fit: contain;
}




/*-----------------
BLOG - HOME
------------------*/

.news {
    position: relative;
    z-index: 4;
    padding: 6rem 0;
}


/* HEADER */

.news-header {
    text-align: center;
    margin-bottom: 6rem;
}
.news-header h2 {
    margin: 0 0 2rem;
    font-size: 4rem;
    font-weight: 300;
    letter-spacing: .4rem;
    color: var(--dark);
    font-family: var(--font-show);
}

.news-link {
    display: inline-flex;
    align-items: center;
    gap: 2rem;
    padding-bottom: .5rem;
    border-bottom: .1rem solid var(--dark);
    font-size: 1.2rem;
    letter-spacing: .1rem;
    color: var(--dark);
    text-decoration: none;
}
.news-link span {
    font-size: 2rem;
    line-height: 1;
    font-weight: 300;
}


/* GRID */

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4rem;
}


/* CARD */

.news-card {
    display: flex;
    flex-direction: column;
    padding: 1rem 1rem 2.2rem;
    background: var(--white);
    border-radius: 1.4rem;
    text-decoration: none;
    box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, .08);
    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.news-card:hover {
    transform: translateY(-.5rem);
    box-shadow: 0 1.6rem 3.5rem rgba(0, 0, 0, .12);
}


/* IMAGE */

.news-image {
    width: 100%;
    aspect-ratio: 1.2 / 1;
    overflow: hidden;
    border-radius: 2rem;
}

.news-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

.news-card:hover .news-image img {
    transform: scale(1.03);
}


/* CONTENT */

.news-content {
    padding: 1.5rem .6rem 0;
}

.news-content h3 {
    margin: 0;
    font-size: 1.8rem;
    line-height: 2.4rem;
    font-weight: 600;
    color: var(--dark);
}





/*-----------------
ANDINA SELECTION
------------------*/

.selection {
  padding: 5rem 0 6rem;
}

/* HEADER */

.selection-header {
  text-align: center;
  margin-bottom: 3rem;
}

.selection-header h2 {
  margin: 0 0 1rem;
  font-size: 4rem;
  line-height: 3.6rem;
  font-weight: 300;
  letter-spacing: .1em;
  color: var(--dark);
  font-family: var(--font-show);
}

.selection-header p {
  margin: 0;
  font-size: 1.6rem;
  line-height: 2.4rem;
  color: var(--dark);
}


/* FILTERS */

.selection-filters {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 4rem;
}

.filter-btn {
  min-width: 10rem;
  padding: .9rem 2rem;
  border: .12rem solid var(--dark);
  border-radius: 3rem;
  background: transparent;
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--dark);
  cursor: pointer;
  transition:
    background-color .3s ease,
    color .3s ease;
}

.filter-btn:hover, .filter-btn.active {
  background: var(--dark);
  color: #fff;
}


/* GRID */

.selection-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3rem;
}


/* CARD */

.product-card {
  background-color: var(--white);
  border-radius: 2rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  min-height: 40rem;
  box-shadow: none;
  transition: box-shadow .3s ease, transform .3s ease;
  text-decoration: none;
}

.product-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-.4rem);
}


/* IMAGE */

.product-image {
  height: 18rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
}

.product-image img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}


/* CONTENT */

.product-content {
  text-align: center;
}

.product-content h3 {
  margin: 0 0 1rem;
  font-size: 1.8rem;
  line-height: 2.4rem;
  font-weight: 600;
  color: var(--dark);
  text-transform: uppercase;
}

.product-content p {
  margin: 0 auto 1rem;
  font-size: 1.4rem;
  line-height: 1.8rem;
  color: var(--dark);
}

.product-content span {
  display: block;
  font-size: 1.2rem;
  color: var(--dark);
}


/* FOOTER CTA */

.selection-footer {
  display: flex;
  justify-content: center;
  margin-top: 3.5rem;
}

.selection-link {
  display: inline-flex;
  align-items: center;
  gap: 2rem;
  padding-bottom: .45rem;
  border-bottom: 1px solid var(--dark);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .4rem;
  color: var(--dark);
  text-decoration: none;
}

.selection-link span {
  font-size: 2rem;
  line-height: 1;
}




/*-----------------
PRODUCT CATEGORIES
------------------*/

.categories {
  padding: 6rem 0;
  padding-top: 16rem;
}

/* HEADER */

.categories-header {
  text-align: center;
  margin-bottom: 6rem;
}

.categories-header h2 {
  margin: 0;
  font-size: 4rem;
  line-height: 4rem;
  font-weight: 300;
  letter-spacing: .4rem;
  color: var(--dark);
  font-family: var(--font-show);
}


/* GRID */

.categories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem;
}


/* ITEM */

.category-item {
  text-align: center;
  text-decoration: none;
}


/* IMAGE */

.category-image {
  width: 100%;
  aspect-ratio: 1.2 / 1;
  overflow: hidden;
  border-radius: 2rem;
  margin-bottom: 2rem;
  background-color: var(--dark);
}

.category-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .4s ease;
}

.category-item:hover .category-image img {
  transform: scale(1.03);
}

/* TITLE */
.category-item h3 {
  margin: 0 0 2rem;
  font-size: 3rem;
  line-height: 1;
  font-weight: 300;
  letter-spacing: .4rem;
  color: var(--dark);
  font-family: var(--font-show);
}

/* ICON */
.category-icon {
  display: block;
  width: 3rem;
  height: auto;
  margin: 0 auto 1.5rem;
}


/* TEXT */
.category-item p {
  max-width: 26rem;
  margin: 0 auto;
  font-size: 1.6rem;
  line-height: 2rem;
  font-weight: 300;
  color: var(--dark);
}



/*-----------------
PATTERN STRIP
------------------*/

.pattern-strip {
  width: 100%;
  height: 12rem;
  background-image: url("images/texture-white.svg");
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 8rem;
}



/*-----------------
INTERIOR
------------------*/

.interior {
    padding-top: 20rem;
    padding-bottom: 6rem;
    background-image: url("images/pattern.svg");
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100% auto;
}

/* HEADER */
.interior-header {
  text-align: center;
  max-width: 80rem;
  margin: 0 auto 3rem;
}

.interior-header h2 {
  margin: 0 0 1rem;
  font-size: 4rem;
  line-height: 5rem;
  font-weight: 300;
  letter-spacing: .4rem;
  color: var(--dark);
  font-family: var(--font-show);
}

.interior-header p {
  margin: 0;
  font-size: 1.6rem;
  line-height: 2.4rem;
  color: var(--dark);
}


/*-----------------
SELL CTA
------------------*/

.sell-cta {
  padding: 5rem 0;
}

.sell-cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}


/* ICONS */

.sell-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4rem;
  margin-bottom: 4rem;
}

.sell-icons img {
  width: 4rem;
  height: auto;
  display: block;
}


/* TITLE */

.sell-cta h2 {
  margin: 0 0 4rem;
  font-size: 4rem;
  line-height: 4rem;
  font-weight: 300;
  letter-spacing: .4rem;
  color: var(--dark);
  font-family: var(--font-show);
}


/* BUTTON */

.sell-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  background-color: var(--dark);
  border-radius: 3rem;
  color: var(--white);
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: .4rem;
  transition:
    transform .3s ease,
    opacity .3s ease;
}

.sell-btn:hover {
  transform: translateY(-.2rem);
  opacity: .85;
}




/*-----------------
PRODUCTS FILTER
------------------*/

.product-filters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
  margin-bottom: 4rem;
}

/* SELECT */

.filter-select {
  position: relative;
}

.filter-select select {
  width: 100%;
  height: 3.5rem;
  padding: 0 3.5rem 0 2rem;
  border: 0;
  border-radius: 3rem;
  background-color: var(--white);
  color: var(--dark);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .1em;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  outline: none;
}


/* FLECHA */

.filter-select::after {
  content: "";
  position: absolute;
  right: 1.6rem;
  top: 50%;
  width: .7rem;
  height: .7rem;
  border-right: .15rem solid var(--dark);
  border-bottom: .15rem solid var(--dark);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}




/*-----------------
PRODUCT DETAIL
------------------*/

.product-detail {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 6rem;
  align-items: stretch;
}

/* IMAGE */

.product-detail-image {
  min-height: 40rem;
  background-color: var(--white);
  border-radius: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem;
}

.product-detail-image img {
  display: block;
  max-width: 75%;
  max-height: 32rem;
  width: auto;
  height: auto;
  object-fit: contain;
}


/* INFO */

.product-detail-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.product-detail-info h1 {
  margin: 0 0 4rem;
  font-size: 4rem;
  line-height: 1;
  font-weight: 300;
  letter-spacing: .4rem;
  color: var(--dark);
}
.product-detail-description {
  max-width: 60rem;
  margin: 0;
  font-size: 1.6rem;
  line-height: 2.4rem;
  font-weight: 300;
  color: var(--dark);
}


/* SPECS */

.product-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 2rem;
  width: 100%;
  margin-top: auto;
  padding: 1.6rem 0;
  border-top: .1rem solid var(--dark);
  border-bottom: .1rem solid var(--dark);
}
.product-spec span {
  display: block;
  margin-bottom: .4rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .2rem;
  color: var(--dark);
}
.product-spec p {
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.8rem;
  font-weight: 400;
  color: var(--dark);
}




/*-----------------
PRODUCT STORY
------------------*/

.product-story {
  padding: 6rem 0;
}

.product-story-inner {
  width: 100%;
  max-width: 90rem;
  margin: 0 auto;
}

.product-story-inner h3 {
  margin: 4rem 0;
  font-size: 2rem;
  line-height: 2.6rem;
  font-weight: 500;
  letter-spacing: .4rem;
  color: var(--dark);
}


.product-story-inner p {
  margin: 0 0 2rem;
  font-size: 1.6rem;
  line-height: 2.4rem;
  font-weight: 300;
  color: var(--dark);
}





/*-----------------
ANDINA PARTNERS
------------------*/


.partners-info {
  width: 100%;
  max-width: 90rem;
  margin: 0 auto;
  text-align: center;
  margin-bottom: 4rem;
}
.partners-info h3 {
  margin: 0;
  margin-bottom: 2rem;
  font-size: 3rem;
  line-height: 2.6rem;
  font-weight: 300;
  letter-spacing: .4rem;
  font-family: var(--font-show);
}
.partners-info h3.retailers-color {
  color: var(--color-2);
}
.partners-info h3.brands-color {
  color: var(--color-1);
}
.partners-info h2 {
  margin: 0;
  margin-bottom: 3rem;
  font-size: 4rem;
  line-height: 4rem;
  font-weight: 300;
  letter-spacing: .4rem;
  color: var(--dark);
  font-family: var(--font-show);
}
.partners-info p {
  margin: 0;
  margin-bottom: 2rem;
  font-size: 1.6rem;
  line-height: 2.4rem;
  font-weight: 300;
  color: var(--dark);
}

.partners-andina {
  width: 100%;
  max-width: 90rem;
  margin: 0 auto;
  text-align: center;
  background-color: var(--white);
  border-radius: 2rem;
  padding: 4rem;
}
.partners-andina h2 {
  margin: 0;
  margin-bottom: 4rem;
  font-size: 3rem;
  line-height: 3.6rem;
  font-weight: 300;
  letter-spacing: .4rem;
  color: var(--dark);
}

.partners-andina-box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.partners-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.partners-item img {
  width: 2rem;
  height: auto;
  margin-bottom: 1rem;
}
.partners-item span {
  font-size:1.6rem;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--dark);
}

.partners-item a {
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 300;
  color: var(--dark);
  text-decoration: none;
}




.slogan {
  width: 100%;
  text-align: center;
}

.slogan h1 {
  margin: 12rem 0 6rem 0;
  font-size: 5rem;
  line-height: 5rem;
  font-weight: 300;
  letter-spacing: .4rem;
  font-family: var(--font-show);
  text-transform: uppercase;
}





/*-----------------
CTA
------------------*/

.cta {
    position: relative;
    z-index: 6;
    min-height: 30rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: var(--color-1);
    background-image: url("images/img-cta.jpg");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: visible;
}
.cta::after {
    position: absolute;
    z-index: 1;
    inset:0;
    opacity: .25;
    background-color: var(--dark);
    content: "";
}

.cta h2 {
    margin:0;
    font-size:5rem;
    line-height: 5rem;
    font-weight:400;
    color:var(--light);
    font-family: var(--font-show);
    text-transform: uppercase;
    position: relative;
    z-index: 2;
}

/*-----------------
FOOTER
------------------*/

.footer {
    position: relative;
    z-index: 1;
    background-color: var(--dark);
    color: var(--light);
    overflow: hidden;
    padding-top: 4rem;
}

/* TOP */
.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 4rem;
}

/* LEFT */
.footer-left {
    display: flex;
    align-items: flex-start;
    gap: 10rem;
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-left: 5rem;
    position: relative;
}
.footer-col::before {
    content: "";
    position: absolute;
    top: 1rem;
    left: 0;
    background-image: var(--icon);
    background-size: 100% auto;
    background-position: center;
    transform: rotate(90deg);
    transform-origin: center;
    background-repeat: no-repeat;
    z-index: 0;
    width: 4rem;
    height: 2rem;
}
.icon-1 {
    --icon: url("images/icon-green.svg");
}

.icon-2 {
    --icon: url("images/icon-yellow.svg");
}

.icon-3 {
    --icon: url("images/icon-blue.svg");
}

.footer-col-logo {
    padding-top: .2rem;
}

.footer-col-logo img {
    width: 16rem;
    height: auto;
    display: block;
}

.footer-col strong {
    margin-bottom: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--light);
    font-family: var(--font-show);
    font-size: 1.6rem;
    letter-spacing: .2rem;
}

.footer-col a {
    font-size: 1.2rem;
    line-height: 1.6rem;
    color: var(--light);
    text-decoration: none;
    transition: opacity .25s ease;
}

.footer-col a:hover {
    opacity: .65;
}


/* RIGHT */
.footer-right {
    margin-left: auto;
}

.footer-right a {
    color: var(--light);
    text-decoration: none;
    font-size: 2.4rem;
    font-weight: 300;
    white-space: nowrap;
    font-family: var(--font-show);
}


/* TEXTURE */
.footer-texture {
    width: 100%;
    margin-top: 6rem;
    line-height: 0;
    padding: 0 6rem;
}

.footer-texture img {
    display: block;
    width: 100%;
    height: auto;
}

/* SOCIAL */
.footer-social {
  display: flex;
  gap: 3rem;
  justify-content: flex-end;
  margin-top: 3rem;
}

.footer-social .redes {
  color: transparent;
  text-decoration: none;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  background-position: center center;
  background-size: 75% auto;
  background-repeat: no-repeat;
}
.footer-social .redes:hover {
  transform: scale(1.2);
  background-color: white;
}

.linkedin {
background-image: url("images/icon-linkedin-white.svg");
}
.linkedin:hover {
background-image: url("images/icon-linkedin.svg");
}


.woohustudio {
  color: transparent !important;
  text-decoration: none;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  background-position: center center;
  background-size: 100% auto;
  background-repeat: no-repeat;
  width: 5rem;
  height: 5rem;
  background-image: url("images/credito-woohustudio.svg");
}



/*-----------------
SEARCH PANEL
------------------*/

.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.08);
  backdrop-filter: blur(.4rem);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: opacity .3s ease, visibility .3s ease;
  z-index: 998;
}

.search-panel {
  position: absolute;
  top: calc(100% + 1.5rem);
  left: 50%;
  transform: translateX(-50%) translateY(-1rem);

  width: calc(100% - 12rem);
  max-width: 120rem;

  background: var(--white);
  border-radius: 2rem;
  box-shadow: var(--shadow);

  padding: 2rem;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity .3s ease,
    transform .3s ease,
    visibility .3s ease;

  z-index: 999;
}


/* OPEN STATE */

.header.search-open .search-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.header.search-open .search-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}


/* FORM */

.search-form {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}


/* INPUT WRAP */

.search-field {
  flex: 1;

  display: flex;
  align-items: center;
  gap: 1.2rem;

  height: 5.6rem;
  padding: 0 1.8rem;

  background: var(--light);
  border: .1rem solid rgba(0,0,0,.08);
  border-radius: 999rem;
}

.search-field img {
  width: 2rem;
  height: auto;
  display: block;
  flex-shrink: 0;
}

.search-input {
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;

  font-family: var(--font-general);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--dark);
}

.search-input::placeholder {
  color: rgba(0,0,0,.45);
}


/* BUTTON */

.search-submit {
  height: 5.6rem;
  padding: 0 2.4rem;

  border: 0;
  border-radius: 999rem;

  background: var(--dark);
  color: var(--white);

  font-family: var(--font-general);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: .2rem;

  cursor: pointer;
  transition: transform .3s ease, opacity .3s ease;
}

.search-submit:hover {
  transform: translateY(-.2rem);
  opacity: .9;
}





/*-----------------
FILTERS
------------------*/

.filter-multi,
.filter-panel-wrapper {
  position: relative;
}


/* BUTTONS */

.filter-multi-toggle,
.filter-panel-toggle {
  width: 100%;
  height: 3.5rem;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 2rem;

  border: 0;
  border-radius: 3rem;

  background-color: var(--white);

  font-family: var(--font-general);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .1em;

  color: var(--dark);

  cursor: pointer;
}


/* ARROW */

.filter-arrow {
  width: .7rem;
  height: .7rem;

  border-right: .15rem solid var(--dark);
  border-bottom: .15rem solid var(--dark);

  transform: rotate(45deg);
  transition: transform .3s ease;
}

.filter-multi.open .filter-arrow,
.filter-panel-wrapper.open .filter-arrow {
  transform: rotate(-135deg);
}


/* SIMPLE TYPE DROPDOWN */

.filter-dropdown {
  position: absolute;

  top: calc(100% + 1rem);
  left: 0;

  width: 100%;

  display: flex;
  flex-direction: column;
  gap: 1rem;

  padding: 1.5rem;

  background-color: var(--white);
  border-radius: 1.5rem;

  box-shadow: var(--shadow);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: translateY(-.5rem);

  transition:
    opacity .25s ease,
    transform .25s ease,
    visibility .25s ease;

  z-index: 30;
}

.filter-multi.open .filter-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transform: translateY(0);
}


/* LARGE FILTER PANEL */

.filter-panel {
  position: absolute;

  top: calc(100% + 1rem);
  left: 50%;

  width: 60rem;
  max-width: calc(100vw - 4rem);

  padding: 2.5rem;

  background-color: var(--white);
  border-radius: 2rem;

  box-shadow: var(--shadow);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform:
    translateX(-50%)
    translateY(-.5rem);

  transition:
    opacity .25s ease,
    transform .25s ease,
    visibility .25s ease;

  z-index: 40;
}

.filter-panel-wrapper.open .filter-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transform:
    translateX(-50%)
    translateY(0);
}


/* FILTER COLUMNS */

.filter-panel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.filter-group h4 {
  margin: 0 0 .8rem;

  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: .15em;

  color: var(--dark);
}


/* CHECKBOX ROW */

.filter-group label,
.filter-dropdown label {
  display: flex;
  align-items: center;
  gap: 1rem;

  font-size: 1.2rem;

  color: var(--dark);

  cursor: pointer;
}

.filter-group input,
.filter-dropdown input {
  width: 1.6rem;
  height: 1.6rem;

  accent-color: var(--dark);

  cursor: pointer;
}


/* ACTIONS */

.filter-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;

  margin-top: 2.5rem;
  padding-top: 2rem;

  border-top: .1rem solid rgba(0,0,0,.12);
}

.filter-clear,
.filter-apply {
  height: 3.8rem;
  padding: 0 1.8rem;

  border-radius: 3rem;

  font-family: var(--font-general);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .1em;

  cursor: pointer;
}

.filter-clear {
  border: .1rem solid var(--dark);
  background: transparent;
  color: var(--dark);
}

.filter-apply {
  border: 0;
  background: var(--dark);
  color: var(--white);
}



/*-----------------
ARTICLE DETAIL
------------------*/

.article-detail {
  width: 100%;
  max-width: 90rem;
  margin: 0 auto;
}


/* HEADER */

.article-header {
  text-align: center;
  margin-bottom: 6rem;
}

.article-header h1 {
  margin: 0;

  font-size: 5rem;
  line-height: 5.5rem;
  font-weight: 300;
  letter-spacing: .3rem;

  color: var(--dark);
  font-family: var(--font-show);
}


/* CONTENT */

.article-content {
  width: 100%;
  max-width: 75rem;
  margin: 0 auto;
}

.article-content p {
  margin: 0 0 2.5rem;

  font-size: 1.6rem;
  line-height: 2.6rem;
  font-weight: 300;

  color: var(--dark);
}

.article-content h2 {
  margin: 5rem 0 2rem;

  font-size: 2.8rem;
  line-height: 3.2rem;
  font-weight: 400;
  letter-spacing: .2rem;

  color: var(--dark);
  font-family: var(--font-show);
}

.article-content h3 {
  margin: 4rem 0 1.5rem;

  font-size: 2rem;
  line-height: 2.6rem;
  font-weight: 500;

  color: var(--dark);
}

.article-content ul,
.article-content ol {
  margin: 0 0 2.5rem;
  padding-left: 2rem;

  font-size: 1.6rem;
  line-height: 2.6rem;

  color: var(--dark);
}

.article-content img {
  display: block;
  width: 100%;
  height: auto;

  margin: 4rem 0;

  border-radius: 2rem;
}