/* ============================================== */
/* NAV */
/* ============================================== */

.nav{
  display: block;
  width: 100%;
  position: fixed;
  top: 0;
  transition: all 250ms ease;
  padding: 10px 20px;

  background: rgba(255, 255, 255, 0);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.nav.active{
  padding: 0 20px;
  background: rgba(255, 255, 255, 0.5);
}

.menu button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.menu .btn-sub,
.menu .btn-sub-sub {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* ============================================== */
/* NAVIGATION */
/* ============================================== */

.navigation{
  margin:0 auto;
  padding: 10px 20px;
  max-width: 1920px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navigation ul li,
.navigation ul li a{
  display: inline-block;
  position: relative;
}

.navigation ul li a{
  padding: 10px 15px;
  cursor: pointer;
  font-size: var(--fs-base);
  margin: 0;
  color:var(--color-tit);
  opacity: 0.7;
  font-family: var(--f-family);
}

.navigation ul li a.active{
  color: var(--color-cta);
  opacity: 1;
}

.navigation ul li a:hover{
  opacity: 1;
}

@media screen and (max-width: 1080px){

  .navigation{
    padding: 0px;
  }

  .navigation ul.menu{
    position: absolute;
    z-index: 4;
    width: 350px;
    height: 100vh;
    top: 0;
    right: -350px;
    padding: 80px 20px 20px;
    overflow-y: scroll;
    background: var(--color-w);
  }

  .navigation ul.menu li,
  .navigation ul.menu li a{
    width: 100%;
  }

  .navigation ul.menu.active{
    right: 0;
  }

}
/* ============================================== */
/* LOGO */
/* ============================================== */

.logo img{
  height: 40px;
}

@media screen and (max-width: 1080px){
  .logo img{
    height: 30px;
  }
}

/* ============================================== */
/* HAMBURGUER */
/* ============================================== */

.hamburguer{
  position: relative;
  width:50px;
  height:50px;
  cursor:pointer;
  margin:0;
  display: none;
  z-index: 5;
}

.hamburguer span{
  position:absolute;
  display:block;
  height:2px;
  opacity: 1;
  top:10px;
  left:12px;
  width:50%;
  background: var(--color-pri);
}

.hamburguer span:nth-child(1){top:17px;}
.hamburguer span:nth-child(2){top:24px;}
.hamburguer span:nth-child(3){top:31px;}

.hamburguer.active span:nth-child(1){transform: rotate(135deg);top:24px;}
.hamburguer.active span:nth-child(2){width: 0%;}
.hamburguer.active span:nth-child(3){transform: rotate(-135deg);top:24px;}

@media screen and (max-width: 1080px){
  .hamburguer{
    display: block;
    margin-left:10px;
  }
}

/* ============================================== */
/* FLOATING SHOP BUTTON */
/* ============================================== */

.hero-btns-abs {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 20;

  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;

  transition:
    opacity 300ms ease,
    transform 300ms ease;
  transition-delay: 0s;
}

.hero-btns-abs.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 600ms;
}

.hero-btns-abs:not(.active) {
  transition-delay: 0s;
}

.hero-btns-abs .floating-shop {
  position: relative;
}

.hero-btns-abs .btn-shop-hero {
  position: relative;
  border: 4px solid var(--color-cua);
  cursor: pointer;
  padding: 12px 45px 12px 20px;
  color: var(--color-w);
  background-color: var(--color-cta);
  box-shadow: 0 20px 40px rgba(0,0,0,0.18);
  animation: floatingBtnAttention 4s ease-in-out infinite;
}

.hero-btns-abs .btn-shop-hero.open {
  animation: none;
}

/* Animación de atención */
@keyframes floatingBtnAttention {
  0% {
    transform: translateX(0) scale(1);
    background-color: var(--color-cta);
    box-shadow: 0 20px 40px rgba(0,0,0,0.18);
  }

  4% {
    transform: translateX(-3px) scale(1.03);
  }

  8% {
    transform: translateX(3px) scale(1.03);
  }

  12% {
    transform: translateX(-2px) scale(1.03);
  }

  16% {
    transform: translateX(2px) scale(1.03);
  }

  20% {
    transform: translateX(0) scale(1.04);
    background-color: var(--color-pri);
    box-shadow: 0 20px 45px rgba(0,0,0,0.25);
  }

  30% {
    transform: translateX(0) scale(1);
    background-color: var(--color-cta);
  }

  100% {
    transform: translateX(0) scale(1);
    background-color: var(--color-cta);
    box-shadow: 0 20px 40px rgba(0,0,0,0.18);
  }
}

/* Flecha */
.hero-btns-abs .btn-shop-hero::after {
  content: "\ea5f";
  font-family: "tabler-icons";
  position: absolute;
  height: 24px;
  width: 24px;
  right: 14px;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%) rotate(90deg);
  transition: transform 250ms ease;
}

.hero-btns-abs .btn-shop-hero.open::after {
  transform: translateY(-50%) rotate(180deg);
}

/* Dropdown hacia arriba */
.hero-btns-abs .shop-hero {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  top: auto;

  width: 100%;
  min-width: 150px;
  padding: 10px;
  background: var(--color-w);
  border-radius: 10px;
  box-shadow: 0 20px 30px -20px rgba(0,0,0,.4);

  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);

  transition:
    opacity 250ms ease,
    transform 250ms ease;
}

