/* ===== DESIGN TOKENS ===== */
:root {
  --dark:    #0c1e18;
  --forest:  #005236;
  --green:   #008558;
  --lime:    #e6ff55;
  --mint:    #d4f5e0;
  --amber:   #FAC11A;
  --cream:   #f5f0e6;
  --offwhite:#fafafa;
  --white:   #ffffff;
  --ease1:   cubic-bezier(.32,.72,0,1);
  --ease2:   cubic-bezier(.77,0,.175,1);
  --fh:      'Parkinsans', system-ui, sans-serif;
  --fb:      'Inter', system-ui, sans-serif;
  --maxw:    144rem;
  --px:      3.2rem;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 62.5%; scroll-behavior: smooth; }
body {
  font-family: var(--fb);
  background: var(--white);
  color: var(--dark);
  font-size: 1.6rem;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  overflow-y: visible;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
.wrap {
  width: min(var(--maxw), calc(100% - var(--px)*2));
  margin: 0 auto;
}

/* ===== NAV ===== */
.nav {
  position: fixed;
  top: 2.4rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  width: min(var(--maxw), calc(100% - 3.2rem));
  background: rgba(12,30,24, calc(.92 - var(--nav-scroll, 0) * .04));
  backdrop-filter: blur(calc(20px + var(--nav-scroll, 0) * 6px));
  -webkit-backdrop-filter: blur(calc(20px + var(--nav-scroll, 0) * 6px));
  border-radius: 1.4rem;
  --nav-scroll: 0;
  --nav-pad-y: calc(1rem - var(--nav-scroll) * .32rem);
  --nav-pad-x-r: calc(1.9rem - var(--nav-scroll) * .2rem);
  --nav-pad-x-l: calc(2.2rem - var(--nav-scroll) * .5rem);
  padding: var(--nav-pad-y) var(--nav-pad-x-r) var(--nav-pad-y) var(--nav-pad-x-l);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(1.6rem - var(--nav-scroll) * .4rem);
  transform: translateX(-50%) scale(calc(1 - var(--nav-scroll) * .014));
  transform-origin: center top;
  will-change: transform, padding;
  /* `translate` rather than `transform`, which already carries the centring
     and the scroll scale — the two compose instead of overwriting. */
  translate: 0 0;
  transition: translate .45s var(--ease1);
}
.nav.is-hidden {
  translate: 0 calc(-100% - 4rem);
}
.nav.is-ready { transition: none; }
.nav-logo { display: flex; align-items: center; flex: 1 1 0; min-width: 0; }
.nav-logo .lockup {
  height: calc(4.8rem - var(--nav-scroll, 0) * 1.1rem);
  width: auto;
  display: block;
  transition: height .25s var(--ease1);
}
.nav-logo .lg-word { fill: var(--white); }
.nav-logo .lg-mark { fill: var(--amber); }
.nav-links {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  justify-content: center;
  gap: calc(.15rem - var(--nav-scroll, 0) * .05rem);
}
/* One pill glides between items — to the hovered link, back to the active one
   on leave. Same dark-pill language as the CTA and the section toggle. */
.nav-indicator {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  border-radius: .8rem;
  background: var(--amber);
  opacity: 0;
  pointer-events: none;
  transition: transform .42s var(--ease1), width .42s var(--ease1), opacity .28s var(--ease1);
}
.nav-link {
  position: relative;
  font-family: var(--fb);
  font-size: calc(1.52rem - var(--nav-scroll, 0) * .09rem);
  font-weight: 500;
  letter-spacing: -.018em;
  color: rgba(255,255,255,.72);
  padding: calc(.78rem - var(--nav-scroll, 0) * .12rem) calc(1.25rem - var(--nav-scroll, 0) * .15rem);
  border-radius: .8rem;
  z-index: 1;
  transition: color .24s var(--ease1);
}
/* Fallback styling if the indicator never initialises. */
.nav-link.is-active { color: var(--white); font-weight: 600; }
/* Whatever the pill is currently sitting under. */
.nav-link.is-lit { color: var(--dark); font-weight: 600; }
.nav-actions { display: flex; align-items: center; justify-content: flex-end; gap: calc(.55rem - var(--nav-scroll, 0) * .1rem); flex: 1 1 0; min-width: 0; }
.nav-lang {
  font-family: var(--fb);
  font-size: calc(1.3rem - var(--nav-scroll, 0) * .07rem);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  padding: calc(.72rem - var(--nav-scroll, 0) * .1rem) calc(1rem - var(--nav-scroll, 0) * .1rem);
  border-radius: 1.4rem;
  cursor: pointer;
  transition: background .22s, color .22s;
}
.nav-lang:hover { background: rgba(255,255,255,.1); color: var(--white); }
.nav-login {
  font-family: var(--fb);
  font-size: calc(1.5rem - var(--nav-scroll, 0) * .09rem);
  font-weight: 500;
  letter-spacing: -.015em;
  color: var(--white);
  padding: calc(.74rem - var(--nav-scroll, 0) * .12rem) calc(1.55rem - var(--nav-scroll, 0) * .15rem);
  border-radius: 1.4rem;
  border: 1.5px solid rgba(255,255,255,.24);
  transition: background .22s, color .22s, border-color .22s;
}
.nav-login:hover { background: var(--lime); color: var(--dark); border-color: var(--lime); }
.btn-liquid--nav .btn-liquid__label {
  font-size: calc(1.5rem - var(--nav-scroll, 0) * .09rem);
  background: var(--amber);
  color: var(--dark);
  padding: calc(1.05rem - var(--nav-scroll, 0) * .14rem) calc(1.85rem - var(--nav-scroll, 0) * .2rem);
}
.btn-liquid--nav .btn-liquid__blob {
  width: calc(3.7rem - var(--nav-scroll, 0) * .38rem);
  height: calc(3.7rem - var(--nav-scroll, 0) * .38rem);
  margin-left: -.55rem;
  background: var(--amber);
  color: var(--dark);
}
.btn-liquid--nav .btn-liquid__blob svg { width: 1.5rem; height: 1.5rem; }
.btn-liquid--nav .btn-liquid__label,
.btn-liquid--nav .btn-liquid__blob { border-radius: 1.4rem; }
.btn-liquid--nav .btn-liquid__label { white-space: nowrap; }
.btn-liquid--nav:hover .btn-liquid__label,
.btn-liquid--nav:hover .btn-liquid__blob { background: var(--lime); color: var(--dark); }
.btn-liquid--nav:hover .btn-liquid__blob { transform: translateX(.5rem) rotate(45deg); }


/* ── Producto: dropdown with the modalities + a featured card for the panel.
   Positioned off .nav-links so it centres under the link row. ── */
.nav-dd__trigger { display: inline-flex; align-items: center; gap: .45rem; }
.nav-dd__chev { width: 1.2rem; height: 1.2rem; transition: transform .35s var(--ease1); }
.nav-dd.is-open .nav-dd__chev { transform: rotate(180deg); }
.nav-dd__panel {
  position: absolute;
  top: calc(100% + 2rem);
  left: 50%;
  width: 68rem;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: .8rem;
  padding: .8rem;
  background: var(--white);
  color: var(--dark);
  border-radius: 1.4rem;
  box-shadow: 0 28px 70px rgba(12,30,24,.3);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -.8rem);
  transition: opacity .22s var(--ease1), transform .35s var(--ease1), visibility 0s linear .35s;
  z-index: 5;
}
/* Invisible bridge over the gap, so crossing it doesn't count as leaving. */
.nav-dd__panel::before { content: ''; position: absolute; left: 0; right: 0; top: -2.2rem; height: 2.2rem; }
.nav-dd.is-open .nav-dd__panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition: opacity .22s var(--ease1), transform .35s var(--ease1), visibility 0s;
}
.nav-dd__col { display: flex; flex-direction: column; gap: .2rem; padding: 1.6rem .4rem .4rem; }
.nav-dd__eyebrow {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(12,30,24,.42);
  margin: 0 1.2rem .8rem;
}
.nav-dd__item {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: 1.1rem 1.2rem;
  border-radius: 1rem;
  transition: background .2s var(--ease1);
}
a.nav-dd__item:hover, a.nav-dd__item:focus-visible { background: rgba(12,30,24,.05); }
.nav-dd__name {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-family: var(--fh);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -.01em;
}
.nav-dd__desc { font-size: 1.3rem; line-height: 1.4; color: rgba(12,30,24,.58); }
.nav-dd__item.is-soon { cursor: default; }
.nav-dd__item.is-soon .nav-dd__name { color: rgba(12,30,24,.5); }
.soon-badge {
  font-family: var(--fb);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
  background: var(--lime);
  color: var(--dark);
  padding: .45rem .7rem;
  border-radius: .6rem;
}
.nav-dd__feature {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 34rem;
  padding: 2.4rem 2.4rem 0;
  border-radius: 1rem;
  background: var(--forest);
  color: var(--white);
}
.nav-dd__feature .nav-dd__eyebrow { color: var(--lime); margin: 0; }
.nav-dd__feature-ttl { font-family: var(--fh); font-size: 2.2rem; font-weight: 600; line-height: 1.15; letter-spacing: -.02em; }
.nav-dd__feature-cta { display: inline-flex; align-items: center; gap: .5rem; font-size: 1.35rem; font-weight: 600; color: var(--amber); }
.nav-dd__feature-cta svg { width: 1.4rem; height: 1.4rem; transition: transform .45s var(--ease1); }
.nav-dd__feature:hover .nav-dd__feature-cta svg { transform: rotate(45deg); }
.nav-dd__feature-media { position: relative; flex: 1; margin-top: .8rem; }
.nav-dd__feature-media img {
  position: absolute;
  left: 6%;
  width: 88%;
  border-radius: 1rem;
  box-shadow: 0 14px 30px rgba(0,0,0,.3);
  transition: translate .6s var(--ease1);
}
.nav-dd__feature-media img:first-child { top: 0; rotate: -3deg; }
.nav-dd__feature-media img:last-child { top: 48%; rotate: 2.5deg; }
.nav-dd__feature:hover .nav-dd__feature-media img:first-child { translate: 0 -.6rem; }
.nav-dd__feature:hover .nav-dd__feature-media img:last-child { translate: 0 .4rem; }
/* Modality shots stacked over the panel card; hovering an item fades its own in. */
.nav-dd__shot {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity .35s var(--ease1);
  pointer-events: none;
}
.nav-dd__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  scale: 1.06;
  transition: scale .7s var(--ease1);
}
.nav-dd__shot::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12,30,24,0) 40%, rgba(12,30,24,.88) 100%);
}
.nav-dd__shot-cap {
  position: absolute;
  left: 2.4rem;
  right: 2.4rem;
  bottom: 2.2rem;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  translate: 0 .8rem;
  transition: translate .45s var(--ease1);
}
.nav-dd__shot-name { font-family: var(--fh); font-size: 2.2rem; font-weight: 600; letter-spacing: -.02em; }
.nav-dd__shot-for { font-size: 1.3rem; line-height: 1.4; color: rgba(255,255,255,.78); }
.nav-dd__shot.is-on { opacity: 1; }
.nav-dd__shot.is-on img { scale: 1; }
.nav-dd__shot.is-on .nav-dd__shot-cap { translate: 0 0; }
.nav-dd__item.is-soon.is-hot { background: rgba(12,30,24,.05); }

