@import url(./footer.css);

/* INDEX */
:root {
  --size16-: min(16px, 4vw);
  --size36-7: min(36px, 7vw);
  --size48-6: min(48px, 6vw);
  --size64-12: min(64px, 12vw);
  --size80-15: min(80px, 15vw);

  --logo-pd: min(10px, 1.3vw);
  --logo-size: min(130px, 20vw);
}

h4 { font-weight: 700 }
main { gap: var(--size64-12) }
.await { pointer-events: none }

.banner {
  cursor: pointer;
  padding: 0 !important
}

.shop-cart {
  z-index: 1;
  display: flex;
  position: absolute;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-paper)
}

.shop-cart .btn-cart.btn {
  padding: 0;
  border: none;
  display: flex;
  cursor: pointer;
  border-radius: 50%;
  align-items: center;
  color: var(--secondary);
  justify-content: center;
  box-shadow: var(--box-shadow);
  transition: var(--transition);
  background-color: var(--bg-paper)
}

.shop-cart .btn-cart.btn:disabled {
  cursor: auto;
  pointer-events: none;
  box-shadow: var(--disabled-shadow)
}

.shop-cart .btn-cart.btn:disabled underline {
  text-shadow: none;
  color: var(--secondary);
  font-size: var(--size20-5)
}

.shop-cart .btn-cart i {
  pointer-events: none;
  color: var(--secondary)
}

.more {
  grid-row: 3;
  display: flex;
  grid-column: 4;
  cursor: pointer;
  align-self: center;
  justify-self: flex-end;
  justify-content: center
}

.more i {
  z-index: 3;
  color: var(--secondary);
  border-radius: 50% 50% 0 50%;
  background-color: var(--bg-paper)
}

.more .more-info {
  z-index: 2;
  display: flex;
  position: absolute;
  gap: var(--size48-6);
  flex-direction: column;
  box-sizing: border-box;
  justify-content: center;
  padding: var(--size16-5);
  color: var(--text-primary);
  backdrop-filter: blur(8px);
  transition: var(--transition);
  border-radius: var(--size16-5);
  -webkit-backdrop-filter: blur(8px);
  text-shadow: 0 0 2px var(--bg-default);
  background-color: var(--blur-secondary)
}

.more .more-info p span { font-weight: 700 }

.more .more-info .title {
  gap: 10px;
  width: 100%;
  display: flex;
  text-align: center;
  align-items: center;
  flex-direction: column
}

.more .more-info .title .name { font-size: var(--size24-5) }
.more .more-info .title .slogan { font-size: var(--size16-3-74) }

.more .more-info .content-data {
  display: flex;
  gap: var(--size24-5);
  flex-direction: column;
}

.more .more-info .content-data .data {
  gap: 8px;
  display: flex;
}

.more .more-info .content-data .data span { font-size: var(--size48-6) }

.more .more-info .content-data .data .data-info {
  gap: 8px;
  height: 100%;
  display: flex;
  text-align: justify;
  flex-direction: column;
  font-size: var(--size16-3-74)
}

.more .more-info .indicative-age {
  width: 100%;
  font-size: var(--size16-3-74)
}

.more.active i { font-variation-settings: 'FILL' 1 }

.play {
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 90;
  width: 100%;
  height: 100vh;
  display: none;
  position: fixed;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  background-color: var(--bg-footer)
}

.play .container {
  position: relative;
  padding: var(--size30-6);
  background-color: var(--bg-default)
}

.play .container .close {
  opacity: 1;
  display: flex;
  cursor: pointer;
  position: absolute;
  border-radius: 50%;
  align-items: center;
  color: var(--bg-paper);
  justify-content: center;
  width: var(--size40-10);
  height: var(--size40-10);
  font-size: var(--size24-3);
  transition: var(--transition);
  top: calc(var(--size30-6) / 3);
  right: calc(var(--size30-6) / 3);
  background-color: var(--bg-footer)
}

.play.active {
  opacity: 1;
  display: flex;
  transition: var(--transition)
}

.networks-product {
  gap: 12px;
  width: 100%;
  display: flex;
  align-items: center;
  grid-column: span 4;
  justify-self: flex-end;
  justify-content: flex-end;
}

