/* ── red.css ──────────────────────────────────────────────────────────────
   The referral-network figure that opens #niveles: one person brings ten,
   each of those brings ten. Nodes + connectors read as a branching red de
   afiliación (never the word for the shape). Lives on the dark-green ground
   (.on-green), so all text is ivory/gold-light. No gradients, no shadows on
   text, no inline styles. Reveals reuse the existing data-reveal hooks. */

.red{position:relative;z-index:2;padding-top:var(--bay);padding-bottom:1.5rem;}

.red__head{margin-bottom:2.6rem;}
.red__head .h2{margin-top:.4rem;}

.red__figure{
  width:100%;max-width:780px;margin-inline:auto;padding-inline:var(--gutter);
  display:flex;flex-direction:column;align-items:center;gap:0;
}

/* one tier = incoming connector + node group + count/caption */
.red-tier{width:100%;display:flex;flex-direction:column;align-items:center;text-align:center;}

/* branching connector (SVG stretches horizontally; strokes stay crisp) */
.red-conn{display:block;width:min(100%,340px);height:26px;}
.red-conn line{stroke:var(--gold-light);stroke-width:1;opacity:.5;}

/* node groups */
.red-nodes{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:.55rem;max-width:520px;
}
.red-dot{display:block;width:14px;height:14px;border-radius:50%;background:var(--gold-light);}

/* the root: one solid gold node = "Usted" */
.red-tier--0 .red-dot{width:22px;height:22px;background:var(--gold);}

/* the crowd tiers get smaller, tighter dots as the count climbs */
.red-cluster{gap:.4rem;max-width:460px;}
.red-cluster .red-dot{width:9px;height:9px;opacity:.92;}
.red-tier--3 .red-cluster{gap:.32rem;max-width:480px;}
.red-tier--3 .red-cluster .red-dot{width:7px;height:7px;opacity:.85;}
.red-tier--4 .red-cluster{gap:.26rem;max-width:500px;}
.red-tier--4 .red-cluster .red-dot{width:6px;height:6px;opacity:.8;}

/* the running count, sitting beside its tier */
.red-cap{
  display:flex;align-items:baseline;justify-content:center;gap:.7rem;
  flex-wrap:wrap;margin-top:1rem;margin-bottom:1.7rem;
}
.red-count{
  font-family:var(--font-display);font-weight:600;line-height:1;
  font-size:clamp(1.7rem,4.4vw,2.6rem);color:var(--gold-light);
}
.red-say{color:rgba(255,255,255,.86);font-size:1rem;line-height:1.45;max-width:36ch;}

/* the punch line under the figure */
.red__punch{max-width:660px;margin:1.6rem auto 0;padding-inline:var(--gutter);text-align:center;}
.red-punch{
  font-family:var(--font-display);font-weight:600;color:#fff;
  font-size:clamp(1.25rem,3vw,1.7rem);line-height:1.3;
}
.red-sub{margin-top:1rem;color:rgba(255,255,255,.82);font-size:1rem;line-height:1.55;}

@media (max-width:560px){
  .red-nodes{gap:.45rem;}
  .red-cap{gap:.5rem;}
}

/* merged intro: centered title sitting directly over the animating node figure,
   so it reads as one moving sequence, not a static text-left page */
.red__head--center{text-align:center;max-width:44ch;margin-inline:auto;}
.red__head--center .eyebrow{justify-content:center;}
.red__head--center .lead{margin-inline:auto;max-width:52ch;}

/* APERTURA — centered animated value beat that opens the one cinematic #niveles.
   Centered and full-width so it reads as a title card in motion, never a
   static text-left page. The seed sits above the words and rises with them. */
.lvl-open{
  position:relative;z-index:2;text-align:center;max-width:46ch;
  margin-inline:auto;padding-top:var(--bay);padding-bottom:clamp(3rem,7vh,6rem);
}
.lvl-open__art{width:clamp(70px,10vh,120px);margin:0 auto 1.6rem;}
.lvl-open__art svg{width:100%;height:auto;}
.lvl-open .eyebrow{justify-content:center;}
.lvl-open .lead{margin-inline:auto;max-width:54ch;}

