/* ───────────────────────────────────────────────────────────────
   Changuito landing styles — v2: WOW edition
   Electric Grape palette + Figtree/Inter (see DESIGN.md §1–2).
   Plain CSS, no build step. Motion is CSS-first; ./main.js layers
   on the interactive pieces (3D tilt, magnetic buttons, counter,
   scroll reveals, price ticker, accordion).
   ─────────────────────────────────────────────────────────────── */

:root {
  /* ── Brand tokens (mirror DESIGN.md §1) ────────────────── */
  --grape-dark: #3b0f8c;
  --grape: #5b21b6;
  --grape-mid: #7c3aed;
  --grape-tint-2: #e5daff;
  --grape-tint: #f0eaff;
  --violet-mist: #f7f5ff;
  --lime-zap: #c8ff00;
  --lime-dark: #8ab500;
  --lime-tint: #f4ffcc;
  --ink: #14111f;
  --slate: #6e6a82;
  --fog: #b3afcc;
  --divider: #eae7f5;
  --white: #ffffff;

  /* ── Spacing scale (matches Flutter AppSpacing) ───────── */
  --s4: 4px; --s8: 8px; --s12: 12px; --s16: 16px; --s20: 20px;
  --s24: 24px; --s32: 32px; --s40: 40px; --s48: 48px; --s64: 64px;
  --s80: 80px; --s96: 96px; --s128: 128px;

  --radius-card: 16px;
  --radius-lg: 24px;
  --radius-chip: 999px;

  --max-content: 1200px;

  /* Spring-y easings for motion */
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--violet-mist);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Selection echoes the brand lime — even highlighting feels intentional */
::selection { background: var(--lime-zap); color: var(--ink); }

h1, h2, h3 {
  font-family: 'Figtree', system-ui, sans-serif;
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s16);
}

h1 { font-size: clamp(40px, 6vw, 72px); line-height: 1.05; }
h2 { font-size: clamp(28px, 4vw, 44px); line-height: 1.15; }
h3 { font-size: 20px; line-height: 1.3; font-weight: 700; margin: 0 0 var(--s8); }

p { margin: 0 0 var(--s12); color: var(--slate); }

a { color: var(--grape-mid); text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 var(--s24);
}

/* ─────────────────────────────────────────────────────────
   Reveal-on-scroll utility
   JS toggles ``.in`` when the element enters the viewport;
   defaults below give a soft fade-up. ``data-reveal-stagger``
   on a parent stripes the delay across direct children.
   ───────────────────────────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.9s var(--ease-out-expo),
    transform 0.9s var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].in {
  opacity: 1;
  transform: none;
}

/* ─────────────────────────────────────────────────────────
   Header — solid grape-dark bar with the wordmark on the left.
   The wordmark SVG carries a #3b0f8c background rect that matches
   --grape-dark exactly, so it blends invisibly and only the
   white "Changuito" lettering shows.
   ───────────────────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: var(--s4) 0;
  background: var(--grape-dark);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}
.site-header.scrolled {
  /* Hairline separator after first scroll so the bar visually
     detaches from the hero below it. */
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  /* No gap — wordmark stands alone, no icon next to it */
}
.brand-wordmark {
  /* SVG viewBox was tightened (see changuito_wordmark.svg) so the
     800×175 region is just the lettering — no internal padding to
     work around with negative margins anymore. */
  height: 40px;
  width: auto;
  display: block;
}

/* Header right-side cluster: nav links + persistent CTA button.
   The CTA stays visible at all widths; the nav links collapse on
   narrow screens. */
.nav-right {
  display: flex;
  align-items: center;
  gap: var(--s24);
}
.nav-links {
  display: flex;
  gap: var(--s24);
  font-size: 14px;
  font-weight: 500;
}
.nav-links a {
  color: rgba(255, 255, 255, 0.75);
  transition: color 0.2s ease;
}
.nav-links a:hover {
  color: var(--white);
  text-decoration: none;
}
@media (max-width: 760px) { .nav-links { display: none; } }

/* Compact lime CTA pinned to the right of the nav bar — always
   visible, even when the rest of the nav collapses on mobile. */
.btn-nav-cta {
  display: inline-flex;
  align-items: center;
  padding: 6px var(--s12);
  background: var(--lime-zap);
  color: var(--ink);
  font-family: 'Figtree', sans-serif;
  font-weight: 700;
  font-size: 13px;
  border-radius: var(--radius-chip);
  text-decoration: none;
  transition: transform 0.2s var(--ease-out-back), background 0.2s ease;
  white-space: nowrap;
}
.btn-nav-cta:hover {
  background: #d4ff33;
  transform: scale(1.04);
  text-decoration: none;
}

