/* ============================================================
   LATRICOLOR.CO — V5 HINCHADA CHAOS
   Sé Fuerte. Sé Fiera. Sé Tricolor.
   ============================================================ */

:root {
  /* ===== Stadium palette ===== */
  --bg:          #F0EBE0;   /* Crema estadio */
  --bg-warm:     #E8E0CF;   /* Crema cálida — secondary panels */
  --bg-deep:     #DCD2BD;   /* Crema profunda — accents */
  --ink:         #0A0A0A;   /* Negro hinchada */
  --ink-soft:    #2A2A28;
  --ink-mid:     #4A4A48;
  --muted:       #8A867E;

  /* ===== Flag — used everywhere, no apology ===== */
  --yellow:      #FFD300;   /* Amarillo Bandera */
  --yellow-warm: #FFE552;
  --yellow-deep: #D9B400;
  --blue:        #0033A0;   /* Azul Cancha */
  --blue-light:  #3B6FE0;
  --blue-deep:   #001D5C;
  --red:         #E63946;   /* Rojo Bengala */
  --red-warm:    #FF5868;
  --red-deep:    #A8141C;
  --green-grass: #2D5016;   /* Verde Césped */
  --wa:          #25D366;
  --wa-deep:     #1FB855;

  /* ===== Tokens ===== */
  --shadow-hard: 5px 5px 0 var(--ink);
  --shadow-soft: 3px 3px 0 var(--ink);
  --shadow-mini: 2px 2px 0 var(--ink);
  --border:      3px solid var(--ink);
  --border-thin: 2px solid var(--ink);

  /* ===== Layout ===== */
  --maxw:        1280px;
  --gutter:      1.5rem;
  --nav-h:       54px;
  --announce-h:  28px;
  --tribune-h:   34px;
  --promo-h:     0px;
  --offset:      calc(var(--promo-h) + var(--announce-h) + var(--nav-h) + var(--tribune-h));
}

/* When the -10% promo bar is mounted, the whole top stack shifts down
   by --promo-h. Variable cascade keeps --offset and every fixed-top
   bar in sync without per-rule overrides. */
html.promo-active {
  --promo-h: 40px;
}

/* ============================================================
   RESET + BASE
   ============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--offset) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Grain texture overlay — print/stadium feel */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.07;
  pointer-events: none;
  z-index: 100;
  mix-blend-mode: multiply;
}

img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
table { border-collapse: collapse; }

/* Selection in flag colors */
::selection { background: var(--yellow); color: var(--ink); }

/* Focus ring — visible, no apology */
:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}

/* SVG icon defaults */
.ic { width: 1em; height: 1em; display: inline-block; vertical-align: -0.12em; flex-shrink: 0; }
.ic-wa-mini { width: 18px; height: 18px; flex-shrink: 0; }
.ic-wa-big { width: 28px; height: 28px; flex-shrink: 0; }

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(.22,.61,.36,1);
}
.reveal.visible {
  opacity: 1;
  transform: none;
}

/* ============================================================
   SPLASH SCREEN — first-visit consent gate + WOW moment
   Lives ABOVE everything else. Hidden via .has-entered class set
   synchronously in <head> when sessionStorage flag exists.
   ============================================================ */
html.has-entered .splash { display: none; }
html:not(.has-entered) body {
  /* Lock page scroll while splash is up — restored when splash exits */
  overflow: hidden;
}

.splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  /* Semi-transparent backdrop — site stays partially visible behind so
     the offer feels like an overlay on something the buyer wants. */
  background: rgba(10, 10, 10, 0.75);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  overflow: hidden;
  transition: opacity 0.4s ease, backdrop-filter 0.4s ease;
  animation: splashBackdropIn 0.4s ease-out both;
}
@keyframes splashBackdropIn {
  0%   { opacity: 0; -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); }
  100% { opacity: 1; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
}

/* Diagonal flag stripes — kept for atmosphere, dimmed since backdrop
   already does most of the work. */
.splash-bg {
  position: absolute;
  inset: -15%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.7;
}
.sb-stripe {
  position: absolute;
  left: -25%;
  width: 150%;
  height: 28%;
  transform: rotate(-12deg);
  opacity: 0.05;
  animation: splashDrift 14s ease-in-out infinite;
}
.sb-stripe-1 { background: var(--yellow); top: 8%; animation-delay: 0s; }
.sb-stripe-2 { background: var(--blue);   top: 40%; animation-delay: -4s; }
.sb-stripe-3 { background: var(--red);    top: 72%; animation-delay: -8s; }
@keyframes splashDrift {
  0%, 100% { transform: rotate(-12deg) translateY(0); }
  50%      { transform: rotate(-12deg) translateY(-30px); }
}

/* Centered modal — cream card on the blurred dark backdrop */
.splash-modal {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 480px;
  background: var(--bg);
  color: var(--ink);
  border: 4px solid var(--ink);
  box-shadow: 8px 8px 0 var(--yellow);
  padding: 2.5rem 1.6rem 1.6rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  animation: splashModalIn 0.5s cubic-bezier(.22,.61,.36,1) 0.1s both;
}
@keyframes splashModalIn {
  0%   { opacity: 0; transform: translateY(20px) scale(0.94); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Top banderola — red inclined badge */
.splash-bandera {
  background: var(--red);
  color: var(--bg);
  font-family: 'Anton', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.4rem 0.95rem;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  transform: rotate(-3deg);
  margin-top: -0.4rem;
}

/* Splash brand logo — La · Tricolor with 3-syllable slide-in.
   Sits above the bandera in the offer modal. */
.splash-logo {
  margin-bottom: 0.4rem;
  animation: splashFadeIn 0.4s ease-out both;
  animation-delay: 0.15s;
}
.splash-logo .la {
  color: var(--ink-mid);
  animation: splashFadeIn 0.4s ease-out 0.05s both;
}
.splash-logo-word {
  font-size: clamp(2.2rem, 7vw, 3.4rem);
  --logo-stroke: 1.8px;
  --logo-shadow: 3px;
}
/* Stagger the 3 syllables on entry. Each rides in from a different
   vector so the eye gets 3 distinct beats. */
.splash-logo-word .tri {
  display: inline-block;
  animation: splashSyllableDown 0.5s cubic-bezier(.22,.61,.36,1) 0.2s both;
}
.splash-logo-word .co {
  display: inline-block;
  animation: splashSyllableLeft 0.5s cubic-bezier(.22,.61,.36,1) 0.32s both;
}
.splash-logo-word .lor {
  display: inline-block;
  animation: splashSyllableUp 0.5s cubic-bezier(.22,.61,.36,1) 0.44s both;
}
@keyframes splashSyllableDown {
  0%   { opacity: 0; transform: translateY(-40px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes splashSyllableLeft {
  0%   { opacity: 0; transform: translateX(-30px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes splashSyllableUp {
  0%   { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Title: DESBLOQUEA / -10% */
.splash-title {
  font-family: 'Anton', sans-serif;
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
}
.splash-line { display: block; }
.splash-unlock {
  color: var(--ink);
  font-size: clamp(2.5rem, 8vw, 4rem);
  animation: splashLineIn 0.55s cubic-bezier(.22,.61,.36,1) 0.25s both;
}
.splash-discount {
  /* "-10%" reads ~1.5× DESBLOQUEA per spec — clamp 3.75 → 6rem */
  color: var(--red);
  font-size: clamp(3.75rem, 12vw, 6rem);
  text-shadow:
    -3px 0 0 var(--yellow),
    3px 3px 0 rgba(0,0,0,0.18);
  animation: splashLineIn 0.55s cubic-bezier(.22,.61,.36,1) 0.4s both;
  letter-spacing: -0.04em;
}
@keyframes splashLineIn {
  0%   { opacity: 0; transform: translateY(14px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.splash-sub {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-soft);
  animation: splashFadeIn 0.5s ease-out 0.6s both;
}

/* Main CTA — Activar mi -10% */
.splash-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  background: var(--yellow);
  color: var(--ink);
  border: 3px solid var(--ink);
  padding: 1.3rem 2.5rem;
  font-family: 'Anton', sans-serif;
  font-size: clamp(1.05rem, 4vw, 1.35rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 6px 6px 0 var(--red);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
  animation:
    splashFadeIn 0.5s ease-out 0.75s both,
    splashCtaPulse 2s ease-in-out 1.3s infinite;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  margin-top: 0.3rem;
  width: 100%;
}
.splash-cta:hover,
.splash-cta:focus-visible {
  animation: splashFadeIn 0.5s ease-out 0.75s both;
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--red);
  background: var(--bg);
}
.splash-cta:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--red);
}
@keyframes splashCtaPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.02); }
}

/* Audio teaser — small line under CTA */
.splash-audio-line {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
  animation: splashFadeIn 0.5s ease-out 0.95s both;
}

/* Skip link — bottom of modal, gray and quiet */
.splash-skip {
  background: none;
  border: 0;
  color: var(--ink-mid);
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.5rem;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  opacity: 0.6;
  transition: opacity 0.15s, color 0.15s;
  margin-top: 0.2rem;
  animation: splashFadeIn 0.5s ease-out 1.1s both;
}
.splash-skip:hover, .splash-skip:focus-visible {
  opacity: 1;
  color: var(--ink);
}

@keyframes splashFadeIn {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (min-width: 640px) {
  .splash-cta { width: auto; }
}

/* Curtain — three horizontal flag bands stacked top→bottom. Hidden
   until .splash.exiting kicks them in. Each band animates independently
   so the reveal feels like a stadium banner snapping open. */
.splash-curtain {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.05s ease-in;
}
.sc-band {
  flex: 1;
  width: 100%;
  transform: translateY(0);
  transition:
    transform 0.7s cubic-bezier(.65,0,.35,1),
    opacity   0.7s cubic-bezier(.65,0,.35,1);
  will-change: transform, opacity;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.05) inset;
}
.sc-band-yellow { background: var(--yellow); }
.sc-band-blue   { background: var(--blue); }
.sc-band-red    { background: var(--red); }

/* EXIT — bands cover the splash instantly, content fades fast, then
   yellow slides up, blue compresses + fades, red slides down. The
   splash background drops to transparent so the bands ARE the splash
   for the duration of the animation; once they're gone, the site
   underneath is what the eye sees. */
.splash.exiting {
  background: transparent;
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  pointer-events: none;
  transition: background 0.15s ease-in, backdrop-filter 0.15s ease-in;
}
.splash.exiting .splash-bg {
  opacity: 0;
  transition: opacity 0.15s ease-in;
}
.splash.exiting .splash-modal {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.18s ease-in, transform 0.25s cubic-bezier(.7,0,.84,0);
}
.splash.exiting .splash-curtain {
  opacity: 1;
  transition-delay: 0s;
}
.splash.exiting .sc-band-yellow {
  transform: translateY(-100%);
}
.splash.exiting .sc-band-blue {
  opacity: 0;
  transform: scaleY(0.8);
}
.splash.exiting .sc-band-red {
  transform: translateY(100%);
}

/* Reduced motion — collapse the slide / vibrate / pulse to plain fades */
@media (prefers-reduced-motion: reduce) {
  .splash-logo-word .tri,
  .splash-logo-word .co,
  .splash-logo-word .lor {
    animation: splashFadeIn 0.3s ease-out both !important;
  }
  .splash-unlock, .splash-discount {
    animation: splashFadeIn 0.3s ease-out both !important;
  }
  .splash-cta { animation: splashFadeIn 0.3s ease-out both !important; }
  .splash-modal { animation: splashFadeIn 0.3s ease-out both !important; }
  .sb-stripe { animation: none !important; }
}

/* ============================================================
   PROMO BAR — persistent -10% bar shown when html.promo-active
   Sits at the very top of the stack (above announce). Hidden via
   `display: none` until the promo activates.
   ============================================================ */
.promo-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--promo-h);
  background: linear-gradient(90deg, var(--ink) 0%, var(--red) 50%, var(--ink) 100%);
  color: var(--bg);
  border-bottom: 2px solid var(--yellow);
  display: none;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  z-index: 52;
  padding: 0 1rem;
  overflow: hidden;
  white-space: nowrap;
  animation: promoBarIn 0.4s cubic-bezier(.22,.61,.36,1) both;
}
html.promo-active .promo-bar { display: flex; }
@keyframes promoBarIn {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(0); }
}
.pb-icon { font-size: 1.05em; }
.pb-label { color: rgba(240,235,224,0.85); }
.pb-label strong { color: var(--yellow); font-family: 'Anton', sans-serif; font-weight: 400; letter-spacing: 0.04em; }
.pb-code {
  background: var(--yellow);
  color: var(--ink);
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  padding: 0.15rem 0.5rem;
  letter-spacing: 0.08em;
  border: 1.5px solid var(--ink);
}
.pb-expires {
  color: rgba(240,235,224,0.85);
}
.pb-expires #pbExpires {
  color: var(--yellow);
  font-family: 'Anton', sans-serif;
  letter-spacing: 0.04em;
}
.pb-copy {
  background: var(--ink);
  color: var(--yellow);
  border: 1.5px solid var(--yellow);
  font-family: 'Anton', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.12s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
.pb-copy:hover, .pb-copy:focus-visible {
  background: var(--yellow);
  color: var(--ink);
  transform: translateY(-1px);
}
.pb-copy .pb-copy-done {
  display: none;
  color: var(--wa);
}
.pb-copy.done {
  background: var(--wa);
  color: var(--ink);
  border-color: var(--ink);
}
.pb-copy.done .pb-copy-default { display: none; }
.pb-copy.done .pb-copy-done { display: inline; color: var(--ink); }

@media (max-width: 640px) {
  /* Drop the verbose label on small screens. Icon + code + expires +
     short Copiar button stay visible. */
  .promo-bar { font-size: 0.7rem; gap: 0.5rem; letter-spacing: 0.08em; padding: 0 0.7rem; }
  .pb-label { display: none; }
  .pb-expires { font-size: 0.95em; }
  .pb-code { padding: 0.1rem 0.4rem; font-size: 0.85rem; }
  .pb-copy { font-size: 0.65rem; padding: 0.25rem 0.5rem; }
}

/* ============================================================
   ANNOUNCE BAR — sticky top, marquee, black bg yellow text
   ============================================================ */
.announce {
  position: fixed;
  top: var(--promo-h); left: 0; right: 0;
  background: var(--ink);
  color: var(--yellow);
  height: var(--announce-h);
  overflow: hidden;
  z-index: 51;
  border-bottom: 2px solid var(--red);
  display: flex;
  align-items: center;
}
.announce-track {
  display: inline-flex;
  white-space: nowrap;
  font-family: 'Anton', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  animation: marquee 38s linear infinite;
  padding-left: 100%;
  gap: 0.9rem;
  align-items: center;
}
.announce-track .sep { color: var(--red); font-size: 0.85rem; }

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ============================================================
   NAV — sticky black, red border-bottom
   ============================================================ */
.nav {
  position: fixed;
  top: calc(var(--promo-h) + var(--announce-h));
  left: 0; right: 0;
  height: var(--nav-h);
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--ink);
  color: var(--bg);
  border-bottom: 3px solid var(--red);
  z-index: 50;
  transition: padding 0.2s;
}
.nav.scrolled {
  /* slight compression on scroll */
  box-shadow: 0 6px 0 rgba(230,57,70,0.0);
}

/* ============================================================
   LOGO — TRICOLOR · 3 syllables, each in a flag color
   .logo-tricolor scales via font-size; --logo-stroke and
   --logo-shadow are derived inside size-specific wrappers so the
   contour + offset shadow track the type size.
   ============================================================ */
.logo-link {
  display: inline-block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s;
}
.logo-link:hover { transform: translateY(-1px); }
.logo-link:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }

.logo-tricolor {
  display: inline-block;
  font-family: 'Anton', sans-serif;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  line-height: 0.9;
  white-space: nowrap;
  /* Defaults — overridden per-context. */
  --logo-stroke: 1.5px;
  --logo-shadow: 2px;
  --logo-stroke-color: var(--ink);
  --logo-shadow-color: var(--ink);
}
.logo-tricolor > span {
  -webkit-text-stroke: var(--logo-stroke) var(--logo-stroke-color);
  paint-order: stroke fill;
  text-shadow: var(--logo-shadow) var(--logo-shadow) 0 var(--logo-shadow-color);
}
.logo-tricolor .tri { color: var(--yellow); }
.logo-tricolor .co  { color: var(--blue); }
.logo-tricolor .lor { color: var(--red); }

/* On dark surfaces (nav, footer, manifesto bg) the contour + shadow
   flip to cream so the syllables pop off the black instead of melting
   into it. */
.on-dark .logo-tricolor,
.logo-tricolor.on-dark {
  --logo-stroke-color: var(--bg);
  --logo-shadow-color: rgba(0, 0, 0, 0.55);
}

/* Per-context sizing. Wrap the logo in .logo-link and apply the size
   class to .logo-link itself so font-size cascades into the syllables. */
.logo-link.size-nav .logo-tricolor {
  font-size: 1.5rem;
  --logo-stroke: 1px;
  --logo-shadow: 2px;
}
.logo-link.size-footer .logo-tricolor {
  font-size: 2rem;
  --logo-stroke: 1.5px;
  --logo-shadow: 3px;
}
.logo-link.size-hero .logo-tricolor {
  font-size: clamp(3.5rem, 11vw, 7rem);
  --logo-stroke: 2.5px;
  --logo-shadow: 5px;
}

/* Full lockup with the eyebrow "★ La ★" — used by the splash. */
.logo-tricolor-full {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1;
}
.logo-tricolor-full .la {
  display: block;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.34em;
  letter-spacing: 0.4em;
  margin-bottom: 0.2em;
  color: currentColor;
}
.on-dark .logo-tricolor-full .la { color: var(--bg); }

@media (max-width: 640px) {
  .logo-link.size-nav .logo-tricolor {
    font-size: 1.25rem;
    --logo-stroke: 0.85px;
    --logo-shadow: 1.5px;
  }
}

.nav-links {
  display: none;
  gap: 1.5rem;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.nav-links a {
  position: relative;
  padding: 0.3rem 0;
  color: var(--bg);
  transition: color 0.15s;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 100%;
  height: 2px;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s cubic-bezier(.22,.61,.36,1);
}
.nav-links a:hover { color: var(--yellow); }
.nav-links a:hover::after { transform: scaleX(1); }

.nav-cta {
  background: var(--red);
  color: var(--bg);
  padding: 0.55rem 1.1rem;
  font-family: 'Anton', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: var(--border-thin);
  box-shadow: var(--shadow-mini);
  transition: transform 0.12s, box-shadow 0.12s, background 0.15s, color 0.15s;
  text-decoration: none;
  display: none;
  align-items: center;
  gap: 0.35rem;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.nav-cta:hover {
  background: var(--yellow);
  color: var(--ink);
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--bg);
}

/* Burger — mobile only */
.burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 44px;
  height: 44px;
  padding: 10px 9px;
  border: var(--border-thin);
  background: var(--bg);
  color: var(--ink);
  position: relative;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.burger span {
  display: block;
  width: 100%;
  height: 3px;
  background: var(--ink);
  transition: transform 0.25s, opacity 0.2s;
  transform-origin: center;
}
.burger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.active span:nth-child(2) { opacity: 0; }
.burger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   TRIBUNE BAR — sub-nav, live status, blue bg
   ============================================================ */
.tribune-bar {
  position: fixed;
  top: calc(var(--promo-h) + var(--announce-h) + var(--nav-h));
  left: 0; right: 0;
  height: var(--tribune-h);
  padding: 0 var(--gutter);
  background: var(--blue);
  color: var(--yellow);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  z-index: 49;
  border-bottom: 2px solid var(--ink);
  white-space: nowrap;
  overflow: hidden;
}
.tribune-bar .live {
  background: var(--red);
  color: var(--bg);
  padding: 0.15rem 0.55rem;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1.5px solid var(--ink);
}
.live-dot {
  width: 7px; height: 7px;
  background: var(--bg);
  border-radius: 50%;
  animation: pulseDot 1.6s ease-in-out infinite;
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.7); }
}
.tribune-sep { color: rgba(255,211,0,0.4); }
.tribune-stat strong {
  font-weight: 400;
  margin: 0 0.05em;
  color: var(--bg);
}
.tribune-stat strong + strong { margin-left: 0.4em; }

