/* ═══════════════════════════════════════════════════════════════════════════
   PAGE: la-semilla.html — "Cómo crece la semilla" scroll narrative.
   Loaded AFTER roa.css. Page-specific only. Nothing in roa.css is touched.

   Every rule here is a CLASS on purpose: `_headers` ships style-src 'self' with
   no 'unsafe-inline', so a style="" attribute is dropped in production while it
   looks perfect in local dev. No gradients, no text-shadow. Plain gold #C59136
   (var(--gold)) stays DECORATIVE — fills, rules, diamonds, drop outlines — and
   never carries a readable word; readable gold is var(--gold-dark) (5.29:1).

   The animation is done entirely with the reveal hooks js/grow.js already
   drives (data-reveal, data-reveal-stagger). No new JavaScript.
   ═══════════════════════════════════════════════════════════════════════ */

.sem-story{background:var(--paper);}
.sem-story__head{max-width:36ch;}
.sem-story .rule{margin-bottom:clamp(2.6rem,6vw,4.6rem);}

/* ── THE BEATS: an alternating seed→jardín narrative ─────────────────────── */
.sem-beats{
  list-style:none;margin:0;padding:0;
  display:grid;gap:clamp(3rem,8vh,6.5rem);
}
.sem-beat{
  display:grid;gap:clamp(1.6rem,4vw,3.5rem);
  grid-template-columns:1fr;align-items:center;
}
@media (min-width:880px){
  .sem-beat{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);}
  /* even beats flip the figure to the right so the eye zig-zags down the page */
  .sem-beat:nth-child(even) .sem-beat__fig{order:2;}
}

.sem-beat__copy{max-width:46ch;}
.sem-beat__n{
  display:inline-flex;align-items:center;gap:.75rem;
  font-family:var(--font-roman);font-size:.82rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold-dark);margin-bottom:1rem;
  font-variant-numeric:tabular-nums;
}
.sem-beat__n::before{content:"";width:28px;height:1px;background:var(--gold);flex:none;}
.sem-beat .h3{color:var(--bark);}
.sem-beat__b{color:var(--bark-mid);font-size:var(--t-lead);line-height:1.5;
  max-width:44ch;margin-top:.9rem;}
.sem-beat__b strong{color:var(--bark);font-weight:700;}
.sem-beat__b a{color:var(--gold-dark);font-weight:700;}

/* ── THE FIGURE COLUMN ───────────────────────────────────────────────────── */
.sem-beat__fig{
  position:relative;justify-self:center;width:100%;
  display:grid;place-items:center;gap:1rem;
  min-height:clamp(170px,24vh,280px);
}
.sem-fig__cap{
  font-family:var(--font-roman);font-size:.8rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bark-mid);text-align:center;max-width:26ch;
}

/* the botanical art (seed.svg / sprout.svg), height-locked so the tall
   viewBoxes never blow out the column width */
.sem-art{display:grid;place-items:end center;}
.sem-art svg{height:clamp(200px,32vh,330px);width:auto;max-width:100%;overflow:visible;}

/* the small line icons (rieles, colateral) */
.sem-ic{width:clamp(66px,11vw,92px);height:auto;color:var(--gold-dark);}
.sem-ic svg{width:100%;height:auto;}

/* ── BEAT 3: the daily drop ──────────────────────────────────────────────── */
.sem-drop{
  position:relative;width:clamp(128px,22vw,176px);aspect-ratio:1;
  background:var(--gold-veil);border:1.5px solid var(--gold);
  border-radius:50% 50% 50% 0;rotate:45deg;
  display:grid;place-items:center;
}
.sem-drop__v{
  rotate:-45deg;font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.9rem,4.2vw,2.7rem);line-height:1;color:var(--gold-dark);
  font-variant-numeric:lining-nums;
}

/* ── BEAT 4: every drop is a seed that joins all the others ──────────────── */
.sem-drops{
  display:grid;grid-template-columns:repeat(6,1fr);
  gap:clamp(.7rem,2vw,1.1rem);max-width:280px;justify-items:center;
}
.sem-seed{width:15px;height:15px;rotate:45deg;background:var(--gold);flex:none;}
.sem-seed--you{background:var(--gold-dark);outline:2px solid var(--gold);outline-offset:3px;}

/* ── BEAT 5: 50 × 6 = 50 millones ────────────────────────────────────────── */
.sem-mult{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.9rem clamp(.9rem,2.4vw,1.8rem);
}
.sem-mult__cell{
  display:grid;justify-items:center;gap:.4rem;
  border:1px solid var(--hair);border-radius:3px;background:var(--paper);
  padding:clamp(1rem,2.4vw,1.6rem) clamp(1.1rem,2.6vw,1.8rem);min-width:104px;
}
.sem-mult__cell--out{border-color:var(--gold);border-width:1.5px;background:var(--ivory);}
.sem-mult__v{
  font-family:var(--font-display);font-weight:600;line-height:1;
  font-size:clamp(2rem,4.4vw,3rem);color:var(--bark);
  font-variant-numeric:lining-nums;text-align:center;
}
.sem-mult__u{display:block;font-size:.42em;letter-spacing:.02em;margin-top:.35em;color:var(--bark);}
.sem-mult__k{
  font-family:var(--font-roman);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-dark);text-align:center;
}
.sem-mult__op{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.4rem,2.6vw,2rem);color:var(--gold-dark);line-height:1;
}