.networks-product a {
  z-index: 0;
  height: 100%;
  display: flex;
  border: none;
  outline: none;
  cursor: pointer;
  text-align: center;
  border-radius: 50%;
  align-items: center;
  color: var(--bg-paper);
  justify-content: center;
  transition: var(--transition);
  background-color: var(--secondary);
  box-shadow: 2px 2px 8px var(--shadow)
}

.networks {
  gap: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: min(35px, 5.75vw);
  color: var(--text-primary)
}

.networks a.btn {
  padding: 0;
  display: flex;
  cursor: pointer;
  text-align: center;
  border-radius: 50%;
  font-size: var(--size16-3);
  background-color: var(--secondary)
}

.voucher {
  top: 0;
  z-index: 10;
  display: flex;
  min-width: 100%;
  min-height: 100%;
  position: fixed;
  transform: scale(0);
  align-items: center;
  color: var(--bg-paper);
  justify-content: center;
  backdrop-filter: blur(8px);
  transition: var(--transition);
  -webkit-backdrop-filter: blur(8px);
  background-color: var(--bg-footer)
}

.voucher.active { transform: scale(1) }

.voucher .description {
  width: min(570px, 100%);
  border-radius: var(--size16-3);
  background-color: var(--bg-default)
}

.voucher .description .info {
  display: flex;
  flex-direction: column
}

.voucher .description .info .close {
  padding: 16px;
  cursor: pointer;
  align-self: flex-end
}

.voucher .description .info .banner {
  width: 100%;
  height: 256px
}

.voucher .description .info .content {
  width: 100%;
  box-sizing: border-box;
  padding: 16px 0 16px 16px;
}

.voucher .description .info .content .title {
  gap: 4px;
  width: 100%;
  display: flex;
  margin-top: 32px;
  flex-direction: column
}

.voucher .description .info .content .title .divider {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr)
}

.voucher .description .info .content .title .divider div:first-child,
.voucher .description .info .content .title .divider .div:last-child { height: 5px }

.voucher .description .info .content .title .divider div:first-child {
  grid-column: span 2;
  background-color: var(--ternary)
}

.voucher .description .info .content .title .divider div:last-child {
  grid-column: span 10;
  background-color: var(--secondary)
}

.voucher .description .info .content .place {
  gap: 16px;
  padding: 16px;
  display: flex;
  margin-top: 16px;
  box-sizing: border-box;
  flex-direction: column;
  width: calc(100% - 16px);
  color: var(--text-secondary);
  border-radius: var(--size16-3);
  background-color: var(--bg-paper)
}

.voucher .description .info .content .place .stages {
  gap: 16px;
  width: 100%;
  display: flex;
  box-sizing: border-box;
  color: var(--text-secondary);
  border-radius: var(--size16-3);
  background-color: var(--bg-paper)
}

.voucher .description .info .content .place .stages .stage {
  gap: 16px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  /* flex-direction: column; */
  justify-content: center
}

.voucher .description .info .content .place .stages .stage .btn-action {
  width: 100%;
  color: var(--bg-paper);
  background-color: var(--secondary);
  box-shadow: var(--shadow0010-secondary)
}

.voucher .description .info .content .place .stages .stage .btn-action:nth-child(2) {
  color: var(--secondary);
  background-color: var(--bg-paper);
  border: 1px solid var(--secondary)
}

.hero {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  justify-content: center;
  transition: var(--transition);
  padding: 64px 0 var(--size15-4);
  background: var(--bg-default) center no-repeat;
  background-size: cover
}

.hero .container {
  padding: 0;
  height: 100%;
  overflow: hidden;
  align-items: center;
  flex-direction: column;
  background-size: contain;
  justify-content: flex-end;
  background-position: center;
  background-repeat: no-repeat;
  transition: var(--transition)
}

.hero .container .search {
  top: -2%;
  width: 250px;
  display: flex;
  position: relative;
  align-items: center;
  padding-right: 10px;
  align-self: flex-end;
  color: var(--disabled);
  box-sizing: border-box
}

.hero .container .search input {
  left: 100%;
  width: 230px;
  border: none;
  height: 40px;
  outline: none;
  padding: 0 10px;
  position: absolute;
  pointer-events: none;
  color: var(--bg-paper);
  box-sizing: border-box;
  border-bottom: 1px solid;
  transition: var(--transition);
  background-color: transparent
}

.hero .container .search input.active {
  left: 0;
  pointer-events: all
}

.hero .container .search .btn {
  right: 10px;
  padding: 8px;
  position: absolute;
  background-color: transparent
}