/* ============================================================
   MOBILE MENU
   ============================================================ */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--ink);
  color: var(--bg);
  z-index: 80;
  padding: calc(var(--offset) + 2rem) var(--gutter) 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(.22,.61,.36,1);
  overflow-y: auto;
}
.mobile-menu.active { transform: translateX(0); }
.mm-logo {
  margin-bottom: 1rem;
}
.mm-logo .logo-tricolor {
  font-size: 2.4rem;
  --logo-stroke: 1.5px;
  --logo-shadow: 3px;
}
.mobile-menu > a {
  font-family: 'Anton', sans-serif;
  font-size: 2rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(240,235,224,0.12);
  transition: color 0.15s, transform 0.2s;
}
.mobile-menu > a:hover { color: var(--yellow); transform: translateX(6px); }
.mm-cta {
  background: var(--wa) !important;
  color: var(--ink) !important;
  padding: 1rem 1.5rem !important;
  border: 3px solid var(--bg) !important;
  box-shadow: 5px 5px 0 var(--red) !important;
  text-align: center;
  font-size: 1.4rem !important;
  margin-top: 1rem;
  border-bottom: 3px solid var(--bg) !important;
}
.mm-foot {
  margin-top: auto;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1rem;
  letter-spacing: 0.18em;
  color: rgba(240,235,224,0.5);
  text-transform: uppercase;
}
.mm-foot strong { color: var(--yellow); font-weight: 400; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  /* Slightly under-full so the info row + CTA stay above the fold on
     ~390x844 mobiles without scrolling. Was 100dvh. */
  min-height: 92dvh;
  padding: calc(var(--offset) + 3.5rem) var(--gutter) 2.4rem;
  display: flex;
  flex-direction: column;
  /* Mobile: anchor content to the bottom half so the big VAMOS title
     sits over the dark lower-overlay band instead of covering the
     subjects' faces in the top of the photo. */
  justify-content: flex-end;
  /* Hug the left edge so the bodies / Federación shield on the right
     stay readable; mobile only — desktop @media overrides this. */
  text-align: left;
  position: relative;
  /* Cream fallback under the photo (and visible if the image 404s). */
  background-color: var(--bg);
  background-image:
    /* 4-stop vertical: faces visible at the top, harder dark at the
       bottom so the headline and CTAs read on the dark band. */
    linear-gradient(to bottom,
      rgba(0, 0, 0, 0.15) 0%,
      rgba(0, 0, 0, 0.05) 30%,
      rgba(0, 0, 0, 0.40) 70%,
      rgba(0, 0, 0, 0.85) 100%),
    url('/images/hero/hero-moto.jpg');
  background-size: cover;
  /* Y=5% pulls the photo down enough that the full hair/heads of
     both riders sit inside the frame on mobile. Floor — if this
     still clips, the mobile source itself needs regenerating with
     more top headroom. */
  background-position: center 5%;
  background-repeat: no-repeat;
  overflow: hidden;
}
/* Prefer WebP on browsers that support image-set with type() — about
   half the JPG bytes for the same LCP frame. */
@supports (background-image: image-set('x' type('image/webp'))) {
  .hero {
    background-image:
      linear-gradient(to bottom,
        rgba(0, 0, 0, 0.15) 0%,
        rgba(0, 0, 0, 0.05) 30%,
        rgba(0, 0, 0, 0.40) 70%,
        rgba(0, 0, 0, 0.85) 100%),
      image-set(
        url('/images/hero/hero-moto.webp') type('image/webp'),
        url('/images/hero/hero-moto.jpg') type('image/jpeg')
      );
  }
}
/* Desktop (>=1024px) — editorial 90s-magazine layout:
   - landscape hero photo with subjects pushed toward the right
   - horizontal gradient (dark on the left, near-clear on the right)
     so the headline reads cleanly while the photo can breathe
   - .huge headline anchored left, capped at ~55% of viewport
   Mobile (<1024px) keeps the portrait hero-moto + uniform overlay. */
@media (min-width: 1024px) {
  .hero {
    /* Restore centered stacking on desktop — the editorial layout
       wants the headline mid-height, photo subjects breathing on
       the opposite side. */
    justify-content: center;
    /* New photo has the subjects on the LEFT half; anchor the photo
       there with X=30% and let the right half receive the headline. */
    background-position: 30% center;
    background-image:
      /* Horizontal gradient flipped: dark on the right (text column),
         near-clear on the left (subjects column). */
      linear-gradient(to left,
        rgba(0, 0, 0, 0.65) 0%,
        rgba(0, 0, 0, 0.40) 40%,
        rgba(0, 0, 0, 0.15) 70%,
        rgba(0, 0, 0, 0.10) 100%),
      url('/images/hero/hero-desktop.jpg');
  }
  @supports (background-image: image-set('x' type('image/webp'))) {
    .hero {
      background-image:
        linear-gradient(to left,
          rgba(0, 0, 0, 0.65) 0%,
          rgba(0, 0, 0, 0.40) 40%,
          rgba(0, 0, 0, 0.15) 70%,
          rgba(0, 0, 0, 0.10) 100%),
        image-set(
          url('/images/hero/hero-desktop.webp') type('image/webp'),
          url('/images/hero/hero-desktop.jpg') type('image/jpeg')
        );
    }
  }

  /* Headline pushed to the right half — poster-style. */
  .hero .huge {
    text-align: right;
    max-width: 55%;
    margin: 0 0 0 auto;
    padding-left: 0;
    padding-right: clamp(2rem, 5vw, 5rem);
    font-size: clamp(4rem, 9vw, 11rem);
  }

  /* Banderolas — desktop stacks both stickers on the LEFT to balance
     the right-aligned headline + 'PEDIR EL MÍO' CTA. Red label at
     top-left, yellow action CTA at bottom-left (mirrors the red CTA
     at bottom-right). .hero prefix (specificity 0,2,0) beats base
     .banderola-{1,2} (0,1,0). width:max-content keeps stickers tight. */
  .hero .banderola-1 {
    top: calc(var(--offset) + 1rem);
    right: auto;
    left: clamp(2rem, 5vw, 5rem);
    width: max-content;
    max-width: max-content;
  }
  .hero .banderola-2 {
    top: auto;
    right: auto;
    bottom: clamp(2rem, 5vw, 5rem);
    left: clamp(2rem, 5vw, 5rem);
    width: max-content;
    max-width: max-content;
  }
}
.stadium-bg {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 18% 28%, rgba(255,211,0,0.22) 0%, transparent 38%),
    radial-gradient(circle at 82% 72%, rgba(230,57,70,0.20) 0%, transparent 38%),
    radial-gradient(circle at 50% 110%, rgba(0,51,160,0.18) 0%, transparent 40%);
  pointer-events: none;
  z-index: 0;
}

/* Banderolas — diagonal flags */
.banderola {
  position: absolute;
  padding: 0.6rem 1.4rem;
  font-family: 'Anton', sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: var(--border);
  box-shadow: var(--shadow-hard);
  z-index: 2;
  background: var(--yellow);
  color: var(--ink);
  white-space: nowrap;
  animation: banderolaSway 6s ease-in-out infinite;
}
@keyframes banderolaSway {
  0%, 100% { transform: rotate(var(--rot, -3deg)) translateY(0); }
  50%      { transform: rotate(calc(var(--rot, -3deg) + 0.8deg)) translateY(-3px); }
}
.banderola-1 {
  --rot: -5deg;
  top: calc(var(--offset) + 1rem);
  left: -1rem;
  background: var(--red);
  color: var(--bg);
}
.banderola-2 {
  --rot: 4deg;
  top: calc(var(--offset) + 5.5rem);
  right: -2rem;
  background: var(--blue);
  color: var(--yellow);
  animation-delay: -2s;
}
.banderola-3 {
  --rot: -3deg;
  bottom: 5rem;
  left: 50%;
  margin-left: -110px;
  background: var(--yellow);
  color: var(--ink);
  animation-delay: -3.5s;
}

/* CTA-flavoured banderola — used in place of banderola-2 to make
   the left sticker a real button ('VER LAS 4 EDICIONES →'). Inherits
   sticker geometry from .banderola + position from .banderola-2;
   overrides the blue/yellow colour pair with yellow/ink + a red
   hard-shadow to match the existing .cta-yellow pattern. Sway is
   disabled — CTAs sit still so hover lift reads cleanly.
   Selector is .banderola.banderola-action (specificity 0,2,0) so
   it wins against .banderola-2 (0,1,0) and isn't shadowed by an
   unrelated .banderola-cta class used elsewhere in the page. */
.banderola.banderola-action {
  background: var(--yellow);
  color: var(--ink);
  box-shadow: 5px 5px 0 var(--red);
  text-decoration: none;
  cursor: pointer;
  animation: none;
  transform: rotate(-1deg);
  /* Pivot rotation from the left edge so the anchored left position
     stays put even as the box tilts. */
  transform-origin: left center;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s;
}
.banderola.banderola-action:hover,
.banderola.banderola-action:focus-visible {
  outline: none;
  transform: rotate(-1deg) translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--red);
  background: var(--bg);
}
.banderola.banderola-action:active {
  transform: rotate(-1deg) translate(1px, 1px);
  box-shadow: 2px 2px 0 var(--red);
}

/* Huge vibrating title — light on the dark hero-photo backdrop.
   Mobile (<1024px) gets a smaller clamp so the headline doesn't
   spill across the women's faces; desktop overrides below. */
.huge {
  font-family: 'Anton', sans-serif;
  /* Mobile clamp — smaller cap so the 3-line stack doesn't dominate
     the screen. Desktop @media below overrides with its own clamp. */
  font-size: clamp(2.5rem, 10vw, 5rem);
  /* Tighter line-height so the 3-line headline reads as a compact
     poster block (was 0.82). */
  line-height: 0.78;
  letter-spacing: -0.01em;
  color: var(--bg);
  text-transform: uppercase;
  /* Left-aligned on mobile so the headline hugs the left edge and
     the women / Federación shield on the right stay readable.
     Desktop @media overrides to right-align for the landscape crop. */
  text-align: left;
  padding-left: clamp(1rem, 5vw, 2rem);
  margin: 1.1rem 0 0;
  position: relative;
  z-index: 1;
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.55);
}
.huge .l1, .huge .l2, .huge .l3 { display: block; }
.huge .l1 { animation: vibrate 0.55s ease-in-out infinite; }
.huge .l2 {
  color: var(--red);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.32em;
  font-style: italic;
  letter-spacing: -0.02em;
  animation: vibrate 0.55s ease-in-out infinite;
  animation-delay: 0.1s;
  text-shadow:
    -2px 0 0 var(--yellow),
    2px 2px 0 rgba(0,0,0,0.18);
}
.huge .l3 { animation: vibrate 0.55s ease-in-out infinite; animation-delay: 0.18s; }

@keyframes vibrate {
  0%, 100% { transform: translate(0, 0); }
  20%      { transform: translate(-1px, 1px); }
  40%      { transform: translate(1px, -1px); }
  60%      { transform: translate(-1px, -1px); }
  80%      { transform: translate(1px, 1px); }
}

