/* =========================
   FONTS (corregidas)
========================= */
@font-face {
  font-family: 'Nib Pro';
  src: url('../fonts/NibPro-Regular.d5c7e.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Nib Pro SemiBold';
  src: url('../fonts/NibPro-SemiBold.b171b.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Mori';
  src: url('../fonts/PPMori-Regular.9bd36.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Mori SemiBold';
  src: url('../fonts/PPMori-SemiBold.e61f6.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* =========================
   VARIABLES
========================= */
:root{
  --violet: #8348FF;
  --lime: #C7FF2E;
  --text: #ffffff;
  --black: #0F0F14;
  --ff-title: "Nib Pro";
  --ff-title-semibold: "Nib Pro SemiBold";
  --ff-ui: "PP Mori";
  --ff-ui-semibold: "PP Mori SemiBold";
}

/* =========================
   BASE
========================= */
*{ box-sizing: border-box; }
body{ margin: 0; }

/* =========================
   HERO
========================= */
.cluster-hero{
  padding: 18px;
  background: #ffffff;
  font-family: var(--ff-ui);
}

.cluster-hero__shell{
  position: relative;
  background: var(--violet);
  border-radius: 50px;
  min-height: 861px;
  overflow: hidden;
  padding: 28px 40px 48px;
}

/* =========================
   TOP BAR
========================= */
.cluster-hero__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.cluster-hero__logo{
  width: 156px;
  height: 68px;
  display: block;
}

.cluster-hero__logo img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.18));
}

.cluster-hero__nav{
  display: flex;
  gap: 28px;
  align-items: center;
  justify-content: center;
  flex: 1;
  font-family: "PP Mori", var(--ff-ui);
}

.cluster-hero__nav a{
  color: #ffffff;
  text-decoration: none;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
}

.cluster-hero__actions{
  display: flex;
  align-items: center;
  gap: 18px;
}

.cluster-hero__cta{
  color: #C3FF45;
  text-decoration: none;
  font-weight: 600;
  font-size: 20px;
  font-family: "PP Mori", var(--ff-ui);
  letter-spacing: -0.02em;
  line-height: 1;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 82px;
  height: 41px;
  padding: 10px 0;
  gap: 10px;
  border-bottom: 2px solid #C3FF45;
}

.cluster-hero__cta::after{
  display: none;
}

.btn-svg{
  display: inline-block;
  cursor: pointer;
}

.btn-svg svg path{
  transition: stroke .2s ease;
}

.btn-svg svg:hover path{
  stroke: #5f2de2;
}

/* =========================
   CENTER CONTENT
========================= */
.cluster-hero__center{
  text-align: center;
  color: var(--ff-ui);
  margin-top: 96px;
}

.cluster-hero__kicker{
  margin: 0 0 10px;
  font-family: "PP Mori", var(--ff-ui-semibold);
  font-weight: 600;
  font-size: 35px;
  line-height: 1;
  letter-spacing: -0.06em;
  text-transform: none;
  opacity: 1;
  color: #ffffff;
}

/* TÍTULO: Nib Pro (serif) */
.cluster-hero__title{
  margin: 0 0 16px;
  font-family: "PP Mori", var(--ff-ui);
  font-weight: 600;
  font-size: clamp(48px, 7vw, 100px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.cluster-hero__subtitle{
  margin: 0 auto 32px;
  max-width: 60ch;
  font-family: "Nib Pro", var(--ff-title);
  font-weight: 400;
  font-size: clamp(20px, 2.3vw, 35px);
  line-height: 52px;
  letter-spacing: 0;
  opacity: 1;
  color: #ffffff;
  text-align: center;
}

/* =========================
   STATS
========================= */
.cluster-hero__stats{
  position: absolute;
  left: 34px;
  bottom: 34px;
  display: flex;
  gap: 42px;
  align-items: flex-end;
}

.stat__num{
  color: var(--lime);
  font-family: var(--ff-ui);
  font-weight: 600;
  font-size: 36px;
  line-height: 1;
}

.stat__label{
  margin-top: 6px;
  color: rgba(255,255,255,.65);
  font-family: var(--ff-ui);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: .10em;
  text-transform: uppercase;
}

/* =========================
   CONTACT BUTTON
========================= */
.cluster-hero__contact{
  position: absolute;
  right: 34px;
  bottom: 34px;
  display: flex;
  align-items: center;
  gap: 12px;

  background: var(--black);
  color: #ffffff;
  text-decoration: none;
  padding: 10px 12px 10px 16px;
  border-radius: 999px;

  font-family: "PP Mori", var(--ff-ui);
  font-weight: 600;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0;
  min-width: 105px;
}

.cluster-hero__contactIcon{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: #ffffff;
  color: #111;
  display: grid;
  place-items: center;
  font-weight: 900;
}


/* =========================
   SCROLL COMBO
========================= */
.scroll-combo{
  position: absolute;
  left: 50%;
  bottom: -40px;
  transform: translateX(-50%);
  width: 100%;
  max-width: 360px;
  height: 420px;
  border-radius: 22px;
  overflow: hidden;
  z-index: 4;
}

.scroll-combo .bg-photo{
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  width: 190px;
  height: 190px;
  border-radius: 999px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
  z-index: 1;
}

.scroll-combo .bg-letters{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .95;
  z-index: 2;
  pointer-events: none;
}

.scroll-combo .bg-letters svg{
  width: 270px;
  height: auto;
  transform: translateY(70px);
}

.scroll-combo__vector{
  position: absolute;
  left: 50%;
  top: 220px;
  width: 309px;
  height: 307px;
  transform: translate(-50%, -55%);
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 16px 36px rgba(0,0,0,.18);
  z-index: 3;
}

.scroll-combo .arrow-wrapper{
  position: absolute;
  left: 50%;
  top: 300px;
  transform: translateX(-50%);
  width: 349px;
  height: 91px;
  display: block;
  pointer-events: auto;
  z-index: 4;
}

.scroll-combo .arrow-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.scroll-combo .arrow-icon{
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%,-50%);
  transition: transform .25s ease;
}

.scroll-combo .arrow-wrapper:hover .arrow-icon{
  transform: translate(-50%,-45%);
}


@media (max-width: 1360px){
  .cluster-hero__stats{
    display: none;
  }
}

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

@media (max-width: 980px){
  .cluster-hero__nav{ display: none; }
  .cluster-hero__center{ margin-top: 72px; }
  .cluster-hero__stats{ display: none; }
  .cluster-hero__shell.is-menu-open{
    overflow: visible;
  }
  .cluster-hero__shell.is-menu-open::after{
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(15,15,20,.65);
    border-radius: inherit;
    z-index: 4;
  }
  .cluster-hero__shell.is-menu-open .cluster-hero__nav{
    display: flex;
    position: absolute;
    top: 90px;
    left: 24px;
    right: 24px;
    flex-direction: column;
    gap: 16px;
    padding: 28px;
    background: rgba(15,15,20,.92);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 22px;
    z-index: 5;
    box-shadow: 0 20px 40px rgba(0,0,0,.25);
  }
  .cluster-hero__shell.is-menu-open .cluster-hero__nav a{
    font-size: 16px;
    font-weight: 600;
    text-align: left;
  }
}

@media (max-width: 640px){
  .cluster-hero{ padding: 10px; }

  .cluster-hero__shell{
    border-radius: 50px;
    padding: 18px 16px 80px;
    min-height: 960px;
  }

  .cluster-hero__contact{
    right: 16px;
    bottom: 16px;
  }

  .cluster-hero__notch{
    width: 280px;
    height: 280px;
    bottom: -110px;
  }

  .scroll-combo{
    max-width: 240px;
    height: 350px;
    bottom: -6px;
  }
  .scroll-combo .bg-photo{
    bottom: 30px;
    width: 150px;
    height: 150px;
  }
  .scroll-combo .bg-letters svg{
    width: 210px;
    transform: translateY(50px);
  }
  .scroll-combo__vector{
    top: 190px;
    width: 220px;
    height: 220px;
    transform: translate(-50%, -55%);
  }

  .scroll-combo .arrow-wrapper{
    top: 280px;
    width: 260px;
    height: 70px;
  }

  .cluster-hero__stats{
    position: static;
    margin: 16px auto 10px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    text-align: center;
  }

  .cluster-hero__contact{
    position: static;
    margin: 12px auto 20px;
    justify-content: center;
  }
}

@media (max-width: 640px){
  .cluster-hero__notch::before{
    width: 760px;
    height: 760px;
    bottom: -620px;
  }
  .cluster-hero__notch::after{
    width: 360px;
    height: 360px;
    bottom: -200px;
  }
  .cluster-hero__badge{
    bottom: 58px;
    width: 280px;
    height: 280px;
  }
}