/* ===== HERO ===== */
.hero {
  min-height: 100svh;
  background: var(--dark);
  position: relative;
  display: flex;
  align-items: center;
  padding: 12rem 0 7.2rem;
  overflow: hidden;
  /* Scrubbed on scroll into an inset rounded panel — see initHeroScrollInset(). */
  transform-origin: center center;
  will-change: transform, border-radius;
}
.hero .wrap { position: relative; z-index: 2; display: grid; grid-template-columns: .92fr 1.08fr; gap: 4.8rem; align-items: center; }
.hero-label {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  background: rgba(230,255,85,.12);
  border: 1px solid rgba(230,255,85,.25);
  color: var(--lime);
  font-size: 1.25rem;
  font-weight: 600;
  padding: .55rem 1.3rem;
  border-radius: 999rem;
  margin-bottom: 2.4rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.hero-label::before { content:''; width:.55rem; height:.55rem; background:var(--lime); border-radius:50%; }
.hero-title {
  font-family: var(--fh);
  font-size: clamp(4.2rem,6vw,7.6rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.03;
  letter-spacing: -.025em;
  margin-bottom: 3.2rem;
}
.hero-title em { font-style: normal; color: var(--amber); white-space: nowrap; }
/* One grid cell holds every phrase, so the window is as tall as a single
   line and as wide as the longest — harmless with left-aligned type. */
.hero-rot__win {
  display: inline-grid;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: .06em;
}
.hero-rot__w {
  grid-area: 1 / 1;
  white-space: nowrap;
  will-change: transform, opacity;
}
.hero-ctas { display: flex; align-items: center; gap: 3.6rem; flex-wrap: wrap; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── Loader: a deck springs into a stack, deals itself off the bottom of the
   screen, then the whole panel slides away to hand over to the hero. ── */
.dcl { position: fixed; inset: 0; z-index: 100000; pointer-events: none; }
body[data-dcl-status="loading"] { overflow: hidden; }
body[data-dcl-status="done"] .dcl { display: none; }
.dcl__screen {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: clip;
}
.dcl__bg {
  position: absolute;
  inset: 0;
  background: var(--dark);
  will-change: transform;
}
.dcl__list {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}
.dcl__card {
  position: absolute;
  width: clamp(16rem, 20vw, 24rem);
  aspect-ratio: 3 / 4;
  border-radius: 1.4rem;
  overflow: hidden;
  will-change: transform;
  box-shadow: 0 18px 48px rgba(0,0,0,.42);
}
.dcl__card--forest { background: var(--forest); }
.dcl__card--lime   { background: var(--lime); }
.dcl__card--mint   { background: var(--mint); }
.dcl__card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dcl__logo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4.8rem;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  color: var(--lime);
  will-change: transform, opacity;
}
.dcl__logo .lockup { height: 5.4rem; width: auto; display: block; }
.dcl__logo .lg-word { fill: var(--white); }
.dcl__logo .lg-mark { fill: var(--amber); }
@media (prefers-reduced-motion: reduce) { .dcl { display: none; } }
/* ── Liquid CTA: a label pill and an arrow blob welded by the #liquid-goo
   filter. On hover the blob pulls away and the goo stretches between them. ── */
.btn-liquid {
  display: inline-flex;
  align-items: center;
  filter: url(#liquid-goo);
  -webkit-tap-highlight-color: transparent;
}
.hero .btn-liquid__label,
.hero .btn-liquid__blob,
.how .btn-liquid__label,
.how .btn-liquid__blob,
.why .btn-liquid__label,
.why .btn-liquid__blob,
.cta-band .btn-liquid__label,
.cta-band .btn-liquid__blob,
.footer .btn-liquid__label,
.footer .btn-liquid__blob { background: var(--amber); }
.hero .btn-liquid:hover .btn-liquid__label,
.hero .btn-liquid:hover .btn-liquid__blob,
.how .btn-liquid:hover .btn-liquid__label,
.how .btn-liquid:hover .btn-liquid__blob,
.why .btn-liquid:hover .btn-liquid__label,
.why .btn-liquid:hover .btn-liquid__blob,
.cta-band .btn-liquid:hover .btn-liquid__label,
.cta-band .btn-liquid:hover .btn-liquid__blob,
.footer .btn-liquid:hover .btn-liquid__label,
.footer .btn-liquid:hover .btn-liquid__blob { background: var(--lime); }
.btn-liquid__label {
  font-family: var(--fh);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  background: var(--lime);
  color: var(--dark);
  padding: 1.5rem 2.6rem;
  border-radius: 1.4rem;
  transition: background .28s var(--ease1);
}
.btn-liquid__blob {
  width: 4.6rem;
  height: 4.6rem;
  margin-left: -.7rem;
  flex-shrink: 0;
  border-radius: 1.4rem;
  background: var(--lime);
  color: var(--dark);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .9s cubic-bezier(.135,.9,.15,1), background .28s var(--ease1);
}
.btn-liquid__blob svg { width: 1.9rem; height: 1.9rem; }
.btn-liquid:hover .btn-liquid__label,
.btn-liquid:hover .btn-liquid__blob { background: #f0ff88; }
.btn-liquid:hover .btn-liquid__blob { transform: translateX(1rem) rotate(45deg); }
.btn-liquid--sm .btn-liquid__label { font-size: 1.35rem; padding: 1.2rem 2.1rem; }
.btn-liquid--sm .btn-liquid__blob { width: 3.9rem; height: 3.9rem; }
.btn-liquid--sm .btn-liquid__blob svg { width: 1.6rem; height: 1.6rem; }
.footer-brand-col .btn-liquid { margin-bottom: 2.8rem; }
@media (prefers-reduced-motion: reduce) {
  .btn-liquid:hover .btn-liquid__blob { transform: none; }
}
.btn-text {
  font-size: 1.5rem;
  font-weight: 500;
  color: rgba(255,255,255,.88);
  padding-bottom: 2px;
  border-bottom: 1.5px solid rgba(255,255,255,.45);
  transition: border-color .22s, color .22s;
}
.btn-text:hover { color: var(--lime); border-color: var(--lime); }
.hero-footer {
  margin-top: 4.8rem;
  font-size: 1.4rem;
  color: rgba(255,255,255,.58);
  line-height: 1.5;
}
/* Loose fragments of the iso drifting behind the content — same rounded
   block, same palette, grouped so each cluster still reads as a shape. */
.pixdust { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.pixdust__cluster { position: absolute; will-change: transform; }
.pixdust__b { position: absolute; }
@media (max-width: 760px) { .pixdust { display: none; } }

/* Cursor trail: rounded squares rather than dots, so it belongs to the
   same block vocabulary as the mark. */
.cursor-trail { position: absolute; inset: 0; pointer-events: none; z-index: 7; }
.cursor-trail__b {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 24%;
  opacity: 0;
  will-change: transform;
}

.hero-chip {
  position: absolute;
  z-index: 6;
  width: 6.4rem;
  height: 6.4rem;
  border-radius: 1.4rem;
  display: grid;
  place-items: center;
  box-shadow: 0 16px 38px rgba(0,0,0,.3);
}
.hero-chip svg { width: 3rem; height: 3rem; }
.hero-chip--lime   { background: var(--lime);   color: var(--dark); }
.hero-chip--white  { background: var(--white);  color: var(--forest); }
.hero-chip--forest { background: var(--amber); color: var(--dark); }
.hero-chip { width: 7rem; height: 7rem; border-radius: 1.4rem; }
.hero-chip svg { width: 3.3rem; height: 3.3rem; }
.hero-chip--1 { left: -3.5rem; top: 4%; }
.hero-chip--2 { right: -3.5rem; top: 38%; }
.hero-chip--3 { left: -1.5rem; bottom: 4%; }
@media (max-width: 1080px) { .hero-chip { display: none; } }

/* Hero right */
.hero-right { position: relative; display: flex; justify-content: center; }
.hero-portrait-wrap {
  position: relative;
  width: min(56rem,100%);
}
/* Deck of shots that deals itself — the fan geometry is the Osmo flick
   slider, minus the dragging, the labels and the CTA. */
.flick { position: relative; width: 100%; }
.flick::before { content: ''; display: block; padding-top: 116%; }
.flick__list { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.flick__item { position: absolute; width: 79%; will-change: transform; }
.flick__item img {
  width: 100%;
  aspect-ratio: .78/1;
  object-fit: cover;
  display: block;
  border-radius: 1.4rem;
  box-shadow:
    0 2px 0 rgba(255,255,255,.14) inset,
    0 8px 20px rgba(0,0,0,.28),
    0 34px 80px rgba(0,0,0,.5);
  outline: 1px solid rgba(255,255,255,.09);
  outline-offset: -1px;
}


/* ── Hero "Tu salón, sin esperas": copy corto, mazo de fotos, pago en vivo y logos ── */
.hero { flex-direction: column; justify-content: center; gap: 4rem; padding: 11rem 0 3.2rem; }
.hero .wrap.hero-logos { display: flex; grid-template-columns: none; }
.hero-title { font-weight: 600; letter-spacing: -.035em; line-height: 1; font-size: clamp(5rem, 6.4vw, 9.2rem); margin-bottom: 0; }
.hero-lead { margin-top: 3.2rem; max-width: 42rem; font-size: 1.9rem; line-height: 1.55; color: rgba(255,255,255,.66); }
.hero-ctas { margin-top: 3.6rem; gap: 3.2rem; }
.hero-pay {
  position: absolute;
  z-index: 7;
  right: -2.4rem;
  bottom: 9%;
  width: 26rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 1.8rem;
  border-radius: 1.8rem;
  background: rgba(255,255,255,.74);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.6);
  color: var(--dark);
  box-shadow: 0 20px 50px rgba(0,0,0,.22);
}
.hero-pay > * { display: block; }
.hero-pay__lbl { font-size: 1.2rem; font-weight: 600; letter-spacing: .04em; color: rgba(12,30,24,.6); }
.hero-pay__row { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.4rem; }
.hero-pay__row b { display: inline-block; font-family: var(--fh); font-size: 2.6rem; font-weight: 600; letter-spacing: -.02em; }
.hero-pay__btn { padding: 1.1rem; border-radius: 1.1rem; background: var(--dark); color: var(--lime); text-align: center; font-size: 1.3rem; font-weight: 600; }
.hero-logos { align-items: center; gap: 4rem; padding-top: 2.4rem; border-top: 1px solid rgba(255,255,255,.1); }
.hero-logos__lbl { flex-shrink: 0; font-size: 1.2rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.hero-logos__marquee { flex: 1; min-width: 0; }
.hero-logos__marquee .marquee-track { animation-duration: 54s; }
/* Each logo sits on its own light tile: the marks come with their own plates
   (some dark), so a uniform tile reads cleaner than trying to knock them out. */
.hero-logos__marquee .marquee-track img {
  height: 5.6rem; width: 13rem; max-width: none; padding: .9rem 1.6rem;
  object-fit: contain; background: var(--white); border-radius: 1.2rem;
  filter: grayscale(1); mix-blend-mode: normal; opacity: .92;
}
.hero-logos__marquee .marquee-track { gap: 1.2rem; }
@media (max-width: 1080px) {
  .hero-logos { flex-direction: column; align-items: flex-start; gap: 2rem; }
  .hero-logos__marquee { width: 100%; }
}
@media (max-width: 760px) {
  .hero-pay { right: 1.2rem; bottom: 1.2rem; width: 22rem; padding: 1.4rem; }
}

/* ===== LOGOS STRIP ===== */
.logos-strip {
  background: var(--white);
  padding: 5.6rem 0;
  border-bottom: 1px solid rgba(12,30,24,.07);
}
.logos-strip-text {
  text-align: center;
  font-size: 1.3rem;
  font-weight: 600;
  color: rgba(12,30,24,.4);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 3.6rem;
}
.logos-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4.8rem;
  flex-wrap: wrap;
}
.logos-row img {
  height: 4rem;
  width: auto;
  max-width: 18rem;
  object-fit: contain;
  filter: none;
  opacity: 1;
  transition: transform .3s;
}
.logos-row img:hover { transform: scale(1.04); }
.logos-marquee .marquee-track img {
  height: 4.8rem;
  width: auto;
  max-width: 20rem;
  object-fit: contain;
  filter: none;
  opacity: 1;
  flex-shrink: 0;
  transition: transform .3s;
}
.logos-marquee .marquee-track img:hover { transform: scale(1.04); }
.logos-marquee .marquee-track { gap: 6.4rem; animation-duration: 54s; }
/* fallback text logos */
.logo-text {
  font-family: var(--fh);
  font-size: 1.6rem;
  font-weight: 700;
  color: rgba(12,30,24,.35);
  letter-spacing: -.01em;
  transition: color .25s;
  white-space: nowrap;
}
.logo-text:hover { color: var(--dark); }
.bikes .logo-text { font-size: 1.8rem; padding: 0 2.4rem; }

/* ===== FMD SECTION ===== */
.fmd {
  overflow-x: clip;
  overflow-y: visible;
  background: var(--dark);
  border-radius: 1.4rem 1.4rem 0 0;
  padding: 9.6rem 0 0;
  overflow: visible;
  position: relative;
}
.fmd-intro {
  max-width: 72rem;
  margin: 0 auto 6.4rem;
  text-align: center;
  padding: 0 1.6rem;
}
.fmd-title {
  font-family: var(--fh);
  font-size: clamp(3.6rem,5vw,6.4rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.05;
  letter-spacing: -.025em;
  margin: 0 auto 2rem;
  max-width: 56rem;
}
.fmd-title .hl { color: var(--amber); }
/* Pixel chips set inline with the display type, sized in em so they track it. */
.ttl-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: .92em;
  height: .92em;
  border-radius: .24em;
  vertical-align: -.06em;
  margin-left: .1em;
  rotate: -4deg;
}
.ttl-chip svg { width: .62em; height: .62em; }
.ttl-chip--lime   { background: var(--lime);   color: var(--dark); }
.ttl-chip--mint   { background: var(--mint);   color: var(--forest); }
.ttl-chip--forest { background: var(--forest); color: var(--lime); }
.ttl-chip--mint   { rotate: 5deg; }
.ttl-chip--forest { rotate: -7deg; }
.fmd-sub {
  font-size: 1.55rem;
  color: rgba(255,255,255,.55);
  line-height: 1.65;
  max-width: 52rem;
  margin: 0 auto;
}

/* Stacking cards — Boron layout */
.fmd-cards-stack-section {
  padding-top: 4rem;
  padding-bottom: 15dvh;
  overflow: visible;
}
.fmd-cards-stack-section .wrap { overflow: visible; }
.fmd-cards-stack {
  display: flex;
  flex-direction: column;
  gap: 5em;
  align-items: center;
  width: 100%;
}
.fmd-stack-item {
  flex: none;
  width: 100%;
  max-width: 25em;
  position: sticky;
  top: 5em;
}
/* Wrapper exists only to host the escaped pixel: the card itself is masked,
   and a mask would clip anything drawn outside its own box. */
.fmd-card-shell { --notch: 7.2rem; position: relative; width: 100%; }
/* rx is in the 100-unit viewBox, so it scales with --notch-box. */
.fmd-card {
  --notch-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' rx='21' fill='%23000'/%3E%3C/svg%3E");
}
.fmd-pix {
  position: absolute;
  top: calc(var(--notch) * -0.36);
  right: calc(var(--notch) * -0.26);
  width: calc(var(--notch) * 0.78);
  height: calc(var(--notch) * 0.78);
  border-radius: 1.4rem;
  background: var(--pix, var(--amber));
  pointer-events: none;
}
.fmd-card {
  position: relative;
  background: var(--amber);
  border-radius: 1.4rem;
  padding: 2.8rem 2.8rem 3.2rem;
  width: 100%;
  min-height: 19em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Bite the corner out. drop-shadow rather than box-shadow so the shadow
     follows the notched silhouette instead of the original rectangle. */
  --notch-r: 2rem;
  --notch-box: calc(var(--notch) + var(--notch-r));
  -webkit-mask:
    linear-gradient(#000 0 0) 0 0 / 100% 100% no-repeat,
    var(--notch-shape) calc(100% + var(--notch-r)) calc(var(--notch-r) * -1) / var(--notch-box) var(--notch-box) no-repeat;
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) 0 0 / 100% 100% no-repeat,
    var(--notch-shape) calc(100% + var(--notch-r)) calc(var(--notch-r) * -1) / var(--notch-box) var(--notch-box) no-repeat;
  mask-composite: exclude;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.38));
  transform-origin: center center;
  will-change: transform;
}
.fmd-card--mint { background: var(--mint); }
.fmd-card--dark {
  background: var(--forest);
  color: var(--white);
}
.fmd-card-shell:has(.fmd-card--mint) { --pix: var(--mint); }
.fmd-card-shell:has(.fmd-card--dark) { --pix: var(--forest); }
.fmd-card--dark .fmd-card-chip {
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.85);
}
.fmd-card-step {
  padding-right: calc(var(--notch) * 0.9);
  font-family: var(--fh);
  font-size: clamp(4rem, 8vw, 6.75rem);
  font-weight: 500;
  color: rgba(12,30,24,.28);
  line-height: .95;
  margin-bottom: auto;
}
.fmd-card--dark .fmd-card-step { color: rgba(255,255,255,.22); }
.fmd-card-body { margin-top: 2.4rem; }
.fmd-card-h {
  font-family: var(--fh);
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  font-weight: 600;
  color: var(--dark);
  line-height: 1.05;
  letter-spacing: -.03em;
  margin-bottom: 1.6rem;
}
.fmd-card--dark .fmd-card-h { color: var(--white); }
.fmd-card-list {
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.fmd-card-list p {
  font-size: 1.4rem;
  font-weight: 500;
  color: rgba(12,30,24,.72);
  line-height: 1.5;
  margin: 0;
}
.fmd-card--dark .fmd-card-list p { color: rgba(255,255,255,.75); }

/* Marquee shared */
.marquee-outer { overflow: hidden; }
/* Soft edges so logos dissolve instead of being sliced at the container wall.
   A mask does it against whatever the section background happens to be. */
.marquee-outer.is-faded {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.marquee-track {
  display: flex;
  gap: 3.2rem;
  animation: marquee-left 28s linear infinite;
  width: max-content;
  align-items: center;
}
.marquee-track img { height: 3.6rem; width: auto; filter: brightness(0) invert(1) opacity(.45); flex-shrink: 0; }
.marquee-track-light img { filter: grayscale(1) opacity(.45); }
.marquee-track-light { animation-duration: 22s; }
@keyframes marquee-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ===== PROCESS ===== */
.process { position: relative; background: var(--dark); }
/* Each line is its own clipping window so the text can rise out of it. */
.js-lines .ln { display: block; overflow: hidden; padding-bottom: .1em; }
.js-lines .ln > span { display: block; }
/* ── Full-viewport stacking cards ──
   Every card sticks to the top of the viewport; the next one slides up over
   it while the outgoing one scales back, so the section reads as a deck
   being dealt rather than three panels scrolling past. */
.pstack { position: relative; }
.pstack-card {
  position: sticky;
  top: 0;
  height: 100svh;
}
/* The transform lives on the inner box, never on the sticky element itself. */
.pstack-card__inner {
  height: 100%;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  overflow: hidden;
  border-radius: 1.4rem 1.4rem 0 0;
}
.pstack-card:nth-child(1) .pstack-card__inner { background: #0c2820; }
.pstack-card:nth-child(2) .pstack-card__inner { background: var(--forest); }
.pstack-card:nth-child(3) .pstack-card__inner { background: #c9f56d; }
.pstack-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
  padding: 8rem calc(var(--px) * 2);
  color: var(--white);
}
.pstack-card:nth-child(3) .pstack-text { color: var(--dark); }
.pstack-num {
  font-family: var(--fh);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .18em;
  opacity: .5;
}
.pstack-h {
  font-family: var(--fh);
  font-size: clamp(3.2rem, 3.8vw, 5rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.03em;
  max-width: 20ch;
  text-wrap: balance;
}
.pstack-stat {
  font-family: var(--fh);
  font-size: clamp(4.4rem, 6vw, 7.6rem);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.04em;
  color: var(--amber);
}
.pstack-card:nth-child(3) .pstack-stat { color: var(--forest); }
.pstack-desc {
  font-size: 1.9rem;
  line-height: 1.6;
  max-width: 42ch;
  color: var(--white);
}
/* The third card is lime, so white copy would be unreadable on it. */
.pstack-card:nth-child(3) .pstack-desc { color: rgba(12,30,24,.78); }
.pstack-media { position: relative; overflow: hidden; }
.pstack-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 900px) {
  .pstack-card { height: auto; position: relative; }
  .pstack-card__inner { grid-template-columns: 1fr; }
  .pstack-text { padding: 6.4rem var(--px); }
  .pstack-media { height: 44svh; }
}

/* ===== AVANTAGE ===== */
.avantage { padding: 9.6rem 0; background: var(--white); }
.avantage-header { text-align: center; margin-bottom: 4rem; }
.sec-title {
  font-family: var(--fh);
  font-size: clamp(3rem,4vw,5rem);
  font-weight: 700;
  color: var(--dark);
  line-height: 1.08;
  letter-spacing: -.025em;
  margin-top: 1.6rem;
}
.toggle-pill {
  display: inline-flex;
  align-items: center;
  background: rgba(12,30,24,.06);
  border-radius: 1.4rem;
  padding: .7rem;
  margin-bottom: 5.6rem;
}
.toggle-pill { position: relative; }
.toggle-thumb {
  position: absolute;
  top: .7rem;
  left: 0;
  height: calc(100% - 1.4rem);
  width: 0;
  border-radius: 1.4rem;
  background: var(--dark);
  box-shadow: 0 4px 18px rgba(12,30,24,.22);
  /* A touch of overshoot so it lands with a little weight. */
  transition: transform .55s cubic-bezier(.62,-0.16,.27,1.22),
              width .55s cubic-bezier(.62,-0.16,.27,1.22);
  pointer-events: none;
}
.tgl {
  position: relative;
  z-index: 1;
  font-family: var(--fh);
  font-size: 1.75rem;
  font-weight: 600;
  padding: 1.3rem 3.2rem;
  border-radius: 1.4rem;
  color: rgba(12,30,24,.5);
  background: none;
  transition: color .35s var(--ease1);
  cursor: pointer;
}
.tgl.on { color: var(--white); }
.cards-panel { display: none; }
/* Depth tiles: the three cards share one grid cell and orbit through it, so
   the row reads as a rotating deck rather than a static three-up. */
.cards-panel.active {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 2.4rem 0 4.8rem;
  overflow: clip;
}
.depth-tiles__list { display: grid; place-items: center; }
.depth-tiles__item {
  grid-area: 1 / 1;
  display: flex;
  will-change: transform, opacity, filter;
}
.bc {
  width: clamp(30rem, 33vw, 44rem);
  min-height: 40rem;
  display: flex;
  flex-direction: column;
  border-radius: 1.4rem;
  padding: 3.6rem;
  overflow: hidden;
  transform: scale(1) rotate(0.001deg);
  transition: transform .4s cubic-bezier(.35,1.5,.6,1);
}
.depth-tiles__item:hover .bc { transform: scale(.96) rotate(0.001deg); }
.bc-1 { background: var(--mint); }
.bc-2 { background: var(--dark); }
.bc-3 { background: var(--lime); }
.bc-icon {
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2.6rem;
}
.bc-icon { width: 5.6rem; height: 5.6rem; }
.bc-icon svg { width: 2.9rem; height: 2.9rem; }
/* steps() keeps the motion on whole pixels, so it reads as a sprite rather
   than a tween — smooth easing fights the crisp-edged artwork. */
@keyframes pixel-idle {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
.bc-icon svg, .sc-icon svg {
  animation: pixel-idle 4.2s steps(3, end) infinite;
}
.sc:nth-child(3) .sc-icon svg { animation-delay: 1.05s; }
.sc:nth-child(4) .sc-icon svg { animation-delay: 2.1s; }
.sc:nth-child(5) .sc-icon svg { animation-delay: 3.15s; }
.bc-2 .bc-icon svg { animation-delay: 1.4s; }
.bc-3 .bc-icon svg { animation-delay: 2.8s; }
@media (prefers-reduced-motion: reduce) {
  .bc-icon svg, .sc-icon svg { animation: none; }
}
.bc-1 .bc-icon { background: var(--forest); color: var(--lime); }
.bc-2 .bc-icon { background: var(--lime);   color: var(--dark); }
.bc-3 .bc-icon { background: var(--dark);   color: var(--amber); }
.bc-ttl {
  font-family: var(--fh);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1.8rem;
}
.bc-2 .bc-ttl { color: var(--white); }
.bc ul { display: flex; flex-direction: column; gap: 1.4rem; }
.bc li { font-size: 1.7rem; line-height: 1.5; display: flex; align-items: flex-start; gap: 1.1rem; }
.bc-2 li { color: rgba(255,255,255,.72); }
.bc li::before { content: '✓'; font-size: 1.3rem; font-weight: 700; flex-shrink: 0; margin-top: .3rem; }
.bc-1 li::before { color: var(--green); }
.bc-2 li::before { color: var(--lime); }
.bc-3 li::before { color: var(--dark); }

/* ===== CALCULATOR ===== */
.calc { background: var(--dark); padding: 9.6rem 0; position: relative; overflow: hidden; }
.calc::before {
  content: '';
  position: absolute;
  top: -16rem;
  right: -16rem;
  width: 64rem;
  height: 64rem;
  background: radial-gradient(circle, rgba(0,133,88,.18) 0%, transparent 70%);
  pointer-events: none;
}
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7.2rem; align-items: start; position: relative; }
.calc-hl {
  font-family: var(--fh);
  font-size: clamp(3rem,4vw,5rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.08;
  letter-spacing: -.025em;
  margin-bottom: 4rem;
}
.calc-hl em { font-style: normal; color: var(--amber); }
.slider-block { margin-bottom: 3.2rem; }
.slider-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.slider-lbl { font-size: 1.4rem; color: rgba(255,255,255,.65); }
.slider-val {
  font-family: var(--fh);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--lime);
  background: rgba(230,255,85,.1);
  padding: .3rem 1rem;
  border-radius: 999rem;
  min-width: 6rem;
  text-align: center;
}
input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,.12);
  outline: none;
  cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
  cursor: pointer;
  transition: transform .15s;
}
input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.2); }
input[type=range]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--lime);
  border: none;
  cursor: pointer;
}
.calc-panel {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 1.4rem;
  padding: 4rem;
}
.co2-num {
  font-family: var(--fh);
  font-size: 7.2rem;
  font-weight: 700;
  color: var(--lime);
  line-height: .95;
  transition: all .3s var(--ease1);
}
.co2-unit { font-size: 1.5rem; color: rgba(255,255,255,.45); margin-top: .6rem; }
.co2-label { font-size: 1.4rem; font-weight: 600; color: rgba(255,255,255,.65); margin-top: .8rem; margin-bottom: 3.2rem; }
.equiv-sep { border: none; border-top: 1px solid rgba(255,255,255,.07); margin-bottom: 2.4rem; }
.equiv-title { font-size: 1.2rem; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 2rem; }
.equiv-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; }
.equiv-item {}
.equiv-num { font-family: var(--fh); font-size: 2.6rem; font-weight: 700; color: var(--white); }
.equiv-desc { font-size: 1.3rem; color: rgba(255,255,255,.6); margin-top: .3rem; line-height: 1.4; }

