/* Sección principal */
.s-hero{
  width: 100%;
  overflow-x: clip;
  margin: 0;
  padding: 0;
  margin-bottom: calc(-1 * var(--stitch, 6px));
  position: relative;
  z-index: 1;
}

.hero__stage{
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  aspect-ratio: 10667 / 6000;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  background: none;
  --safe-top: 18.5%;
  --safe-bot: 38%;
  --safe-x: clamp(16px, 3vw, 44px);
  --fs-kicker: clamp(14px, 1.2vw, 18px);
  --fs-muted:  clamp(40px, 6.9vw, 92px);
  --fs-imagine:clamp(40px, 6.9vw, 92px);
  --fs-bottom: clamp(56px, 9.4vw, 132px);
  --fs-sub:    clamp(12px, 1.25vw, 20px);
}

/* Fondo */
.hero__bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.hero__content{
  position: absolute;
  inset: 0;
  z-index: 2;
}

.hero__contentInner{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: var(--safe-top);
  bottom: var(--safe-bot);
  width: min(1180px, calc(100% - (var(--safe-x) * 2)));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 0;
}

.hero__kicker{
  margin: 0 0 14px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--brand-red-2);
  font-size: var(--fs-kicker);
}

.hero__title{
  margin: 0;
  line-height: 0.92;
  text-wrap: balance;
}

.hero__row{
  display: block;
  white-space: nowrap;
}

.hero__muted{
  font-weight: 800;
  color: #b9b9b9;
  font-size: var(--fs-muted);
}

.hero__imagine{
  font-weight: 800;
  color: var(--brand-red);
  margin-left: clamp(10px, 1.6vw, 18px);
  font-size: var(--fs-imagine);
}

.hero__row--bottom{
  font-weight: 800;
  font-style: italic;
  color: var(--brand-red-2);
  font-size: var(--fs-bottom);
}

/* Subtítulo */
.hero__subtitle{
  margin: 14px auto 0;
  max-width: min(980px, 92vw);
  font-weight: 500;
  line-height: 1.35;
  color: #1f1f1f;
  text-wrap: balance;
  font-size: var(--fs-sub);
  padding-inline: 6px;
}

/* Responsive */
@media (min-width: 1600px){
  .hero__stage{ --safe-top: 16.5%; }
}
@media (min-width: 1900px){
  .hero__stage{ --safe-top: 15%; }
}

@media (max-width: 1400px){
  .hero__stage{
    --safe-top: 27%;
    --safe-bot: 45%;
    --fs-kicker: clamp(12px, 1.05vw, 16px);
    --fs-muted:  clamp(34px, 6.0vw, 78px);
    --fs-imagine:clamp(34px, 6.0vw, 78px);
    --fs-bottom: clamp(48px, 8.2vw, 108px);
    --fs-sub:    clamp(12px, 1.15vw, 16px);
  }
  .hero__row{ white-space: normal; }
}

@media (max-width: 1200px){
  .hero__stage{
    --safe-top: 31%;
    --safe-bot: 56%;
    --fs-kicker: clamp(11px, 1.0vw, 15px);
    --fs-muted:  clamp(30px, 5.6vw, 68px);
    --fs-imagine:clamp(30px, 5.6vw, 68px);
    --fs-bottom: clamp(42px, 7.6vw, 92px);
    --fs-sub:    clamp(11.5px, 1.2vw, 15px);
  }
  .hero__subtitle{ max-width: min(760px, 92vw); }
}

@media (max-width: 1024px){
  .hero__stage{
    --safe-top: 36%;
    --safe-bot: 64%;
    --safe-x: 18px;
    --fs-kicker: 11px;
    --fs-muted:  clamp(25px, 6.2vw, 48px);
    --fs-imagine:clamp(25px, 6.2vw, 48px);
    --fs-bottom: clamp(33px, 8.1vw, 60px);
    --fs-sub:    11px;
  }
  .hero__subtitle{
    margin-top: 10px;
    line-height: 1.26;
  }
}

/* Modificación, subí el área del texto más arriba de las siguientes secciones: */
@media (max-width: 820px){
  .hero__stage{
    --safe-top: 24%;
    --safe-bot: 52%;
    --safe-x: 18px;
    --fs-kicker: 10.6px;
    --fs-muted:  clamp(22px, 6.8vw, 42px);
    --fs-imagine:clamp(22px, 6.8vw, 42px);
    --fs-bottom: clamp(30px, 9.0vw, 52px);
    --fs-sub:    10.8px;
  }
  .hero__subtitle{ margin-top: 8px; }
}

@media (max-width: 560px){
  .hero__stage{
    --safe-top: 16%;
    --safe-bot: 54%;
    --safe-x: 16px;
    --fs-kicker: 9.2px;
    --fs-muted:  clamp(17px, 5.2vw, 23px);
    --fs-imagine:clamp(17px, 5.2vw, 23px);
    --fs-bottom: clamp(19px, 6.4vw, 29px);
    --fs-sub:    10.2px;
  }
  .hero__contentInner{ justify-content: flex-start; }
  .hero__subtitle br{ display: none; }
  .hero__kicker{ margin-bottom: 6px; letter-spacing: 0.6px; }
  .hero__subtitle{ margin-top: 6px; line-height: 1.16; }
  .hero__imagine{ margin-left: 6px; }
}

@media (max-width: 420px){
  .hero__stage{
    --safe-top: 18%;
    --safe-bot: 56%;
    --safe-x: 14px;
    --fs-kicker: 8.7px;
    --fs-muted:  clamp(13.5px, 4.7vw, 19px);
    --fs-imagine:clamp(13.5px, 4.7vw, 19px);
    --fs-bottom: clamp(16.5px, 5.9vw, 24px);
    --fs-sub:    9.5px;
  }
  .hero__kicker{ margin-bottom: 5px; letter-spacing: 0.55px; }
  .hero__subtitle{ margin-top: 5px; line-height: 1.12; }
}

@media (max-aspect-ratio: 3/4){
  .hero__stage{ --safe-bot: 58%; }
}
