/* ============================================================
   MARES · Movimiento y fuerza de venta
   Marquee sticky, scroll-reveal, combo banner.
   Paleta teal/gold/cream — design system tokens.
   ============================================================ */

:root {
  --marquee-h: 40px;
  --marquee-dur: 34s;
  --reveal-y: 16px;
  --reveal-dur: 0.6s;
  --combo-edge: rgba(138, 112, 63, 0.96);
  --header-h: 76px;
  /* Fallbacks for pages that don't load colors_and_type.css */
  --color-gold:    #8a703f;
  --mares-cream:   #f7efea;
}

/* Header shrinks below 900px (see styles.css) — keep this in sync so every
   sticky offset computed from --header-h (filters bar, tienda sidebar, PDP
   buy card) tracks the real header height at this breakpoint. */
@media (max-width: 900px) {
  :root { --header-h: 54px; }
}

/* ============================================================
   ELEMENTO 1 · Barra de anuncios animada (sticky)
   ============================================================ */
.mares-marquee {
  position: sticky;
  top: 0;
  z-index: 10000;
  height: var(--marquee-h);
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--mares-cream);
  background: var(--color-gold);
  box-shadow: 0 1px 0 rgba(247, 239, 234, 0.14) inset,
              0 6px 16px rgba(0, 0, 0, 0.10);
  transition: transform 0.25s ease;
}

/* Slides up together with .header-custom on scroll-down (see scripts.js) */
.mares-marquee.header-hide {
  transform: translateY(-100%);
}

.mares-marquee__viewport {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.mares-marquee__track {
  display: inline-flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  will-change: transform;
  animation: mares-marquee-scroll var(--marquee-dur) linear infinite;
}

/* Pausa en hover — activada por data-marquee-pause="on" */
[data-marquee-pause="on"] .mares-marquee:hover .mares-marquee__track {
  animation-play-state: paused;
}

.mares-marquee__group {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.mares-marquee__item {
  display: inline-flex;
  align-items: center;
}

.mares-marquee__msg {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--mares-cream);
}

.mares-marquee__sep {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6em;
  color: rgba(247, 239, 234, 0.7);
}

.mares-wave-glyph {
  width: 26px;
  height: 11px;
  display: block;
}

/* Separador — alterna entre ola y punto según data-marquee-sep */
.mares-marquee__sep-dot {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  opacity: 0.85;
  display: none;
}
[data-marquee-sep="punto"] .mares-marquee__sep-wave { display: none; }
[data-marquee-sep="punto"] .mares-marquee__sep-dot  { display: inline; }

/* --- Variaciones de fondo de la barra --- */
[data-marquee-style="gradient"] .mares-marquee {
  background: var(--grad-cta);
}
[data-marquee-style="teal"] .mares-marquee {
  background: var(--color-teal);
  box-shadow: 0 -2px 0 var(--color-gold) inset,
              0 6px 16px rgba(0, 0, 0, 0.10);
}
[data-marquee-style="teal"]     .mares-marquee__sep,
[data-marquee-style="gradient"] .mares-marquee__sep { color: rgba(247, 239, 234, 0.7); }

@keyframes mares-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .mares-marquee__track { animation-duration: 120s; }
}

/* Header sits JUST below the marquee bar */
.header-custom,
.mk-header {
  top: var(--marquee-h) !important;
}

/* Below 900px (see styles.css header media query) .header-custom switches
   from position:sticky to position:relative, where `top` shifts the box
   instead of setting a sticky offset — that opened a 40px gap under the
   marquee. Reset it so the header sits flush again. */
@media (max-width: 900px) {
  .header-custom,
  .mk-header {
    top: 0 !important;
  }
}

/* Category filter on tienda sits below marquee + header */
.category-filter,
.mk-filters {
  top: calc(var(--header-h) + var(--marquee-h)) !important;
}

/* Sticky elements that sit below the header (tienda sidebar, PDP buy card —
   see kit.css) follow the same header+marquee offset by default. When
   scripts.js hides the header on scroll-down, it adds .header-hidden to
   <body>; pull them back up to just under the marquee so they don't float
   in a gap left by the now-hidden header. */
body.header-hidden .tienda-sidebar,
body.header-hidden .mk-pdp__buy-card {
  top: var(--marquee-h);
}