/* ===== STATS ===== */
.stats { padding: 9.6rem 0; background: var(--white); }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(20rem, auto);
  gap: 1.8rem;
}
/* Bento: headline stat and photo each hold a 2×2 block; the rest fill in around
   them. Cell 2 is the photo, so the stats are children 1, 3, 4 and 5. */
.sc:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.sc-photo        { grid-column: span 2; grid-row: span 2; }
.sc:nth-child(3) { grid-column: span 2; }
.sc:nth-child(4),
.sc:nth-child(5) { grid-column: span 1; }
.sc-photo {
  position: relative;
  margin: 0;
  border-radius: 1.4rem;
  overflow: hidden;
  background: var(--forest);
}
.sc-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
/* UI fragments lifted straight out of the product, floating on brand ground —
   a whole screenshot shrunk into this cell just read as a thumbnail. */
.sc-ui { background: var(--forest); }
.sc-ui .sc-ui-card {
  position: absolute;
  width: 84%;
  height: auto;
  object-fit: contain;
  border-radius: 1.4rem;
  box-shadow: 0 18px 40px rgba(0,0,0,.34);
  z-index: 1;
}
.sc-ui-card--a { top: 15%; left: 8%; rotate: -3.5deg; }
.sc-ui-card--b { top: 44%; left: 8%; rotate: 2.5deg; }
.sc-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12,30,24,.72) 0%, rgba(12,30,24,.12) 42%, transparent 65%);
}
.sc-photo figcaption {
  position: absolute;
  left: 3.2rem;
  right: 3.2rem;
  bottom: 3.2rem;
  z-index: 1;
  font-family: var(--fh);
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--white);
}
.sc {
  background: var(--white);
  border-radius: 1.4rem;
  padding: 3.2rem;
  border: 1px solid rgba(12,30,24,.06);
  display: flex;
  flex-direction: column;
  transition: translate .3s var(--ease1), box-shadow .3s;
}
.sc:hover { translate: 0 -5px; box-shadow: 0 18px 44px rgba(12,30,24,.09); }
/* Each tile gets its own ground so the block reads as a composition. */
.sc:nth-child(1) { background: var(--dark); border-color: transparent; padding: 4.4rem; }
.sc:nth-child(3) { background: var(--lime); border-color: transparent; }
.sc:nth-child(5) { background: var(--amber); border-color: transparent; }
.sc:nth-child(1) .sc-lbl { color: rgba(255,255,255,.5); }
.sc:nth-child(1) .sc-num { color: var(--amber); font-size: clamp(7rem, 9vw, 11rem); }
.sc:nth-child(1) .sc-desc { color: rgba(255,255,255,.62); font-size: 1.6rem; max-width: 34rem; }
.sc:nth-child(3) .sc-num { font-size: 5.4rem; }
.sc:nth-child(3) .sc-desc { max-width: 42rem; }
/* Icon at the top, the label/number/copy group anchored to the bottom edge. */
.sc-lbl { margin-top: auto; }
.sc-icon { width: 4.8rem; height: 4.8rem; border-radius: 1.4rem; display: flex; align-items: center; justify-content: center; margin-bottom: 1.8rem; }
.sc-icon svg { width: 2.4rem; height: 2.4rem; }
.sc:nth-child(1) .sc-icon { background: var(--amber); color: var(--dark); width: 5.6rem; height: 5.6rem; }
.sc:nth-child(1) .sc-icon svg { width: 2.8rem; height: 2.8rem; }
.sc:nth-child(3) .sc-icon { background: var(--dark);   color: var(--lime); }
.sc:nth-child(4) .sc-icon { background: rgba(12,30,24,.07); color: var(--dark); }
.sc:nth-child(5) .sc-icon { background: var(--dark);   color: var(--amber); }
.sc-lbl { font-size: 1.15rem; font-weight: 700; color: rgba(12,30,24,.45); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .7rem; }
.sc-num { font-family: var(--fh); font-size: 3.6rem; font-weight: 700; color: var(--dark); line-height: 1; margin-bottom: .8rem; white-space: nowrap; }
.sc-desc { font-size: 1.3rem; color: rgba(12,30,24,.58); line-height: 1.55; }