.hero .container .swipe {
  width: 100%;
  display: flex;
  min-height: 372px;
  /* min-height: 470px; */
  max-height: 744px;
  position: relative;
  justify-content: center;
  height: calc(70% + ((var(--logo-size)) / 2))
}

.hero .container .swipe .logo {
  z-index: 2;
  display: flex;
  border-radius: 50%;
  position: absolute;
  align-items: center;
  align-self: flex-start;
  box-sizing: border-box;
  padding: var(--logo-pd);
  justify-content: center;
  width: var(--logo-size);
  height: var(--logo-size);
  background-color: #000;
  backdrop-filter: blur(8px);
  transform: translateY(-50%);
  -webkit-backdrop-filter: blur(8px)
}

.hero .container .list {
  width: 100%;
  cursor: grab;
  height: 100%;
  display: flex;
  position: relative;
  justify-content: center
}

.hero .container .list li {
  left: 50%;
  height: 100%;
  cursor: grab;
  display: none;
  position: absolute;
  list-style-type: none;
  width: min(480px, 75vw);
  background: var(--bg-paper);
  border-radius: var(--size16-3);
  transition: transform 1s, opacity 1s;
  margin-left: calc((min(480px, 75vw) / 2) * -1)
}

.hero .container .list li .content {
  width: 100%;
  height: 100%;
  display: grid;
  position: relative;
  align-items: center;
  grid-template-rows: 82% 1fr;
  border-radius: var(--size16-5)
}

.hero .container .list li .content .banner {
  width: 100%;
  grid-row: 1;
  height: 100%;
  display: flex;
  overflow: hidden;
  position: relative;
  background-size: cover;
  justify-content: center;
  border-radius: var(--size16-3);
  background: center no-repeat;
  background-size: cover
}

.hero .container .list li .content .banner.disabled { pointer-events: none }

.hero .container .list li .content .banner .icons {
  right: -72px;
  display: flex;
  transition: .75s;
  position: absolute;
  width: max-content;
  height: max-content;
  align-items: center;
  top: calc(50% - 90px);
  box-sizing: border-box;
  transition: var(--transition)
}

.hero .container .list li .content .banner .icons.active { right: 0 }
.hero .container .list li .content .banner .icons.disabled { display: none }

.hero .container .list li .content .banner .icons i,
.hero .container .list li .content .banner .icons .open {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-size: var(--size24-3);
  transition: var(--transition)
}

.hero .container .list li .content .banner .icons i {
  padding: 4px 8px;
  border-radius: 50%;
  color: var(--bg-paper)
}

.hero .container .list li .content .banner .icons .open {
  width: 36px;
  height: 100px;
  backdrop-filter: blur(8px);
  border-radius: 40px 0 0 40px;
  -webkit-backdrop-filter: blur(8px);
  background-color: var(--blur-paper)
}

.hero .container .list li .content .banner .icons .open i { pointer-events: none }
.hero .container .list li .content .banner .icons .open.active i { transform: rotateZ(180deg) }

.hero .container .list li .content .banner .icons .icon-list {
  gap: 32px;
  display: flex;
  padding: 32px 16px;
  height: max-content;
  align-items: center;
  flex-direction: column;
  backdrop-filter: blur(8px);
  border-radius: 16px 0 0 16px;
  justify-content: space-between;
  -webkit-backdrop-filter: blur(8px);
  background-color: var(--blur-paper)
}

.hero .container .list li .content .banner .icons .icon-list .ico.btn {
  padding: 0;
  display: flex;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  width: var(--size40-10);
  height: var(--size40-10);
  background-color: var(--bg-paper)
}

.hero .container .list li .content .banner .icons .icon-list .ico i,
.hero .container .list li .content .banner .icons .icon-list .ico a {
  padding: 0;
  font-size: 32px;
  pointer-events: none;
  color: var(--secondary);
  transition: var(--transition)
}

.hero .container .list li .content .banner .icons .icon-list .ico.active i { font-variation-settings: 'FILL' 1 }

.hero .container .list li .content .banner .icons .icon-list .ico img {
  width: 36px;
  height: 36px;
}

.hero .container .list li .content .banner .icons .icon-list .ico.disabled a {
  cursor: auto;
  color: var(--disabled)
}