/* Confetti emojis */
.confetti {
  position: absolute;
  font-size: 2rem;
  z-index: 1;
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.15));
}
.c1 { top: 26%; left: 6%; transform: rotate(-15deg); animation: float 5.5s ease-in-out infinite; }
.c2 { top: 42%; right: 5%; transform: rotate(20deg); animation: float 5.5s ease-in-out infinite; animation-delay: -2s; }
.c3 { bottom: 28%; left: 12%; animation: float 5.5s ease-in-out infinite; animation-delay: -1s; font-size: 1.6rem; }
.c4 { top: 60%; right: 18%; animation: float 5.5s ease-in-out infinite; animation-delay: -3s; font-size: 1.4rem; }

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(var(--cr, 0deg)); }
  50%      { transform: translateY(-14px) rotate(var(--cr, 0deg)); }
}

/* Hero info row */
.hero-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.5rem;
  padding-top: 1.3rem;
  /* Was solid black; light-translucent so it reads on the photo. */
  border-top: 2px solid rgba(240, 235, 224, 0.4);
  flex-wrap: wrap;
  gap: 1.2rem;
  position: relative;
  z-index: 1;
}
.hero-stats {
  display: flex;
  gap: 1.4rem;
  font-family: 'Bebas Neue', sans-serif;
  flex-wrap: wrap;
}
.hero-stats > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.hero-stats span {
  font-family: 'Inter', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  font-weight: 600;
  color: rgba(240, 235, 224, 0.72);
  text-transform: uppercase;
  margin-bottom: 0.1rem;
}
.hero-stats strong {
  font-size: 1.7rem;
  color: var(--bg);
  letter-spacing: 0.04em;
  line-height: 1;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.hero-stats strong small {
  font-size: 0.55em;
  color: rgba(240, 235, 224, 0.55);
  margin-left: 0.1em;
}

/* Hero mini-info — commerce summary under the CTA. Replaces the
   trust-icon row; trust signals live in the Promesas marquee right
   below. Emoji + Bebas Neue, generous spacing. */
.hero-mini-info {
  margin-top: 1.4rem;
  padding-top: 1rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.92rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(240, 235, 224, 0.9);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
  position: relative;
  z-index: 1;
}
.hero-mini-info > span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.hero-mini-info .hmi-sep {
  color: var(--red);
  font-family: 'Anton', sans-serif;
  font-size: 1.1em;
  letter-spacing: 0;
}

/* ============================================================
   GLOBAL CTAs
   ============================================================ */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  background: var(--red);
  color: var(--bg);
  padding: 1.1rem 2rem;
  font-family: 'Anton', sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: var(--border);
  box-shadow: var(--shadow-hard);
  transition: transform 0.12s, box-shadow 0.12s, background 0.15s, color 0.15s;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.cta:hover, .cta:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--ink);
  background: var(--yellow);
  color: var(--ink);
}
.cta:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

.cta-hero { padding: 1.2rem 2.4rem; font-size: 1.15rem; }

.cta-yellow {
  background: var(--yellow);
  color: var(--ink);
  border-color: var(--ink);
  box-shadow: 5px 5px 0 var(--red);
}
.cta-yellow:hover {
  background: var(--bg);
  color: var(--ink);
  box-shadow: 7px 7px 0 var(--red);
}

.cta-wa-green {
  background: var(--wa);
  color: var(--ink);
  border-color: var(--ink);
}
.cta-wa-green:hover {
  background: var(--ink);
  color: var(--wa);
}

.cta-wa-huge {
  background: var(--wa);
  color: var(--ink);
  font-size: 1.4rem;
  padding: 1.5rem 2.6rem;
  letter-spacing: 0.08em;
  box-shadow: 7px 7px 0 var(--ink);
}
.cta-wa-huge:hover {
  background: var(--yellow);
  color: var(--ink);
  box-shadow: 10px 10px 0 var(--ink);
}

.cta-wa-modal {
  background: var(--wa);
  color: var(--ink);
  width: 100%;
  padding: 1.1rem 1.5rem;
  font-size: 1.05rem;
  border-color: var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
}
.cta-wa-modal:hover { background: var(--ink); color: var(--wa); box-shadow: 6px 6px 0 var(--red); }

/* ============================================================
   CHANT MARQUEE — yellow
   ============================================================ */
.chant-marquee {
  background: var(--yellow);
  color: var(--ink);
  padding: 0.6rem 0;
  overflow: hidden;
  border-top: var(--border);
  border-bottom: var(--border);
  position: relative;
  z-index: 2;
}
.chant-track {
  display: inline-flex;
  white-space: nowrap;
  animation: marquee 24s linear infinite;
  font-family: 'Anton', sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  gap: 0.9rem;
  align-items: center;
  padding-left: 100%;
}
.chant-track .sep { color: var(--red); font-size: 0.95rem; }

/* ============================================================
   PROMESAS MARQUEE — blue, trust signals between hero and chant
   ============================================================ */
.promesas-marquee {
  background: var(--blue);
  color: var(--yellow);
  padding: 0.5rem 0;
  overflow: hidden;
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  position: relative;
  z-index: 2;
}
.promesas-track {
  display: inline-flex;
  white-space: nowrap;
  animation: marquee 32s linear infinite;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.92rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  gap: 0.75rem;
  align-items: center;
  padding-left: 100%;
}
.promesas-track:hover { animation-play-state: paused; }
.promesa {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.promesa-emoji {
  font-size: 1.15em;
  filter: drop-shadow(1.5px 1.5px 0 rgba(0,0,0,0.35));
}
.promesas-track .sep {
  color: var(--bg);
  font-size: 1rem;
  opacity: 0.55;
}

/* ============================================================
   SOCIAL PROOF BANNER — red strip right before Collection
   Hits the eye on entry to the product zone. 187 is a fixed,
   credible number — not faked-dynamic.
   ============================================================ */
.social-proof-banner {
  background: var(--red);
  color: var(--bg);
  padding: 0.5rem 1rem;
  text-align: center;
  font-family: 'Anton', sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  line-height: 1.2;
}
.social-proof-banner strong {
  color: var(--yellow);
  font-weight: 400;
  letter-spacing: 0.05em;
}
.social-proof-banner .spb-sep {
  color: rgba(240,235,224,0.5);
}
.social-proof-banner .spb-cta {
  color: var(--yellow);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

@media (max-width: 640px) {
  .social-proof-banner { font-size: 0.78rem; letter-spacing: 0.08em; gap: 0.35rem; padding: 0.6rem 0.8rem; }
}

/* ============================================================
   MANIFESTO — black bg, tricolor bars top + bottom
   ============================================================ */
.manifesto {
  background: var(--ink);
  color: var(--bg);
  padding: 5.5rem var(--gutter);
  position: relative;
  overflow: hidden;
}
.manifesto::before,
.manifesto::after {
  content: '';
  position: absolute;
  left: 0; width: 100%;
  height: 8px;
  background: linear-gradient(90deg,
    var(--yellow) 0%, var(--yellow) 33.33%,
    var(--blue) 33.33%, var(--blue) 66.66%,
    var(--red) 66.66%, var(--red) 100%);
}
.manifesto::before { top: 0; }
.manifesto::after  { bottom: 0; }

.manifesto-inner {
  max-width: 920px;
  margin: 0 auto;
  position: relative;
}
.manifesto-label {
  display: inline-block;
  background: var(--red);
  color: var(--bg);
  padding: 0.4rem 1rem;
  font-family: 'Anton', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 2rem;
  transform: rotate(-2deg);
  border: 2px solid var(--yellow);
  box-shadow: 3px 3px 0 var(--yellow);
}
.manifesto-text {
  font-family: 'Anton', sans-serif;
  font-size: clamp(1.75rem, 5.5vw, 3.6rem);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.manifesto-text p { margin-bottom: 1.1rem; }
.manifesto-text p:last-child { margin-bottom: 0; }

.manifesto-text .y { color: var(--yellow); }
.manifesto-text .r {
  color: var(--red);
  font-style: italic;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0;
}
.manifesto-text .b {
  color: var(--blue);
  background: var(--yellow);
  padding: 0 0.3rem;
  display: inline-block;
  transform: rotate(-1.2deg);
}
.manifesto-text .hit {
  background: var(--red);
  color: var(--bg);
  padding: 0 0.4rem;
  display: inline-block;
  transform: rotate(0.8deg);
  box-shadow: 4px 4px 0 var(--yellow);
}
.mf-coda {
  margin-top: 1.4rem !important;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.5em !important;
  letter-spacing: 0.08em;
  color: rgba(240,235,224,0.7);
  text-transform: none !important;
}

.manifesto-sign {
  margin-top: 2.8rem;
  padding-top: 1.6rem;
  border-top: 2px solid rgba(240,235,224,0.18);
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.15rem;
  letter-spacing: 0.17em;
  flex-wrap: wrap;
}
.manifesto-sign .dot {
  width: 9px; height: 9px;
  background: var(--red);
  border-radius: 50%;
  animation: pulseDot 1.6s ease-in-out infinite;
}
.manifesto-sign strong { color: var(--yellow); font-weight: 400; }

/* ============================================================
   SECTION HEAD — used across most sections
   ============================================================ */
.section-head {
  max-width: var(--maxw);
  margin: 0 auto 2.5rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1rem;
  border-bottom: var(--border);
  padding-bottom: 1.3rem;
  position: relative;
}
.section-head::before {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 120px;
  height: 3px;
  background: var(--red);
}
.section-head::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 120px;
  width: 60px;
  height: 3px;
  background: var(--yellow);
}
.section-tag {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.2em;
  color: var(--ink);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.section-title {
  font-family: 'Anton', sans-serif;
  font-size: clamp(2.4rem, 7vw, 5rem);
  line-height: 0.92;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-top: 0.55rem;
}
.section-title em {
  font-family: 'Bebas Neue', sans-serif;
  color: var(--red);
  font-style: italic;
  letter-spacing: 0;
}
.section-meta {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  color: rgba(10,10,10,0.6);
  text-align: right;
  line-height: 1.4;
}
.section-head.dark { border-color: var(--bg); }
.section-head.dark::before { background: var(--red); }
.section-head.dark::after  { background: var(--yellow); }
.section-head.dark .section-tag,
.section-head.dark .section-title { color: var(--bg); }
.section-head.dark .section-meta { color: rgba(240,235,224,0.55); }
.section-head.dark .section-title em { color: var(--yellow); }

/* ============================================================
   COLLECTION
   ============================================================ */
.collection {
  padding: 4.5rem var(--gutter) 5.5rem;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}
.cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  max-width: var(--maxw);
  margin: 0 auto;
}

.player-card {
  position: relative;
  background: var(--ink);
  color: var(--bg);
  border: var(--border);
  /* overflow:visible so the card-sticker can stick out past the corner —
     card-visual has its own overflow:hidden for image clipping. */
  overflow: visible;
  transition: transform 0.18s, box-shadow 0.18s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.player-card:hover,
.player-card:focus-visible {
  transform: translate(-2px, -4px);
  box-shadow: 8px 8px 0 var(--ink);
}

.card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.7rem 1rem;
  background: var(--yellow);
  color: var(--ink);
  border-bottom: var(--border);
  font-family: 'Anton', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.card-top .num {
  background: var(--ink);
  color: var(--yellow);
  width: 30px; height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-family: 'Anton', sans-serif;
  letter-spacing: 0;
}

.card-visual {
  /* 4:5 matches the source product photography (1122×1402); the one
     2:3 outlier crops a small slice off the legs but keeps the face
     visible thanks to object-position: center top below. */
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.card-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255,255,255,0.05) 0px,
    rgba(255,255,255,0.05) 1px,
    transparent 1px,
    transparent 14px
  );
  z-index: 1;
}
.card-visual .card-photo,
.card-visual .card-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.card-visual .card-photo img {
  object-fit: cover;
  object-position: center top;
  transition: transform 0.3s cubic-bezier(.22,.61,.36,1);
}
.player-card:hover .card-photo img { transform: scale(1.04); }
.card-watermark {
  position: absolute;
  bottom: 0.6rem;
  right: 0.7rem;
  font-family: 'Anton', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.7);
  z-index: 3;
  mix-blend-mode: overlay;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

/* Per-edition gradient backgrounds — kept as a tinted fallback while
   the photo loads (or if it fails to load). */
.card-amarilla .card-visual { background: radial-gradient(circle at 30% 30%, var(--yellow-warm), var(--yellow) 55%, var(--yellow-deep)); }
.card-azul     .card-visual { background: radial-gradient(circle at 30% 30%, var(--blue-light), var(--blue) 55%, var(--blue-deep)); }
.card-negro    .card-visual { background: radial-gradient(circle at 30% 28%, #3a3a36, #1A1A1A 55%, #0A0A0A); }
.card-rojo     .card-visual { background: radial-gradient(circle at 30% 30%, var(--red-warm), var(--red) 55%, var(--red-deep)); }

.card-info {
  padding: 1rem 1.1rem;
  display: flex;
  /* talla-unica + card-upsell are siblings of name-block + price now;
     wrap so the long upsell text drops to its own full-width row and
     stops pushing horizontal overflow past the card edge. */
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem 1rem;
  border-top: 3px solid var(--yellow);
  background: var(--ink);
  overflow: hidden;
}
.card-info .card-name-block { flex: 1 1 60%; min-width: 0; }
.card-info .card-price { flex: 0 0 auto; }
.card-info .talla-unica,
.card-info .card-upsell {
  flex: 1 1 100%;
  min-width: 0;
  overflow-wrap: anywhere;
}
.card-name-block .pos {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: rgba(240,235,224,0.55);
  text-transform: uppercase;
}
.card-name-block h3 {
  font-family: 'Anton', sans-serif;
  font-size: 1.55rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-top: 0.1rem;
}
.card-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  white-space: nowrap;
}
.card-price .now {
  font-family: 'Anton', sans-serif;
  font-size: 1.4rem;
  color: var(--yellow);
  letter-spacing: 0.02em;
}
.card-price .old {
  font-size: 0.78rem;
  color: rgba(240,235,224,0.5);
  text-decoration: line-through;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.1em;
}

.card-cta {
  padding: 1rem;
  background: var(--red);
  color: var(--bg);
  text-align: center;
  font-family: 'Anton', sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border: 0;
  border-top: 3px solid var(--yellow);
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.card-cta:hover { background: var(--yellow); color: var(--ink); }

/* ============================================================
   CONVERSION OVERLAYS — stickers, mini-review, garantia
   "Stickers collés à la main" sur les cartes Panini.
   ============================================================ */

/* OFERTA sticker — anchored just BELOW the yellow card-top band so
   it overlays the product photo's top-right corner instead of the
   `TITULAR / ARQUERA / ESTRELLA / GOLEADORA` label that lives in the
   header. Used to be top:-10px which made the rotated badge cover
   the right end of card-top. */
.card-sticker {
  position: absolute;
  top: 3.6rem;
  right: -10px;
  z-index: 5;
  background: var(--red);
  color: #fff;
  padding: 0.45rem 0.75rem;
  font-family: 'Anton', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  transform: rotate(-8deg);
  transition: transform 0.18s cubic-bezier(.22,.61,.36,1), box-shadow 0.18s;
  white-space: nowrap;
  pointer-events: none;
  line-height: 1;
}
.player-card:hover .card-sticker {
  transform: rotate(-12deg) scale(1.08);
  box-shadow: 4px 4px 0 var(--ink);
}

/* GARANTIZADO bandeau — bottom of the visual */
.card-garantia {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--ink);
  color: var(--bg);
  border-top: 3px solid var(--yellow);
  padding: 0.5rem 0.8rem;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  z-index: 3;
}
.card-garantia .ic { color: var(--wa); width: 14px; height: 14px; }

/* URGENCY STOCK — pulsing red bar between card-info and card-cta */
.stock-urgency {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 0.8rem;
  background: var(--ink);
  color: var(--red-warm);
  border-top: 2px dashed rgba(230,57,70,0.55);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  animation: stockPulse 1.8s ease-in-out infinite;
  line-height: 1.1;
  text-align: center;
}
.stock-urgency strong {
  color: var(--yellow);
  font-family: 'Anton', sans-serif;
  font-size: 1.05em;
  font-weight: 400;
  margin: 0 0.05em;
  letter-spacing: 0;
}
.stock-urgency-bundle {
  background: rgba(230,57,70,0.12);
  border: 2px dashed rgba(230,57,70,0.55);
  border-radius: 0;
  margin-bottom: 1.2rem;
  padding: 0.65rem 1rem;
  font-size: 0.92rem;
  letter-spacing: 0.12em;
  color: var(--red-warm);
}
.stock-urgency-bundle strong { color: var(--yellow); }

@keyframes stockPulse {
  0%, 100% { background-color: var(--ink); }
  50%      { background-color: #1a0606; }
}

/* Mini review — under the name, inline with the card-name-block stack */
.card-mini-review {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.35rem;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  line-height: 1;
}
.cmr-stars {
  color: var(--yellow);
  font-family: 'Anton', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.4);
}
.cmr-text {
  color: rgba(240,235,224,0.65);
  text-transform: uppercase;
}

/* ============================================================
   BUNDLE — El Once Inicial
   ============================================================ */
.bundle {
  margin-top: 3rem;
  background: var(--ink);
  color: var(--bg);
  border: var(--border);
  position: relative;
  /* overflow:visible so the bundle-sticker can stick out past the corner. */
  overflow: visible;
  display: grid;
  grid-template-columns: 1fr;
  max-width: var(--maxw);
  margin-left: auto;
  margin-right: auto;
}
.bundle::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 8px;
  background: linear-gradient(90deg,
    var(--yellow) 0%, var(--yellow) 33.33%,
    var(--blue) 33.33%, var(--blue) 66.66%,
    var(--red) 66.66%, var(--red) 100%);
  z-index: 1;
}
.bundle::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  height: 8px;
  background: linear-gradient(90deg,
    var(--red) 0%, var(--red) 33.33%,
    var(--blue) 33.33%, var(--blue) 66.66%,
    var(--yellow) 66.66%, var(--yellow) 100%);
  z-index: 1;
}
/* Sticker REGALO GRATIS — sticks out top-right of the bundle */
.bundle-sticker {
  position: absolute;
  top: -14px;
  right: -14px;
  z-index: 6;
  background: var(--yellow);
  color: var(--ink);
  padding: 0.65rem 0.9rem;
  font-family: 'Anton', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.05;
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--red);
  transform: rotate(5deg);
  transition: transform 0.18s cubic-bezier(.22,.61,.36,1), box-shadow 0.18s;
  white-space: normal;
  max-width: 140px;
  pointer-events: none;
}
.bundle:hover .bundle-sticker {
  transform: rotate(8deg) scale(1.06);
  box-shadow: 6px 6px 0 var(--red);
}