/* ===== BIKES MARQUEE ===== */
.bikes { padding: 6.4rem 0; background: var(--white); overflow: hidden; }
.bikes-title {
  text-align: center;
  font-family: var(--fh);
  font-size: 1.5rem;
  font-weight: 600;
  color: rgba(12,30,24,.42);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 3.6rem;
}
.marquee-track-light img { filter: grayscale(1) opacity(.45); height: 3rem; }
.logos-marquee .marquee-track-light img,
.logos-marquee .marquee-track img {
  height: 4.8rem;
  max-width: 20rem;
  filter: none;
  opacity: 1;
}

/* ===== CTA BAND ===== */
/* A full-bleed dark strip read as a hard seam between the two light sections
   either side of it. Same block, but inset as a panel with room to breathe. */
.cta-band { background: var(--white); padding: 3.2rem 0 9.6rem; }
.cta-band-inner {
  position: relative;
  overflow: hidden;
  background: var(--dark);
  border-radius: 1.4rem;
  padding: clamp(4.8rem, 5.5vw, 7.6rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4rem;
  flex-wrap: wrap;
}
/* The mark bleeds off the panel as a watermark, for depth behind the copy. */
.cta-band-mark {
  position: absolute;
  right: -6rem;
  bottom: -8rem;
  width: 34rem;
  opacity: .07;
  rotate: -12deg;
  pointer-events: none;
}
.cta-band-mark .iso { width: 100%; height: auto; display: block; }
.cta-band-mark .iso-a,
.cta-band-mark .iso-b { fill: var(--amber); }
.cta-band-ttl {
  position: relative;
  font-family: var(--fh);
  font-size: clamp(2.8rem,3.8vw,4.8rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.1;
  max-width: 66rem;
  letter-spacing: -.025em;
}
.cta-band-ttl em { font-style: normal; color: var(--amber); }
.cta-band-copy { position: relative; max-width: 66rem; }
.cta-band-sub { margin-top: 1.8rem; font-size: 1.6rem; line-height: 1.6; color: rgba(255,255,255,.62); max-width: 52rem; }
.cta-band-btns { position: relative; display: flex; align-items: center; gap: 2.2rem; flex-shrink: 0; }
.btn-outline {
  font-family: var(--fh);
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--white);
  padding: 1.25rem 2.4rem;
  border-radius: 1.4rem;
  border: 1.5px solid rgba(255,255,255,.25);
  transition: background .25s var(--ease1), border-color .25s var(--ease1);
}
.btn-outline:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.5); }