/* ── SCROLL-GROWN NETWORK ────────────────────────────────────────────────
   The pyramid pins and its tiers appear ONE AT A TIME as the reader scrolls,
   so you watch the network grow instead of being dumped all five tiers of
   bloat at once. Driven by grow.js via [data-grow-track]. */
.red__track{height:280vh;position:relative;}
.red__stage{
  position:sticky;top:0;min-height:100svh;
  display:grid;align-content:center;padding-block:8vh;
}
.red__figure .red-tier{
  opacity:0;transform:translateY(22px) scale(.96);
  transition:opacity .55s var(--ease),transform .7s var(--ease-out);
  will-change:opacity,transform;
}
.red__figure .red-tier[data-on="true"]{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .red__track{height:auto;}
  .red__stage{position:static;min-height:0;padding-block:var(--bay);}
  .red__figure .red-tier{opacity:1 !important;transform:none !important;}
}

/* ── LA RED · the middle camera (rebuild 2026-09-13, v2) ────────────────────
   ONE dolly carrying the two movements the founder asked to be merged:
   "Detrás de cada semilla" (the money engine) and "la gente trae gente"
   (the referral network). The first dolly (#crecer) and the last (.lvl__track)
   are deliberately untouched — this one is built as their SIBLING so the page
   reads as a single continuous camera rather than three unrelated widgets.

   Why it is built this way, since v1 of it failed review:
   v1 had NO depth layers — the camera panned across flat void, so motion was
   invisible and ~75% of every frame was empty green. A dolly with nothing to
   travel past is not a dolly. This version carries the same sun + far/mid/near
   /fore strips as #crecer, at the same per-station density (~110vw each), so
   the parallax — not a caption — is what tells the eye it is moving.

   Composition rule: copy owns the LEFT column, the figure owns the RIGHT.
   Every frame is loaded on both sides. Titles are clamped smaller than the
   other two cameras precisely because these beats carry real body copy. */
.rednet{position:relative;}
.rednet__track{height:1300vh;position:relative;}
.rednet__stage{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:grid;place-items:center;
}

/* depth strips — widths cover cam×travel×depth for a 12-station span
   (fore moves 18vw, so it must be ≥1900vw or it runs out of scenery) */