.hero .container .list li .content .shop-cart {
  grid-row: 1;
  left: var(--size24-3);
  width: var(--size80-15);
  height: var(--size80-15);
  top: calc(82% - ((var(--size80-15)) / 2));
  /* box-shadow: inset 0 -2px 8px var(--bg-card) */
}

.hero .container .list li .content .shop-cart .btn-cart {
  width: var(--size64-12);
  height: var(--size64-12)
}

.hero .container .list li .content .shop-cart .btn-cart i { font-size: var(--size36-7) }
.hero .container .list li .content .shop-cart .active i { color: var(--bg-paper) }

.hero .container .list li .content .shop-cart .btn-cart:disabled underline {
  text-shadow: none;
  color: var(--secondary);
  font-size: var(--size30-6)
}

.hero .container .list li .content .end-slide {
  width: 100%;
  grid-row: 2;
  height: 100%;
  display: grid;
  align-self: flex-end;
  box-sizing: border-box;
  align-content: flex-end;
  justify-items: flex-end;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(4, 1fr);
  padding: var(--size24-1-2) var(--size16-3);
}

.hero .container .list li .content .end-slide .networks-product {
  grid-row: 1;
  grid-column: span 3
}

.hero .container .list li .content .end-slide .networks-product .networks a.btn {
  width: var(--size32-5-75);
  height: var(--size32-5-75)
}

.hero .container .list li .networks-product .product-btn {
  max-height: 40px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 8px;
  pointer-events: none;
  box-sizing: border-box;
  font-size: var(--size16-3-74)
}

.hero .container .list li.act .networks-product .product-btn {
  cursor: pointer;
  pointer-events: all
}

.hero .container .list li .content .end-slide .sponsored {
  order: 1;
  width: 100%;
  grid-row: 1;
  text-align: left;
  grid-column: 1;
  align-self: flex-end;
  height: min(14px, 3vw);
  color: var(--secondary);
  font-size: min(14px, 3vw)
}

.hero .container .list li .content .end-slide .rating {
  grid-row: 2;
  height: 100%;
  display: flex;
  grid-column: 1;
  font-size: 20px;
  align-items: center;
  flex-direction: row-reverse;
  justify-content: space-between
}

.hero .container .list li .content .end-slide .rating i {
  cursor: pointer;
  color: var(--secondary);
  font-size: var(--size24-5);
  transition: var(--transition)
}

.hero .container .list li .content .end-slide .more { grid-row: 2 }

.hero .container .list li .content .end-slide .more .more-info {
  width: 80%;
  left: var(--size24-3);
  bottom: var(--size24-3);
  height: min(485px, 55vh);
  transform: translate(62.75%, 49%) scale(0)
}

.hero .container .list li .content .end-slide .rating .active { font-variation-settings: 'FILL' 1 }
.hero .container .list li .content .end-slide .more.active .more-info { transform: translate(7%, -1%) scale(1) }

.hero .container .list .hide,
.hero .container .list .prev,
.hero .container .list .act,
.hero .container .list .next,
.hero .container .list .new-next { display: flex }

.hero .container .list .hide,
.hero .container .list .prev,
.hero .container .list .next,
.hero .container .list .new-next { opacity: .85 }

.hero .container .list .act {
  opacity: 1;
  z-index: 1
}

.hero .container .list .prev .banner,
.hero .container .list .next .banner { cursor: pointer }

.hero .container .list .prev .shop-cart .btn,
.hero .container .list .next .shop-cart .btn,
.hero .container .list .prev .end-slide .networks .btn,
.hero .container .list .next .end-slide .networks .btn { pointer-events: none }

.hero .container .list .prev { transform: translateX(calc(min(480px, 72.5vw) * -1)) scale(.85) }
.hero .container .list .next { transform: translateX(min(480px, 72.5vw)) scale(.85) }
.hero .container .list .hide { transform: translateX(calc(min(480px, 72.5vw) * -2)) scale(.85) }
.hero .container .list .new-next { transform: translateX(calc(min(480px, 72.5vw) * 2)) scale(.85) }

.hero .container .list .hide,
.hero .container .list .new-next {
  opacity: 0;
  transition: opacity .5s, transform .5s
}

section.categories {
  width: 100%;
  display: flex;
  padding-bottom: var(--size80-15)
}

section.categories,
section.categories .container {
  align-items: center;
  gap: var(--size70-13);
  flex-direction: column
}

section.categories .container { gap: var(--size70-13) }

