soulmate-mobile-hero {
  --hero-background: #16131c;
  --hero-text: #fffafd;
  --hero-muted: #e4dfe8;
  --hero-accent: #f397bc;
  --hero-inline-gap: 24px;
  --hero-content-width: 360px;
  --hero-title-size: clamp(2.125rem, 10.8vw, 3.125rem);
  --hero-title-weight: 800;
  --hero-overlay-top: 0.12;
  --hero-overlay-bottom: 0.88;
  --hero-video-position: 50% 50%;
  --hero-header-gap: 90px;
  --hero-bottom-gap: 32px;
  --hero-button-height: 48px;
  --hero-button-radius: 14px;
  --hero-fade-distance: 0.7;
  --hero-fade-start: 24;
  --hero-shift: 18px;
  --hero-next-background: #f5f4f7;
                                                                              
  --hero-header-clearance: calc(84px + env(safe-area-inset-top, 0px));
  --_hero-progress: 0;
  display: block;
  background: var(--hero-next-background);
  color: var(--hero-text);
}

soulmate-mobile-hero *,
soulmate-mobile-hero *::before,
soulmate-mobile-hero *::after { box-sizing: border-box; }

.sm-hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: calc(var(--hero-header-clearance) + var(--hero-header-gap)) max(var(--hero-bottom-gap), env(safe-area-inset-bottom, 0px));
  padding-inline: max(var(--hero-inline-gap), env(safe-area-inset-left, 0px)) max(var(--hero-inline-gap), env(safe-area-inset-right, 0px));
}

.sm-hero-media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--hero-background);
  opacity: calc(1 - var(--_hero-progress));
}

                                                                                 
.sm-hero-placeholder,
.sm-hero-video,
.sm-hero-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }

.sm-hero-placeholder {
  background:
    radial-gradient(ellipse at 88% 15%, rgb(128 107 159 / 0.24), transparent 48%),
    radial-gradient(ellipse at 8% 47%, rgb(171 81 122 / 0.15), transparent 50%),
    linear-gradient(114deg, #16131c 8%, #302633 47%, #171722 80%);
}

.sm-hero-placeholder img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-video-position);
}

.sm-hero-video {
  display: block;
  object-fit: cover;
  object-position: var(--hero-video-position);
  opacity: 0;
  transition: opacity 400ms ease;
}
soulmate-mobile-hero[data-video-visible] .sm-hero-video { opacity: 1; }
.sm-hero-overlay {
  background: linear-gradient(180deg,
    rgb(12 10 17 / var(--hero-overlay-top)) 0%,
    rgb(12 10 17 / 0.48) 34%,
    rgb(12 10 17 / var(--hero-overlay-bottom)) 100%);
}

.sm-hero-content {
  width: 100%;
  max-width: var(--hero-content-width);

  margin-inline: auto;

  text-align: center;

  opacity: calc(1 - var(--_hero-progress));
  transform: translateY(calc(var(--_hero-progress) * var(--hero-shift) * -1));
}
/* Keyboard users keep a readable, operable CTA while it owns focus. */
.sm-hero-content:focus-within { opacity: 1; transform: none; }
.sm-hero:focus-within .sm-hero-media { opacity: 1; }

.sm-hero-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap:4px !important;
  margin-bottom: 18px !important;
}
.sm-hero-stars {
  flex: 0 0 auto;
  color: var(--hero-accent);
  font: 600 0.875rem/1 var(--font-primary);
  letter-spacing: 0.05em;
}
.sm-hero-quote {
  font-family: var(--font-primary) !important;

  font-size: 1.15rem !important;
  font-style: normal !important;
  font-weight: 400 !important;

  color: #f3edf1 !important;

  line-height: 1.05;

  text-shadow:
    0 1px 1px rgba(0, 0, 0, 0.35);
}
.sm-hero-title {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--hero-title-size);
  font-weight: var(--hero-title-weight);
  line-height: 1.035;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: normal;
}
.sm-hero-description {
  margin: 22px auto 0;
  max-width: 35ch;
  color: var(--hero-muted);
  font: 400 1rem/1.6 var(--font-primary);
  text-wrap: pretty;
}
.sm-hero-actions {
  display: grid;
  gap: 10px;

  width: 88%;
  max-width: 320px;

  margin: 26px auto 0;
}
.sm-hero-cta {
  min-height: var(--hero-button-height);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 12px 18px;
  border: 1px solid transparent;
  border-radius: var(--hero-button-radius);
  font: 650 0.82rem/1.2 var(--font-primary);
  letter-spacing: 0.055em;
  text-align: center;
  text-decoration: none;
  appearance: none;
  cursor: pointer;
  transition: transform 160ms ease, background-color 160ms ease;
  -webkit-tap-highlight-color: transparent;
}
.sm-hero-cta--primary {
  color: #ffffff !important;

  border: 1px solid rgba(255, 255, 255, 0.34) !important;

  background:
    linear-gradient(
      135deg,
      #d987ad 0%,
      #ad7dd2 100%
    ) !important;

  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
}