.bundle-content { padding: 2.8rem 1.5rem 2.8rem; position: relative; }
.bundle-badge {
  display: inline-block;
  background: var(--yellow);
  color: var(--ink);
  padding: 0.5rem 1rem;
  font-family: 'Anton', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 2px solid var(--ink);
  transform: rotate(-2deg);
  margin-bottom: 1.4rem;
  box-shadow: 3px 3px 0 var(--red);
}
.bundle-title {
  font-family: 'Anton', sans-serif;
  font-size: clamp(2rem, 6vw, 3.6rem);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: 0.9rem;
}
.bundle-title em {
  font-family: 'Bebas Neue', sans-serif;
  color: var(--yellow);
  font-style: italic;
  letter-spacing: 0;
}
.bundle-desc {
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(240,235,224,0.72);
  max-width: 480px;
  margin-bottom: 1.6rem;
}
.bundle-price-row {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.6rem;
  flex-wrap: wrap;
}
.bp-now {
  font-family: 'Anton', sans-serif;
  font-size: 2.6rem;
  color: var(--yellow);
  letter-spacing: -0.01em;
  line-height: 1;
}
.bp-old {
  font-size: 1rem;
  color: rgba(240,235,224,0.4);
  text-decoration: line-through;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.1em;
}
.bp-save {
  background: var(--red);
  color: var(--bg);
  padding: 0.3rem 0.7rem;
  font-family: 'Anton', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--yellow);
}

/* + 2 gorras line — yellow banner under the bundle price */
.bundle-gorra {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  margin: 0 0 1.4rem;
}
.bundle-gorra-line {
  background: var(--yellow);
  color: var(--ink);
  padding: 0.4rem 0.85rem;
  font-family: 'Anton', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--red);
  transform: rotate(-1deg);
  align-self: flex-start;
}
.bundle-gorra-sub {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(240,235,224,0.55);
  margin-left: 0.5rem;
}

/* Bundle comparison — 4-row breakdown of the savings math under the
   headline price. Makes the value rational (some buyers want numbers
   alongside the emotional banner). */
.bundle-compare {
  width: 100%;
  margin: 0 0 1.4rem;
  border: 2px solid var(--yellow);
  background: rgba(0,0,0,0.35);
  border-collapse: collapse;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.06em;
  font-size: 0.95rem;
}
.bundle-compare th,
.bundle-compare td {
  padding: 0.6rem 0.85rem;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid rgba(240,235,224,0.12);
  text-transform: uppercase;
}
.bundle-compare th {
  font-weight: 400;
  color: rgba(240,235,224,0.78);
}
.bundle-compare td {
  text-align: right;
  color: var(--bg);
  font-family: 'Anton', sans-serif;
  letter-spacing: 0.02em;
}
.bundle-compare s {
  color: rgba(240,235,224,0.4);
  text-decoration: line-through;
}
.bundle-compare .bc-bonus th { color: var(--yellow); }
.bundle-compare .bc-bonus em {
  font-style: normal;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.85em;
  color: rgba(240,235,224,0.5);
  letter-spacing: 0.06em;
  margin-right: 0.4em;
}
.bundle-compare .bc-bonus span {
  background: var(--yellow);
  color: var(--ink);
  padding: 0.15rem 0.45rem;
  font-family: 'Anton', sans-serif;
  font-size: 0.78em;
}

.bundle-compare .bc-total {
  background: var(--ink);
  border-top: 2px solid var(--yellow);
}
.bundle-compare .bc-total th,
.bundle-compare .bc-total td {
  border-bottom: 0;
  padding: 0.85rem;
  font-size: 1rem;
}
.bundle-compare .bc-total th {
  color: var(--bg);
  font-family: 'Anton', sans-serif;
  letter-spacing: 0.08em;
}
.bundle-compare .bc-total td {
  color: var(--yellow);
}
.bundle-compare .bc-total strong {
  font-family: 'Anton', sans-serif;
  font-size: 1.55em;
  color: var(--yellow);
  letter-spacing: 0;
  margin-right: 0.2em;
  text-shadow: 2px 2px 0 var(--red);
}
.bundle-compare .bc-subtotal {
  background: rgba(10,10,10,0.04);
  border-top: 1.5px solid rgba(10,10,10,0.18);
  border-bottom: 1.5px solid rgba(10,10,10,0.18);
}
.bundle-compare .bc-subtotal th {
  font-family: 'Anton', sans-serif;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.bundle-compare .bc-subtotal td {
  color: var(--ink-mid);
}
.bundle-compare small {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.66rem;
  font-weight: 500;
  color: var(--ink-mid);
  letter-spacing: 0.04em;
  text-transform: none;
  margin-top: 0.1rem;
}

/* ============================================================
   GORRAS — paid product, also free in pack
   ============================================================ */
.gorras {
  margin: 3.5rem auto 0;
  max-width: var(--maxw);
  padding: 0 var(--gutter);
  position: relative;
}
.gorras .section-head { margin-bottom: 2rem; }
.gorras-sub {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  color: var(--ink-mid);
  margin-top: 0.4rem;
  text-transform: uppercase;
}
.gorras-sub strong {
  color: var(--ink);
  background: var(--yellow);
  padding: 0 0.35em;
  letter-spacing: 0.1em;
}
.gorras-sub-dot { color: var(--red); margin: 0 0.2em; }

/* Emotional one-liner above the cap grid — quiet, italic, gray. */
.gorras-emo {
  font-family: 'Inter', sans-serif;
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-mid);
  max-width: 44ch;
  margin: -0.4rem 0 1.5rem;
}
.gorras-emo em {
  font-style: normal;
  font-weight: 700;
  color: var(--ink);
}

.gorras-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem 1rem;
}

.gorra-card {
  background: var(--bg);
  border: var(--border);
  box-shadow: var(--shadow-soft);
  padding: 1rem 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.gorra-card:hover,
.gorra-card:focus-within {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--red);
}

.gorra-visual {
  background: var(--bg-warm);
  border: 2px solid var(--ink);
  aspect-ratio: 4 / 3;
  margin-bottom: 0.7rem;
  position: relative;
  overflow: hidden;
}
.gorra-visual picture,
.gorra-visual img {
  display: block;
  width: 100%;
  height: 100%;
}
.gorra-visual img {
  object-fit: cover;
  object-position: center;
}

/* Light tinted fallback while the photo loads (or if a future card
   lacks one). Photos themselves carry the colour story. */
.gorra-amarilla .gorra-visual { background: #FFF8D8; }
.gorra-roja     .gorra-visual { background: #FBE2E5; }
.gorra-azul     .gorra-visual { background: #DDE3F2; }
.gorra-blanca   .gorra-visual { background: var(--bg-deep); }

.gorra-name {
  font-family: 'Anton', sans-serif;
  font-size: 1.35rem;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.15rem;
}
.gorra-tag {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-mid);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

/* Display-only sticker — gorras are no longer sold standalone, they
   ship inside the pack El Once Inicial. Sits where the CTA used to,
   pinned to the card bottom; yellow + hard black border + slight
   tilt, echoing the hero .banderola stickers. */
.gorra-badge {
  margin-top: auto;
  align-self: center;
  background: var(--yellow);
  color: var(--ink);
  border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 0.5rem 0.85rem;
  font-family: 'Anton', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  transform: rotate(-3deg);
}

/* Single pack CTA below the 4 cap cards — the only path to a gorra. */
.gorras-cta-row {
  display: flex;
  justify-content: center;
  margin-top: 2.2rem;
}
.gorras-pack-cta { font-size: 1rem; }

/* ============================================================
   DIVARTE × LATRICOLOR — Edición Mundial 2026
   Special collab: 2 handmade crochet bags, 5 units each. The panel
   sits on a lighter crema than the rest of the page (delineates it as
   a guest collaboration) with a thin tricolor rule marking the team-up.
   Tone is luxe-handmade: more whitespace, calmer, scarcity stickers.
   ============================================================ */
.divarte {
  padding: 5rem var(--gutter) 5.5rem;
  /* Lighter, warmer crema than --bg so the collab reads as its own
     pinned panel without ever touching pure white. */
  background:
    radial-gradient(circle at 50% 0%, rgba(255,211,0,0.06), transparent 60%),
    #F6F2E9;
  border-top: var(--border);
  border-bottom: var(--border);
  position: relative;
  overflow: hidden;
}
.divarte-inner {
  max-width: var(--maxw);
  margin: 0 auto;
}

/* Thin tricolor rule above the title — the collaboration mark. */
.divarte-rule {
  display: block;
  width: 180px;
  height: 4px;
  margin: 0 auto 1.4rem;
  background: linear-gradient(
    to right,
    var(--yellow) 0 33.3%,
    var(--blue) 33.3% 66.6%,
    var(--red) 66.6% 100%
  );
}

.divarte-head { text-align: center; margin-bottom: 3rem; }
.divarte-prelabel {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.9rem;
}

/* 3-color logo treatment: yellow / blue / red words, ink stroke +
   offset shadow so the yellow stays legible on crema (mirrors
   .logo-tricolor). */
.divarte-title {
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.25em;
  margin-top: 0;
  font-size: clamp(2.1rem, 7vw, 4.6rem);
}
.divarte-title .dv-word,
.divarte-title .dv-x {
  -webkit-text-stroke: 1.5px var(--ink);
  paint-order: stroke fill;
  text-shadow: 3px 3px 0 var(--ink);
}
.divarte-title .dv-y { color: var(--yellow); }
.divarte-title .dv-x { color: var(--blue); font-size: 0.7em; }
.divarte-title .dv-r { color: var(--red); }

.divarte-tagline {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.05rem, 2.6vw, 1.5rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 1rem auto 0;
  max-width: 30ch;
}
.divarte-intro {
  font-family: 'Inter', sans-serif;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 52ch;
  margin: 0.9rem auto 0;
}
.divarte-intro em {
  font-style: italic;
  font-weight: 600;
  color: var(--red);
}

/* Two product cards — premium, calmer than the body cards. */
.divarte-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 880px;
  margin: 0 auto;
}
.divarte-card {
  background: var(--bg);
  border: var(--border);
  box-shadow: var(--shadow-hard);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.divarte-card:hover,
.divarte-card:focus-within {
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0 var(--blue);
}

/* Reuses .card-visual (4/5) for the bag image; warm crema fallback
   behind the placeholder SVG while it loads. */
.divarte-visual { background: var(--bg-warm); }

/* Bag cards open a photo carousel — signal it's clickable, with the same
   subtle photo zoom-on-hover cue the ediciones cards use. */
.divarte-gallery { cursor: zoom-in; }
.divarte-gallery .card-photo img {
  transition: transform 0.3s cubic-bezier(.22,.61,.36,1);
}
.divarte-gallery:hover .card-photo img,
.divarte-gallery:focus-visible .card-photo img { transform: scale(1.04); }
.divarte-gallery-hint {
  position: absolute;
  bottom: 0.7rem;
  left: 0.7rem;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(10,10,10,0.78);
  color: var(--bg);
  border: 2px solid var(--ink);
  padding: 0.3rem 0.6rem;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
}
.divarte-gallery .ic { width: 0.9em; height: 0.9em; fill: currentColor; }

/* SOLO 5 UNIDADES — bright-red sticker, hard shadow, tilted. Screams. */
.divarte-stock {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  z-index: 4;
  background: var(--red);
  color: #fff;
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  padding: 0.45rem 0.8rem;
  font-family: 'Anton', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: rotate(-3deg);
}

.divarte-info {
  padding: 1.4rem 1.5rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
}
.divarte-name {
  font-family: 'Anton', sans-serif;
  font-size: 1.9rem;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
}
.divarte-edition {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mid);
}
.divarte-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0.3rem 0 0.2rem;
}
.divarte-price {
  font-family: 'Anton', sans-serif;
  font-size: 1.7rem;
  color: var(--ink);
  margin-top: auto;
  padding-top: 0.5rem;
}
.divarte-cta { width: 100%; margin-top: 0.7rem; }

/* "Body de regalo" bonus — yellow pill under the price. Eye-catching but
   secondary to the red SOLO 5 UNIDADES scarcity sticker. */
.divarte-gift {
  margin: 0.6rem 0 0;
  align-self: flex-start;
  background: var(--yellow);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
}
.divarte-gift strong { font-weight: 800; }

/* Value / urgency infographic — 4 icon facts (incl. the free-body offer). */
.divarte-facts {
  list-style: none;
  margin: 3rem auto 0;
  padding: 0;
  max-width: 980px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  border-top: var(--border-thin);
  padding-top: 2rem;
}
/* The gift fact gets a subtle yellow tint so the bonus stands out. */
.divarte-fact-gift .divarte-fact-ic { transform: scale(1.05); }
.divarte-fact-gift .divarte-fact-txt strong { color: var(--ink); border-bottom: 3px solid var(--yellow); display: inline-block; }
.divarte-fact {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
}
.divarte-fact-ic { font-size: 1.9rem; line-height: 1; }
.divarte-fact-txt {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--ink-mid);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.divarte-fact-txt strong {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}

/* Reassurance line + WhatsApp to Nay. */
.divarte-help {
  margin: 2.6rem auto 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}
.divarte-help-text {
  font-family: 'Inter', sans-serif;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.divarte-help-cta .ic-wa-mini {
  width: 1.1em;
  height: 1.1em;
  fill: currentColor;
}

@media (min-width: 720px) {
  .divarte-grid { grid-template-columns: 1fr 1fr; }
}
/* Tablet — 4 facts in a tidy 2×2 instead of cramped single row. */
@media (max-width: 760px) {
  .divarte-facts { grid-template-columns: repeat(2, 1fr); max-width: 560px; }
}
@media (max-width: 560px) {
  .divarte-facts {
    grid-template-columns: 1fr;
    gap: 1.4rem;
    max-width: 320px;
  }
  .divarte-fact {
    flex-direction: row;
    text-align: left;
    align-items: center;
    gap: 0.8rem;
  }
  .divarte-fact-txt { align-items: flex-start; }
}

/* ============================================================
   CARD UPSELL — discrete cross-sell to the pack on each body card
   ============================================================ */
.card-upsell {
  display: block;
  margin-top: 0.4rem;
  padding: 0.45rem 0.55rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-mid);
  background: rgba(255,211,0,0.16);
  border-left: 3px solid var(--yellow);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
  line-height: 1.35;
}
.card-upsell em {
  font-style: normal;
  font-weight: 700;
  color: var(--ink);
}
.card-upsell:hover,
.card-upsell:focus-visible {
  background: var(--yellow);
  color: var(--ink);
}

@media (min-width: 720px) {
  .gorras-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.4rem;
  }
}