/* ===== TESTIMONIALS ===== */
.testi { padding: 9.6rem 0; background: var(--white); }
.testi-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 5.6rem; gap: 2rem; }
.testi-title {
  font-family: var(--fh);
  text-wrap: balance;
  font-size: clamp(3rem,4vw,5rem);
  font-weight: 700;
  color: var(--dark);
  line-height: 1.08;
  letter-spacing: -.025em;
  max-width: 70rem;
}
.testi-title em { font-style: normal; color: var(--amber); }
.testi-nav { display: flex; align-items: center; gap: 1.4rem; flex-shrink: 0; }
.arr-btn {
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  border: 1.5px solid rgba(12,30,24,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .22s;
  background: transparent;
}
.arr-btn:hover { background: var(--dark); border-color: var(--dark); color: var(--white); }
.arr-btn svg { width: 1.4rem; height: 1.4rem; }
  background: var(--white);
  border-radius: 1.4rem;
  padding: 5.6rem;
  max-width: 88rem;
  margin: 0 auto;
  display: none;
}
  font-family: var(--fh);
  font-size: 8rem;
  color: var(--lime);
  line-height: .6;
  margin-bottom: 2.4rem;
  display: block;
}
  font-family: var(--fh);
  font-size: clamp(1.9rem,2.2vw,2.6rem);
  font-weight: 500;
  color: var(--dark);
  line-height: 1.45;
  margin-bottom: 3.6rem;
  letter-spacing: -.01em;
}
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 50%;
  background: var(--mint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fh);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--green);
  flex-shrink: 0;
}
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  background: rgba(12,30,24,.18);
  cursor: pointer;
  transition: all .25s;
  border: none;
}
/* ── Dropping card stack (Osmo pattern) ──
   The collection's padding declares how far the deck fans; the script reads
   it and derives the per-card offset, so the look is tuned entirely in CSS. */
.tstack { position: relative; }
.tstack__collection { padding: 0 5.6rem 5.6rem 0; }
.tstack__list { position: relative; }
.tstack__item {
  position: relative;
  width: 100%;
}
.tstack__item + .tstack__item { position: absolute; inset: 0; }
.tcard {
  height: 100%;
  min-height: 34rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3.2rem;
  padding: 4.8rem;
  border-radius: 1.4rem;
  background: var(--white);
  color: var(--dark);
  border: 1px solid rgba(12,30,24,.07);
  box-shadow: 0 26px 70px rgba(12,30,24,.10);
  cursor: grab;
  user-select: none;
}
.tcard:active { cursor: grabbing; }
.tcard.is--forest { background: var(--forest); color: var(--white); border-color: transparent; }
.tcard.is--lime   { background: var(--lime);   border-color: transparent; }
.tcard.is--mint   { background: var(--mint);   border-color: transparent; }
.tcard.is--dark   { background: var(--dark);   color: var(--white); border-color: transparent; }
/* Brand lockup — a typographic stand-in, not a real restaurant's mark. */
.tcard__brand { display: flex; align-items: center; gap: 1rem; }
.tcard__brand-mark { display: block; flex-shrink: 0; }
.tcard__brand-mark img {
  height: 6.4rem;
  width: auto;
  max-width: 28rem;
  object-fit: contain;
  display: block;
  /* multiply drops the white plate against any light ground. */
  mix-blend-mode: multiply;
}
/* On dark grounds: invert first (plate → black, mark → white), then screen,
   which treats black as neutral and leaves only the mark. */
.tcard.is--forest .tcard__brand-mark img,
.tcard.is--dark .tcard__brand-mark img { filter: invert(1); mix-blend-mode: screen; }
.tcard__quote {
  font-family: var(--fh);
  font-size: clamp(2rem, 2.4vw, 3rem);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -.02em;
  text-wrap: balance;
  margin: 0;
}
.tcard__quote::before { content: '\201C'; }
.tcard__quote::after  { content: '\201D'; }
.tcard__author { display: flex; align-items: center; gap: 1.4rem; }
.tcard .avatar { background: rgba(12,30,24,.1); color: inherit; }
.tcard.is--forest .avatar,
.tcard.is--dark .avatar { background: rgba(255,255,255,.14); }
/* Lockup at the top, quote in the middle, attribution at the foot. */
.tcard__quote { margin-block: auto; }
.tcard__name, .tcard__co { display: block; }
.tcard__name { font-family: var(--fh); font-size: 1.5rem; font-weight: 600; }
.tcard__co { font-size: 1.35rem; opacity: .6; margin-top: .2rem; }
@media (max-width: 760px) {
  .tstack__collection { padding: 0 2.8rem 2.8rem 0; }
  .tcard { padding: 3.2rem; min-height: 38rem; }
}

