/* Cocktail Party Effect — selective attention for /7xflow/ */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body.mkt-cocktail {
  --cocktail-ink: #0c1018;
  --cocktail-fog: rgba(12, 16, 24, .55);
  --cocktail-mint: #1ecf7a;
  --cocktail-coral: #ff5a3c;
}

/* Sticky tools under header — never hero */
.mkt-sticky-tools {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line, #e6e9ef);
}
[data-theme="dark"] .mkt-sticky-tools {
  background: rgba(12, 16, 24, .9);
}
.mkt-sticky-tools__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem .75rem;
  padding: .45rem 0;
}
.mkt-sticky-tools .buyer-steps--compact {
  display: flex;
  gap: .35rem;
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
}
.mkt-sticky-tools .buyer-steps--compact li {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .72rem;
  color: var(--mute, #6b7280);
  white-space: nowrap;
  opacity: .72;
}
.mkt-sticky-tools .buyer-steps--compact li.current,
.mkt-sticky-tools .buyer-steps--compact li.done {
  opacity: 1;
  color: var(--ink, #12151c);
  font-weight: 600;
}
.mkt-sticky-tools .buyer-steps--compact .n {
  display: inline-flex;
  width: 1.15rem;
  height: 1.15rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eef1f5;
  font-size: .65rem;
  font-weight: 800;
}
.mkt-sticky-tools .buyer-steps--compact li.current .n,
.mkt-sticky-tools .buyer-steps--compact li.done .n {
  background: var(--cocktail-coral);
  color: #fff;
}
.discount-bar--compact {
  display: inline-flex;
  gap: .3rem;
  align-items: center;
  margin: 0;
}
.discount-bar--compact input {
  width: 5.5rem;
  border: 1px solid var(--line, #e6e9ef);
  border-radius: .5rem;
  padding: .35rem .5rem;
  font: inherit;
  font-size: .8rem;
  background: #fafbfc;
}
.discount-bar--compact button {
  border: 0;
  border-radius: .5rem;
  padding: .35rem .65rem;
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  background: #12151c;
  color: #fff;
  cursor: pointer;
}
.mkt-sticky-wa {
  font-size: .8rem;
  font-weight: 700;
  color: var(--cocktail-mint);
  text-decoration: none;
  white-space: nowrap;
}

/* Hero — one attended voice */
.mkt-hero-cocktail {
  position: relative;
  isolation: isolate;
  min-height: min(72vh, 560px);
  display: flex;
  align-items: flex-end;
  color: #f4f6fb;
  background:
    var(--hero-photo, none) center / cover no-repeat,
    linear-gradient(145deg, #0a1018 0%, #152028 45%, #1a1210 100%);
  overflow: hidden;
}
.mkt-hero-cocktail__veil {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(105deg, rgba(8, 12, 18, .92) 0%, rgba(8, 12, 18, .55) 48%, rgba(8, 12, 18, .28) 100%),
    linear-gradient(0deg, rgba(8, 12, 18, .7) 0%, transparent 50%);
  pointer-events: none;
}
.mkt-hero-cocktail__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: clamp(2.5rem, 8vh, 4.5rem) 0 clamp(2rem, 5vh, 3rem);
  max-width: 36rem;
  animation: cocktailRise .85s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes cocktailRise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
.mkt-hero-cocktail .brand-hero {
  margin: 0 0 .55rem;
  font-size: clamp(2.4rem, 7vw, 3.8rem);
  color: #fff;
}
.mkt-hero-cocktail .brand-hero .x {
  color: var(--cocktail-coral);
  text-shadow: 0 0 24px rgba(255, 90, 60, .4);
}
.mkt-hero-cocktail__contrarian {
  margin: 0 0 .45rem;
  font-family: Syne, var(--font-display, sans-serif);
  font-size: clamp(1.05rem, 2.8vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -.02em;
  color: #5cffc8;
  text-shadow: 0 0 18px rgba(92, 255, 200, .35);
  text-wrap: balance;
}
.mkt-hero-cocktail h1 {
  margin: 0 0 1.15rem;
  font-family: Syne, var(--font-display, sans-serif);
  font-size: clamp(1.65rem, 4.5vw, 2.45rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.08;
  color: #fff;
  text-wrap: balance;
}
.mkt-hero-cocktail__cta {
  animation: ctaWhisper 2.6s ease-in-out infinite;
}
@keyframes ctaWhisper {
  0%, 100% { box-shadow: 0 0 0 0 rgba(30, 207, 122, .35); }
  50% { box-shadow: 0 0 0 8px rgba(30, 207, 122, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .mkt-hero-cocktail__inner,
  .mkt-hero-cocktail__cta,
  .mkt-beat { animation: none !important; }
}

.mkt-cocktail-body {
  padding-top: 1.25rem;
  padding-bottom: 2.5rem;
}

/* Product beat — attended channel */
.mkt-beat {
  display: grid;
  gap: 1rem;
  margin: 0 0 1.75rem;
  opacity: .42;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22, 1, .36, 1);
}
.mkt-beat.is-attended,
.mkt-beat--ahora {
  opacity: 1;
  transform: none;
}
.mkt-beat--ahora {
  margin-bottom: 2.25rem;
}
.mkt-beat__media {
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: min(78vh, 640px);
  border-radius: 0;
  overflow: hidden;
  background: #0c1018;
}
.mkt-beat__media img,
.mkt-beat__media .vectary-embed,
.mkt-beat__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mkt-beat__kicker {
  position: absolute;
  top: .85rem;
  left: .85rem;
  z-index: 2;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #0c1018;
  background: #5cffc8;
  padding: .3rem .55rem;
  border-radius: .35rem;
}
.mkt-beat__code {
  position: absolute;
  top: .85rem;
  right: .85rem;
  z-index: 2;
  font-size: .75rem;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, .45);
  padding: .25rem .5rem;
  border-radius: .35rem;
}
.mkt-beat__copy {
  max-width: 28rem;
}
.mkt-beat__name {
  margin: 0 0 .35rem;
  font-family: Syne, var(--font-display, sans-serif);
  font-size: clamp(1.35rem, 3.5vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.mkt-beat__blurb {
  margin: 0 0 .65rem;
  color: var(--mute, #6b7280);
  font-size: .92rem;
  line-height: 1.4;
}
.mkt-beat__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .45rem;
  margin-bottom: .35rem;
}
.mkt-beat__amount {
  font-family: Syne, sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.03em;
}
.mkt-beat__was {
  font-size: .88rem;
  color: var(--mute, #6b7280);
  text-decoration: line-through;
}
.mkt-beat__save {
  font-size: .75rem;
  font-weight: 800;
  color: var(--cocktail-coral);
}
.mkt-beat__meta,
.mkt-beat__moq {
  margin: 0 0 .65rem;
  font-size: .82rem;
  color: var(--mute, #6b7280);
}
.mkt-beat__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .7rem 1.35rem;
  border-radius: .65rem;
  background: var(--cocktail-mint);
  color: #06280f;
  font-weight: 800;
  font-size: .95rem;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(30, 207, 122, .28);
  transition: transform .18s ease, filter .18s;
}
.mkt-beat__cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}
.mkt-beat__cta--disabled {
  background: #e6e9ef;
  color: #8a93a3;
  box-shadow: none;
  cursor: not-allowed;
}

@media (min-width: 860px) {
  .mkt-beat--ahora,
  .mkt-beat--stream {
    grid-template-columns: 1.15fr 1fr;
    align-items: center;
    gap: 1.75rem;
  }
  .mkt-beat__media {
    aspect-ratio: 1 / 1;
    max-height: 520px;
  }
  .mkt-stream {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* Name-call rail */
.mkt-cocktail .rail--para-vos {
  margin: 0 0 2rem;
  padding: 1rem 0 1.15rem;
  border-top: 1px solid var(--line, #e6e9ef);
  border-bottom: 1px solid var(--line, #e6e9ef);
}
.mkt-cocktail .rail--para-vos .rail-head h2 {
  font-size: 1.15rem;
}
.mkt-cocktail .rail--para-vos .rail-item {
  opacity: .88;
  transition: opacity .25s ease, transform .25s ease;
}
.mkt-cocktail .rail--para-vos .rail-item:hover {
  opacity: 1;
  transform: translateY(-3px);
}
.mkt-cocktail .para-vos-tag {
  background: #5cffc8;
  color: #0c1018;
  font-weight: 800;
}

.mkt-tabs-slim {
  margin: 0 0 1rem;
}
.mkt-panel-stream.panel {
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
}
.mkt-panel-stream.panel:not(.on),
.mkt-panel-muted.panel:not(.on) {
  display: none;
}

/* Attenuated background noise */
.mkt-attenuated {
  opacity: .72;
  margin-top: 2.5rem;
}
.mkt-attenuated .section-head h2 {
  font-size: 1.05rem;
}
.mkt-trust-foot {
  margin: 1.5rem 0 0;
  font-size: .82rem;
  color: var(--mute, #6b7280);
  text-align: center;
  line-height: 1.4;
}

@media (max-width: 720px) {
  .mkt-hero-cocktail {
    min-height: min(62vh, 480px);
  }
  .mkt-sticky-tools .buyer-steps--compact .lab {
    display: none;
  }
  .mkt-sticky-tools .discount-bar--compact input {
    width: 4.5rem;
  }
}