/* ─────────────────────────────────────────────────────────
   Hero — port of Magic Patterns variant A
   ───────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  /* Solid grape, lighter than the header bar but still clearly
     dark. Replaces the four-blob mesh gradient and the violet-
     mist light background of the earlier passes. */
  background: var(--grape);
  color: var(--white);
  display: flex;
  align-items: center;
  padding: var(--s96) 0 var(--s64);
}
.hero .container { position: relative; z-index: 2; }
/* Grain sits over the solid grape at low opacity — keeps the
   surface from looking flat without re-introducing the gradient. */
.hero .grain {
  position: absolute;
  inset: 0;
  opacity: 0.18;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--s48);
  align-items: center;
}
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--s32); text-align: center; }
  .hero-text { align-items: center; }
}

.hero-text { display: flex; flex-direction: column; }

/* "Lanzamiento en Beta" pill — on a dark grape hero now, so
   the pill needs a translucent-white look to read. */
.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s8);
  padding: 6px var(--s12);
  border-radius: var(--radius-chip);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--white);
  font-weight: 500;
  font-size: 13px;
  align-self: flex-start;
  margin-bottom: var(--s24);
}
@media (max-width: 960px) {
  .eyebrow-pill { align-self: center; }
}

.pulse-dot {
  position: relative;
  display: inline-flex;
  width: 8px;
  height: 8px;
}
.pulse-dot::before,
.pulse-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--lime-zap);
}
.pulse-dot::before {
  animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
  opacity: 0.75;
}
@keyframes ping {
  75%, 100% { transform: scale(2.4); opacity: 0; }
}

/* Hero headline: first line white, accent line lime. The earlier
   purple-gradient text was dropped along with the mesh background
   so the headline still reads as a two-tone composition but in
   the simpler white-+-lime pairing on solid grape. */
.hero h1 { margin-bottom: var(--s24); }
.hero h1 .ink { display: block; color: var(--white); }
.hero h1 .gradient { display: block; color: var(--lime-zap); }

.hero-sub {
  font-size: clamp(16px, 2vw, 19px);
  /* Hero is grape now → light text. Slightly transparent so the
     emphasised strong below pops as fully white. */
  color: rgba(255, 255, 255, 0.78);
  max-width: 520px;
  line-height: 1.55;
  margin: 0 0 var(--s32);
  font-weight: 400;
}
@media (max-width: 960px) {
  .hero-sub { margin-left: auto; margin-right: auto; }
}
.hero-sub strong { color: var(--white); font-weight: 700; }

/* Hero CTAs */
.cta-row {
  display: flex;
  gap: var(--s12);
  flex-wrap: wrap;
}
@media (max-width: 960px) { .cta-row { justify-content: center; } }

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s8);
  padding: 14px var(--s24);
  border-radius: var(--radius-chip);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  border: none;
  font-family: inherit;
  transition: transform 0.2s var(--ease-out-back), box-shadow 0.3s ease;
  text-decoration: none;
}
.btn:active { transform: scale(0.96); }

/* Store badges — equal-weight pills, App Store + Google Play side
   by side. We pick neither as "more important than the other"
   (Android has the larger market share in Argentina anyway, so
   it'd be wrong to bias toward App Store). Dark ink fill on light
   sections; the .cta-section override flips them to white on dark. */
.btn-primary {
  background: var(--ink);
  color: var(--white);
}
.btn-primary:hover {
  transform: scale(1.03);
  background: #1f1a30;
  text-decoration: none;
}

.btn-outline {
  background: var(--ink);
  color: var(--white);
}
.btn-outline:hover {
  transform: scale(1.03);
  background: #1f1a30;
  text-decoration: none;
}

/* Sections with dark backgrounds (hero + final CTA both on
   --grape) flip the buttons to white pills so they pop against
   the surface. Same rule for both — one selector keeps the
   contexts visually identical. */
.hero .btn-primary,
.hero .btn-outline,
.cta-section .btn-primary,
.cta-section .btn-outline {
  background: var(--white);
  color: var(--ink);
}
.hero .btn-primary:hover,
.hero .btn-outline:hover,
.cta-section .btn-primary:hover,
.cta-section .btn-outline:hover {
  background: #f0eaff;
}

.btn-icon { width: 20px; height: 20px; flex-shrink: 0; }

/* Stat strip on the dark grape hero — light text + divider. */
.stat-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s12) var(--s24);
  margin-top: var(--s48);
  padding-top: var(--s32);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 15px;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 500;
}
@media (max-width: 960px) { .stat-strip { justify-content: center; } }
.stat-strip .num {
  font-family: 'Figtree', sans-serif;
  font-weight: 800;
  color: var(--white);
  font-size: 18px;
}
.stat-strip .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
}
.stat-strip .live { font-weight: 600; color: var(--lime-zap); }

