:root{
  --black:#020202;
  --white:#f5f0e8;
  --soft:#c9c3bb;
  --gold-1:#70480d;
  --gold-2:#c98d22;
  --gold-3:#fff0a6;
  --silver-1:#555a61;
  --silver-2:#cdd1d7;
  --silver-3:#ffffff;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  min-height:100%;
  background:var(--black);
  color:var(--white);
  font-family:Montserrat,Arial,sans-serif;
  overflow-x:hidden;
}

.hero{
  position:relative;
  min-height:100vh;
  background:#000;
  display:flex;
  align-items:center;
  overflow:hidden;
}

/* Imagen colocada como bloque visual derecho, no detrás del texto */
.photo{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:38%;
  background-image:url('img/pandora_banner.png');
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  opacity:1;
  filter:contrast(1.12) brightness(1.18);
  z-index:0;
}

/* Fade negro para integrar la imagen sin apagarla */
.shade{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(circle at 68% 46%, rgba(215,165,60,.13), transparent 23%),
    linear-gradient(90deg,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,.97) 24%,
      rgba(0,0,0,.82) 38%,
      rgba(0,0,0,.38) 52%,
      rgba(0,0,0,.08) 70%,
      rgba(0,0,0,.18) 100%
    ),
    linear-gradient(0deg,
      rgba(0,0,0,.46) 0%,
      rgba(0,0,0,.04) 45%,
      rgba(0,0,0,.44) 100%
    );
}

.content{
  position:relative;
  z-index:2;
  width:min(92vw,760px);
  padding:7vh 0 7vh clamp(28px,6vw,112px);
}

.kicker{
  margin:0 0 .25rem;
  letter-spacing:.48em;
  text-transform:uppercase;
  font-size:clamp(.65rem,1.05vw,.95rem);
  font-weight:500;
  color:#d8d2ca;
  text-shadow:0 0 18px rgba(255,255,255,.16),0 2px 10px rgba(0,0,0,.85);
}

h1{
  font-family:Allura,cursive;
  font-weight:400;
  line-height:.72;
  margin:0 0 1.1rem;
  font-size:clamp(7rem,15vw,15rem);
  letter-spacing:.01em;
  color:var(--white);
  text-shadow:0 2px 26px rgba(255,255,255,.18),0 8px 30px rgba(0,0,0,.86);
}

.tagline{
  font-size:clamp(.95rem,1.4vw,1.25rem);
  font-weight:300;
  color:#d1cbc3;
  margin:0 0 3.8rem;
  text-shadow:0 0 14px rgba(0,0,0,.95);
}

.actions{
  display:flex;
  gap:1.2rem;
  align-items:center;
  flex-wrap:wrap;
}

.btn{
  min-width:155px;
  text-align:center;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.78rem;
  font-weight:700;
  border-radius:999px;
  padding:1rem 1.7rem;
  color:#0b0b0b;
  border:1px solid rgba(255,255,255,.30);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.82),
    inset 0 -8px 18px rgba(0,0,0,.26),
    0 18px 35px rgba(0,0,0,.48);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.btn:hover{
  transform:translateY(-2px);
  filter:brightness(1.08);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.86),
    inset 0 -8px 18px rgba(0,0,0,.27),
    0 22px 44px rgba(0,0,0,.60);
}

.btn-silver{
  background:linear-gradient(135deg,
    var(--silver-1) 0%,
    var(--silver-2) 34%,
    var(--silver-3) 49%,
    #b3b7bd 61%,
    #62676d 100%
  );
}

.btn-gold{
  background:linear-gradient(135deg,
    var(--gold-1) 0%,
    var(--gold-2) 32%,
    var(--gold-3) 49%,
    #ca9226 62%,
    #5d390b 100%
  );
}

/* Página exclusive */
.exclusive{
  justify-content:center;
}

.exclusive .photo{
  left:0;
  background-position:center center;
  opacity:.86;
  filter:contrast(1.10) brightness(.95);
}

.exclusive .shade{
  background:
    radial-gradient(circle at 50% 42%,rgba(210,150,54,.18),transparent 25%),
    linear-gradient(90deg,rgba(0,0,0,.88),rgba(0,0,0,.48),rgba(0,0,0,.88)),
    linear-gradient(0deg,rgba(0,0,0,.88),rgba(0,0,0,.48));
}

.exclusive-content{
  position:relative;
  z-index:2;
  margin:auto;
  text-align:center;
  padding:8vh 24px;
  width:min(92vw,760px);
}

.exclusive-content h1{
  font-size:clamp(6.5rem,14vw,13rem);
  margin-bottom:1.2rem;
}

.exclusive-content .tagline{
  margin-bottom:3rem;
}

.exclusive-actions{
  justify-content:center;
}

.back{
  display:inline-block;
  margin-top:1.6rem;
  color:#aaa;
  text-decoration:none;
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.back:hover{color:#fff}

@media (max-width:900px){
  .photo{
    left:28%;
    background-position:center center;
    filter:contrast(1.10) brightness(1.05);
  }

  .shade{
    background:
      linear-gradient(90deg,
        rgba(0,0,0,.98) 0%,
        rgba(0,0,0,.88) 36%,
        rgba(0,0,0,.46) 58%,
        rgba(0,0,0,.16) 100%
      ),
      linear-gradient(0deg,rgba(0,0,0,.58),rgba(0,0,0,.18));
  }
}

@media (max-width:760px){
  .hero{
    align-items:flex-end;
  }

  .photo{
    left:0;
    background-size:cover;
    background-position:58% center;
    opacity:.95;
    filter:contrast(1.06) brightness(.98);
  }

  .shade{
    background:
      linear-gradient(0deg,
        rgba(0,0,0,.98) 0%,
        rgba(0,0,0,.88) 34%,
        rgba(0,0,0,.45) 68%,
        rgba(0,0,0,.16) 100%
      ),
      linear-gradient(90deg,rgba(0,0,0,.50),rgba(0,0,0,.10));
  }

  .content{
    padding:0 24px 8vh;
    width:100%;
  }

  h1{
    font-size:clamp(6rem,30vw,10rem);
  }

  .kicker{
    letter-spacing:.32em;
  }

  .tagline{
    margin-bottom:2rem;
  }

  .actions{
    gap:.9rem;
  }

  .btn{
    min-width:145px;
    padding:.9rem 1.2rem;
    font-size:.7rem;
  }
}

@media (max-width:460px){
  .actions{
    flex-direction:column;
    align-items:stretch;
  }

  .btn{
    width:100%;
  }
}