@media (max-width: 480px) {
  .gorras-sub { font-size: 0.95rem; }
  .gorra-name { font-size: 1.2rem; }
  .gorra-badge { font-size: 0.85rem; }
}

.bundle-cta {
  background: var(--yellow);
  color: var(--ink);
  padding: 1.2rem 2.2rem;
  font-family: 'Anton', sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 3px solid var(--bg);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: transform 0.12s, box-shadow 0.12s, background 0.15s;
  box-shadow: 5px 5px 0 var(--red);
  text-decoration: none;
  touch-action: manipulation;
}
.bundle-cta:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--red);
  background: var(--bg);
}
.bundle-trust {
  margin-top: 1rem;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(240,235,224,0.55);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.bundle-trust .ic { color: var(--wa); width: 14px; height: 14px; }

.bundle-visual {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.35rem;
  padding: 1rem 1.5rem 2rem;
  position: relative;
  z-index: 2;
}
.mini {
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg);
  overflow: hidden;
  position: relative;
}
.mini::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg,
    rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px,
    transparent 1px, transparent 10px);
  z-index: 1;
}
.mini svg {
  width: 70%;
  position: relative;
  z-index: 2;
  fill: currentColor;
}
/* Real product photos replacing the SVG silhouettes — fill the tile,
   keep the cropping consistent with the body cards above. */
.mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  position: relative;
  z-index: 2;
  display: block;
}
/* The diagonal-stripe overlay is fine over a flat gradient but mucks
   up a photographic image. Suppress it on the body minis. */
.mini-body::before { display: none; }
/* Gradient backgrounds kept as tinted fallbacks while photos load
   (or if they 404). */
.mini-1 { background: radial-gradient(circle at 30% 30%, var(--yellow-warm), var(--yellow-deep)); color: rgba(0,0,0,0.6); }
.mini-2 { background: radial-gradient(circle at 30% 30%, var(--blue-light), var(--blue-deep)); color: rgba(255,211,0,0.78); }
.mini-3 { background: radial-gradient(circle at 30% 30%, #3a3a36, #0A0A0A); color: rgba(201,169,97,0.55); }
.mini-4 { background: radial-gradient(circle at 30% 30%, var(--red-warm), var(--red-deep)); color: rgba(0,0,0,0.55); }

/* ============================================================
   CAP PICKER PACK — interactive 4→2 color selector inside the
   El Once Inicial bundle. Selected state mirrors the V5 fanzine
   look: black border + red hard shadow.
   ============================================================ */
.cap-picker-pack {
  background: var(--bg-warm);
  border: var(--border);
  padding: 1rem 1rem 1.1rem;
  margin-top: 1rem;
  position: relative;
}
.cpp-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.85rem;
  padding-bottom: 0.55rem;
  border-bottom: 2px solid var(--ink);
}
.cpp-title {
  font-family: 'Anton', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.1;
}
.cpp-title em {
  font-style: normal;
  color: var(--red);
  font-weight: 400;
}
.cpp-counter {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.88rem;
  letter-spacing: 0.1em;
  color: var(--ink-mid);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.cpp-counter strong { font-family: 'Anton', sans-serif; color: var(--ink); font-weight: 400; }
.cpp-check-done {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background: var(--ink);
  color: var(--yellow);
  border-radius: 50%;
  font-size: 0.7rem;
  line-height: 1rem;
  text-align: center;
  font-weight: 700;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.2s, transform 0.2s cubic-bezier(.34,1.56,.64,1);
}
.cap-picker-pack[data-selected-count="2"] .cpp-check-done {
  opacity: 1;
  transform: scale(1);
}
.cap-picker-pack[data-selected-count="2"] .cpp-counter strong { color: var(--red); }

.cpp-grid {
  /* Flex (not grid) with fixed-width options keeps each cap a small
     thumbnail at every viewport — grid stretched the photos to 200px
     when the bundle is single-column at 640-1023px. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
}
.cpp-option {
  flex: 0 0 100px;
  background: var(--bg);
  border: 2px solid var(--ink);
  padding: 0.4rem 0.4rem 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  position: relative;
}
.cpp-option:hover {
  transform: translate(-2px, -2px);
  box-shadow: 3px 3px 0 var(--ink);
}
.cpp-option:focus-visible {
  outline: none;
  transform: translate(-2px, -2px);
  box-shadow: 3px 3px 0 var(--red);
}
.cpp-option[aria-pressed="true"] {
  background: var(--yellow);
  border-color: var(--ink);
  transform: translate(-3px, -3px);
  box-shadow: 5px 5px 0 var(--red);
}
.cpp-option[aria-pressed="true"]:hover {
  transform: translate(-4px, -4px);
  box-shadow: 6px 6px 0 var(--red);
}
.cpp-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1.5px solid var(--ink);
  background: var(--bg-warm);
  overflow: hidden;
  display: block;
}
.cpp-photo picture,
.cpp-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cpp-mark {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 1.1rem;
  height: 1.1rem;
  background: var(--ink);
  color: var(--yellow);
  border-radius: 50%;
  font-size: 0.7rem;
  line-height: 1.1rem;
  text-align: center;
  font-weight: 700;
  font-family: 'Anton', sans-serif;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.18s, transform 0.18s cubic-bezier(.34,1.56,.64,1);
  pointer-events: none;
}
.cpp-option[aria-pressed="true"] .cpp-mark {
  opacity: 1;
  transform: scale(1);
}
.cpp-label {
  font-family: 'Anton', sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--ink);
  text-transform: uppercase;
  line-height: 1;
}

/* Disabled CTA state (less than 2 caps picked) */
.bundle-cta.is-disabled {
  background: var(--bg-deep);
  color: var(--ink-mid);
  cursor: not-allowed;
  box-shadow: 3px 3px 0 rgba(10,10,10,0.18);
}
.bundle-cta.is-disabled:hover {
  background: var(--bg-deep);
  transform: none;
  box-shadow: 3px 3px 0 rgba(10,10,10,0.18);
}
.bundle-cta-arrow {
  margin-left: 0.4rem;
  transition: transform 0.15s ease;
}
.bundle-cta:not(.is-disabled):hover .bundle-cta-arrow { transform: translateX(3px); }

@media (max-width: 520px) {
  /* Smaller thumb on narrow phones — 4×84px + gaps still fits in a row
     down to ~360px; below that flex-wrap moves to 2 rows of 2. */
  .cpp-option { flex-basis: 84px; }
  .cpp-label { font-size: 0.85rem; }
}

/* ============================================================
   BENEFITS — ticket-style cards
   ============================================================ */
.benefits {
  padding: 4.5rem var(--gutter) 5rem;
  background: var(--bg-warm);
  position: relative;
}
.benefits-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  max-width: var(--maxw);
  margin: 0 auto;
}
.benefit {
  background: var(--bg);
  border: var(--border);
  padding: 1.6rem 1.4rem 1.4rem;
  position: relative;
  box-shadow: var(--shadow-soft);
  transition: transform 0.18s, box-shadow 0.18s;
  overflow: hidden;
}
.benefit::before {
  /* dashed perforation top — ticket vibe */
  content: '';
  position: absolute;
  left: 0; right: 0; top: 12px;
  height: 2px;
  background-image: linear-gradient(90deg, var(--ink) 50%, transparent 50%);
  background-size: 10px 2px;
  opacity: 0.25;
}
.benefit:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ink);
}
.benefit-icon {
  display: inline-flex;
  width: 56px; height: 56px;
  background: var(--ink);
  color: var(--yellow);
  border: var(--border-thin);
  align-items: center;
  justify-content: center;
  margin-bottom: 0.9rem;
}
.benefit-icon svg { width: 28px; height: 28px; }
.benefit h4 {
  font-family: 'Anton', sans-serif;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 0.4rem;
}
.benefit p {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.benefit p strong { color: var(--ink); font-weight: 700; }
.benefit-stamp {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--red);
  border: 1.5px solid var(--red);
  padding: 0.15rem 0.4rem;
  transform: rotate(4deg);
}

/* ============================================================
   CÓMO COMPRAR — black bg, 3 steps
   ============================================================ */
.how {
  background: var(--ink);
  color: var(--bg);
  padding: 5rem var(--gutter);
  position: relative;
  overflow: hidden;
}
.how::before, .how::after {
  content: '';
  position: absolute;
  left: 0; width: 100%;
  height: 6px;
  background: linear-gradient(90deg,
    var(--yellow) 0%, var(--yellow) 33.33%,
    var(--blue) 33.33%, var(--blue) 66.66%,
    var(--red) 66.66%, var(--red) 100%);
}
.how::before { top: 0; }
.how::after  { bottom: 0; }
.how-inner { max-width: var(--maxw); margin: 0 auto; position: relative; }

.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  margin-bottom: 2.5rem;
}
.step {
  display: flex;
  gap: 1.2rem;
  background: rgba(255,255,255,0.04);
  border: 3px solid rgba(240,235,224,0.18);
  padding: 1.4rem 1.3rem;
  transition: border-color 0.2s, background 0.2s;
}
.step:hover {
  border-color: var(--yellow);
  background: rgba(255,211,0,0.07);
}
.step-num {
  font-family: 'Anton', sans-serif;
  font-size: 3.2rem;
  color: var(--yellow);
  line-height: 0.9;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  text-shadow: 3px 3px 0 var(--red);
}
.step-body h4 {
  font-family: 'Anton', sans-serif;
  font-size: 1.35rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.45rem;
  color: var(--bg);
}
.step-body p {
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(240,235,224,0.78);
}
.step-body p strong { color: var(--yellow); font-weight: 600; }

.how-cta-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 2px solid rgba(240,235,224,0.15);
  text-align: center;
}
.how-trust {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  color: rgba(240,235,224,0.55);
  text-transform: uppercase;
}

/* ============================================================
   TALLA ÚNICA — discrete mention on product cards + bundle
   ============================================================ */
.talla-unica {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mid);
  margin-top: 0.35rem;
}
.talla-unica strong {
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.14em;
}
.talla-unica-bundle {
  margin-top: 0.7rem;
  margin-bottom: 0.3rem;
  font-size: 0.78rem;
}

/* ============================================================
   TESTIMONIOS — fanzine grid, cream cream w/ red drop shadow
   ============================================================ */
.testimonios {
  padding: 5rem var(--gutter);
  background: #F5EFE0;
  position: relative;
  overflow: hidden;
}
.testimonios::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(230,57,70,0.05) 0, transparent 28%),
    radial-gradient(circle at 88% 82%, rgba(0,51,160,0.04) 0, transparent 30%);
  pointer-events: none;
}
.testimonios > * { position: relative; }

.testimonios-sub {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  color: var(--red);
  margin-top: 0.4rem;
  text-transform: uppercase;
}

.testimonios-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.4rem 2rem;
  max-width: 980px;
  margin: 0 auto;
}

.testimonio-card {
  background: var(--bg);
  border: var(--border);
  padding: 1.1rem 1.1rem 1.2rem;
  box-shadow: 8px 8px 0 var(--red);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  position: relative;
  transform: rotate(-0.6deg);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.testimonio-card:nth-child(2) { transform: rotate(0.8deg); box-shadow: -8px 8px 0 var(--red); }
.testimonio-card:nth-child(3) { transform: rotate(0.5deg); box-shadow: 8px -8px 0 var(--red); }
.testimonio-card:nth-child(4) { transform: rotate(-0.9deg); box-shadow: -8px -8px 0 var(--red); }
.testimonio-card:hover {
  transform: rotate(0);
  box-shadow: 10px 10px 0 var(--red);
}
.testimonio-card:nth-child(2):hover { box-shadow: -10px 10px 0 var(--red); }
.testimonio-card:nth-child(3):hover { box-shadow: 10px -10px 0 var(--red); }
.testimonio-card:nth-child(4):hover { box-shadow: -10px -10px 0 var(--red); }

.testimonio-photo {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--bg-warm);
  border: var(--border-thin);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.testimonio-photo::before {
  content: attr(data-placeholder);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Anton', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  color: var(--ink-mid);
  background:
    repeating-linear-gradient(45deg,
      var(--bg-warm) 0 14px,
      var(--bg-deep) 14px 28px);
  text-align: center;
  padding: 0.5rem;
  text-transform: uppercase;
}
.testimonio-photo img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.testimonio-card blockquote {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.15rem;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--ink);
  font-style: italic;
  padding: 0 0.1rem;
}

.testimonio-card figcaption {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  border-top: 2px solid var(--ink);
  padding-top: 0.6rem;
  margin-top: auto;
}
.testimonio-name {
  font-family: 'Anton', sans-serif;
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  line-height: 1;
  text-transform: uppercase;
}
.testimonio-city {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--red);
  text-transform: uppercase;
  margin-top: 0.25rem;
}

.testimonios-disclaimer {
  max-width: 980px;
  margin: 2.4rem auto 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
  letter-spacing: 0.02em;
  font-style: italic;
}

@media (max-width: 720px) {
  .testimonios { padding: 3.5rem var(--gutter); }
  .testimonios-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 420px;
  }
  .testimonio-card,
  .testimonio-card:nth-child(2),
  .testimonio-card:nth-child(3),
  .testimonio-card:nth-child(4) {
    box-shadow: 6px 6px 0 var(--red);
    transform: rotate(-0.4deg);
  }
  .testimonio-card:nth-child(even),
  .testimonio-card:nth-child(even):hover { transform: rotate(0.6deg); }
  .testimonio-name { font-size: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .testimonio-card,
  .testimonio-card:hover {
    transform: none;
    transition: none;
  }
}

/* ============================================================
   LA TRIBUNA — reviews marquee
   ============================================================ */