/* ─────────────────────────────────────────────────────────
   Mesh gradient background (the WOW behind everything in hero)
   Four drifting blurred blobs + film grain + vignette.
   Pure CSS, no JS. ``mix-blend-mode: multiply`` keeps the colours
   from washing out on the light background.
   ───────────────────────────────────────────────────────── */
.mesh-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.mesh-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  mix-blend-mode: multiply;
  will-change: transform;
}
.mesh-blob-1 {
  top: -10%; left: -10%;
  width: 50vw; height: 50vw;
  background: rgba(59, 15, 140, 0.4);
  animation: drift-1 20s ease-in-out infinite alternate;
}
.mesh-blob-2 {
  top: 20%; right: -10%;
  width: 60vw; height: 60vw;
  background: rgba(124, 58, 237, 0.3);
  animation: drift-2 25s ease-in-out infinite alternate;
  animation-delay: -2s;
}
.mesh-blob-3 {
  bottom: -20%; left: 20%;
  width: 40vw; height: 40vw;
  background: rgba(91, 33, 182, 0.4);
  animation: drift-3 18s ease-in-out infinite alternate;
  animation-delay: -5s;
}
.mesh-blob-4 {
  top: 40%; left: 40%;
  width: 30vw; height: 30vw;
  background: rgba(200, 255, 0, 0.2);
  mix-blend-mode: overlay;
  filter: blur(120px);
  animation: drift-4 22s ease-in-out infinite alternate;
  animation-delay: -1s;
}
@keyframes drift-1 {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(100px, -100px) scale(1.2); }
  66%  { transform: translate(-50px, 50px) scale(0.9); }
  100% { transform: translate(40px, 80px) scale(1.1); }
}
@keyframes drift-2 {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(-150px, 150px) scale(1.3); }
  66%  { transform: translate(100px, -100px) scale(0.8); }
  100% { transform: translate(-60px, 60px) scale(1.15); }
}
@keyframes drift-3 {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(50px, -50px) scale(1.1); }
  66%  { transform: translate(-100px, 100px) scale(1.4); }
  100% { transform: translate(70px, 30px) scale(1); }
}
@keyframes drift-4 {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(-80px, 80px) scale(1.5); }
  66%  { transform: translate(80px, -80px) scale(1); }
  100% { transform: translate(-40px, -40px) scale(1.2); }
}

/* Film-grain overlay — SVG fractalNoise, dirt cheap */
.grain {
  position: absolute;
  inset: 0;
  opacity: 0.4;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Soft radial vignette so content reads clearly */
.vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 0%, rgba(247, 245, 255, 0.4) 100%);
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────
   Hero phone mockup + floating price tags
   3D tilt is driven by JS (pointermove → --tilt-x / --tilt-y
   custom props read in the transform below).
   ───────────────────────────────────────────────────────── */
.phone-stage {
  position: relative;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  aspect-ratio: 9 / 19;
  perspective: 1200px;
}

.phone {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 44px;
  background: var(--ink);
  border: 8px solid var(--ink);
  box-shadow:
    0 30px 60px -20px rgba(59, 15, 140, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  overflow: hidden;
  transform-style: preserve-3d;
  transform:
    rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg));
  transition: transform 0.6s var(--ease-out-expo);
  will-change: transform;
}

.phone-screen {
  width: 100%;
  height: 100%;
  background: var(--violet-mist);
  position: relative;
  display: flex;
  flex-direction: column;
}

.phone-notch {
  width: 100px;
  height: 24px;
  background: var(--ink);
  border-radius: 99px;
  margin: 8px auto 0;
}

.phone-app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 20px 12px;
}
.phone-logo { display: flex; align-items: center; gap: 6px; }
.phone-logo-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--grape);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Figtree', sans-serif;
  font-weight: 800;
  font-size: 14px;
}
.phone-logo-text {
  font-family: 'Figtree', sans-serif;
  font-weight: 800;
  font-size: 17px;
  color: var(--ink);
}

.phone-search {
  margin: 0 20px 20px;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--divider);
  border-radius: 14px;
  color: var(--slate);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.phone-content {
  flex: 1;
  background: var(--white);
  border-radius: 28px 28px 0 0;
  padding: 20px;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
}
.phone-section-title {
  font-family: 'Figtree', sans-serif;
  font-weight: 800;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 10px;
}
.phone-deal-row { display: flex; gap: 12px; }
.phone-deal {
  flex: 1;
  background: var(--violet-mist);
  border: 1px solid var(--divider);
  border-radius: 14px;
  padding: 12px;
}
.phone-deal-img {
  width: 48px;
  height: 48px;
  margin: 0 auto 8px;
  background: var(--white);
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(20, 17, 31, 0.04);
}
.phone-bar {
  height: 6px;
  border-radius: 99px;
  background: rgba(110, 106, 130, 0.18);
  margin-bottom: 5px;
}
.phone-bar.short { width: 60%; }
.phone-bar.price { width: 40%; background: var(--grape); }

