/* hero — fondo final de bicameral (assets/images/Frame 1.png) + título imagen */

.hero {
  position: relative;
  width: 100%;
  min-height: 620px;
  height: 100svh;
  overflow: hidden;
  background: var(--bg);
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-image: url('../../assets/images/Frame 1.png');
  background-size: cover;
  background-position: center 58%;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(5, 8, 14, 0.78) 0%, rgba(5, 8, 14, 0.5) 38%, rgba(5, 8, 14, 0.2) 62%, rgba(5, 8, 14, 0.62) 100%),
    linear-gradient(to bottom, rgba(5, 8, 14, 0.1) 0%, rgba(5, 8, 14, 0.22) 45%, rgba(5, 8, 14, 0.7) 86%, rgba(5, 8, 14, 0.92) 100%);
}
.hero__strip {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 260px;
  background: linear-gradient(to bottom, transparent 0%, rgba(5, 8, 14, 0.6) 42%, var(--bg) 100%);
  z-index: 3;
}
.hero__wrap {
  position: relative;
  z-index: 4;
  height: 100%;
  max-width: 1288px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  padding-top: 68px;
  padding-bottom: 24px;
}
.hero__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: min(100%, 1196px);
  margin-inline: auto;
  padding-top: 40px;
  padding-bottom: 42px;
}
.hero__title {
  margin: 0;
}
.hero__title-img { width: min(1196px, 100%); height: auto; }
.hero__buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 16px;
  width: 100%;
}
.hero__buttons .btn { min-width: 224px; }
.hero__info {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 24px;
  padding: 18px 0 6px;
}
.hero__info-item { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hero__info-icon { width: 48px; height: 48px; flex: 0 0 48px; }
.hero__info-text { display: flex; flex-direction: column; line-height: 1.22; min-width: 0; }
.hero__info-label { font-family: var(--font-mont); font-weight: 700; font-size: 16px; color: var(--white); }
.hero__info-value { font-family: var(--font-mont); font-weight: 500; font-size: 15px; color: var(--white-75); }
@media (min-width: 901px) and (max-height: 820px) {
  .hero { min-height: 600px; }
  .hero__wrap { padding-top: 68px; padding-bottom: 14px; }
  .hero__content { gap: 14px; padding-top: 28px; padding-bottom: 24px; }
  .hero__title-img { width: min(1196px, 100%); }
  .hero__buttons { margin-top: 8px; }
  .hero__buttons .btn { height: 48px; min-width: 214px; }
  .hero__info { padding-top: 12px; gap: 18px; }
  .hero__info-icon { width: 42px; height: 42px; flex-basis: 42px; }
  .hero__info-label { font-size: 15px; }
  .hero__info-value { font-size: 14px; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .hero .wsp { bottom: 86px; }
}
@media (max-width: 900px) {
  .hero { height: auto; min-height: 720px; }
  .hero__bg { background-position: center center; }
  .hero__wrap { min-height: 720px; padding-top: 96px; padding-bottom: 28px; }
  .hero__content {
    justify-content: center;
    width: min(100%, 620px);
    padding-top: 24px;
    padding-bottom: 30px;
  }
  .hero__info { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px; }
}
@media (max-width: 600px) {
  .hero { min-height: 660px; }
  .hero__scrim {
    background:
      linear-gradient(90deg, rgba(5, 8, 14, 0.74) 0%, rgba(5, 8, 14, 0.5) 58%, rgba(5, 8, 14, 0.68) 100%),
      linear-gradient(to bottom, rgba(5, 8, 14, 0.1) 0%, rgba(5, 8, 14, 0.22) 38%, rgba(5, 8, 14, 0.82) 86%, rgba(5, 8, 14, 0.96) 100%);
  }
  .hero__wrap { min-height: 660px; padding-top: 54px; gap: 16px; }
  .hero__content { gap: 14px; padding-top: 20px; padding-bottom: 16px; }
  .hero__title-img { width: 100%; }
  .hero__buttons { flex-direction: column; align-items: center; }
  .hero__buttons .btn { width: 274px; max-width: 100%; min-width: 0; }
  .hero__info { grid-template-columns: 1fr 1fr; gap: 18px 14px; padding-top: 6px; }
  .hero__info-item { align-items: flex-start; }
  .hero__info-icon { width: 36px; height: 36px; flex-basis: 36px; }
  .hero__info-text { white-space: normal; }
  .hero__info-label { font-size: 14px; }
  .hero__info-value { font-size: 13px; }
}