.tribuna {
  padding: 5rem var(--gutter);
  background: var(--bg-warm);
  position: relative;
  overflow: hidden;
}
.reviews-marquee {
  overflow: hidden;
  margin: 0 calc(-1 * var(--gutter)) 2.5rem;
  padding: 0.5rem 0;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--ink) 6%, var(--ink) 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, var(--ink) 6%, var(--ink) 94%, transparent);
}
.reviews-track {
  display: inline-flex;
  gap: 1rem;
  animation: marquee 60s linear infinite;
  white-space: normal;
  align-items: stretch;
  padding: 0 0.5rem;
  will-change: transform;
}
.reviews-track:hover { animation-play-state: paused; }
.review {
  flex: 0 0 280px;
  background: var(--bg);
  border: var(--border);
  padding: 1.2rem 1.1rem;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transform: rotate(-1deg);
  transition: transform 0.2s;
}
.review:nth-child(even) { transform: rotate(1.2deg); }
.review:nth-child(3n)   { transform: rotate(-0.5deg); }
.review:hover { transform: rotate(0); }
.review-stars {
  font-family: 'Anton', sans-serif;
  font-size: 1.25rem;
  color: var(--yellow);
  letter-spacing: 0.15em;
  text-shadow: 1.5px 1.5px 0 var(--ink);
}
.review blockquote {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.05rem;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--ink);
  font-style: italic;
}
.review blockquote em {
  background: var(--yellow);
  padding: 0 0.2em;
  font-style: italic;
}
.review figcaption {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--ink-mid);
  font-weight: 600;
  border-top: 1.5px solid var(--ink);
  padding-top: 0.5rem;
  margin-top: auto;
}
.review figcaption span { color: var(--red); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }

.tribuna-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  border: var(--border);
  background: var(--ink);
  color: var(--bg);
  padding: 1.6rem 1rem;
  position: relative;
}
.tribuna-stats::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg,
    var(--yellow) 0%, var(--yellow) 33.33%,
    var(--blue) 33.33%, var(--blue) 66.66%,
    var(--red) 66.66%, var(--red) 100%);
}
.tribuna-stats > div {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  align-items: center;
}
.tribuna-stats strong {
  font-family: 'Anton', sans-serif;
  font-size: 2.4rem;
  color: var(--yellow);
  line-height: 1;
}
.tribuna-stats small {
  font-family: 'Anton', sans-serif;
  color: var(--red);
  font-size: 1.4rem;
}
.tribuna-stats span {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: rgba(240,235,224,0.55);
  text-transform: uppercase;
  margin-top: 0.2rem;
}

/* ============================================================
   FAQ
   ============================================================ */
.faq {
  padding: 5rem var(--gutter);
  background: var(--bg);
}
.faq-list {
  max-width: 880px;
  margin: 0 auto;
}
.faq-item {
  border-top: 3px solid var(--ink);
  padding: 0;
  position: relative;
}
.faq-item:last-child { border-bottom: 3px solid var(--ink); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.3rem 0.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-family: 'Anton', sans-serif;
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: color 0.15s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--red); }
.faq-icon {
  display: inline-flex;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
  font-family: 'Anton', sans-serif;
  font-size: 1.3rem;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--ink);
  flex-shrink: 0;
  transition: transform 0.2s;
}
.faq-item[open] .faq-icon { transform: rotate(45deg); background: var(--red); color: var(--bg); }
.faq-body {
  padding: 0 0.2rem 1.4rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.faq-body p { max-width: 720px; }
.faq-body strong { color: var(--ink); font-weight: 700; }
.faq-body a { color: var(--red); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.faq-body a:hover { color: var(--ink); background: var(--yellow); }

/* ============================================================
   CTA FINAL
   ============================================================ */
.cta-final {
  position: relative;
  padding: 6rem var(--gutter) 5rem;
  background: var(--bg);
  text-align: center;
  overflow: hidden;
}
.cta-final-bg {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,211,0,0.32) 0%, transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(230,57,70,0.28) 0%, transparent 45%),
    radial-gradient(circle at 50% 100%, rgba(0,51,160,0.22) 0%, transparent 50%);
  pointer-events: none;
}
.banderola-cta {
  position: absolute;
  top: 2rem;
  left: 50%;
  background: var(--ink);
  color: var(--yellow);
  font-size: 1rem;
  /* Override the generic banderola sway so the centering math works
     independently of the keyframed rotate(). */
  transform: translateX(-50%) rotate(-3deg);
  animation: none;
}
.cta-final-inner { position: relative; z-index: 2; max-width: 780px; margin: 0 auto; padding-top: 3rem; }
.cta-final-tag {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.6rem;
}
.cta-final-title {
  font-family: 'Anton', sans-serif;
  font-size: clamp(2.8rem, 9vw, 6rem);
  line-height: 0.9;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
}
.cta-final-title em {
  font-family: 'Bebas Neue', sans-serif;
  color: var(--red);
  font-style: italic;
  letter-spacing: 0;
}
.cta-final-sub {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.15rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 1.8rem;
}
.cta-final-sub strong { color: var(--ink); }

/* Stats line above the WA button — social proof at the close moment */
.cta-final-stats {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 auto 1.5rem;
  padding: 0.55rem 1rem;
  background: var(--ink);
  color: var(--bg);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--red);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  flex-wrap: wrap;
  transform: rotate(-1deg);
  max-width: 95%;
}
.cta-final-stats strong {
  color: var(--yellow);
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  letter-spacing: 0;
  font-size: 1.15em;
}
.cta-final-stats .sep { color: var(--yellow); font-family: 'Anton', sans-serif; font-size: 1.05em; }
.cta-final-stats .dot { color: rgba(240,235,224,0.4); }

/* Daily countdown — "Oferta válida solo hoy: HH:MM:SS" */
.cta-final-countdown {
  margin: 1.4rem auto 0;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.5rem 0.9rem;
  background: var(--bg);
  border: 2px dashed var(--red);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  flex-wrap: wrap;
  justify-content: center;
}
.cfc-label { color: var(--ink-soft); }
.cfc-clock {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  font-family: 'Anton', sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0;
  color: var(--red);
  line-height: 1;
}
.cfc-clock strong {
  background: var(--ink);
  color: var(--yellow);
  padding: 0.18rem 0.4rem;
  min-width: 1.9em;
  min-height: 1.5em;
  /* center the digit both axes inside the black box (was top-left) */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  border-radius: 4px;
}
.cfc-colon {
  color: var(--red);
  font-family: 'Anton', sans-serif;
  padding: 0 0.1rem;
  animation: cfcBlink 1s steps(2, end) infinite;
}
@keyframes cfcBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

.cta-final-trust {
  margin-top: 1.6rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.cta-final-trust span { display: inline-flex; align-items: center; gap: 0.3rem; }
.cta-final-trust .ic { color: var(--green-grass); width: 16px; height: 16px; }

/* ============================================================
   FOOTER MARQUEE — red
   ============================================================ */
.foot-marquee {
  background: var(--red);
  color: var(--bg);
  padding: 0.9rem 0;
  overflow: hidden;
  border-top: var(--border);
  border-bottom: var(--border);
}
.foot-track {
  display: inline-flex;
  white-space: nowrap;
  animation: marquee 20s linear infinite;
  font-family: 'Anton', sans-serif;
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-left: 100%;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--ink);
  color: var(--bg);
  padding: 3rem var(--gutter) 1.5rem;
}
.footer-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(240,235,224,0.15);
}
.footer-brand .logo { color: var(--bg); margin-bottom: 1rem; }
.footer-mf {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1rem;
  letter-spacing: 0.06em;
  color: rgba(240,235,224,0.7);
  margin-bottom: 1.2rem;
  max-width: 320px;
}
.footer-mf em { color: var(--yellow); font-style: italic; }
.footer-social {
  display: flex;
  gap: 0.5rem;
}
.footer-social a {
  display: inline-flex;
  width: 42px; height: 42px;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(240,235,224,0.25);
  color: var(--bg);
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.footer-social a:hover {
  background: var(--yellow);
  color: var(--ink);
  border-color: var(--yellow);
  transform: translate(-1px, -1px);
}
.footer-social svg { width: 18px; height: 18px; fill: currentColor; }
.footer-col h5 {
  font-family: 'Anton', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 0.9rem;
}
.footer-col a {
  display: block;
  padding: 0.35rem 0;
  font-size: 0.92rem;
  color: rgba(240,235,224,0.78);
  transition: color 0.15s, transform 0.15s;
}
.footer-col a:hover { color: var(--yellow); transform: translateX(4px); }
.footer-bar {
  max-width: var(--maxw);
  margin: 1.4rem auto 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(240,235,224,0.45);
}

/* ============================================================
   STICKY WHATSAPP FLOAT
   ============================================================ */
.wa-float {
  position: fixed;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0));
  right: 1rem;
  background: var(--wa);
  color: var(--ink);
  padding: 0.9rem 1.2rem;
  border: 2px solid var(--ink);
  font-family: 'Anton', sans-serif;
  font-size: 0.92rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 4px 4px 0 var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none;
  z-index: 60;
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.3s;
  animation: waBob 3s ease-in-out infinite;
}
@keyframes waBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
.wa-float:hover {
  animation: none;
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ink);
  background: var(--ink);
  color: var(--wa);
}
.wa-float svg { width: 22px; height: 22px; fill: currentColor; }

/* ============================================================
   STADIUM ANTHEM — floating audio player (bottom-left)
   ============================================================ */
.audio-float {
  position: fixed;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0));
  left: 1rem;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--yellow);
  border: 2px solid var(--yellow);
  box-shadow: 4px 4px 0 var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
  /* Two stacked transforms: visibility translate + sticky-buy offset.
     We drive visibility from JS via inline style, keep CSS clean. */
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: transform 0.4s ease, opacity 0.4s ease, box-shadow 0.15s, background 0.15s, border-color 0.15s, bottom 0.3s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
}
.audio-float.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.audio-float:hover {
  box-shadow: 6px 6px 0 var(--ink);
  background: var(--yellow);
  color: var(--ink);
  border-color: var(--ink);
}
.audio-float:active {
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 var(--ink);
}
/* When sticky-buy mobile bar is up, lift the float so it stays accessible */
body.sticky-buy-on .audio-float {
  bottom: calc(5.5rem + env(safe-area-inset-bottom, 0));
}

/* Subtle yellow pulse in MUTED state — hints there's something to click */
.audio-float[data-state="muted"] {
  animation: audioMutedPulse 2.6s ease-in-out infinite;
}
@keyframes audioMutedPulse {
  0%, 100% { box-shadow: 4px 4px 0 var(--ink), 0 0 0 0 rgba(255,211,0,0.55); }
  50%      { box-shadow: 4px 4px 0 var(--ink), 0 0 0 8px rgba(255,211,0,0); }
}

/* Hide all icons by default; show the one matching data-state */
.audio-float .ap-icon { display: none; }
.audio-float[data-state="muted"]   .ap-icon-muted   { display: flex; }
.audio-float[data-state="playing"] .ap-icon-playing { display: inline-flex; }
.audio-float[data-state="paused"]  .ap-icon-paused  { display: flex; }
.audio-float .ap-icon-muted,
.audio-float .ap-icon-paused {
  width: 22px; height: 22px;
}
.audio-float .ap-icon-playing {
  align-items: center;
  gap: 3px;
}
.audio-float .ap-icon-playing svg {
  width: 14px;
  height: 20px;
  fill: currentColor;
}

/* 3-bar equalizer (PLAYING state only) — yellow bars pulsing */
.ap-eq {
  display: inline-flex;
  align-items: flex-end;
  height: 16px;
  gap: 2px;
}
.ap-eq span {
  display: block;
  width: 2.5px;
  height: 100%;
  background: var(--yellow);
  border-radius: 1px;
  transform-origin: bottom center;
  animation: eqBar 0.7s ease-in-out infinite;
}
.ap-eq span:nth-child(2) { animation-delay: 0.16s; }
.ap-eq span:nth-child(3) { animation-delay: 0.32s; }
.audio-float:hover .ap-eq span { background: var(--ink); }

@keyframes eqBar {
  0%, 100% { transform: scaleY(0.28); }
  35%      { transform: scaleY(0.78); }
  60%      { transform: scaleY(1); }
}

/* Tooltip — right of button, desktop hover only */
.ap-tooltip {
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  white-space: nowrap;
  background: var(--ink);
  color: var(--yellow);
  border: 2px solid var(--yellow);
  padding: 0.5rem 0.8rem;
  font-family: 'Anton', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 3px 3px 0 var(--red);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s cubic-bezier(.22,.61,.36,1);
}
.audio-float:hover .ap-tooltip,
.audio-float:focus-visible .ap-tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
@media (hover: none) {
  .ap-tooltip { display: none; }
}

/* DRAMA FLASH — hero title spotlight on first play of the session.
   Applied to the .huge parent (not the children) so the per-line
   vibrate animations on .l1/.l2/.l3 stay running underneath. */
.stadium-flash {
  animation: stadiumFlash 0.5s ease-out;
}
@keyframes stadiumFlash {
  0%   { opacity: 1; filter: brightness(1); }
  35%  { opacity: 0.3; filter: brightness(1.5); }
  70%  { opacity: 1; filter: brightness(1.15); }
  100% { opacity: 1; filter: brightness(1); }
}

/* ============================================================
   STICKY BUY BAR — mobile
   ============================================================ */
.sticky-buy {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--ink);
  color: var(--bg);
  border-top: 3px solid var(--red);
  padding: 0.8rem 1rem calc(0.8rem + env(safe-area-inset-bottom, 0));
  display: flex;
  align-items: center;
  gap: 0.8rem;
  z-index: 55;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(.22,.61,.36,1);
}
.sticky-buy.visible { transform: translateY(0); }
.sb-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.sb-name {
  font-family: 'Anton', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-price {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1rem;
  letter-spacing: 0.05em;
  color: var(--yellow);
}
.sb-old {
  color: rgba(240,235,224,0.4);
  text-decoration: line-through;
  font-size: 0.82rem;
}
.sb-cta {
  background: var(--wa);
  color: var(--ink);
  padding: 0.85rem 1.2rem;
  font-family: 'Anton', sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 2px solid var(--bg);
  box-shadow: 3px 3px 0 var(--yellow);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
  transition: transform 0.12s, box-shadow 0.12s, background 0.15s;
  touch-action: manipulation;
  animation: sbCtaPulse 2.2s ease-in-out infinite;
}
@keyframes sbCtaPulse {
  0%, 100% { box-shadow: 3px 3px 0 var(--yellow), 0 0 0 0 rgba(37,211,102,0.55); }
  50%      { box-shadow: 3px 3px 0 var(--yellow), 0 0 0 8px rgba(37,211,102,0); }
}
.sb-cta:hover {
  animation: none;
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--yellow);
  background: var(--yellow);
}
/* When the mobile sticky bar is visible, push the WA float up out of the way. */
body.sticky-buy-on .wa-float { transform: translateY(-72px); }

/* ============================================================
   MODAL
   ============================================================ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10,10,10,0.78);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.modal-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}
.modal {
  background: var(--bg);
  border: var(--border);
  border-bottom: 0;
  width: 100%;
  max-width: 580px;
  max-height: 92dvh;
  overflow-y: auto;
  position: relative;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(.22,.61,.36,1);
  box-shadow: 0 -8px 0 var(--red);
}
.modal-backdrop.active .modal { transform: translateY(0); }

.modal-close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 40px; height: 40px;
  background: var(--ink);
  color: var(--bg);
  border: 2px solid var(--bg);
  font-family: 'Anton', sans-serif;
  font-size: 1.1rem;
  z-index: 3;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 3px 3px 0 var(--red);
}
.modal-close:hover { background: var(--red); }

.modal-visual {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: var(--ink);
  border-bottom: var(--border);
}
.modal-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg,
    rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px,
    transparent 1px, transparent 14px);
  z-index: 1;
}
/* Real product photo replaces the SVG silhouette. Absolute fill,
   object-fit cover, same object-position policy as the body cards. */
.modal-visual .modal-photo,
.modal-visual .modal-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.modal-visual .modal-photo img {
  object-fit: cover;
  object-position: center top;
  display: block;
}
/* Per-edition gradients now act as a tinted fallback while the
   photo loads (or if it 404s). */