.phone-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  border: 1px solid var(--divider);
  border-radius: 12px;
  margin-bottom: 8px;
}
.phone-list-left { display: flex; align-items: center; gap: 10px; }
.phone-list-thumb {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--violet-mist);
}
.phone-list-bars { display: flex; flex-direction: column; gap: 4px; }
.phone-list-bars .phone-bar { margin-bottom: 0; }
.phone-list-bars .phone-bar:first-child { width: 60px; }
.phone-list-bars .phone-bar:last-child {
  width: 36px;
  background: rgba(110, 106, 130, 0.1);
  height: 4px;
}

.phone-chevron {
  width: 10px;
  height: 10px;
  border-right: 1.5px solid rgba(110, 106, 130, 0.4);
  border-top: 1.5px solid rgba(110, 106, 130, 0.4);
  transform: rotate(45deg);
}

.phone-nav {
  height: 64px;
  background: var(--white);
  border-top: 1px solid var(--divider);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 24px 16px;
  position: relative;
}
.phone-nav-item {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: rgba(110, 106, 130, 0.2);
}
.phone-nav-item.active { background: var(--grape); }
.phone-nav-handle {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 4px;
  background: var(--ink);
  border-radius: 99px;
}

/* Subtle glare across the phone glass */
.phone-glare {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 100%);
  pointer-events: none;
  border-radius: inherit;
}

/* Floating price tag cards orbiting the phone */
.price-tag {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 12px 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 16px 32px -10px rgba(59, 15, 140, 0.18);
  color: var(--ink);
  /* Each card floats on a slow bob */
  animation: tag-float 6s ease-in-out infinite alternate;
  animation-delay: var(--tag-delay, 0s);
  /* Smooth fade when the hide-on-mobile rules engage during a
     resize, instead of the old display:none pop. */
  transition: opacity 0.35s ease;
}
.price-tag.cheapest {
  background: var(--ink);
  color: var(--white);
}
.price-tag .chain-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--violet-mist);
  color: var(--grape);
  font-family: 'Figtree', sans-serif;
  font-weight: 800;
  font-size: 14px;
}
.price-tag.cheapest .chain-dot {
  background: var(--lime-zap);
  color: var(--ink);
}
.price-tag .info {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.price-tag .chain-name {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grape-mid);
}
.price-tag.cheapest .chain-name { color: var(--lime-zap); }
.price-tag .prod {
  font-size: 11px;
  opacity: 0.8;
  margin: 2px 0 3px;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.price-tag .amount {
  font-family: 'Figtree', sans-serif;
  font-weight: 800;
  font-size: 17px;
  line-height: 1;
}
.price-tag .cheapest-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--lime-zap);
  color: var(--ink);
  font-size: 10px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 99px;
  transform: rotate(12deg);
  box-shadow: 0 4px 12px rgba(200, 255, 0, 0.4);
}

@keyframes tag-float {
  0%   { transform: translateY(-10px); }
  100% { transform: translateY(10px); }
}

/* Placement around the phone — anchored relative to .phone-stage.
   All four pulled to a uniform -4% offset so they overlap the
   phone in a balanced way; tag-b's "¡Más barato!" badge sits
   well inside the column, and tag-c (JUMBO) no longer pokes too
   far left. */
.price-tag.tag-a { left: -4%; top: 12%; --tag-delay: 0.1s; }
.price-tag.tag-b { right: -4%; top: 22%; --tag-delay: 0.6s; }
.price-tag.tag-c { left: -4%; bottom: 28%; --tag-delay: 1.1s; }
.price-tag.tag-d { right: -4%; bottom: 12%; --tag-delay: 1.6s; }

/* No responsive overrides — at -10% offset all four tags fit
   comfortably down to ~432px viewport. Below that, the worst
   case is the "¡Más barato!" badge clipping a few pixels at the
   right edge, which is cropped invisibly by .hero's
   ``overflow: hidden`` (no horizontal scrollbar). */

/* ─────────────────────────────────────────────────────────
   Cadenas — section 2
   Two-row logo marquee. Top row scrolls left at 55s/loop,
   bottom row scrolls right at 70s/loop — the different speeds
   make the eye linger instead of pattern-matching one loop.
   JS in main.js builds cards from a single CHAINS array,
   fetches each chain's real favicon from Google's s2 service,
   and duplicates the content so the CSS translate -50% loop
   is seamless. Edge fade-masks soften the in/out clip.
   ───────────────────────────────────────────────────────── */