[categories] {
  width: 100%;
  display: flex;
  justify-content: center
}

[categories] .container {
  gap: 0;
  padding: 0 0 0 30px;
  flex-direction: row;
  align-items: flex-start
}

[categories] .container .wrapper {
  gap: 10px;
  width: 100%;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  justify-content: center
}

[categories] .container .wrapper h1 {
  font-weight: 500;
  color: var(--bg-paper);
  font-size: var(--size40-8-25)
}

[categories] .container .wrapper .divider {
  display: grid;
  grid-template-columns: repeat(12, 1fr)
}

[categories] .container .wrapper .divider div:first-child,
[categories] .container .wrapper .divider .div:last-child { height: 5px }

[categories] .container .wrapper .divider div:first-child {
  grid-column: span 2;
  background-color: var(--ternary)
}

[categories] .container .wrapper .divider div:last-child {
  grid-column: span 10;
  background-color: var(--secondary)
}

[categories] .container .wrapper .slider {
  gap: 30px;
  cursor: grab;
  display: flex;
  width: max-content;
  position: relative;
  padding: 30px 0 8px
}

[categories] .container .wrapper .slider .slide {
  width: 250px;
  height: 300px;
  display: flex;
  overflow: hidden;
  position: relative;
  text-align: center;
  align-items: center;
  border-radius: 16px;
  flex-direction: column;
  transition: var(--transition);
  justify-content: space-between;
  background-color: var(--bg-paper)
}

[categories] .container .wrapper .slider .slide .banner {
  width: 100%;
  height: 160px;
  position: relative;
  border-radius: 16px;
  background-size: cover;
  background-position: center
}

[categories] .container .wrapper .slider .slide .banner.disabled { pointer-events: none }

[categories] .container .wrapper .slider .slide .shop-cart {
  width: 50px;
  right: 16px;
  height: 50px;
  top: calc(160px - 25px)
}

[categories] .container .wrapper .slider .slide .shop-cart .btn-cart {
  width: 40px;
  height: 40px;
}

[categories] .container .wrapper .slider .slide .shop-cart .btn-cart i { font-size: 20px }
[categories] .container .wrapper .slider .slide .shop-cart .active i { color: var(--bg-paper) }

[categories] .container .wrapper .slider .slide h5 {
  font-weight: 700;
  line-height: 18.75px;
  font-size: var(--size15-4)
}

[categories] .container .wrapper .slider .slide.disabled h5 { color: var(--disabled) }

[categories] .container .wrapper .slider .slide .event-info {
  width: 100%;
  height: 140px;
  display: flex;
  position: relative;
  box-sizing: border-box;
  flex-direction: column;
  padding: var(--size16-3);
  justify-content: space-between
}

[categories] .container .wrapper .slider .slide .event-info .description {
  width: 100%;
  display: flex;
  flex-direction: column
}

[categories] .container .wrapper .slider .slide .event-info .description .title {
  gap: 8px;
  width: 100%;
  display: flex;
  position: relative;
  align-items: start;
  flex-direction: column
}

[categories] .container .wrapper .slider .slide .event-info .description .title h5 {
  font-size: 15px;
  line-height: 14.06px;
  color: var(--secondary)
}

[categories] .container .wrapper .slider .slide .event-info .description .title h3 {
  font-size: 16px;
  font-weight: 500;
  line-height: 18.75px
}

[categories] .container .wrapper .slider .slide .event-info .info {
  width: 100%;
  display: grid;
  grid-gap: 10px;
  max-height: 62px;
  grid-template-rows: 62px;
  grid-template-columns: 60px 1fr
}

[categories] .container .wrapper .slider .slide .event-info .info .event-date {
  width: 100%;
  grid-row: 1;
  height: 100%;
  display: flex;
  grid-column: 1;
  overflow: hidden;
  grid-area: auto;
  border-radius: 8px;
  align-items: center;
  box-sizing: border-box;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--bg-paper)
}

[categories] .container .wrapper .slider .slide .event-info .info .event-date .week {
  font-size: 10px;
  color: var(--bg-default);
  text-transform: uppercase
}

[categories] .container .wrapper .slider .slide .event-info .info .event-date .day {
  font-size: 20px;
  font-weight: 900;
  color: var(--bg-default)
}