.modal-visual.color-capitana { background: radial-gradient(circle at 30% 30%, var(--yellow-warm), var(--yellow) 55%, var(--yellow-deep)); }
.modal-visual.color-portera  { background: radial-gradient(circle at 30% 30%, var(--blue-light), var(--blue) 55%, var(--blue-deep)); }
.modal-visual.color-oronegro { background: radial-gradient(circle at 30% 30%, #3a3a36, #1A1A1A 55%, #0A0A0A); }
.modal-visual.color-cafetera { background: radial-gradient(circle at 30% 30%, var(--red-warm), var(--red) 55%, var(--red-deep)); }

/* Carousel arrows — vertically centred on either side of the photo,
   44×44 yellow with black border. Hidden when the product only has
   one photo (the [hidden] HTML attribute does the work). */
.modal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--yellow);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  font-family: 'Anton', sans-serif;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  z-index: 4;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  padding: 0;
}
.modal-nav[hidden] { display: none; }
.modal-nav:hover,
.modal-nav:focus-visible {
  transform: translateY(-50%) translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--red);
  background: var(--yellow-warm);
  outline: none;
}
.modal-nav:active {
  transform: translateY(-50%) translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--ink);
}
.modal-nav-prev { left: 0.6rem; }
.modal-nav-next { right: 0.6rem; }

/* Carousel dot indicators — Instagram-style, bottom-centred. */
.modal-dots {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.6rem;
  background: rgba(10, 10, 10, 0.55);
  border-radius: 999px;
  z-index: 4;
}
.modal-dots[hidden] { display: none; }
.modal-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(240, 235, 224, 0.45);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.modal-dot:hover { background: rgba(240, 235, 224, 0.75); }
.modal-dot.active {
  background: var(--yellow);
  transform: scale(1.15);
}

.modal-body {
  padding: 1.5rem 1.4rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.modal-tag {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
}
.modal-title {
  font-family: 'Anton', sans-serif;
  font-size: 2.2rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1;
}
.modal-desc {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.modal-price-row {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  flex-wrap: wrap;
}
.mp-now {
  font-family: 'Anton', sans-serif;
  font-size: 2rem;
  color: var(--ink);
}
.mp-old {
  font-size: 0.95rem;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.1em;
  text-decoration: line-through;
  color: rgba(10,10,10,0.5);
}
.mp-save {
  background: var(--red);
  color: var(--bg);
  padding: 0.2rem 0.55rem;
  font-family: 'Anton', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
}

.modal-talla {
  margin-top: 0.4rem;
  padding: 0.8rem 1rem;
  background: var(--bg-warm);
  border: var(--border-thin);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  align-items: center;
  text-align: center;
}
.modal-talla-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mid);
}
.modal-talla-value {
  font-family: 'Anton', sans-serif;
  font-size: 1.25rem;
  letter-spacing: 0.1em;
  color: var(--ink);
  line-height: 1;
}
.modal-talla-note {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  color: var(--muted);
  letter-spacing: 0.04em;
  font-style: italic;
}

/* ============================================================
   MUNDIAL PAGE — hero, form, calendar, products section
   ============================================================ */
.nav-active {
  color: var(--yellow) !important;
}
.nav-active::after {
  background: var(--yellow) !important;
  transform: scaleX(1) !important;
}

/* Hero */
.mundial-hero {
  min-height: calc(100dvh - var(--offset));
  padding: calc(var(--offset) + 3rem) var(--gutter) 3rem;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.mundial-banderola-1 {
  --rot: -5deg;
  top: calc(var(--offset) + 1.5rem);
  left: -1rem;
  background: var(--red);
  color: var(--bg);
}
.mundial-banderola-2 {
  --rot: 4deg;
  top: calc(var(--offset) + 5.5rem);
  right: -2rem;
  background: var(--blue);
  color: var(--yellow);
  animation-delay: -2s;
}

.mundial-hero-tag {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.92rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 1.2rem;
}

.mundial-title {
  font-family: 'Anton', sans-serif;
  font-size: clamp(3rem, 10vw, 7rem);
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}
.mh-line { display: block; }
.mh-em em {
  font-family: 'Bebas Neue', sans-serif;
  color: var(--red);
  font-style: italic;
  letter-spacing: 0;
}

.mundial-sub {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  max-width: 640px;
  margin: 0 auto 2rem;
}

.mundial-next {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  background: var(--ink);
  color: var(--bg);
  border: 3px solid var(--ink);
  padding: 0.9rem 1.3rem;
  box-shadow: 5px 5px 0 var(--red);
  margin-bottom: 2rem;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  flex-wrap: wrap;
  justify-content: center;
  transform: rotate(-1deg);
}
.mn-label { color: rgba(240,235,224,0.7); }
.mn-clock {
  font-family: 'Anton', sans-serif;
  color: var(--yellow);
  display: inline-flex;
  align-items: baseline;
  gap: 0.15rem;
  letter-spacing: 0.02em;
}
.mn-clock strong { font-weight: 400; font-size: 1.4rem; margin-left: 0.15em; }
.mn-clock span { font-size: 0.8em; color: var(--red); margin-right: 0.25em; }

.mundial-hero-cta {
  padding: 1.2rem 2.4rem;
  font-size: 1.1rem;
  margin-top: 0.5rem;
}

/* Urgency banner — appears if Colombia plays within 72h.
   Hidden by default; mundial.js adds .visible when applicable. */
.mundial-urgency { display: none; }
.mundial-urgency.visible {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  background: var(--red);
  color: var(--bg);
  padding: 0.75rem 1rem;
  font-family: 'Anton', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  animation: muPulse 1.8s ease-in-out infinite;
}
@keyframes muPulse {
  0%, 100% { background: var(--red); }
  50%      { background: #c01b28; }
}
.mu-icon { font-size: 1.1em; }
.mundial-urgency strong { color: var(--yellow); font-weight: 400; }
.mu-cta {
  background: var(--yellow);
  color: var(--ink);
  padding: 0.3rem 0.7rem;
  border: 2px solid var(--ink);
  text-decoration: none;
  font-size: 0.85rem;
}
.mu-cta:hover { background: var(--ink); color: var(--yellow); }

/* Form section */
.mundial-form-section {
  padding: 3rem var(--gutter) 4rem;
  background: var(--bg);
}
.mundial-form-card {
  max-width: 720px;
  margin: 0 auto;
  background: var(--ink);
  color: var(--bg);
  border: var(--border);
  padding: 2.5rem 1.5rem 2rem;
  text-align: center;
  position: relative;
  box-shadow: 8px 8px 0 var(--yellow);
  overflow: hidden;
}
.mfc-bars {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 8px;
  background: linear-gradient(90deg,
    var(--yellow) 0%, var(--yellow) 33.33%,
    var(--blue)   33.33%, var(--blue)   66.66%,
    var(--red)    66.66%, var(--red)    100%);
}
.mfc-label {
  display: inline-block;
  background: var(--red);
  color: var(--bg);
  padding: 0.4rem 1rem;
  font-family: 'Anton', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 2px solid var(--yellow);
  box-shadow: 3px 3px 0 var(--yellow);
  transform: rotate(-2deg);
  margin-bottom: 1.3rem;
}
.mfc-title {
  font-family: 'Anton', sans-serif;
  font-size: clamp(1.5rem, 5vw, 2.4rem);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
}
.mfc-sub {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(240,235,224,0.7);
  margin-bottom: 1.4rem;
}

.mundial-form {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  max-width: 480px;
  margin: 0 auto 1rem;
}
.mf-field {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.mf-field-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 0.35rem;
}
.mf-field input {
  background: var(--bg);
  color: var(--ink);
  border: 3px solid var(--bg);
  padding: 0.9rem 1rem;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.mf-field input:focus-visible {
  border-color: var(--yellow);
  box-shadow: 3px 3px 0 var(--yellow);
}
.mf-submit {
  background: var(--yellow);
  color: var(--ink);
  border: 3px solid var(--bg);
  padding: 1rem 1.5rem;
  font-family: 'Anton', sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 5px 5px 0 var(--red);
  transition: transform 0.12s, box-shadow 0.12s, background 0.15s;
  touch-action: manipulation;
}
.mf-submit:hover, .mf-submit:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--red);
  background: var(--bg);
}
.mf-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: 5px 5px 0 var(--red);
}

.mf-feedback {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(240,235,224,0.55);
  min-height: 1.4em;
  margin: 0 auto;
  max-width: 520px;
}
.mf-feedback strong { color: var(--yellow); font-family: 'Anton', sans-serif; font-weight: 400; }
.mf-feedback > span { display: none; }
.mf-feedback[data-state="idle"]    .mf-feedback-idle    { display: inline; }
.mf-feedback[data-state="loading"] .mf-feedback-loading { display: inline; color: var(--yellow); }
.mf-feedback[data-state="success"] .mf-feedback-success { display: inline; color: var(--wa); }
.mf-feedback[data-state="error"]   .mf-feedback-error   { display: inline; color: var(--red-warm); }
.mf-feedback[data-state="invalid"] .mf-feedback-invalid { display: inline; color: var(--red-warm); }

/* Calendar (skeleton; populated by mundial.js) */
.mundial-calendar {
  padding: 4rem var(--gutter) 4rem;
  background: var(--bg-warm);
}
.mundial-matches {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.mm-loading {
  text-align: center;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 2rem;
}

/* Match card — common */
.m-card {
  background: var(--bg);
  border: var(--border);
  padding: 1.1rem 1.1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  position: relative;
  box-shadow: var(--shadow-soft);
}
.m-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}
.m-phase {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mid);
}
.m-status {
  font-family: 'Anton', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.18rem 0.5rem;
  border: 1.5px solid var(--ink);
}
.m-status-upcoming { background: var(--bg-warm); color: var(--ink); }
.m-status-live {
  background: var(--red);
  color: var(--bg);
  border-color: var(--ink);
  animation: muPulse 1.6s ease-in-out infinite;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.m-live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--bg);
  display: inline-block;
}
.m-status-played { background: var(--ink); color: var(--bg); }

.m-when {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.m-date {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.m-time {
  font-family: 'Anton', sans-serif;
  font-size: 1.4rem;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.m-time small {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.55em;
  color: var(--red);
  letter-spacing: 0.18em;
  margin-left: 0.3em;
  vertical-align: middle;
}

.m-teams {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border-top: 2px dashed var(--line);
  border-bottom: 2px dashed var(--line);
  padding: 0.55rem 0;
  margin: 0.2rem 0;
}
.m-team {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: 'Anton', sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
  flex: 1;
  min-width: 0;
}
.m-team:last-of-type { justify-content: flex-end; text-align: right; }
.m-flag { font-size: 1.3em; flex-shrink: 0; }
.m-vs {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  color: var(--red);
  text-transform: uppercase;
}

.m-score {
  font-family: 'Anton', sans-serif;
  font-size: 2rem;
  color: var(--ink);
  text-align: center;
  letter-spacing: 0.04em;
}
.m-score span { color: var(--red); margin: 0 0.4em; }

.m-stadium {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  color: var(--ink-mid);
  text-transform: uppercase;
}
.m-note {
  font-size: 0.78rem;
  color: var(--muted);
  font-style: italic;
}

/* Colombia match — big & colorful */
.m-card-col {
  background: var(--ink);
  color: var(--bg);
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  padding: 1.3rem 1.2rem 1.1rem;
}
.m-card-col::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(90deg,
    var(--yellow) 0%, var(--yellow) 33.33%,
    var(--blue)   33.33%, var(--blue)   66.66%,
    var(--red)    66.66%, var(--red)    100%);
}
.m-card-col .m-phase    { color: var(--yellow); }
.m-card-col .m-date     { color: rgba(240,235,224,0.7); }
.m-card-col .m-time     { color: var(--bg); }
.m-card-col .m-time small { color: var(--yellow); }
.m-card-col .m-teams    { border-color: rgba(240,235,224,0.18); }
.m-card-col .m-team     { color: var(--bg); font-size: 1.2rem; }
.m-card-col .m-stadium  { color: rgba(240,235,224,0.55); }
.m-card-col .m-status-upcoming { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }

/* Per-outfit accent — pulls the same gradient palette as the card visuals */
.m-card-col.m-outfit-capitana { box-shadow: 6px 6px 0 var(--yellow); }
.m-card-col.m-outfit-portera  { box-shadow: 6px 6px 0 var(--blue); }
.m-card-col.m-outfit-cafetera { box-shadow: 6px 6px 0 var(--red); }
.m-card-col.m-outfit-oronegro { box-shadow: 6px 6px 0 #C9A961; }

.m-outfit {
  background: rgba(255,211,0,0.08);
  border: 2px dashed var(--yellow);
  padding: 0.65rem 0.8rem;
  margin-top: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.m-outfit-tag {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--yellow);
}
.m-outfit-name {
  font-family: 'Anton', sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bg);
}
.m-outfit-cta {
  align-self: flex-start;
  font-family: 'Anton', sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--yellow);
  border: 2px solid var(--bg);
  padding: 0.4rem 0.7rem;
  text-decoration: none;
  box-shadow: 3px 3px 0 var(--red);
  transition: transform 0.12s, box-shadow 0.12s, background 0.15s;
}
.m-outfit-cta:hover {
  background: var(--bg);
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--red);
}

@media (min-width: 768px) {
  .mundial-matches { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .mundial-matches { grid-template-columns: repeat(3, 1fr); }
}

/* Mundial products section — outfit recommendations linked to /#collection */
.mundial-products {
  padding: 4rem var(--gutter) 4rem;
  background: var(--bg);
}
.mp-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.mp-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--ink);
  color: var(--bg);
  border: var(--border);
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.18s, box-shadow 0.18s;
}
.mp-card:hover, .mp-card:focus-visible {
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0 var(--ink);
}
.mp-visual {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border-bottom: 3px solid var(--yellow);
}
.mp-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg,
    rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px,
    transparent 1px, transparent 14px);
  z-index: 1;
}
.mp-visual svg {
  width: 38%;
  filter: drop-shadow(0 18px 26px rgba(0,0,0,0.45));
  position: relative;
  z-index: 2;
  fill: currentColor;
}
.mp-amarilla .mp-visual { background: radial-gradient(circle at 30% 30%, var(--yellow-warm), var(--yellow) 55%, var(--yellow-deep)); }
.mp-amarilla .mp-visual svg { color: rgba(0,0,0,0.62); }
.mp-rojo .mp-visual { background: radial-gradient(circle at 30% 30%, var(--red-warm), var(--red) 55%, var(--red-deep)); }
.mp-rojo .mp-visual svg { color: rgba(0,0,0,0.55); }
.mp-negro .mp-visual { background: radial-gradient(circle at 30% 28%, #3a3a36, #1A1A1A 55%, #0A0A0A); }
.mp-negro .mp-visual svg { color: rgba(201,169,97,0.55); }
.mp-info {
  padding: 1.2rem 1.2rem 1.4rem;
}
.mp-tag {
  display: inline-block;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 0.4rem;
}
.mp-name {
  font-family: 'Anton', sans-serif;
  font-size: 1.7rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 0.5rem;
}
.mp-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(240,235,224,0.78);
  margin-bottom: 0.9rem;
}
.mp-cta {
  display: inline-block;
  font-family: 'Anton', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--yellow);
  border: 2px solid var(--ink);
  padding: 0.5rem 0.9rem;
  box-shadow: 3px 3px 0 var(--red);
  transition: transform 0.12s, box-shadow 0.12s, background 0.15s;
}
.mp-card:hover .mp-cta, .mp-card:focus-visible .mp-cta {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--red);
  background: var(--bg);
}

.mp-foot {
  max-width: var(--maxw);
  margin: 2.2rem auto 0;
  text-align: center;
}
.mp-foot-note {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.8rem;
}

@media (min-width: 768px) {
  .mp-grid { grid-template-columns: repeat(3, 1fr); }
}