.chains-section {
  background: var(--white);
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
  overflow: hidden;
  padding: var(--s96) 0 var(--s64);
}
.chains-section .container { margin-bottom: var(--s48); }

.chains-marquee-rows {
  display: flex;
  flex-direction: column;
  gap: var(--s16);
}

.chains-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black 8%, black 92%, transparent 100%);
}

/* The track holds N duplicated copies (filled by JS). We translate
   one full copy's width per loop — the JS sets --copy-width based
   on a single chain run so the loop is seamless regardless of how
   many duplicates fit. No :hover pause (felt jittery on the user's
   side; the user can scroll past without a "wait that stopped"
   reaction). */
.chains-marquee-track {
  display: flex;
  gap: var(--s16);
  width: max-content;
  animation: chains-marquee var(--marquee-speed, 55s) linear infinite;
  will-change: transform;
}
@keyframes chains-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(var(--copy-width, 50%) * -1)); }
}

/* Solid-color pill: chain's brand color is the entire backdrop.
   The row reads like a strip of supermarket awnings — high signal,
   instantly recognisable. No hover state because hovering a moving
   element to interact with it is awkward; the marquee is decorative. */
.chain-card {
  display: inline-flex;
  align-items: center;
  padding: 14px 28px;
  background: var(--chain-color, var(--grape));
  border-radius: var(--radius-chip);
  flex-shrink: 0;
  box-shadow: 0 4px 12px -4px rgba(20, 17, 31, 0.15);
}

.chain-card-name {
  font-family: 'Figtree', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--white);
  white-space: nowrap;
  letter-spacing: -0.01em;
}

/* ─────────────────────────────────────────────────────────
   Section primitives shared by Cómo funciona, Promos, etc.
   ───────────────────────────────────────────────────────── */
section { padding: var(--s96) 0; }
@media (max-width: 760px) { section { padding: var(--s64) 0; } }

.section-eyebrow {
  display: block;
  font-family: 'Figtree', sans-serif;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grape-mid);
  margin-bottom: var(--s16);
}
.section-lead {
  font-size: 18px;
  max-width: 640px;
  margin: 0 0 var(--s48);
  color: var(--slate);
}

/* ─────────────────────────────────────────────────────────
   Cómo funciona — section 3 — DARK (alternation slot)
   Solid --grape; section header in white + lime eyebrow.
   Three big numbered cards stay white so they pop on the dark
   surface. Mesh-echo dropped (was tuned for the light bg).
   ───────────────────────────────────────────────────────── */
.how-section {
  position: relative;
  overflow: hidden;
  background: var(--grape);
  color: var(--white);
}
.how-section .container { position: relative; z-index: 2; }
.how-section .section-eyebrow { color: var(--lime-zap); }
.how-section h2 { color: var(--white); }
.how-section .section-lead { color: rgba(255, 255, 255, 0.78); }
/* Hide the mesh-echo divs entirely — they were grape-on-violet-mist
   and would be invisible on the new grape bg anyway. */
.how-section .mesh-echo { display: none; }

.how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s24);
}
@media (max-width: 960px) { .how-grid { grid-template-columns: 1fr; } }

.how-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  padding: var(--s32);
  transform-style: preserve-3d;
  transform:
    rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg));
  transition: transform 0.5s var(--ease-out-expo), box-shadow 0.5s ease;
  will-change: transform;
}
.how-card:hover {
  box-shadow: 0 24px 48px -16px rgba(59, 15, 140, 0.18);
}

.how-num {
  display: inline-block;
  font-family: 'Figtree', sans-serif;
  font-weight: 800;
  font-size: 32px;
  color: var(--lime-dark);
  background: var(--lime-zap);
  padding: 4px var(--s16);
  border-radius: var(--radius-chip);
  margin-bottom: var(--s20);
  letter-spacing: -0.02em;
}

.how-card h3 {
  font-family: 'Figtree', sans-serif;
  font-size: 22px;
  font-weight: 800;
  margin-bottom: var(--s8);
}
.how-card p { font-size: 15px; line-height: 1.55; color: var(--slate); margin: 0; }

.how-icon {
  position: absolute;
  top: var(--s24);
  right: var(--s24);
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--grape-tint);
  color: var(--grape);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

/* ─────────────────────────────────────────────────────────
   Cómo funciona — mini-demo inside each card
   Each ``[data-demo]`` card has a different rendered fragment;
   shared chrome lives in .how-demo. JS in main.js plays the
   sequence on viewport entry (via IntersectionObserver) and
   loops it while the card stays in view.
   ───────────────────────────────────────────────────────── */