/* ===== FAQ ===== */
.faq { padding: 9.6rem 0; background: var(--white); }
.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(4rem, 6vw, 8rem);
  align-items: start;
}
/* The heading column rides along while the list is being read. */
.faq-hd { position: sticky; top: 13rem; }
.faq-title {
  font-family: var(--fh);
  font-size: clamp(3rem,4vw,5rem);
  font-weight: 700;
  color: var(--dark);
  letter-spacing: -.025em;
  line-height: 1.05;
  text-wrap: balance;
}
.faq-lead {
  margin-top: 2rem;
  font-size: 1.55rem;
  line-height: 1.7;
  color: rgba(12,30,24,.58);
  max-width: 34rem;
}
.faq-ask {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin-top: 2.8rem;
  font-family: var(--fh);
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--dark);
  border-bottom: 1.5px solid rgba(12,30,24,.25);
  padding-bottom: .3rem;
  transition: color .22s var(--ease1), border-color .22s var(--ease1);
}
.faq-ask svg { width: 1.5rem; height: 1.5rem; }
.faq-ask:hover { color: var(--green); border-color: var(--green); }
.faq-list { display: flex; flex-direction: column; gap: 1rem; }
.faq-item {
  background: var(--white);
  border: 1px solid rgba(12,30,24,.1);
  border-radius: 1.4rem;
  padding: 0 2.8rem;
  transition: background .3s var(--ease1), border-color .3s var(--ease1), box-shadow .3s var(--ease1);
}
.faq-item:hover { border-color: rgba(12,30,24,.24); }
.faq-item.open {
  background: rgba(230,255,85,.16);
  border-color: transparent;
  box-shadow: 0 14px 38px rgba(12,30,24,.07);
}
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 2.4rem 0;
  cursor: pointer;
  font-family: var(--fh);
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--dark);
  -webkit-user-select: none;
  user-select: none;
}
.faq-icon {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  border: 1.5px solid rgba(12,30,24,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.8rem;
  font-weight: 300;
  line-height: 1;
  transition: all .28s var(--ease1);
  color: var(--dark);
}
.faq-item.open .faq-icon { background: var(--dark); color: var(--amber); border-color: var(--dark); transform: rotate(45deg); }
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s var(--ease1);
}
.faq-a-inner { overflow: hidden; min-height: 0; }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a p { font-size: 1.5rem; color: rgba(12,30,24,.62); line-height: 1.75; padding-bottom: 2.6rem; }
@media (max-width: 900px) {
  .faq-grid { grid-template-columns: 1fr; gap: 4rem; }
  .faq-hd { position: static; }
  .faq-lead { max-width: none; }
}

/* ===== FOOTER ===== */
/* Curtain: the page sits on its own layer above a footer pinned to the
   bottom of the viewport, and the spacer at the end scrolls the page off
   to uncover it. Only enabled when the footer actually fits on screen. */
#page-scroll { position: relative; z-index: 1; background: var(--white); }
.foot-space { display: none; }
body.has-curtain .foot-space { display: block; }
body.has-curtain .footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 0; }
.footer {
  background: var(--dark);
  position: relative;
  overflow: hidden;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
.footer .wrap {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8rem 0 4rem;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 5.6rem;
  padding-bottom: 5.6rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 3.2rem;
}
.footer-brand-col { max-width: 34rem; }
.footer-tagline {
  font-size: 1.55rem;
  color: rgba(255,255,255,.48);
  line-height: 1.7;
  margin-bottom: 2.4rem;
}
.footer-social { display: flex; gap: 1rem; }
.footer-social a {
  width: 4rem;
  height: 4rem;
  border-radius: 1.4rem;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .22s var(--ease1);
}
.footer-social a svg {
  width: 1.6rem;
  height: 1.6rem;
  stroke: rgba(255,255,255,.55);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .22s;
}
.footer-social a:hover {
  background: rgba(230,255,85,.1);
  border-color: rgba(230,255,85,.28);
  transform: translateY(-2px);
}
.footer-social a:hover svg { stroke: var(--lime); }
.footer-wordmark { display: block; padding: 4.8rem 0 3.2rem; }
.footer-wordmark .lockup {
  display: block;
  width: min(78rem, 92%);
  height: auto;
  margin: 0 auto;
  transition: scale .5s var(--ease1);
}
/* The wordmark takes the page's lime; the accent keeps the brand amber. */
.footer-wordmark .lg-word { fill: var(--white); }
.footer-wordmark .lg-mark { fill: var(--amber); }
.footer-wordmark:hover .lockup { scale: 1.02; }
.footer-col-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--amber);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 2rem;
}
.footer-col ul { display: flex; flex-direction: column; gap: 1.2rem; }
.footer-col a {
  position: relative;
  display: inline-block;
  padding-bottom: .25rem;
  font-size: 1.5rem;
  color: rgba(255,255,255,.66);
  transition: color .34s var(--ease1);
}
.footer-col a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .45s var(--ease1);
}
.footer-col a:hover { color: var(--white); }
.footer-col a:hover::after { transform: scaleX(1); transform-origin: left center; }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.4rem;
  flex-wrap: wrap;
}
.footer-copy {
  font-size: 1.3rem;
  color: rgba(255,255,255,.32);
}
.footer-copy strong { color: rgba(255,255,255,.55); font-weight: 600; }
.footer-status {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  font-size: 1.25rem;
  color: rgba(255,255,255,.4);
  padding: .7rem 1.4rem;
  border-radius: 999rem;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.footer-status-dot {
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 3px rgba(230,255,85,.18);
  flex-shrink: 0;
}
.footer-legal { display: flex; gap: 2.4rem; flex-wrap: wrap; }
.footer-legal a {
  position: relative;
  display: inline-block;
  padding-bottom: .2rem;
  font-size: 1.25rem;
  color: rgba(255,255,255,.32);
  transition: color .34s var(--ease1);
}
.footer-legal a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(255,255,255,.4);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .45s var(--ease1);
}
.footer-legal a:hover { color: rgba(255,255,255,.8); }
.footer-legal a:hover::after { transform: scaleX(1); transform-origin: left center; }


/* ===== SHARED ===== */
section[id] { scroll-margin-top: 10rem; }
.eyebrow {
  display: inline-block;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 1.4rem;
}
.eyebrow--lime { color: var(--lime); }
.avatar {
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--forest);
  color: var(--lime);
  font-family: var(--fh);
  font-size: 1.45rem;
  font-weight: 700;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ===== IMPACTO ===== */
/* Reuses the stats bento; this only adds the heading and the secondary row. */
.impact { padding: 9.6rem 0 4.8rem; }
.impact-hd {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2.4rem 4rem;
  margin-bottom: 4.8rem;
}
.impact-hd .sec-title { margin-top: 0; }
.impact-lead { font-size: 1.6rem; line-height: 1.6; color: rgba(12,30,24,.58); max-width: 38rem; }
.impact-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; margin-top: 1.8rem; }
.impact-mini {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  padding: 2.8rem 3.2rem;
  border-radius: 1.4rem;
  background: var(--offwhite);
  border: 1px solid rgba(12,30,24,.06);
}
.impact-mini--mint { background: var(--mint); border-color: transparent; }
.impact-mini__lbl { font-size: 1.15rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: rgba(12,30,24,.45); }
.impact-mini__num { font-family: var(--fh); font-size: 3.2rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.impact-mini__desc { font-size: 1.4rem; line-height: 1.5; color: rgba(12,30,24,.62); }

/* ===== TESTIMONIO SUELTO ===== */
.proof { padding: 4.8rem 0 9.6rem; background: var(--white); }
.proof-card {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 2.8rem 5.6rem;
  padding: clamp(3.2rem, 4.5vw, 5.6rem);
  border-radius: 1.4rem;
  background: var(--mint);
  color: var(--dark);
}
.proof-stat {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  padding-right: 5.6rem;
  border-right: 1px solid rgba(0,82,54,.18);
}
.proof-num { font-family: var(--fh); font-size: clamp(6rem, 8vw, 9.6rem); font-weight: 700; line-height: .9; letter-spacing: -.04em; color: var(--forest); }
.proof-num-lbl { font-size: 1.5rem; font-weight: 600; color: var(--forest); }
.proof-quote {
  margin: 0;
  font-family: var(--fh);
  font-size: clamp(2rem, 2.3vw, 2.8rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.proof-quote::before { content: '\201C'; }
.proof-quote::after  { content: '\201D'; }
.proof-author { display: flex; align-items: center; gap: 1.2rem; }
.proof-name { display: block; font-family: var(--fh); font-size: 1.5rem; font-weight: 600; }
.proof-role { display: block; font-size: 1.35rem; opacity: .62; margin-top: .2rem; }

/* ===== CÓMO FUNCIONA ===== */
/* The three full-screen panels, compressed into one strip plus the local's row. */
.how {
  margin: 0 1.6rem;
  padding: clamp(7.2rem, 9vw, 11.2rem) 0;
  border-radius: 1.4rem;
  background: var(--dark);
  color: var(--white);
}
.how-hd { text-align: center; margin-bottom: 5.6rem; }
.how-title { font-family: var(--fh); font-size: clamp(4rem, 6vw, 7.6rem); font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.how-title em { font-style: normal; color: var(--amber); }
.how-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }
.how-step {
  display: flex;
  flex-direction: column;
  padding: 1.2rem 1.2rem 3.2rem;
  border-radius: 1.4rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
.how-step__media { aspect-ratio: 4 / 3; border-radius: 1rem; overflow: hidden; margin-bottom: 2.8rem; }
.how-step__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease1); }
.how-step:hover .how-step__media img { transform: scale(1.04); }
.how-step__num, .how-step__h, .how-step__p { padding: 0 2rem; }
.how-step__num { font-family: var(--fh); font-size: 1.3rem; font-weight: 700; letter-spacing: .18em; color: var(--amber); }
.how-step__h { font-family: var(--fh); font-size: clamp(2.8rem, 3vw, 3.6rem); font-weight: 700; letter-spacing: -.03em; margin: .8rem 0 1rem; }
.how-step__p { font-size: 1.6rem; line-height: 1.55; color: rgba(255,255,255,.66); }
.how-local {
  display: grid;
  grid-template-columns: minmax(20rem, 1fr) 2fr auto;
  align-items: center;
  gap: 3.2rem;
  margin-top: 1.8rem;
  padding: 3.2rem 3.6rem;
  border-radius: 1.4rem;
  background: var(--forest);
}
.how-local .eyebrow { margin-bottom: .8rem; }
.how-local__title { font-family: var(--fh); font-size: 2.4rem; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
.how-local__list { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.how-local__list li { display: flex; align-items: center; gap: 1.2rem; font-size: 1.5rem; font-weight: 500; line-height: 1.35; color: rgba(255,255,255,.88); }
.how-local__icon { width: 4rem; height: 4rem; border-radius: 1rem; display: grid; place-items: center; flex-shrink: 0; background: var(--lime); color: var(--dark); }
.how-local__icon svg { width: 2rem; height: 2rem; }

/* ===== MODALIDADES ===== */
.mods { padding: 9.6rem 0; background: var(--white); }
.mods-hd { text-align: center; margin-bottom: 4.8rem; }
.mods-hd .sec-title { margin-top: 0; }
.mods-lead { margin: 1.8rem auto 0; max-width: 48rem; font-size: 1.7rem; line-height: 1.6; color: rgba(12,30,24,.6); }
.mods-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }
.mod-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2.4rem;
  border-radius: 1.4rem;
  background: var(--dark);
  color: var(--white);
}
.mod-card__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease1); }
/* Scrims top and bottom so both text blocks read over any photo. */
.mod-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(12,30,24,.82) 0%, rgba(12,30,24,.12) 40%, rgba(12,30,24,.12) 55%, rgba(12,30,24,.88) 100%);
}
a.mod-card:hover .mod-card__img { transform: scale(1.05); }
.mod-card__name { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem; font-family: var(--fh); font-size: 2.6rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.mod-card__desc { margin-top: .8rem; max-width: 26ch; font-size: 1.5rem; line-height: 1.45; color: rgba(255,255,255,.86); }
.mod-card__bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.6rem; }
.mod-card__for { font-size: 1.35rem; line-height: 1.45; color: rgba(255,255,255,.72); }
.mod-card__arrow {
  width: 4.4rem;
  height: 4.4rem;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 1.2rem;
  background: var(--amber);
  color: var(--dark);
  transition: transform .8s cubic-bezier(.135,.9,.15,1), background .25s var(--ease1);
}
.mod-card__arrow svg { width: 1.8rem; height: 1.8rem; }
a.mod-card:hover .mod-card__arrow { transform: rotate(45deg); background: var(--lime); }
.mod-card.is-soon { cursor: default; }
.mod-card.is-soon .mod-card__img { filter: grayscale(.85); }