[categories] .container .wrapper .slider .slide .event-info .info .event-date .month {
  width: 100%;
  display: flex;
  font-size: 10px;
  font-weight: 500;
  text-align: center;
  align-items: center;
  color: var(--bg-paper);
  justify-content: center;
  text-transform: uppercase;
  background-color: var(--secondary)
}

[categories] .container .wrapper .slider .slide .event-info .info .event-address {
  width: 100%;
  grid-row: 1;
  display: grid;
  grid-column: 2;
  align-items: center;
  grid-template-columns: 1fr 24px;
  grid-template-rows: 21px 30px 11px
}

[categories] .container .wrapper .slider .slide .event-info .info .event-address .networks {
  grid-row: 1;
  width: 100%;
  height: 21px;
  align-items: center;
  grid-column: span 2;
  justify-content: center
}

[categories] .container .wrapper .slider .slide .event-info .info .event-address .networks a.btn {
  width: 16px;
  height: 16px;
  padding: .75em;
  font-size: 14px;
  box-sizing: border-box
}

[categories] .container .wrapper .slider .slide .event-info .info .event-address .text {
  width: 100%;
  grid-row: 2;
  color: inherit;
  grid-column: 1;
  font-size: 14px;
  font-weight: 500;

}

[categories] .container .wrapper .slider .slide .event-info .info .event-address .sponsored {
  width: 100%;
  grid-row: 3;
  grid-column: 1;
  font-size: 11px;
}

[categories] .container .wrapper .slider .slide .event-info .info .more {
  grid-row: 1;
  bottom: -2px;
  grid-column: 2;
  position: relative;
  align-self: flex-end
}

[categories] .container .wrapper .slider .slide .more .more-info {
  width: 0;
  height: 0;
  transform: translate(10%, -30.5%) scale(0)
}

[categories] .container .wrapper .slider .slide .more.active .more-info {
  width: 200px;
  height: 268px;
  transform: translate(-48%, -91.5%) scale(1);
}

.go-category[categories] .container .wrapper .slider .slide {
  gap: 20px;
  width: 100px;
  height: 160px;
  justify-content: flex-start;
  background-color: transparent
}

.go-category[categories] .container .wrapper .slider .slide.disabled { pointer-events: none }

.go-category[categories] .container .wrapper .slider .slide .banner {
  height: 100px;
  border-radius: 0 0 10px 10px
}

.go-category[categories] .container .wrapper .slider .slide a,
.best-city[categories] .container .wrapper .slider .slide a {
  width: 100%;
  cursor: pointer;
  transition: var(--transition)
}

.best-city[categories] .container .wrapper .slider .slide {
  width: 200px;
  height: 270px;
}

.best-city[categories] .container .wrapper .slider .slide .banner {
  width: 100%;
  height: 100%;
  transition: .75s all;
}

.best-city[categories] .container .wrapper .slider .slide h5 {
  left: 0;
  bottom: 0;
  min-width: 100%;
  position: absolute;
  text-align: center;
  padding: var(--size16-3) 0;
  background: linear-gradient(var(--gradient))
}


/* CHANGE COLOR */
/* Primary */
.primary .hero .container .search input { border-bottom-color: var(--primary) }
.primary .hero .container .search .btn { color: var(--primary) }
.primary .hero .container .swipe .logo svg path { fill: var(--primary) }

/* Secundary */
.secondary .hero .container .search input { border-bottom-color: var(--secondary) }
.secondary .hero .container .search .btn { color: var(--secondary) }
.secondary .hero .container .swipe .logo svg path { fill: var(--secondary) }

/* Ternary */
.ternary .hero .container .search input { border-bottom-color: var(--ternary) }
.ternary .hero .container .search .btn { color: var(--ternary) }
.ternary .hero .container .swipe .logo svg path { fill: var(--ternary) }



/* CONTOLLER HOVER FOR DESKTOP */
.desktop .networks-product a:hover,
.desktop .networks a:hover {
  text-shadow: none !important;
  box-shadow: var(--shadow0005-secondary),
              var(--shadow0010-secondary),
              var(--shadow0015-secondary)
}

.desktop .shop-cart .btn-cart:hover,
.shop-cart .btn-cart.active {
  background-color: var(--secondary);
  box-shadow: var(--shadow0005-secondary),
              var(--shadow0010-secondary),
              var(--shadow0015-secondary)
}

.desktop .shop-cart .btn-cart:hover i,
.shop-cart .btn-cart.active i { color: var(--text-primary) }