.how-card { padding-top: var(--s24); }

.how-demo {
  background: var(--violet-mist);
  border: 1px solid var(--divider);
  border-radius: var(--radius-card);
  padding: var(--s16);
  margin-bottom: var(--s24);
  min-height: 160px;
  display: flex;
  flex-direction: column;
  gap: var(--s12);
  overflow: hidden;
}

/* ---- Buscá: search box with typing caret + result rows ---- */
.how-demo-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--white);
  border: 1px solid var(--divider);
  border-radius: 10px;
  font-size: 13px;
  color: var(--ink);
  font-family: 'Inter', sans-serif;
}
.how-demo-search-icon { font-size: 14px; }
.how-demo-search-text { flex: 1; min-height: 1em; }
.how-demo-search-caret {
  width: 1.5px;
  height: 14px;
  background: var(--grape-mid);
  animation: caret-blink 1s steps(2) infinite;
}
@keyframes caret-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.how-demo-results {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.how-demo-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background: var(--white);
  border: 1px solid var(--divider);
  border-radius: 8px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s var(--ease-out-expo), transform 0.4s var(--ease-out-expo);
}
.how-demo-result.in {
  opacity: 1;
  transform: none;
}
.how-demo-result-thumb {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--grape-tint);
  flex-shrink: 0;
}
.how-demo-result-bar {
  flex: 1;
  height: 6px;
  border-radius: 99px;
  background: rgba(110, 106, 130, 0.18);
}
.how-demo-result-bar.short { width: 60%; flex: none; }

/* ---- Compará: 4 chain rows, lime bar slides to cheapest ---- */
.how-demo-compare {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}
.how-demo-cmp-row {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--white);
  border: 1px solid var(--divider);
  border-radius: 8px;
  font-size: 12px;
  transition: background 0.4s ease, border-color 0.4s ease, transform 0.5s var(--ease-out-expo);
}
.how-demo-cmp-row.cheapest {
  background: var(--lime-tint);
  border-color: var(--lime-zap);
}
.how-demo-cmp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.how-demo-cmp-label {
  font-family: 'Figtree', sans-serif;
  font-weight: 700;
  color: var(--ink);
}
.how-demo-cmp-price {
  font-family: 'Figtree', sans-serif;
  font-weight: 800;
  font-size: 13px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.how-demo-cmp-row.cheapest .how-demo-cmp-price { color: var(--lime-dark); }

/* ---- Ahorrá: shopping list + best-chain total ---- */
.how-demo-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.how-demo-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--white);
  border: 1px solid var(--divider);
  border-radius: 8px;
}
.how-demo-list-check {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1.5px solid var(--grape-mid);
  background: var(--white);
  position: relative;
  flex-shrink: 0;
  transition: background 0.3s ease;
}
.how-demo-list-item.checked .how-demo-list-check {
  background: var(--grape-mid);
}
.how-demo-list-item.checked .how-demo-list-check::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 4px;
  width: 4px;
  height: 8px;
  border-right: 1.5px solid var(--white);
  border-bottom: 1.5px solid var(--white);
  transform: rotate(45deg);
}
.how-demo-list-bar {
  flex: 1;
  height: 6px;
  border-radius: 99px;
  background: rgba(110, 106, 130, 0.18);
}
.how-demo-list-bar.short { width: 50%; flex: none; }
.how-demo-list-qty {
  font-family: 'Figtree', sans-serif;
  font-weight: 700;
  font-size: 11px;
  color: var(--slate);
  font-variant-numeric: tabular-nums;
}

.how-demo-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: var(--ink);
  color: var(--white);
  border-radius: 8px;
  margin-top: auto;
}
.how-demo-total-label {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.how-demo-total-amount {
  font-family: 'Figtree', sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: var(--lime-zap);
  font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────────────────
   Compará en vivo — section 4 — LIGHT (alternation slot)
   Flat white; the live-widget card carries its own shadow so
   it floats off the surface fine without a section gradient.
   ───────────────────────────────────────────────────────── */
.live-section { background: var(--white); }
.live-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: var(--s48);
  align-items: center;
}
@media (max-width: 960px) { .live-grid { grid-template-columns: 1fr; } }

.live-widget {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--divider);
  padding: var(--s24);
  box-shadow: 0 30px 60px -24px rgba(59, 15, 140, 0.22);
  position: relative;
  overflow: hidden;
}

