/*
 * base/05-jornada.css
 * Escada dos encontros (elemento de assinatura) e bloco hero.
 */

.climb {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 120px;
  margin-top: 6px;
}

.climb i {
  flex: 1;
  border-radius: 3px 3px 1px 1px;
  background: var(--sf3);
  min-width: 3px;
  position: relative;
}

.climb i.d {
  background: linear-gradient(180deg,var(--gd2),#9a6e15);
  box-shadow: 0 0 14px rgba(253,217,130,.25);
}

.climb i.p {
  background: repeating-linear-gradient(135deg,#6b5320 0 3px,transparent 3px 6px);
  outline: 1px solid #8a6a22;
}

.climb i.c {
  background: var(--gd2);
  box-shadow: 0 0 0 2px var(--bg),0 0 0 3px var(--gd2),0 0 22px rgba(253,217,130,.55);
  animation: glow 2.4s ease-in-out infinite;
}

@keyframes glow {
  50% {
    box-shadow: 0 0 0 2px var(--bg),0 0 0 3px var(--gd2),0 0 34px rgba(253,217,130,.85);
  }
}

.climb-l {
  display: flex;
  gap: 4px;
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--t3);
}

.climb-l span {
  border-top: 1px solid var(--ln2);
  padding-top: 6px;
}

.hero {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid #2a2418;
  background: #070707;
  padding: 28px 30px;
  color: #efe8d8;
}

.hero::after {
  content: "";
  position: absolute;
  right: -6%;
  top: -10%;
  width: 42%;
  height: 140%;
  background: var(--heroimg) center 18%/cover no-repeat;
  opacity: .5;
  -webkit-mask-image: linear-gradient(90deg,transparent,#000 60%);
  mask-image: linear-gradient(90deg,transparent,#000 60%);
  pointer-events: none;
}

.hero>* {
  position: relative;
  z-index: 1;
}

.hero .mu {
  color: #a49d8f;
}

.hero h1 {
  color: #f6efdf;
  max-width: 560px;
}

.hero .climb i {
  background: #1d1d1d;
}

.hero .climb i.c {
  background: #fdd982;
}

.hero .climb i.p {
  background: repeating-linear-gradient(135deg,#6b5320 0 3px,transparent 3px 6px);
}

.hero .climb i.d {
  background: linear-gradient(180deg,#fdd982,#9a6e15);
}

.hero .climb i.c {
  box-shadow: 0 0 0 2px #070707,0 0 0 3px #fdd982,0 0 22px rgba(253,217,130,.55);
}

.hero .climb-l span {
  border-color: #2c2c2c;
  color: #7a756c;
}

.hero .btn.s {
  background: #151515;
  color: #efe8d8;
  border-color: #333;
}

.hero .btn:not(.s):not(.q) {
  background: #fdb621!important;
  color: #1a1203!important;
}