/* CTA Final */
.mundial-cta-final {
  background: var(--bg);
  padding: 4rem var(--gutter) 4rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.mundial-cta-final::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,211,0,0.32) 0%, transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(230,57,70,0.28) 0%, transparent 45%);
  pointer-events: none;
}
.mundial-cta-final > * { position: relative; z-index: 2; }
.mcf-tag {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.6rem;
}
.mcf-title {
  font-family: 'Anton', sans-serif;
  font-size: clamp(2.4rem, 7vw, 4.5rem);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: 1.6rem;
}
.mcf-title em {
  font-family: 'Bebas Neue', sans-serif;
  color: var(--red);
  font-style: italic;
  letter-spacing: 0;
}
.mcf-stats {
  margin-top: 1.4rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.92rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.mcf-stats strong { color: var(--ink); font-family: 'Anton', sans-serif; font-weight: 400; }
.mcf-stats .dot { color: var(--red); }

/* ============================================================
   RESPONSIVE — 640px (small tablets / large phones)
   ============================================================ */
@media (min-width: 640px) {
  :root { --gutter: 2rem; }

  .nav-cta { display: inline-flex; }

  .cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.3rem;
  }
  .benefits-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
  .step { flex-direction: column; }
  .review { flex: 0 0 320px; }

  .footer-grid {
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
  }

  /* Hide sticky buy bar on bigger screens — float is enough */
  .sticky-buy { display: none !important; }
  body.sticky-buy-on .wa-float { transform: translateY(0); }
}

/* ============================================================
   RESPONSIVE — 1024px (desktop)
   ============================================================ */
@media (min-width: 1024px) {
  :root {
    --gutter: 3rem;
    --nav-h: 62px;
  }

  .nav-links { display: inline-flex; }
  .burger { display: none; }

  .hero { padding-top: calc(var(--offset) + 4rem); }

  /* minmax(0, 1fr) instead of 1fr — the implicit `auto` min lets grid
     items refuse to shrink below intrinsic content min-width, which was
     pushing the 4th card past the container at certain widths. */
  .cards-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .bundle {
    grid-template-columns: 1.3fr 1fr;
    align-items: stretch;
  }
  .bundle-content { padding: 3.2rem 2.5rem; }
  .bundle-visual { padding: 2rem 2rem 2rem 0; }

  .benefits-grid { grid-template-columns: repeat(4, 1fr); }

  .footer { padding: 4rem var(--gutter) 1.8rem; }

  .banderola-1 { top: calc(var(--offset) + 2rem); left: 2rem; font-size: 1rem; }
  .banderola-2 { top: calc(var(--offset) + 8rem); right: 2rem; font-size: 1rem; }
  .banderola-3 { bottom: 7rem; }

  .modal-backdrop { align-items: center; }
  .modal {
    border-bottom: var(--border);
    border-radius: 0;
    max-height: 88dvh;
    max-width: 920px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    transform: translateY(40px) scale(0.97);
  }
  .modal-backdrop.active .modal { transform: translateY(0) scale(1); }
  .modal-visual { aspect-ratio: auto; border-bottom: 0; border-right: var(--border); min-height: 480px; }
  .modal-body { padding: 2rem 2rem 1.8rem; }
}

/* ============================================================
   RESPONSIVE — 1280px wide
   ============================================================ */
@media (min-width: 1280px) {
  .huge { font-size: clamp(7rem, 13vw, 14rem); }
}

/* ============================================================
   MOBILE-SPECIFIC tweaks (≤ 640px)
   ============================================================ */
@media (max-width: 640px) {
  /* Decorative hero overlays cause attention drift on mobile where every
     pixel needs to move the buyer toward the product. Strip them. */
  .banderola { display: none; }
  .confetti  { display: none; }

  /* Product card overlays: keep visual + name + price + CTA + -34%
     sticker. Drop the rest — every piece of info has a redundant home
     elsewhere (gorra sticker → sticky bar + announce; mini-review →
     Tribuna section; garantía → Promesas; stock urgency → bundle).
     The sticker for -34% stays because that's the single biggest
     proof of value on the card. */
  .player-card .card-mini-review   { display: none; }
  .player-card .card-garantia      { display: none; }
  .player-card .stock-urgency      { display: none; }
  /* Bundle keeps its stock-urgency variant — fewer cards there means
     the urgency message lands differently. */

  /* Hero title override removed — the new mobile base clamp(2.5rem,
     10vw, 5rem) already fits comfortably at 375px without crowding
     the chrome edges, so this 640px override would only enlarge it
     back toward the old too-big value. */

  .hero { padding-bottom: 2.5rem; }
  .hero-info {
    justify-content: center;
    flex-direction: column;
    text-align: center;
  }
  .hero-info .cta { width: 100%; }
  .hero-stats { justify-content: center; }
  .hero-mini-info { justify-content: center; }

  .nav-links { display: none; }
  .nav-cta { display: none; }

  .section-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .section-meta { text-align: left; }

  /* Tribune countdown: keep only days on mobile (visible urgency without
     eating sub-nav real estate). H:M:S vanish. */
  .tribune-stat-cd strong:not(:first-of-type) { display: none; }
  .tribune-bar { font-size: 0.74rem; letter-spacing: 0.1em; gap: 0.5rem; }
  .tribune-bar .live { font-size: 0.62rem; }

  /* Compress section paddings — was 5-6rem top/bottom. ~30% less
     vertical scroll between blocks. */
  .collection { padding: 3rem var(--gutter) 3.5rem; }
  .manifesto  { padding: 3.5rem var(--gutter); }
  .benefits   { padding: 3rem var(--gutter) 3.5rem; }
  .how        { padding: 3.5rem var(--gutter); }
  .tribuna    { padding: 3.5rem var(--gutter); }
  .faq        { padding: 3.5rem var(--gutter); }
  .cta-final  { padding: 4rem var(--gutter) 3.5rem; }

  .bundle-visual { padding: 0.5rem 1rem 1.5rem; }
  .bundle-content { padding: 2.2rem 1.3rem 2rem; }

  .footer-bar { justify-content: center; text-align: center; }

  /* Larger touch targets where it matters */
  .faq-item summary { padding: 1.4rem 0.2rem; min-height: 56px; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .huge .l1, .huge .l2, .huge .l3 { animation: none; }
  .reveal { opacity: 1; transform: none; }
  .banderola { animation: none; }
  .confetti { animation: none; }
  .wa-float { animation: none; }
  .live-dot { animation: none; }
  .manifesto-sign .dot { animation: none; }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .announce, .nav, .tribune-bar, .mobile-menu, .wa-float, .sticky-buy,
  .modal-backdrop, .exit-intent, .chant-marquee, .foot-marquee { display: none !important; }
  body { background: white; color: black; }
  body::before { display: none; }
}

/* ============================================================
   EXIT INTENT MODAL — homepage one-shot email capture for the
   TRICOLOR15 promo. Matches the product modal's V5 fanzine look
   (cream surface, hard ink border, red shadow). 480px max on
   desktop, near-full width on phones.
   ============================================================ */
.exit-intent {
  position: fixed;
  inset: 0;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.exit-intent.active {
  opacity: 1;
  pointer-events: auto;
}
.ei-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  cursor: pointer;
}
.ei-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  width: calc(100% - 2rem);
  max-width: 460px;
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  background: var(--bg);
  color: var(--ink);
  border: var(--border);
  box-shadow: 8px 8px 0 var(--red);
  padding: 1.8rem 1.5rem 1.4rem;
  transition: transform 0.3s cubic-bezier(.34, 1.56, .64, 1);
}
.exit-intent.active .ei-dialog { transform: translate(-50%, -50%) scale(1); }

.ei-close {
  position: absolute;
  top: 0.4rem;
  right: 0.5rem;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--bg);
  border: 0;
  font-size: 1.1rem;
  font-family: 'Anton', sans-serif;
  cursor: pointer;
  z-index: 2;
  transition: background 0.15s;
}
.ei-close:hover { background: var(--red); }

.ei-tag {
  font-family: 'Anton', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--red);
  text-transform: uppercase;
  margin-bottom: 0.45rem;
}
.ei-title {
  font-family: 'Anton', sans-serif;
  font-size: clamp(1.7rem, 6.5vw, 2.2rem);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
  color: var(--ink);
}
.ei-title em {
  font-style: italic;
  color: var(--red);
  font-family: 'Bebas Neue', sans-serif;
}
.ei-lead {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.02rem;
  letter-spacing: 0.04em;
  line-height: 1.4;
  margin-bottom: 0.35rem;
  text-transform: uppercase;
  color: var(--ink);
}
.ei-lead strong {
  background: var(--yellow);
  padding: 0 0.25em;
  font-family: 'Anton', sans-serif;
  letter-spacing: 0.08em;
  font-weight: 400;
}
.ei-code-inline {
  background: var(--ink);
  color: var(--yellow);
  font-family: 'Anton', sans-serif;
  letter-spacing: 0.12em;
  padding: 0 0.3em;
}
.ei-sub {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--ink-mid);
  margin-bottom: 1.1rem;
}

.ei-form {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 0.9rem;
}
.ei-label {
  font-family: 'Anton', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mid);
  margin-bottom: -0.3rem;
}
.ei-form input[type=email] {
  padding: 0.85rem 0.95rem;
  background: var(--bg-warm);
  border: var(--border);
  border-radius: 0;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: var(--ink);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: box-shadow 0.15s, transform 0.15s, background 0.15s;
}
.ei-form input[type=email]:focus {
  background: var(--bg);
  box-shadow: 4px 4px 0 var(--red);
  transform: translate(-2px, -2px);
}
.ei-submit {
  padding: 0.95rem 1.1rem;
  background: var(--yellow);
  color: var(--ink);
  border: var(--border);
  box-shadow: 5px 5px 0 var(--red);
  font-family: 'Anton', sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s, background 0.15s;
}
.ei-submit:hover,
.ei-submit:focus-visible {
  outline: none;
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--red);
  background: var(--bg);
}
.ei-submit:active {
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 var(--ink);
}
.ei-submit[disabled] { opacity: 0.6; cursor: wait; }

.ei-status {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  text-align: center;
  min-height: 1em;
  text-transform: uppercase;
  margin: 0;
}
.ei-status.ok  { color: var(--ink); }
.ei-status.err { color: var(--red); }

.ei-fineprint {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  line-height: 1.45;
  color: var(--muted);
  font-style: italic;
}
.ei-fineprint strong { color: var(--ink); font-style: normal; }

/* === Success state === */
.ei-success-msg {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  color: var(--ink-mid);
}
.ei-code-block {
  background: var(--ink);
  color: var(--yellow);
  border: var(--border);
  box-shadow: 5px 5px 0 var(--red);
  padding: 0.95rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  margin-bottom: 0.95rem;
}
.ei-code {
  font-family: 'Anton', sans-serif;
  font-size: clamp(1.5rem, 6vw, 2rem);
  letter-spacing: 0.18em;
  color: var(--yellow);
  user-select: all;
  line-height: 1;
}
.ei-copy {
  background: var(--yellow);
  color: var(--ink);
  border: 2px solid var(--ink);
  padding: 0.5rem 0.7rem;
  font-family: 'Anton', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.12s;
}
.ei-copy:hover { transform: translate(-1px, -1px); box-shadow: 2px 2px 0 var(--ink); }
.ei-copy.ok    { background: var(--bg); }
.ei-success-note {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  color: var(--ink-mid);
  margin-bottom: 1.1rem;
  text-transform: uppercase;
}
.ei-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.95rem 1.4rem;
  background: var(--red);
  color: var(--bg);
  border: var(--border);
  box-shadow: 5px 5px 0 var(--ink);
  font-family: 'Anton', sans-serif;
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s, background 0.15s, color 0.15s;
}
.ei-cta:hover,
.ei-cta:focus-visible {
  outline: none;
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--ink);
  background: var(--yellow);
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .exit-intent, .ei-dialog { transition: none; }
  .ei-form input[type=email]:focus,
  .ei-submit:hover, .ei-submit:focus-visible,
  .ei-cta:hover, .ei-cta:focus-visible { transform: none; }
}

/* ============================================================
   QUANTITY OFFER — 1 / 2 / 3 bodies block (homepage main offer).
   3 tight columns even on mobile; dominant 3rd card (3 bodies).
   Struck prices = real post-Mundial regular ($109K/body + $35K/gorra).
   ============================================================ */
.qty-offer { background: var(--blue); color: #fff; padding: 40px 0 0; }
.qty-offer .section-head { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.qty-offer .section-tag { color: var(--yellow); font-family: 'Bebas Neue', sans-serif; letter-spacing: 1px; }
.qty-offer .section-title { font-family: 'Anton', sans-serif; color: #fff; font-size: clamp(28px, 8vw, 46px); text-transform: uppercase; margin-bottom: 18px; }
.qty-offer .section-title em { color: var(--yellow); font-style: normal; }
.qty-grid {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-items: stretch;
}
.qty-card {
  position: relative; display: flex; flex-direction: column; text-align: center;
  background: var(--bg); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 8px; box-shadow: 2px 2px 0 var(--ink);
  padding: 10px 7px 12px;
}
.qty-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border: 2px solid var(--ink); border-radius: 6px; background: #fff; }
.qty-card .qty-name { font-family: 'Anton', sans-serif; font-size: 15px; text-transform: uppercase; margin-top: 8px; line-height: 1; }
.qty-card .qty-old  { font-size: 11px; color: #8A867E; text-decoration: line-through; font-weight: 600; }
.qty-card .qty-now  { font-family: 'Anton', sans-serif; font-size: 23px; color: var(--blue); line-height: 1; margin: 2px 0 5px; }
.qty-card .qty-tag  { font-size: 10px; font-weight: 700; color: #4A4A48; line-height: 1.15; margin-bottom: 8px; }
.qty-card .qty-gift { font-size: 10px; font-weight: 800; color: var(--red-deep, #A8141C); line-height: 1.15; margin-bottom: 6px; }
.qty-card .qty-save { display: inline-block; background: #1f8a3b; color: #fff; font-weight: 700; font-size: 9.5px; padding: 2px 6px; border-radius: 12px; line-height: 1.2; margin-bottom: 8px; }
.qty-card .qty-cta  { margin-top: auto; width: 100%; font-family: 'Anton', sans-serif; text-transform: uppercase; font-size: 13px; padding: 9px 4px; border: 2px solid var(--ink); border-radius: 5px; background: var(--yellow); color: var(--ink); box-shadow: 2px 2px 0 var(--ink); text-decoration: none; cursor: pointer; }
.qty-card .qty-cta:active { transform: translate(2px,2px); box-shadow: none; }
.qty-card.qty-hot {
  background: #fff; border: 3px solid var(--yellow); box-shadow: 3px 3px 0 var(--ink);
  transform: scale(1.04); margin-top: -4px; z-index: 2;
}
.qty-card.qty-hot .qty-now { color: var(--red-deep, #A8141C); font-size: 24px; }
.qty-card.qty-hot .qty-cta { background: var(--red); color: #fff; }
.qty-sticker {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%) rotate(-4deg);
  background: var(--red); color: #fff; font-family: 'Bebas Neue', sans-serif; font-size: 11px;
  letter-spacing: 0.4px; padding: 3px 8px; border: 2px solid var(--ink); border-radius: 3px;
  box-shadow: 2px 2px 0 var(--ink); white-space: nowrap; z-index: 3;
}
.qty-reassure { background: var(--ink); color: var(--yellow); text-align: center; font-family: 'Bebas Neue', sans-serif; font-size: clamp(13px, 3.6vw, 17px); letter-spacing: 0.6px; padding: 13px 14px; margin: 20px 0 0; }
@media (min-width: 600px) {
  .qty-grid { gap: 14px; }
  .qty-card { padding: 18px 14px; }
  .qty-card .qty-name { font-size: 20px; }
  .qty-card .qty-now { font-size: 32px; }
  .qty-card.qty-hot .qty-now { font-size: 34px; }
  .qty-card .qty-tag, .qty-card .qty-gift, .qty-card .qty-save { font-size: 12px; }
  .qty-card .qty-cta { font-size: 17px; padding: 13px 8px; }
  .qty-sticker { font-size: 13px; padding: 4px 12px; }
}