.live-widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s8);
}
.live-widget-title {
  font-family: 'Figtree', sans-serif;
  font-size: 18px;
  font-weight: 800;
  margin: 0;
}
.live-widget-pulse {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--slate);
}
.live-widget-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  position: relative;
}
.live-widget-pulse-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.live-widget-tabs {
  display: flex;
  gap: var(--s8);
  margin-bottom: var(--s16);
  flex-wrap: wrap;
}
.live-tab {
  padding: 6px 14px;
  border-radius: var(--radius-chip);
  background: var(--violet-mist);
  border: 1px solid var(--divider);
  font-size: 13px;
  font-weight: 500;
  color: var(--slate);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}
.live-tab:hover { color: var(--ink); }
.live-tab.active {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}

.live-rows {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s8);
}
/* Smooth swap when rows reorder — JS sets the order numerically and
   the transition makes the movement feel intentional. */
.live-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: var(--s12);
  padding: var(--s12) var(--s16);
  background: var(--white);
  border: 1px solid var(--divider);
  border-radius: 14px;
  transition:
    transform 0.6s var(--ease-out-expo),
    background 0.4s ease,
    border-color 0.4s ease;
}
.live-row.cheapest {
  background: var(--lime-tint);
  border-color: var(--lime-zap);
}
.live-row .chain-dot-small {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--chain-color, var(--grape));
}
.live-row .chain-label {
  font-family: 'Figtree', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
}
.live-row .price-amount {
  font-family: 'Figtree', sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.live-row.cheapest .price-amount { color: var(--lime-dark); }

.live-savings {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--s16);
  padding: 8px 14px;
  background: var(--lime-zap);
  color: var(--ink);
  border-radius: var(--radius-chip);
  font-family: 'Figtree', sans-serif;
  font-weight: 800;
  font-size: 14px;
  box-shadow: 0 8px 24px rgba(200, 255, 0, 0.35);
  transform-origin: left center;
}
.live-savings.bounce-in {
  animation: bounce-in 0.6s var(--ease-out-back);
}
@keyframes bounce-in {
  0%   { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.live-widget-foot {
  margin-top: var(--s16);
  padding-top: var(--s16);
  border-top: 1px solid var(--divider);
  font-size: 12px;
  color: var(--slate);
  text-align: center;
}

/* ─────────────────────────────────────────────────────────
   Promociones — section 5 — DARK (alternation slot)
   Solid --grape. Lime promo badges pop harder than ever on
   this surface; the dark ink calculator card still reads as
   the focal point thanks to its lime accents.
   ───────────────────────────────────────────────────────── */
.promos-section {
  background: var(--grape);
  color: var(--white);
}
.promos-section .section-eyebrow { color: var(--lime-zap); }
.promos-section h2 { color: var(--white); }
.promos-section .section-lead { color: rgba(255, 255, 255, 0.78); }

.promos-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--s48);
  align-items: center;
}
/* Two-column only on real desktop widths — below ~1080 the headline
   "Hacemos las cuentas por vos." crashes into the calculator column.
   Single-column reads better and the calc stacks under the copy. */
@media (max-width: 1080px) { .promos-grid { grid-template-columns: 1fr; } }

.promo-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s12);
}
.promo-badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  background: var(--lime-zap);
  color: var(--ink);
  font-family: 'Figtree', sans-serif;
  font-weight: 800;
  font-size: 14px;
  border-radius: var(--radius-chip);
  box-shadow: 0 6px 16px rgba(200, 255, 0, 0.35);
  animation: badge-drift 7s ease-in-out infinite alternate;
  animation-delay: var(--badge-delay, 0s);
}
@keyframes badge-drift {
  0%   { transform: translateY(-3px); }
  100% { transform: translateY(3px); }
}

/* ── Live promo calculator ─────────────────────────────── */
.promo-calc {
  background: var(--ink);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--s32);
  box-shadow: 0 30px 60px -24px rgba(20, 17, 31, 0.4);
  position: relative;
  overflow: hidden;
}
/* Subtle lime glow in the corner — echoes the live widget */
.promo-calc::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 60%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(200, 255, 0, 0.18), transparent 60%);
  pointer-events: none;
}

.promo-calc-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--s20);
  padding-bottom: var(--s16);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
}
.promo-calc-product {
  font-family: 'Figtree', sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: var(--white);
}
.promo-calc-meta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}

.promo-calc-math {
  display: flex;
  flex-direction: column;
  gap: var(--s8);
  font-family: 'Figtree', sans-serif;
  font-variant-numeric: tabular-nums;
  position: relative;
}

.promo-calc-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.85);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.5s var(--ease-out-expo), transform 0.5s var(--ease-out-expo);
}
.promo-calc-line.visible {
  opacity: 1;
  transform: none;
}

