/* ============================
   DUTY FREE SHOP PAGE
============================ */

/* ============================
   HERO
============================ */

.hero--duty-free{
  background-image:
  url('../../imagenes/duty-free-shop/duty-free-shop-iguazu.webp');
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
}

.hero--duty-free::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.10), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(255,215,140,.10), transparent 22%),
    linear-gradient(
      180deg,
      rgba(8,20,36,.38) 0%,
      rgba(8,20,36,.26) 24%,
      rgba(8,20,36,.20) 44%,
      rgba(8,20,36,.56) 74%,
      rgba(8,20,36,.84) 100%
    );
  z-index:1;
}

.hero--duty-free::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:180px;
  background:
    linear-gradient(180deg, transparent 0%, rgba(8,20,36,.16) 40%, rgba(8,20,36,.42) 100%);
  z-index:1;
}

.hero--duty-free .hero-inner{
  max-width:1120px;
  padding:84px 0 78px 24px;
}

.hero--duty-free .hero-breadcrumb{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 12px 26px rgba(0,0,0,.14);
}

.hero--duty-free .eyebrow{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  color:#fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 10px 24px rgba(0,0,0,.12);
}

.hero--duty-free .meta-tags--hero{
  margin-bottom:14px;
}

.hero--duty-free .meta-tags--hero span{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
}

.hero--duty-free h1{
  max-width:11ch;
  font-size:clamp(3.1rem, 5.8vw, 5.5rem);
  line-height:.92;
  letter-spacing:-.065em;
  text-shadow:
    0 12px 36px rgba(0,0,0,.28),
    0 3px 10px rgba(0,0,0,.22);
}

.hero--duty-free p{
  max-width:62ch;
  font-size:1.08rem;
  color:rgba(255,255,255,.94);
  text-shadow:0 4px 18px rgba(0,0,0,.22);
}

.hero--duty-free .hero-quick-info{
  margin-top:18px;
}

.hero--duty-free .hero-quick-info span{
  background:rgba(255,255,255,.11);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
}

.hero--duty-free .container{
  position:relative;
}

.hero--duty-free .container::after{
  content:"";
  position:absolute;
  right:4%;
  top:18%;
  width:min(320px, 34vw);
  height:min(320px, 34vw);
  background:radial-gradient(circle, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 70%);
  pointer-events:none;
  z-index:1;
}

/* ============================
   PAGE TWEAKS
============================ */

.duty-section .highlight{
  position:relative;
  overflow:hidden;
}

.duty-section .highlight::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at top right, rgba(13,59,102,.06), transparent 35%);
  pointer-events:none;
}

.duty-section .highlight p,
.duty-section .highlight li{
  position:relative;
  z-index:1;
}

.duty-section .card{
  text-align:left;
}

.duty-section .card h3{
  font-size:1.32rem;
  text-wrap:balance;
}

.duty-section .card p{
  font-size:.98rem;
}

.duty-section .grid.two .card h3{
  font-size:1.22rem;
}

.duty-section .card:hover{
  transform:translateY(-6px) scale(1.01);
}

.duty-section .faq details[open]{
  border-color:rgba(13,59,102,.18);
}

.duty-section .faq details:hover{
  border-color:rgba(13,59,102,.12);
}

.duty-section .card-link h3{
  font-size:1.28rem;
}

.duty-section .card-link p{
  font-size:.96rem;
  margin-bottom:0;
}

/* ============================
   RESPONSIVE
============================ */

@media (max-width:768px){
  .hero--duty-free{
    background-position:center center;
  }

  .hero--duty-free .hero-inner{
    padding:58px 0 56px 8px;
  }

  .hero--duty-free h1{
    max-width:100%;
    font-size:2.55rem;
  }

  .hero--duty-free p{
    max-width:100%;
    font-size:1rem;
  }

  .hero--duty-free .container::after{
    width:180px;
    height:180px;
    right:-20px;
    top:16%;
  }

  .duty-section .card h3{
    font-size:1.24rem;
  }
}

@media (max-width:480px){
  .hero--duty-free h1{
    font-size:2.16rem;
  }

  .hero--duty-free::after{
    height:140px;
  }
}