.desktop .voucher .description .info .content .place .stages .stage .btn-action:hover {
  box-shadow: var(--shadow0005-secondary),
              var(--shadow0010-secondary),
              var(--shadow0015-secondary)
}

.desktop .hero .container .list .act .end-slide .rating i:hover {
  font-size: var(--size30-6);
  font-variation-settings: 'FILL' 1
}

.desktop .hero .container .list .act .end-slide .rating i:hover ~ i { font-variation-settings: 'FILL' 1 }

.desktop .best-city[categories] .container .wrapper .slider .slide .banner:hover { transform: scale(1.2) }

/* Primary */
.desktop.primary .hero .container .search .btn:hover {
  color: var(--bg-default);
  background-color: var(--primary);
  box-shadow: 0 0 2px var(--primary),
              0 0 4px var(--primary),
              0 0 6px var(--primary)
}

.desktop.primary [categories] .container .wrapper .slider a:hover {
  text-shadow: var(--shadow0005-primary),
               var(--shadow0010-primary),
               var(--shadow0015-primary)
}

/* Secondary */
.desktop.secondary .hero .container .search .btn:hover {
  color: var(--bg-default);
  background-color: var(--secondary);
  box-shadow: 0 0 2px var(--secondary),
              0 0 4px var(--secondary),
              0 0 6px var(--secondary)
}

.desktop.secondary [categories] .container .wrapper .slider a:hover {
  text-shadow: var(--shadow0005-secondary),
               var(--shadow0010-secondary),
               var(--shadow0015-secondary)
}

/* Ternary */
.desktop.ternary .hero .container .search .btn:hover {
  color: var(--bg-default);
  background-color: var(--ternary);
  box-shadow: 0 0 6px var(--ternary)
}

.desktop.ternary [categories] .container .wrapper .slider a:hover {
  text-shadow: var(--shadow0005-ternary),
               var(--shadow0010-ternary),
               var(--shadow0015-ternary)
}


/* RESPONSIVE */
@media screen and (min-width: 360px) {
  main { gap: 0 }
  
  .hero .container  { justify-content: center }
  .hero .container .list li .content .end-slide { padding: var(--size24-3) }
}

@media screen and (min-width: 390px) {
  main { gap: 0 }

  .hero { height: 85vh }
  .hero .container .swipe  { min-height: 432px }

  /* .hero .container .list li .networks-product .product-btn {
    padding: 8px 16px;
    font-size: var(--size20-5)
  } */
}

@media screen and (min-width: 541px) {
  .hero .container .swipe { height: 75% }
  .hero .container .list li .content .end-slide .more .more-info { transform: translate(62.5%, 49.05%) scale(0) }
  .hero .container .list li .content .end-slide .more.active .more-info { transform: translate(5.75%, -1.05%) scale(1) }
}

@media screen and (min-width: 768px) {
  .hero { height: 100vh }
  .hero .container .swipe { height: 82% }
}

@media screen and (min-width: 1024px) and (max-width: 1366px) and (max-height: 820px) {
  .hero .container .swipe .logo {
    width: 100px;
    height: 100px;
    top: calc(-100px / 2)
  }
  
  .hero .container .list li {
    max-width: 350px;
    left: calc(50% + 63px)
  }
  
  .hero .container .list .prev { transform: translateX(-350px) scale(.85) }
  .hero .container .list .next { transform: translateX(350px) scale(.85) }
  .hero .container .list .hide { transform: translateX(-700px) scale(.85) }
  .hero .container .list .new-next { transform: translateX(700px) scale(.85) }

  .hero .container .list li .content {
    grid-template-rows: calc(82% - 32px) 1fr;
  }

  .hero .container .list li .content .shop-cart {
    left: 16px;
    top: calc(82% - 32px - ((var(--size80-15)) / 2))
  }

  .hero .container .list li .content .end-slide { padding: 16px }
  
  .hero .container .list li .content .end-slide .more .more-info { transform: translate(48%, 51.25%) scale(0) }
  .hero .container .list li .content .end-slide .more.active .more-info { transform: translate(2.25%, 1.25%) scale(1) }
}

@media screen and (width: 540px) and (height: 720px), (width: 1024px) and (height: 600px) {
  .hero { height: 100vh }
  .hero .container  { justify-content: flex-end }
  .hero .container .swipe { height: 92% }

  section.categories { padding-top: 64px }
}