/* GENERATED from pages/css/index.css by site/build.py */
/* ---------- product showcase ----------
   Was the RIGHT half of a split hero until 2026-09-03. The left half -- the
   Gilardi photograph and its two-part structural scrim -- is gone with the
   rest of the hero, and this is now a full-width band sitting directly under
   the search module. The mockups' own pale ground, so the frame sits on a
   continuous surface rather than in a box.

   The .hero-* class names below are UNCHANGED and load-bearing: initHero()
   finds the stage by .hero-stage and then reaches the caption through
   stage.parentElement.querySelector(".hero-cap"), so .hero-art must stay the
   parent of both. Renaming them to match the new section would be tidier and
   would silently kill the carousel caption. */
.showcase{
  background:var(--marco);
  border-bottom:1px solid var(--tinta);
  display:flex;flex-direction:column;align-items:center;
  padding:clamp(34px,4.6vw,62px) 28px clamp(22px,3vw,32px);
  gap:clamp(20px,2.8vw,32px);
}
/* Matched to #busca h2. They are the two heads a visitor meets in the first
   two screens; at different sizes they read as a hierarchy nobody intended.

   The face comes from the global h1,h2,h3 rule -- Manna, the poster's own
   title face. Size is set by what FITS, and that was measured once already
   and is worth not re-learning: Manna is a WIDE face, the string carries one
   <br> and intends exactly two lines, and at 72px the longest line ran 786px
   inside a 640px column and wrapped to four with a rag nobody chose. 58px was
   proven to fit; this stays under it. If a future line wraps, the fix is the
   size or the copy -- never a nowrap, which would push type off a phone.
   balance keeps the halves from splitting badly if the copy changes length.

   Colour is tinta, not cal: the old rule was white with a text-shadow because
   it sat on a photograph. There is no photograph now. */
.showcase h1{
  font-size:clamp(28px,4.7vw,56px);font-weight:700;line-height:1.06;
  letter-spacing:.01em;text-align:center;text-wrap:balance;
  color:var(--tinta);max-width:18ch;
}

.hero-art{
  position:relative;width:100%;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:14px;
}
.hero-stage{
  position:relative;width:100%;
  max-width:min(500px,62vh);
  aspect-ratio:1/1;
}
.hero-stage img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:contain;
  opacity:0;transition:opacity .5s ease;
}
.hero-stage img.on{opacity:1}

.hero-meta{
  display:flex;align-items:center;gap:18px;
  width:100%;max-width:min(500px,62vh);
  justify-content:space-between;
}
.hero-cap{font-size:11px;letter-spacing:.1em;color:var(--carbon);text-transform:uppercase;
  transition:opacity .19s ease}
.hero-cap.swapping{opacity:0}
.hero-cap b{color:var(--tinta);letter-spacing:.12em}
/* Separator in CSS, not in the string: the caption is assembled from data
   attributes in two languages and a hard-coded "·" would end up inside a
   translated key. */
.hero-cap b::after{content:" · ";color:var(--piedra);font-weight:400}
.hero-dots{display:flex;gap:7px}
.hero-dots button{
  width:8px;height:8px;padding:0;border-radius:50%;
  border:1px solid var(--carbon);background:transparent;
  cursor:pointer;transition:background .2s,border-color .2s;
}
.hero-dots button[aria-selected="true"]{background:var(--cochinilla);border-color:var(--cochinilla)}

@media(max-width:900px){
  .hero-stage,.hero-meta{max-width:400px}
}
@media(max-width:430px){
  .showcase{padding-left:18px;padding-right:18px}
  .hero-meta{gap:12px}
  .hero-cap{font-size:10px;letter-spacing:.07em}
}
@media(max-width:340px){
  .hero-cap b{display:block}
  .hero-cap b::after{content:none}
}

/* ---------- how it works ----------
   Three steps between the collection marquee and the story. Numerals in mono
   so they read as a sequence rather than decoration, and the step bodies stay
   left-aligned: this block carries the stock weight and the US printing, which
   the review-mining pass found to be the category's actual anxiety, and
   centred text reads as a slogan rather than a spec. */
/* Pink ground, not the collection's --marco. Two neighbouring sections in the
   same neutral read as one long section; the pale cochineal gives the
   instructional beat its own room and is a brand colour rather than a new one.
   Tinta on coch-palida is high contrast, so the text carries. */
.how{background:var(--coch-palida);color:var(--tinta)}
.how .wrap{max-width:1100px;margin:0 auto;padding:clamp(48px,6vw,84px) 28px}
.how ol{list-style:none;display:grid;gap:clamp(28px,4vw,54px);
  grid-template-columns:repeat(3,1fr)}
.how li{display:flex;flex-direction:column;gap:10px}
.how h3{font-weight:700;font-size:clamp(17px,1.7vw,21px);letter-spacing:.01em;
  text-transform:uppercase;color:var(--tinta)}
.how p{font:13px/1.7 "Lindero Text",system-ui,sans-serif;color:var(--carbon);max-width:34ch}

@media(max-width:820px){
  .how ol{grid-template-columns:1fr;gap:26px}
  .how p{max-width:none}
}

/* ── How it works: icon row with dotted connectors ───────────────────────── */
/* Icons carry the step now that the numbers are gone, so they are sized as
   illustration rather than as a bullet: clamp(72px,7vw,104px) against the 48px
   they were, where they read as decoration beside the text they were meant to
   lead.
   The connector is drawn on the LIST ITEM, not between items, because a
   pseudo-element on a grid gap has nothing to attach to. Each item except the
   last paints a dotted rule from its own icon to the next, pinned to the icon's
   vertical centre with the same clamp so the two never drift apart. It hides at
   one column, where a horizontal connector would point at nothing. */
.how ol{position:relative}
.how li{position:relative}
.how .ico{display:block;width:clamp(72px,7vw,104px);height:clamp(72px,7vw,104px);
  color:var(--tinta)}
.how .ico svg{width:100%;height:100%;display:block}
.how li:not(:last-child)::after{
  content:"";position:absolute;
  top:calc(clamp(72px,7vw,104px) / 2);
  left:calc(clamp(72px,7vw,104px) + 18px);
  right:calc(-1 * clamp(28px,4vw,54px) - 14px);
  border-top:1.5px dotted var(--cochinilla);opacity:.55;
}
.how h3{margin-top:clamp(20px,2.2vw,30px)}
@media(max-width:820px){
  .how li:not(:last-child)::after{display:none}
}


/* Section title, matched to .story h2 so the two peer section heads are the
   same object. Was Everett at 28px on an earlier call to keep this block in the
   text face; reversed 2026-08-31 -- a second typeface for one section read as
   an exception rather than as hierarchy. It subordinates by position and by the
   scale of what follows, not by changing face. */
.how h2{
  font-size:clamp(28px,3.6vw,46px);font-weight:700;line-height:1.05;
  letter-spacing:0;color:var(--tinta);margin-bottom:clamp(36px,4.4vw,60px);
}