.rednet__sun{
  position:absolute;bottom:26svh;width:46vh;height:46vh;border-radius:50%;
  background:var(--gold);opacity:.13;filter:blur(60px);
  pointer-events:none;will-change:transform;
}
.rednet__far {width:1400vw;height:34svh;bottom:30svh;color:#3E6B45;opacity:.42;}
.rednet__mid {width:1400vw;height:30svh;bottom:20svh;color:#35603D;opacity:.62;}
.rednet__near{width:1400vw;height:26svh;bottom:0;   color:#24402A;}
.rednet__fore{width:2000vw;height:16svh;bottom:0;   color:#1B3220;opacity:.9;}

.rednet__world{
  position:absolute;left:0;bottom:calc(26svh - 2px);
  width:1300vw;height:74svh;
  display:grid;grid-template-columns:repeat(13,100vw);align-items:end;
  pointer-events:none;will-change:transform;
}
.rednet-station{
  display:grid;justify-items:center;align-items:end;height:100%;
  color:var(--gold-light);
}
.rednet-station>div{display:grid;align-items:end;height:100%;}
.rednet-station svg{width:auto;height:100%;overflow:visible;}

/* the figure sizes — each reads at a deliberate scale, not one default */
.rednet-station[data-rs="0"] svg{height:min(26svh,15vw);}
.rednet-station[data-rs="1"] svg{height:min(40svh,20vw);}
.rednet-station[data-rs="2"] svg{height:min(42svh,21vw);}
.rednet-station[data-rs="3"] svg{height:min(44svh,21vw);}
.rednet-station[data-rs="5"] svg{height:min(44svh,21vw);}
.rednet-station[data-rs="12"] svg{height:min(52svh,24vw);}

/* copy owns the left third on desktop; figures sit right of centre */
@media (min-width:900px){ .rednet-station{justify-items:end;padding-right:5vw;} }
/* On mobile the copy sits ON the scenery. Screenshot review caught the drop
   and the network cutting straight THROUGH the paragraph, because these
   figures are centred and tall unlike the bottom-anchored botanical ones.
   So on small screens they are shrunk and held to the lower band, where
   they read as scenery under the text instead of noise across it. */
@media (max-width:899px){
  /* drop the whole world to the floor: anchored at 26svh the figures sat
     dead centre, straight behind the paragraph (audit caught a 152px
     vertical overlap at 834px wide). */
  .rednet__world{bottom:3svh;height:44svh;}
  .rednet-station{opacity:.32;align-items:end;padding-bottom:0;}
  .rednet-station svg{height:auto !important;max-height:24svh;}
  .nt-fig svg,
  .rednet-station[data-rs="6"]  .nt-fig svg,
  .rednet-station[data-rs="7"]  .nt-fig svg,
  .rednet-station[data-rs="8"]  .nt-fig svg,
  .rednet-station[data-rs="9"]  .nt-fig svg,
  .rednet-station[data-rs="10"] .nt-fig svg,
  .rednet-station[data-rs="11"] .nt-fig svg{height:auto !important;max-height:30svh;}
  .rednet-station>.nt-num{padding-bottom:2svh;opacity:.9;}
  .rednet__beats .beat .lead{max-width:42ch;}
}

/* icon line-art: stroked in gold, with a few solid accents */
.rednet-station .nt-fill circle{fill:currentColor;stroke:none;}

/* ── the radial network figure ──────────────────────────────────────────
   One generated SVG (img/net/network.svg) mounted once per network beat.
   Rings are revealed by [data-rings] so the same geometry grows 1 → 10 →
   100 → 1.000 → 10.000 as the camera tracks past it. This replaces v1's
   flat row of dots, which had no connectors and therefore read as
   confetti rather than as a red de afiliación. */
.nt-fig{position:relative;}
.nt-fig svg{height:64svh !important;width:auto;}
/* The network must GROW, not just gain a fainter outer ring. Screenshot
   review of v2 showed "cien" and "diez mil" reading as the same picture,
   because only ring opacity changed. So each network station is also
   physically larger than the one before — the same law the other two
   cameras already use on their botanical stations. */
/* Sized against BOTH axes. Height alone was a bug: the figure is square, so
   on a 1280 laptop a 70svh network is 560px wide and ran 263px INTO the body
   copy. Capping by vw keeps the figure inside the right-hand half at every
   desktop width, not just the one I happened to screenshot. */
.rednet-station[data-rs="6"]  .nt-fig svg{height:min(50svh,20vw) !important;}
.rednet-station[data-rs="7"]  .nt-fig svg{height:min(50svh,26vw) !important;}
.rednet-station[data-rs="8"]  .nt-fig svg{height:min(58svh,23vw) !important;}
.rednet-station[data-rs="9"]  .nt-fig svg{height:min(64svh,25vw) !important;}
.rednet-station[data-rs="10"] .nt-fig svg{height:min(70svh,27vw) !important;}
.rednet-station[data-rs="11"] .nt-fig svg{height:min(70svh,36vw) !important;}

/* data-rings="p" — the PREVIEW state on "la gente trae gente": the whole
   network is present but ghosted, with only you lit at the centre. A single
   lone dot (what v2 shipped here) read as a speck in an empty frame; this
   says "this is a red, and it starts with you" and holds the composition. */
.nt-fig[data-rings="p"] :is([data-ring="1"],[data-ring="2"],[data-ring="3"],[data-ring="4"]){opacity:.12;}
.nt-fig[data-rings="p"] .nt-link line{opacity:.05;}
.nt-fig circle{fill:var(--gold-light);stroke:none;}
.nt-fig line{stroke:var(--gold-light);}
.nt-fig [data-ring="0"] circle{fill:var(--gold);}
.nt-fig .nt-link line{opacity:.34;stroke-width:1;}
.nt-fig .nt-r2 circle{opacity:.8;}
.nt-fig .nt-r3 circle{opacity:.5;}
.nt-fig .nt-r4 circle{opacity:.32;}
.nt-fig [data-ring]{transition:opacity .6s var(--ease,ease);}
.nt-fig[data-rings="0"] :is([data-ring="1"],[data-ring="2"],[data-ring="3"],[data-ring="4"]){opacity:0;}
.nt-fig[data-rings="1"] :is([data-ring="2"],[data-ring="3"],[data-ring="4"]){opacity:0;}
.nt-fig[data-rings="2"] :is([data-ring="3"],[data-ring="4"]){opacity:0;}
.nt-fig[data-rings="3"] [data-ring="4"]{opacity:0;}

/* ── typographic station: the multiplication ────────────────────────────
   50 × 6 generaciones = 50 millones. Set as type, not as an icon, because
   the number IS the argument — it deserves the display face at full size. */
/* specificity must beat `.rednet-station>div{display:grid}` above, or the
   equation stacks vertically instead of reading as one line of arithmetic */
/* Width is load-bearing here, not just taste. Every other station holds a
   SQUARE figure, which stays in the right-hand zone for the whole pan. This
   one is a wide horizontal row, so at full size it reached the left edge and
   landed on the NEXT beat's paragraph (measured: 328×143px at 1280px wide,
   while that beat sat at 0.94 opacity). Capped to the same footprint as the
   square figures, it collides with nothing at any tested width. */
.rednet-station>.nt-num{
  display:flex;align-items:flex-start;gap:clamp(.5rem,1vw,1rem);
  align-self:center;height:auto;color:var(--gold-light);
  padding-bottom:12svh;max-width:26vw;
}
.rednet-station>.nt-num .nt-num__v{font-size:clamp(1.7rem,3.6vw,3.4rem);}
.rednet-station>.nt-num .nt-num__op{font-size:clamp(1rem,1.8vw,1.6rem);}
.nt-num__c{display:flex;flex-direction:column;}
.nt-num__op{align-self:center;}
.nt-num__v{
  font-family:var(--font-display);font-weight:600;line-height:.9;
  font-size:clamp(2.6rem,7vw,6rem);
}
.nt-num__op{font-family:var(--font-display);font-size:clamp(1.4rem,3vw,2.6rem);opacity:.6;}
.nt-num__k{
  display:block;font-family:var(--font-roman);font-size:.66rem;
  letter-spacing:.22em;text-transform:uppercase;opacity:.68;margin-top:.7rem;
  line-height:1.3;max-width:11ch;
}
.nt-num__out .nt-num__v{color:var(--gold);}


/* ── IN-PLACE GROWTH, MOVING BACKGROUND ────────────────────────────────────
   Founder's instruction, verbatim: "just in place growth while the background
   is moving camera dolly". The figures were originally mounted in the panning
   world, which meant an outgoing figure slid across the NEXT beat's paragraph
   while that paragraph was fully lit — measured at up to 117,000px² of overlap,
   and visible on the live site sitting on top of "Y no se detiene."

   So the figures no longer ride the camera. Each one lives INSIDE its own beat
   and therefore inherits that beat's --o opacity: a figure can only ever be
   visible at the same moment as its own text, in its own column. Text left,
   figure right, zero possible overlap at any width or scroll position.
   The dolly is unchanged — sun, far, mid, near and fore strips still pan. */
.rednet__beats{position:relative;}
.rednet__beats .beat{
  display:grid;align-items:center;width:100%;
  grid-template-columns:minmax(0,32ch) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,4.5rem);
}
.beat__art{
  display:grid;place-items:center;color:var(--gold-light);
  justify-self:center;
}
.beat__art svg{width:auto;height:auto;max-width:100%;overflow:visible;}
.rednet__beats .beat[data-beat="0"]  .beat__art svg{max-height:28svh;}
.rednet__beats .beat[data-beat="1"]  .beat__art svg{max-height:40svh;}
.rednet__beats .beat[data-beat="2"]  .beat__art svg{max-height:40svh;}
.rednet__beats .beat[data-beat="3"]  .beat__art svg{max-height:44svh;}
.rednet__beats .beat[data-beat="5"]  .beat__art svg{max-height:44svh;}
.rednet__beats .beat[data-beat="6"]  .beat__art svg{max-height:52svh;}
.rednet__beats .beat[data-beat="7"]  .beat__art svg{max-height:54svh;}
.rednet__beats .beat[data-beat="8"]  .beat__art svg{max-height:60svh;}
.rednet__beats .beat[data-beat="9"]  .beat__art svg{max-height:66svh;}
.rednet__beats .beat[data-beat="10"] .beat__art svg{max-height:72svh;}
.rednet__beats .beat[data-beat="11"] .beat__art svg{max-height:72svh;}
.rednet__beats .beat[data-beat="12"] .beat__art svg{max-height:56svh;}
.beat__art .nt-fill circle{fill:currentColor;stroke:none;}
/* the equation reads top-to-bottom in its own column now that it is no longer
   fighting the copy for horizontal room — 50 / × / 6 / = / 50M */
.beat__art .nt-num{display:grid;justify-items:center;gap:.2rem;text-align:center;}
.beat__art .nt-num__v{font-size:clamp(2.4rem,5vw,4.4rem);}
.beat__art .nt-num__op{font-size:clamp(1.1rem,2vw,1.8rem);opacity:.55;}
.beat__art .nt-num__k{max-width:16ch;margin-top:.15rem;}

@media (max-width:899px){
  /* one column: the figure sits UNDER its own paragraph, never behind it */
  .rednet__beats .beat{grid-template-columns:1fr;gap:2rem;}
  .beat__art svg{max-height:22svh !important;}
  .beat__art{opacity:.75;}
  .rednet__beats .beat__inner{max-width:42ch;}
}

/* ── beats ─────────────────────────────────────────────────────────────── */
.rednet__beats{
  position:relative;z-index:2;width:100%;height:100%;
  display:grid;align-content:center;pointer-events:none;
}
/* smaller than the other two cameras ON PURPOSE: these beats carry real
   body copy, and a title that eats 70% of the frame was a review finding. */
.rednet__beats .beat .h2{font-size:clamp(1.6rem,2.7vw,2.5rem);}
.rednet__beats .beat .lead{max-width:36ch;margin-top:1rem;}
.rednet__beats .beat__inner{max-width:38ch;}
@media (min-width:900px){ .rednet__beats .beat__inner{max-width:30ch;} }
.rednet__beats .beat a{color:var(--gold-light);text-underline-offset:3px;}

/* the punch beat — the single line the founder wants people to leave with */
.rednet__beats .red-punch{font-size:clamp(1.3rem,2.6vw,2rem);max-width:22ch;}
.rednet__beats .red-sub{max-width:34ch;}

/* rail: 14 ticks would crowd, so only the ACTIVE label is shown and it
   changes as the camera arrives — one legible cue instead of a clutter. */
.rednet .rail__lab{opacity:0;transition:opacity .3s var(--ease,ease);}
.rednet .rail__lab[data-on="true"]{opacity:1;}

@media (prefers-reduced-motion:reduce){
  .rednet__track{height:auto;}
  .rednet__stage{position:static;height:auto;padding-block:var(--bay);display:block;}
  .rednet .layer,.rednet__sun,.rednet .rail{display:none !important;}
  .rednet__world{
    position:static;width:auto;height:auto;
    grid-template-columns:1fr;gap:var(--bay);
  }
  .rednet-station{height:auto;opacity:1;justify-items:center;padding-right:0;}
  .rednet-station svg{height:auto !important;max-height:36svh;}
  .nt-fig svg{height:auto !important;max-height:46svh;}
  .nt-fig [data-ring]{opacity:1 !important;}
  .rednet__beats{display:block;height:auto;}
  .rednet__beats .beat{opacity:1 !important;transform:none !important;margin-block:var(--bay);}
}