/* ===== POR QUÉ QWIK ===== */
/* Split: photo on one side, light panel with the three reasons on the other. */
.why { padding: 0 0 12rem; background: var(--white); }
.why-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
  min-height: 56rem;
}
.why-media { margin: 0; position: relative; overflow: hidden; border-radius: 1.4rem; background: var(--forest); }
.why-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.why-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(3.6rem, 5vw, 6.4rem);
  border-radius: 1.4rem;
  background: var(--mint);
  color: var(--dark);
}
.why-title { font-family: var(--fh); font-size: clamp(3.6rem, 4.6vw, 5.6rem); font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.why-title em { font-style: normal; color: var(--forest); }
.why-lead { margin-top: 1.8rem; max-width: 44rem; font-size: 1.7rem; line-height: 1.6; color: rgba(12,30,24,.66); }
.why-points { margin: 3.6rem 0 4rem; display: flex; flex-direction: column; gap: 2.4rem; width: 100%; }
.why-points li { display: flex; align-items: flex-start; gap: 1.6rem; font-size: 1.45rem; line-height: 1.5; color: rgba(12,30,24,.62); }
.why-points strong { display: block; margin-bottom: .2rem; font-family: var(--fh); font-size: 1.9rem; font-weight: 600; letter-spacing: -.01em; color: var(--dark); }
.why-icon {
  width: 4.8rem;
  height: 4.8rem;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 1.2rem;
  background: var(--forest);
  color: var(--lime);
}
.why-icon svg { width: 2.4rem; height: 2.4rem; animation: pixel-idle 4.2s steps(3, end) infinite; }
.why-points li:nth-child(2) .why-icon svg { animation-delay: 1.4s; }
.why-points li:nth-child(3) .why-icon svg { animation-delay: 2.8s; }
@media (prefers-reduced-motion: reduce) { .why-icon svg { animation: none; } }

@media (max-width: 1080px) {
  .how-local { grid-template-columns: 1fr; }
  .mods-grid { grid-template-columns: repeat(2, 1fr); }
  .mod-card { aspect-ratio: 4 / 5; }
}
@media (max-width: 760px) {
  .impact-row { grid-template-columns: 1fr; }
  .proof-card { grid-template-columns: 1fr; }
  .proof-stat { grid-row: auto; padding: 0 0 2.4rem; border-right: 0; border-bottom: 1px solid rgba(0,82,54,.18); }
  .how { margin: 0 .8rem; }
  .why-inner { grid-template-columns: 1fr; min-height: 0; }
  .why-media { aspect-ratio: 4 / 3.4; }
  .how-steps { grid-template-columns: 1fr; }
  .how-local__list { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .mods-grid { grid-template-columns: 1fr; }
  .mod-card { aspect-ratio: 1 / 1.05; }
}

/* ===== REVEAL ===== */
.rv { will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1 !important; transform: none !important; }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1080px) {
  html { font-size: 58%; }
  .hero .wrap { grid-template-columns: 1fr; gap: 4.8rem; }
  .hero-portrait-wrap { width: min(38rem, 76%); }
  .fmd-intro { margin-bottom: 4rem; padding: 0 0.8rem; }
  .fmd-title { max-width: 100%; }
  .fmd-sub { max-width: 100%; font-size: 1.45rem; }
  .fmd-stack-item { top: 8rem; max-width: min(25em, 100%); }
  @media (min-width: 768px) { .fmd-stack-item { max-width: min(20em, 100%); } }
  .fmd-cards-stack-section { padding-bottom: 12dvh; }
  .process-body { grid-template-columns: 1fr; }
  .process-right { display: none; }
  .calc-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2,1fr); grid-auto-rows: minmax(18rem,auto); }
  .sc:nth-child(1) { grid-column: span 2; grid-row: span 1; padding: 3.2rem; }
  .sc-photo { grid-column: span 2; grid-row: span 1; min-height: 34rem; }
  .sc-ui .sc-ui-card { width: 80%; left: 10%; }
  .sc-ui-card--a { top: 9%; }
  .sc-ui-card--b { top: 42%; }
  .sc:nth-child(3) { grid-column: span 2; }
  .sc:nth-child(4), .sc:nth-child(5) { grid-column: span 1; }
}
@media (max-width: 1080px) {
  .nav-links { display: none; }
  .nav-lang { display: none; }
}
@media (max-width: 760px) {
  html { font-size: 52%; }
  .bc { width: min(88vw, 40rem); min-height: 36rem; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .footer-brand-col { grid-column: 1 / -1; max-width: 100%; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .testi-header { flex-direction: column; align-items: flex-start; }
  .cta-band-inner { flex-direction: column; align-items: flex-start; }
  .equiv-grid { grid-template-columns: 1fr; gap: 1.6rem; }
}
@media (max-width: 500px) {
  html { font-size: 46%; }
  .nav-login { display: none; }
  .stats-grid { grid-template-columns: 1fr; }
  .sc:nth-child(1), .sc:nth-child(3) { grid-column: span 1; }
  .sc-photo { grid-column: span 1; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { align-items: center; text-align: center; }
  .footer-legal { justify-content: center; }
  .testi-card { padding: 3.2rem 2.8rem; }
}

/* ===== WHATSAPP FLOTANTE ===== */
.wa-float {
  position: fixed; right: 2.4rem; bottom: 2.4rem; z-index: 990;
  display: flex; align-items: center; gap: 1rem;
}
.wa-float__btn {
  position: relative;
  width: 6rem; height: 6rem; border-radius: 50%;
  display: grid; place-items: center;
  background: #25D366; color: var(--white);
  box-shadow: 0 14px 34px rgba(0,0,0,.28);
  transition: transform .4s cubic-bezier(.35,1.5,.6,1);
}
.wa-float__btn svg { width: 3rem; height: 3rem; }
/* A soft ring that breathes, so it reads as "alive" without bouncing. */
.wa-float__btn::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(37,211,102,.5);
  animation: wa-pulse 2.6s ease-out infinite;
}
@keyframes wa-pulse { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.45); } 70%, 100% { box-shadow: 0 0 0 1.6rem rgba(37,211,102,0); } }
.wa-float__tip {
  padding: 1rem 1.6rem; border-radius: 1.2rem;
  background: var(--white); color: var(--dark);
  font-family: var(--fh); font-size: 1.45rem; font-weight: 600;
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
  opacity: 0; translate: .8rem 0; pointer-events: none;
  transition: opacity .3s var(--ease1), translate .3s var(--ease1);
}
.wa-float:hover .wa-float__btn { transform: scale(1.08); }
.wa-float:hover .wa-float__tip, .wa-float:focus-visible .wa-float__tip { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { .wa-float__btn::after { animation: none; } }
@media (max-width: 760px) { .wa-float { right: 1.6rem; bottom: 1.6rem; } .wa-float__btn { width: 5.4rem; height: 5.4rem; } }

/* ===== BENTO · LO QUE CAMBIA EN TUS NÚMEROS ===== */
.bx-section { padding: 11.2rem 0 6.4rem; background: var(--white); }
.bx-hd { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 2.4rem 4rem; margin-bottom: 4.8rem; }
.bx-hd .sec-title { margin-top: 0; }
.bx-hd__lead { max-width: 36rem; font-size: 1.7rem; line-height: 1.55; color: rgba(12,30,24,.58); }
.bx { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(22rem, auto); gap: 1.6rem; }
.bx-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 1rem;
  padding: 3.2rem; border-radius: 2rem;
  background: var(--offwhite); color: var(--dark);
  border: 1px solid rgba(12,30,24,.06);
  transition: translate .45s var(--ease1), box-shadow .45s var(--ease1);
}
.bx-card:hover { translate: 0 -4px; box-shadow: 0 22px 50px rgba(12,30,24,.1); }
.bx-card--hero { grid-column: span 7; grid-row: span 2; background: var(--dark); color: var(--white); border: 0; padding: 4.4rem; }
.bx-card--photo { grid-column: span 5; padding: 0; margin: 0; border: 0; background: var(--forest); }
.bx-card--ticket { grid-column: span 5; background: var(--lime); border: 0; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.bx-card--time { grid-column: span 4; background: #eef1ea; border: 0; }
.bx-card--amber { grid-column: span 4; background: var(--amber); border: 0; }
.bx-card--dark { grid-column: span 4; background: var(--forest); color: var(--white); border: 0; }
.bx-card--wide { grid-column: span 8; flex-direction: row; align-items: center; justify-content: space-between; gap: 3.2rem; }
.bx-card--mint { background: var(--mint); border: 0; }
.bx-card--cta { grid-column: span 4; background: var(--dark); color: var(--white); border: 0; justify-content: space-between; }
.bx-lbl { font-size: 1.2rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .55; }
.bx-num { font-family: var(--fh); font-weight: 600; letter-spacing: -.04em; line-height: .95; font-size: clamp(4.4rem, 4.6vw, 6.4rem); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bx-num--xl { font-size: clamp(8rem, 10vw, 14rem); color: var(--amber); margin-top: .8rem; }
.bx-desc { font-size: 1.5rem; line-height: 1.5; opacity: .7; max-width: 34rem; }
.bx-card--hero .bx-desc { font-size: 1.7rem; max-width: 40rem; }

/* hero card: bars grow from the floor on reveal */
.bx-bars { margin-top: auto; padding-top: 3.2rem; display: grid; grid-template-columns: repeat(7, 1fr); gap: 1rem; align-items: end; height: 22rem; }
.bx-bar { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .8rem; height: 100%; }
.bx-bar i { width: 100%; height: var(--h); border-radius: .8rem; background: rgba(255,255,255,.12); transform-origin: bottom; transform: scaleY(var(--grow, 1)); transition: transform 1.1s var(--ease1); }
.bx-bar.is-peak i { background: var(--amber); }
.bx-bar:nth-child(n+5):not(.is-peak) i { background: rgba(230,255,85,.55); }
.bx-bar em { font-style: normal; font-size: 1.2rem; font-weight: 600; opacity: .5; }
.bx-section:not(.is-in) .bx-bar i { --grow: 0; }
.bx-bar:nth-child(2) i { transition-delay: .06s; } .bx-bar:nth-child(3) i { transition-delay: .12s; }
.bx-bar:nth-child(4) i { transition-delay: .18s; } .bx-bar:nth-child(5) i { transition-delay: .24s; }
.bx-bar:nth-child(6) i { transition-delay: .3s; } .bx-bar:nth-child(7) i { transition-delay: .36s; }

/* photo card */
.bx-card--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--ease1); }
.bx-card--photo:hover img { scale: 1.04; }
.bx-card--photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(12,30,24,.78)); }
.bx-card--photo figcaption { position: absolute; left: 2.8rem; bottom: 2.4rem; z-index: 1; font-family: var(--fh); font-size: 2rem; font-weight: 600; color: var(--white); letter-spacing: -.01em; }
.bx-glass { position: absolute; top: 2rem; left: 2rem; z-index: 1; display: flex; align-items: center; gap: .9rem; padding: 1rem 1.6rem 1rem 1.2rem; border-radius: 999rem; background: rgba(255,255,255,.75); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font-size: 1.3rem; font-weight: 600; }
.bx-glass i { width: .9rem; height: .9rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(0,133,88,.18); }