/* ============================================================
   ELEMENTO 2 · Scroll-reveal
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(var(--reveal-y, 16px));
  transition: opacity var(--reveal-dur, 0.6s) ease,
              transform var(--reveal-dur, 0.6s) cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ============================================================
   ELEMENTO 3 · Banner de combo destacado
   ============================================================ */
.mares-combo-section {
  padding: 92px 5vw;
  background: var(--mares-cream);
}

.mares-combo {
  position: relative;
  overflow: hidden;
  max-width: 1160px;
  margin: 0 auto;
  border-radius: 28px;
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  align-items: stretch;
  color: var(--mares-cream);
  background: var(--grad-cta);
  box-shadow: var(--shadow-xl);
}

.mares-combo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(197, 177, 136, 0.45);
  pointer-events: none;
  z-index: 4;
}

.mares-combo__content {
  position: relative;
  z-index: 2;
  padding: 60px 56px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.mares-combo__eyebrow {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--mares-gold-light);
}

.mares-combo__title {
  font-family: var(--font-display);
  color: var(--mares-cream);
  font-size: clamp(2.6rem, 4.4vw, 3.7rem);
  line-height: 1.02;
  margin: 0;
}

.mares-combo__lede {
  color: rgba(247, 239, 234, 0.9);
  font-size: 1.06rem;
  line-height: 1.65;
  max-width: 440px;
  margin: 2px 0 6px;
}

.mares-combo__pricerow {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px 18px;
  margin: 6px 0 4px;
}

.mares-combo__old {
  font-family: var(--font-sans);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  color: rgba(247, 239, 234, 0.55);
  font-size: 1.3rem;
}

.mares-combo__new {
  font-family: var(--font-display);
  font-size: 3.5rem;
  line-height: 0.85;
  color: var(--mares-gold-light);
}

.mares-combo__save {
  align-self: center;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mares-cream);
  background: rgba(247, 239, 234, 0.14);
  border: 1px solid rgba(247, 239, 234, 0.28);
  border-radius: 999px;
  padding: 7px 13px;
}

.mares-combo__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 20px;
  margin-top: 14px;
}

/* CTA inherits mk-btn mk-btn--secondary; only extend padding/size */
.mares-combo__cta {
  padding: 14px 26px !important;
  font-size: 1.02rem !important;
}

.mares-combo__trust {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-sans);
  font-size: 0.86rem;
  color: rgba(247, 239, 234, 0.82);
}

.mares-combo__trust i { color: var(--mares-gold-light); }

.mares-combo__media {
  position: relative;
  min-height: 440px;
  overflow: hidden;
}

.mares-combo__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.mares-combo__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, var(--combo-edge) 0%, rgba(30, 77, 89, 0) 46%),
    linear-gradient(0deg, rgba(20, 50, 58, 0.34), rgba(20, 50, 58, 0) 42%);
}

.mares-combo__chip {
  position: absolute;
  z-index: 2;
  left: 22px;
  bottom: 22px;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--mares-cream);
  background: rgba(29, 77, 89, 0.78);
  border: 1px solid rgba(247, 239, 234, 0.22);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  padding: 8px 14px;
  border-radius: 999px;
}

/* --- Variación: panel teal sólido + textura de arena sutil --- */
[data-combo-bg="panel"] .mares-combo {
  background: var(--color-teal);
  --combo-edge: rgba(29, 77, 89, 0.96);
}
[data-combo-bg="panel"] .mares-combo__content::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("MARES%20Design%20System/assets/sands/arena-unisex.jpg") center/cover;
  opacity: 0.12;
  mix-blend-mode: screen;
  pointer-events: none;
}

@media (max-width: 860px) {
  .mares-combo {
    grid-template-columns: 1fr;
  }
  .mares-combo__media {
    min-height: 280px;
    order: -1;
  }
  .mares-combo__media::before {
    background:
      linear-gradient(0deg, var(--combo-edge) 0%, rgba(30, 77, 89, 0) 52%);
  }
  .mares-combo__content { padding: 40px 30px 44px; }
}

@media (max-width: 576px) {
  .mares-combo-section { padding: 48px 5vw; }
  .mares-combo__title { font-size: 2.4rem; }
  .mares-combo__new { font-size: 2.8rem; }
}