.promo-calc-line-value {
  font-weight: 800;
  font-size: 17px;
  color: var(--white);
}
.promo-calc-line-value.muted { color: rgba(255, 255, 255, 0.5); font-weight: 600; }
.promo-calc-line-value.strike { text-decoration: line-through; text-decoration-thickness: 1.5px; }

.promo-calc-line.accent .promo-calc-line-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.promo-calc-tag {
  display: inline-block;
  padding: 3px 10px;
  background: var(--lime-zap);
  color: var(--ink);
  font-family: 'Figtree', sans-serif;
  font-weight: 800;
  font-size: 12px;
  border-radius: 99px;
}
.promo-calc-line.accent .promo-calc-line-value {
  color: var(--lime-zap);
}

.promo-calc-line.total {
  margin-top: var(--s8);
  padding-top: var(--s12);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.promo-calc-line.total .promo-calc-line-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.promo-calc-line.total .promo-calc-line-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--white);
}

.promo-calc-savings {
  margin-top: var(--s20);
  padding: var(--s12) var(--s16);
  background: var(--lime-zap);
  color: var(--ink);
  border-radius: var(--radius-chip);
  font-family: 'Figtree', sans-serif;
  font-weight: 800;
  font-size: 15px;
  text-align: center;
  display: inline-block;
  box-shadow: 0 8px 24px rgba(200, 255, 0, 0.4);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.4s var(--ease-out-back), transform 0.4s var(--ease-out-back);
}
.promo-calc-savings.visible {
  opacity: 1;
  transform: scale(1);
}

/* ─────────────────────────────────────────────────────────
   FAQ — section 6
   JS-driven smooth expand. Each .faq-item has a hidden inner
   .faq-body whose max-height transitions.
   ───────────────────────────────────────────────────────── */
/* FAQ — LIGHT (alternation slot). Section bg is white now; items
   use violet-mist so each card has a quiet differentiation from
   the section surface without needing a heavy shadow. */
.faq-section { background: var(--white); }
.faq-list { width: 100%; }

.faq-item {
  background: var(--violet-mist);
  border: 1px solid var(--divider);
  border-radius: var(--radius-card);
  margin-bottom: var(--s12);
  overflow: hidden;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.faq-item.open {
  border-color: var(--grape-mid);
  background: var(--white);
}

.faq-q {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font-family: 'Figtree', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
  padding: var(--s20) var(--s24);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s16);
}
.faq-q::after {
  content: '+';
  font-size: 28px;
  color: var(--grape-mid);
  font-weight: 300;
  transition: transform 0.3s var(--ease-out-back);
  flex-shrink: 0;
  line-height: 1;
}
.faq-item.open .faq-q::after { transform: rotate(45deg); }

.faq-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease-out-expo);
}
.faq-body-inner {
  padding: 0 var(--s24) var(--s20);
  color: var(--slate);
  font-size: 15px;
  line-height: 1.6;
}

/* ─────────────────────────────────────────────────────────
   Final CTA — section 7 — DARK (alternation slot)
   Solid --grape with the headline in lime — callback to the
   "Ahorrá en serio." lime line at the top of the page.
   ───────────────────────────────────────────────────────── */
.cta-section {
  position: relative;
  overflow: hidden;
  background: var(--grape);
  color: var(--white);
  padding: var(--s128) 0;
}
.cta-section h2 {
  color: var(--lime-zap);
  font-size: clamp(36px, 5vw, 56px);
  margin-bottom: var(--s16);
}
.cta-section p { color: rgba(255, 255, 255, 0.78); }
.cta-section .container { position: relative; z-index: 2; text-align: center; }
.cta-section .section-lead {
  margin-left: auto;
  margin-right: auto;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
}
.cta-section .cta-row { justify-content: center; }

/* ─────────────────────────────────────────────────────────
   Footer
   ───────────────────────────────────────────────────────── */
.site-footer {
  background: var(--grape-dark);
  color: var(--white);
  padding: var(--s48) 0 var(--s24);
}
.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s32);
  justify-content: space-between;
  align-items: flex-start;
}
.site-footer p { color: rgba(255, 255, 255, 0.7); margin: 0; }
.site-footer a { color: var(--white); }
.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--s8);
  font-size: 14px;
}
.footer-bottom {
  margin-top: var(--s32);
  padding-top: var(--s24);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
}

/* ─────────────────────────────────────────────────────────
   Reduced-motion overrides — respect prefers-reduced-motion.
   Honour user OS setting and kill the heavy ambient stuff;
   keep functional state changes (open/close, hover) intact.
   ───────────────────────────────────────────────────────── */
@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;
  }
  .mesh-blob, .grain { display: none; }
  [data-reveal] { opacity: 1; transform: none; }
}