/* ticket card: the new items slide in */
.bx-order { list-style: none; display: flex; flex-direction: column; gap: .6rem; min-width: 24rem; }
.bx-order li { display: flex; justify-content: space-between; gap: 1.6rem; padding: 1rem 1.4rem; border-radius: 1.1rem; background: rgba(255,255,255,.6); font-size: 1.3rem; font-weight: 500; transition: opacity .5s var(--ease1), translate .5s var(--ease1); }
.bx-order li.is-new { background: var(--dark); color: var(--lime); }
.bx-section:not(.is-in) .bx-order li.is-new { opacity: 0; translate: 0 1rem; }
.bx-order li:nth-child(2) { transition-delay: .5s; } .bx-order li:nth-child(3) { transition-delay: .8s; }

/* ring */
.bx-ring { position: relative; width: 15rem; height: 15rem; margin: .8rem 0; display: grid; place-items: center; }
.bx-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; }
.bx-ring circle { fill: none; stroke-width: 9; }
.bx-ring__bg { stroke: rgba(12,30,24,.08); }
.bx-ring__fg { stroke: var(--green); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 32; transition: stroke-dashoffset 1.4s var(--ease1); }
.bx-section:not(.is-in) .bx-ring__fg { stroke-dashoffset: 100; }
.bx-ring .bx-num { font-size: 3.2rem; }

/* tips + stars */
.bx-tips { display: flex; gap: .6rem; margin: .4rem 0; }
.bx-tips span { padding: .8rem 1.4rem; border-radius: 1rem; background: rgba(255,255,255,.55); font-size: 1.4rem; font-weight: 700; }
.bx-tips .is-on { background: var(--dark); color: var(--amber); }
.bx-stars { color: var(--amber); font-size: 2.4rem; letter-spacing: .2em; }

/* wide card receipt */
.bx-receipt { flex-shrink: 0; display: flex; flex-direction: column; gap: .7rem; width: 26rem; padding: 2rem 2.2rem; border-radius: 1.4rem; background: var(--white); font-size: 1.4rem; box-shadow: 0 14px 30px rgba(0,82,54,.12); rotate: 2deg; }
.bx-receipt b { font-family: var(--fh); font-size: 1.7rem; padding-bottom: .8rem; border-bottom: 1px dashed rgba(12,30,24,.2); }
.bx-receipt em { font-style: normal; color: var(--green); font-weight: 600; }
.bx-receipt__ok { margin-top: .4rem; color: var(--green); font-weight: 700; }

/* CTA */
.bx-cta__ttl { font-family: var(--fh); font-size: clamp(2.6rem, 2.4vw, 3.4rem); font-weight: 600; line-height: 1.1; letter-spacing: -.02em; }
.bx-cta__link { display: inline-flex; align-items: center; gap: .8rem; color: var(--amber); font-family: var(--fh); font-size: 1.7rem; font-weight: 600; }
.bx-cta__link svg { width: 1.8rem; height: 1.8rem; transition: transform .5s var(--ease1); }
.bx-card--cta:hover .bx-cta__link svg { transform: rotate(45deg); }
.bx-card--cta::after { content: ''; position: absolute; right: -4rem; bottom: -4rem; width: 16rem; height: 16rem; border-radius: 3rem; background: var(--lime); opacity: .12; rotate: 18deg; }

@media (prefers-reduced-motion: reduce) {
  .bx-section .bx-bar i, .bx-section .bx-order li, .bx-section .bx-ring__fg { transition: none; }
}
@media (max-width: 1080px) {
  .bx-card--hero, .bx-card--photo, .bx-card--ticket, .bx-card--wide { grid-column: span 12; }
  .bx-card--photo { min-height: 32rem; }
  .bx-card--time, .bx-card--amber, .bx-card--dark, .bx-card--cta { grid-column: span 6; }
}
@media (max-width: 760px) {
  .bx-card--time, .bx-card--amber, .bx-card--dark, .bx-card--cta { grid-column: span 12; }
  .bx-card--ticket, .bx-card--wide { flex-direction: column; align-items: stretch; }
  .bx-order { min-width: 0; }
  .bx-receipt { width: auto; rotate: 0deg; }
  .bx-card--hero { padding: 3.2rem; }
}

/* Tiempo por mesa: la misma mesa con y sin las esperas. */
.bx-time { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1rem 1.4rem; margin: .8rem 0 .4rem; }
.bx-time__lbl { font-size: 1.2rem; font-weight: 600; color: rgba(12,30,24,.55); white-space: nowrap; }
.bx-time__bar { display: flex; gap: .3rem; height: 3.2rem; }
.bx-time__bar i { position: relative; width: var(--w); border-radius: .7rem; }
.bx-time__bar .t-eat { background: var(--green); }
.bx-time__bar .t-wait { background: repeating-linear-gradient(135deg, rgba(12,30,24,.14) 0 6px, rgba(12,30,24,.05) 6px 12px); }
.bx-time__bar em { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-size: 1.05rem; font-weight: 600; color: rgba(12,30,24,.55); }
.bx-time__saved { display: flex; align-items: center; padding: 0 1rem; border-radius: .7rem; background: var(--lime); font-size: 1.2rem; font-weight: 700; white-space: nowrap; }
/* On reveal the qwik bar slides in after the "sin qwik" one. */
.bx-time__bar--qwik { transform-origin: left; transition: transform 1s var(--ease1) .3s, opacity .6s var(--ease1) .3s; }
.bx-section:not(.is-in) .bx-time__bar--qwik { transform: scaleX(.2); opacity: 0; }
@media (prefers-reduced-motion: reduce) { .bx-time__bar--qwik { transition: none; } }

/* Hero CTA: lima en reposo, amarillo al hover (invertido respecto al resto de los botones). */
.hero .btn-liquid__label,
.hero .btn-liquid__blob { background: var(--lime); }
.hero .btn-liquid:hover .btn-liquid__label,
.hero .btn-liquid:hover .btn-liquid__blob { background: var(--amber); }

/* Reseñas: la "G" de Google en una ficha blanca, arriba a la derecha. */
.bx-google { position: absolute; top: 2.4rem; right: 2.4rem; width: 5.2rem; height: 5.2rem; border-radius: 50%; display: grid; place-items: center; background: var(--white); box-shadow: 0 8px 20px rgba(0,0,0,.2); }
.bx-google svg { width: 2.8rem; height: 2.8rem; }