.hero-btns-abs .shop-hero.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.hero-btns-abs .shop-hero li {
  display: block;
  width: 100%;
}

.hero-btns-abs .shop-hero li a {
  position: relative;
  display: block;
  width: 100%;
  color: var(--color-tit);
  padding: 5px 10px 5px 40px !important;
  border-radius: 5px;
}

.hero-btns-abs .shop-hero li a:hover {
  background: var(--color-ter);
}

/* FLAGS */
.hero-btns-abs .shop-hero li a::before {
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: 8px;
  transform: translateY(-50%);
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.1);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.hero-btns-abs .shop-hero li a.eng::before {
  background-image: url('./../../images/flags/eng.svg');
}

.hero-btns-abs .shop-hero li a.esp::before {
  background-image: url('./../../images/flags/esp.svg');
}

/* RESPONSIVE */
@media screen and (max-width: 480px) {
  .hero-btns-abs {
    right: 15px;
    bottom: 15px;
  }

  .hero-btns-abs .btn-shop-hero {
    padding: 12px 42px 12px 18px;
  }
}

/* ============================================== */
/* LANGUAGE & SHOP */
/* ============================================== */

.btn-lan,
.btn-shop,
.btn-shop-hero {
  padding: 10px 40px 10px 15px;
  color: var(--color-tit);
  position: relative;
  cursor: pointer;
}

.btn-shop-hero {
  padding: 16px 45px 16px 32px;
  font-weight: 600;
  color: white;
}

.btn-lan:after,
.btn-shop:after,
.btn-shop-hero:after {
  content: "\ea5f";
  font-family: "tabler-icons";
  position: absolute;
  height: 24px;
  width: 24px;
  right: 10px;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 24px;
  transform-origin: center center;
  transform: translateY(-50%) rotate(-90deg);
  transition: all 250ms ease;
}

.btn-lan.open:after,
.btn-shop.open:after,
.btn-shop-hero.open:after {
  transform: translateY(-50%) rotate(0deg);
}


.lan,
.shop,
.shop-hero {
  position: absolute;
  display: block;
  top: 49px;
  left: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(0px);
  box-shadow: 0 20px 30px -20px rgba(0,0,0,.4);
  padding: 10px;
  background: var(--color-w);
  border-radius: 10px;
  transition: all 250ms ease;
}

.shop-hero {
  width: 100%;
}

.lan.active,
.shop.active,
.shop-hero.active {
  opacity: 1;
  pointer-events: all;
  transform: translateY(5px);
}

.lan li,
.shop li,
.shop-hero li {
  display: block;
  width: 100%;
}

.lan li a,
.shop li a,
.shop-hero li a {
  display: block;
  width: 100%;
  color: var(--color-tit);
  padding: 5px 10px;
  transition: all 250ms ease;
  border-radius: 5px;
  text-align: left;
}

.lan li a {
  padding: 5px 10px !important;
}

.shop li a,
.shop-hero li a {
  padding: 5px 10px 5px 40px !important;
}

.lan li a.active,
.lan li a:hover,
.shop li a:hover,
.shop-hero li a:hover {
  background: var(--color-ter);
}

@media screen and (max-width: 1080px) {
  .lan,
  .shop,
  .shop-hero {
    padding: 10px;
    border-radius: 10px;
  }
  .lan li a,
  .shop li a,
  .shop-hero li a {
    font-size: 1rem;
  }
}