.sm-hero-cta--secondary {
  color: rgba(255, 255, 255, 0.94) !important;

  border: 1px solid rgba(255, 255, 255, 0.30) !important;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.10),
      rgba(255, 255, 255, 0.035)
    ) !important;

  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);

  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.13) !important;
}
.sm-hero-cta:active { transform: scale(0.96); }
.sm-hero-cta:focus-visible {
  outline: 2px solid var(--hero-accent);
  outline-offset: 5px;
}
.sm-hero-cta[aria-disabled="true"] { cursor: default; }
.sm-hero-cta[aria-disabled="true"]:active { transform: none; }

soulmate-mobile-hero[data-has-video] { --hero-header-gap: 60px; }

@media (max-width: 359px) {
  soulmate-mobile-hero { --hero-inline-gap: 20px; --hero-header-gap: 24px; --hero-bottom-gap: 24px; }
  .sm-hero-eyebrow { gap: 10px; margin-bottom: 20px; }
}
@media (hover: hover) {
  .sm-hero-cta:hover {
    transform: translateY(-1px);
  }

  .sm-hero-cta--primary:hover {
    box-shadow:
      0 10px 26px rgba(0, 0, 0, 0.26),
      inset 0 1px 0 rgba(255, 255, 255, 0.38) !important;
  }

  .sm-hero-cta--secondary:hover {
    background:
      linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.15),
        rgba(255, 255, 255, 0.055)
      ) !important;
  }
}
                                                                                 
@media (max-height: 680px) {
  soulmate-mobile-hero {
    --hero-title-size: clamp(1.875rem, 8.8vw, 2.5rem);
    --hero-header-gap: 20px;
    --hero-bottom-gap: 24px;
  }
  .sm-hero-eyebrow { margin-bottom: 16px; }
  .sm-hero-description { margin-top: 16px; line-height: 1.5; }
  .sm-hero-actions { margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .sm-hero-content, .sm-hero-media { opacity: 1; transform: none; }
  .sm-hero-cta, .sm-hero-video { transition: none; }
}
@media (forced-colors: active) {
  .sm-hero { background: Canvas; color: CanvasText; }
  .sm-hero-media { display: none; }
  .sm-hero-quote, .sm-hero-description, .sm-hero-stars { color: CanvasText; }
  .sm-hero-cta { border: 1px solid ButtonText; background: ButtonFace; color: ButtonText; }
}
                                   

.sm-hero-content {
  width: calc(100% - 48px) !important;
  max-width: 350px !important;
  margin: 250px auto 0 !important;
  text-align: center !important;
}

.sm-hero-eyebrow {
  justify-content: center !important;
  margin-bottom: 18px !important;
}

.sm-hero-title {
  max-width: 330px !important;
  margin: 0 auto !important;

  font-size: clamp(1.9rem, 8.7vw, 2.5rem) !important;
  line-height: 1.02 !important;
}

.sm-hero-description {
  max-width: 300px !important;
  margin: 18px auto 0 !important;

  font-size: 0.92rem !important;
  line-height: 1.5 !important;
}

.sm-hero-actions {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: stretch !important;

  width: 330px !important;
  /* Limit the row to the space from its centered parent’s left edge to the viewport edge. */
  max-width: min(88vw, calc((100vw + 100%) / 2)) !important;

  gap: 10px !important;

  margin: 24px auto 0 !important;
}

.sm-hero-cta {
  position: relative;

  flex: 1 1 0 !important;
  width: auto !important;

  min-height: 42px !important;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 9px 10px !important;

  border-radius: 14px !important;

  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.055em !important;

  text-align: center;
  text-decoration: none;

  transition:
    transform 180ms ease,
    box-shadow 220ms ease,
    background 220ms ease;
}

                                                            

.sm-hero-stars {
  color: #e8b8c8 !important;

  -webkit-text-stroke: 0.7px #1a1118;

  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.35);

  letter-spacing: 0.04em;
}

.sm-hero-quote {
  font-family: var(--font-primary) !important;
  font-size: 1.18rem !important;
  font-style: italic !important;
  font-weight: 600 !important;

  color: #f3edf1 !important;

  text-shadow:
    0 1px 1px rgba(0, 0, 0, 0.38);

  line-height: 1.15;
}

.sm-hero-quote {
  font-family: Georgia, 'Times New Roman', serif !important;
  font-size: 1.08rem !important;
  font-style: italic !important;
  font-weight: 400 !important;

  color: #f3edf1 !important;

  line-height: 1.05;

  text-shadow:
    0 1px 1px rgba(0, 0, 0, 0.35);
}

.sm-hero-title {
  font-size: clamp(1.65rem, 7.2vw, 2.15rem) !important;
  line-height: 1.03 !important;
  max-width: 320px !important;
  margin-inline: auto !important;
}

                    
.sm-hero-eyebrow,
.sm-hero-title,
.sm-hero-description,
.sm-hero-actions {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(5px);
}

                        
.sm-hero-eyebrow {
  animation: soulmateHeroEnter 800ms cubic-bezier(.22, 1, .36, 1) forwards;
  animation-delay: 250ms;
}

.sm-hero-title {
  animation: soulmateHeroEnter 900ms cubic-bezier(.22, 1, .36, 1) forwards;
  animation-delay: 420ms;
}

.sm-hero-description {
  animation: soulmateHeroEnter 900ms cubic-bezier(.22, 1, .36, 1) forwards;
  animation-delay: 590ms;
}

.sm-hero-actions {
  animation: soulmateHeroEnter 900ms cubic-bezier(.22, 1, .36, 1) forwards;
  animation-delay: 760ms;
}

@keyframes soulmateHeroEnter {
  from {
    opacity: 0;
    transform: translateY(28px);
    filter: blur(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sm-hero-eyebrow,
  .sm-hero-title,
  .sm-hero-description,
  .sm-hero-actions {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none;
  }
}

@media (min-width: 1024px) {
  soulmate-mobile-hero {
    --hero-inline-gap: clamp(32px, 4vw, 72px);
    --hero-bottom-gap: clamp(84px, 11vh, 120px);
    --hero-overlay-bottom: .76;
  }

  .sm-hero {
    min-height: 100svh;
    align-items: flex-end;
    padding-block: calc(var(--hero-header-clearance) + 16px) var(--hero-bottom-gap);
  }

  .sm-hero-content {
    width: 100% !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
    translate: none;
  }

  .sm-hero-eyebrow { margin: 0 auto 12px !important; }
  .sm-hero-stars { font-size: .625rem; }
  .sm-hero-quote {
    font-size: clamp(.75rem, .95vw, .875rem) !important;
  }

  .sm-hero-title {
    max-width: 610px !important;
    font-size: clamp(1.75rem, 2.25vw, 2.125rem) !important;
    line-height: 1.08 !important;
  }

  .sm-hero-description {
    max-width: 48ch !important;
    margin-top: 16px !important;
    font-size: clamp(.8125rem, .95vw, .875rem) !important;
    line-height: 1.55 !important;
  }

  .sm-hero-actions {
    width: 84% !important;
    max-width: 1280px !important;
    justify-content: space-between !important;
    gap: clamp(24px, 3vw, 40px) !important;
    margin-top: clamp(84px, 12vh, 118px) !important;
    position: relative !important;
    top: clamp(65px, 8vh, 80px) !important;


  }

  .sm-hero-cta {
    flex: 0 0 clamp(178px, 15vw, 196px) !important;
    min-height: 48px !important;
    padding-inline: 16px !important;
    font-size: 0.78rem !important;
  }
}
/* Ajuste fino Hero desktop: posición del bloque textual */
@media (min-width: 1024px) {

  .sm-hero-eyebrow {
    position: relative;
    top: clamp(135px, 21vh, 175px) !important;
    margin: 0 auto 6px !important;
  }

  .sm-hero-title {
    position: relative;
    top: clamp(155px, 24vh, 200px) !important;
    margin: 0 auto !important;
  }

  .sm-hero-description {
    position: relative;
    top: clamp(175px, 27vh, 225px) !important;
    margin: 8px auto 0 !important;
  }

}


@media (min-width: 1024px) {

  .sm-hero-quote {
    font-size: clamp(0.58rem, 0.64vw, 0.68rem) !important;
    line-height: 1 !important;
  }

  .sm-hero-title {
    font-size: clamp(1.28rem, 1.55vw, 1.6rem) !important;
    line-height: 0.96 !important;
  }

  .sm-hero-description {
    font-size: clamp(0.64rem, 0.68vw, 0.72rem) !important;
    line-height: 1.18 !important;
  }

  .sm-hero-cta {
    width: clamp(150px, 12vw, 175px) !important;
    min-height: 40px !important;
    padding: 8px 13px !important;
    font-size: clamp(0.62rem, 0.66vw, 0.7rem) !important;
  }

}

@media (max-width: 1023px) {
  .sm-hero-actions {
    --hero-actions-width: min(330px, 88vw, calc((100vw + 100%) / 2));
    width: var(--hero-actions-width) !important;
    max-width: none !important;
    margin-inline: calc((100% - var(--hero-actions-width)) / 2) !important;
  }
}