@media screen and (max-width: 480px) {
  .btn-lan,
  .btn-shop,
  .btn-shop-hero {
    padding: 10px;
  }

  .btn-lan:after,
  .btn-shop:after,
  .btn-shop-hero:after {
    display: none;
  }
}
/* ============================== */
/* FLAGS          */
/* ============================== */

.shop li a,
.shop-hero li a {
  position: relative;
}

.shop li a::before,
.shop-hero li a::before {
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: 8px;
  transform: translateY(-50%);
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.1);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.shop li a.eng::before,
.shop-hero li a.eng::before { background-image: url('./../../images/flags/eng.svg'); }
.shop li a.esp::before,
.shop-hero li a.esp::before { background-image: url('./../../images/flags/esp.svg'); }

/* ============================================== */
/* SUBMENUS */
/* ============================================== */

ul.sub,
ul.sub-sub{
  position: absolute;
  width: 220px;
  display: flex;
  flex-direction: column;
  background: var(--color-w);
  padding: 10px;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 20px 30px -20px rgba(0,0,0,.4);
  border-radius: 10px;
  transition: all 250ms ease;
}

ul.sub{
  top: 100%;
  left: 0;
  transform: translateY(10px);
}

ul.sub-sub{
  top: -10px;
  left: 100%;
  transform: translateY(10px);
}

.has-sub:hover > ul.sub{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.has-sub .btn-sub,
.has-sub-sub .btn-sub-sub {
  position: relative;
  padding: 10px 40px 10px 15px;
}

.has-sub .btn-sub::after,
.has-sub-sub .btn-sub-sub::after {
  content: "\ea5f";
  font-family: "tabler-icons";
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  transition: transform 250ms ease;
}

.has-sub:hover > .btn-sub::after,
.has-sub-sub:hover > .btn-sub-sub::after {
  transform: translateY(-50%) rotate(0deg);
}

.has-sub-sub > a::after{
  content: "\ea5f";
  font-family: "tabler-icons";
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
}

.has-sub-sub:hover > ul.sub-sub{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

ul.sub li,
ul.sub-sub li{
  display: block;
  width: 100%;
}

ul.sub li a,
ul.sub-sub li a{
  display: block;
  width: 100%;
  padding: 10px 15px;
  margin: 0;
  color: var(--color-pri);
  opacity: .7;
}

ul.sub li a:hover,
ul.sub-sub li a:hover{
  opacity: 1;
}

/* ============================================== */
/* SUBMENUS MOBILE */
/* ============================================== */

@media screen and (max-width: 1080px){

  .navigation ul.menu li button,
  .navigation ul.menu li a {
    width: 100%;
  }

  .menu .btn-sub,
  .menu .btn-sub-sub {
    position: relative;
    padding: 10px 40px 10px 15px;
  }

  .has-sub,
  .has-sub-sub{
    position: relative;
  }

  ul.sub,
  ul.sub-sub{
    position: relative;
    width: 100%;
    display: block;

    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;

    right: auto;
    left: 0;
    transform: none;

    background: var(--color-ter);
    padding: 0 10px;
    margin: 0;
    border-radius: 10px;
    box-shadow: none;

    transition:
      max-height 450ms ease,
      opacity 300ms ease,
      padding 300ms ease,
      margin 300ms ease;
  }

  .has-sub.active > ul.sub,
  .has-sub-sub.active > ul.sub-sub{
    max-height: 700px;
    opacity: 1;
    pointer-events: auto;
    padding: 10px;
    margin: 5px 0 10px;
  }

  .has-sub > .btn-sub::after,
  .has-sub-sub > .btn-sub-sub::after {
    content: "\ea5f";
    font-family: "tabler-icons";
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    transition: transform 300ms ease;
  }

  .has-sub.active > .btn-sub::after,
  .has-sub-sub.active > .btn-sub-sub::after {
    transform: translateY(-50%) rotate(0deg);
  }
}

/* ============================================== */
/* TRANSITIONS */
/* ============================================== */

nav,
.navigation{
  z-index: 3;
}

.hamburguer span,
.navigation ul,
.navigation a{
  -webkit-transition:all 350ms ease;
  -moz-transition:all 350ms ease;
  -ms-transition:all 350ms ease;
  transition:all 350ms ease;
}