/* ============================================================================
   13 · "Empieza a producir".  The ONE centred composition on the page, so it
   has to earn the symmetry: three objects on a single vertical axis, each one
   narrower than the one above it, and nothing else competing for the middle.

   GEOMETRY (desktop >= 900px).  Widths are capped, not fluid percentages: a
   centred stack reads by the ratio between its parts, and that ratio must hold
   at 1024 as well as at 1920.
       sheet  min(720px,100%)    the measure the two H2 lines were written for
       cta    min(580px,100%)    81% of the sheet, the comp's ratio
       note   min(410px,100%)    71% of the cta, the comp's ratio
       guarantee  the same 410     it reads as one column with the note
   1440: sheet 720 (inner 650) · cta 580 · note 410 · guarantee 410. Tapering
   720 > 580 > 410 puts the eye on the coral card without a rule or an arrow,
   and the two small papers under it close the column off flat.

   The PREVENTA badge is the block stamp struck across the card's top-left
   corner, overhanging it the way a real stamp lands off-register. It uses the
   material's own `.is-plain` form: coral ink multiplied into a coral card
   measures 1.47:1, and half the badge hangs over the bare desk, where
   MATERIALS.md forbids a blended stamp outright. Struck in paper ink instead
   it is 4.64:1 on the coral (the same as the card's own label) and 12.8:1 on
   the desk. Reported to the manager as the gap it is: there is no stamp
   variant for a coral surface.

   The CTA label scales with the card.  This is the page's LAST ask, so it is
   also its biggest CTA: at the material's own clamp the label would fill only
   half of a 580px card and the card would read as an empty coral bar. The hero
   overrides .cta's font-size in its own section CSS for the same reason, so
   this file does too, with the ONE clamp below. It tracks the card and not the
   viewport: the card is min(580px,100%) at every width, so the clamp's 1.95rem
   cap binds from 678px up and the fill stays constant across the whole desktop
   range instead of sagging at 1024. Measured (the string is 14.2em of Archivo
   Black; label / inner width / lines):
       390 -> 17.9px   254 / 334   1 line
       600 -> 27.6px   392 / 537   1 line
      1024 -> 31.2px   442 / 523   1 line
      1440 -> 31.2px   442 / 523   1 line, 85% fill
      1920 -> 31.2px   442 / 521   1 line

   The H2 fit, which decides the sheet width.  The two lines are two copy
   leaves (s13.h2Line1 / s13.h2Line2) rendered as two blocks, so the break is
   copy and never a measure accident.  Archivo Black at the top of the .t-h2
   clamp (3rem = 48px at >= 1433px), letter-spacing -.022em:
       "tus propios creativos."  ~= 12.3em  = 590px at 48px
   The sheet's inner width at 1440 is 720 - 2*34.6 = 650px, so the longer line
   clears by 60px; at 1280 the H2 is 42.9px (3.35vw) and the line is 528px in
   658px of inner width; at 1024 it is 34.3px and 422px.  The break never moves.

   Vertical rhythm.  --gap-section top and bottom (108px at 1440), --sp-6 (32px)
   between the sheet and the coral card, and the note is pulled 2px UNDER the
   card's bottom lip so the lower pin can straddle the join exactly as the comp
   does.  No viewport-height units anywhere: the section is as tall as its
   content (634px at 1440).

   Props.  Two only, at the outer edges, far from every line of type: the tape
   roll on the left and the hang tag on the right, both partly cut by the
   section edge.  The cut is why .s-13 clips on the x axis (see below).
   Measured clearance between the nearer prop edge and the sheet:
       900 -> 24px   1024 -> 35px   1200 -> 126px   1440 -> 183px   1920 -> 672px
   ========================================================================= */

.s-13{
  position:relative;
  /* the props hang past both edges; `clip` (not `hidden`) keeps the section
     out of the page's scrollable overflow without turning it into a scroll
     container, and leaves the y axis visible so nothing shadows off. */
  overflow-x:clip;
  padding:var(--gap-section) var(--desk-pad);
}

/* ---------- the centred stack -------------------------------------------- */
.s-13 .s-13-stack{
  position:relative;
  z-index:var(--z-paper);          /* over the props, which sit at z-index 0 */
  display:flex;
  flex-direction:column;
  align-items:center;
  max-width:var(--content-max);
  margin:0 auto;
}

/* The two reveal groups are wrappers, not the objects themselves, so that the
   coral card and the note tucked under it settle as ONE object. (The reveal's
   end state used to erase a child's --rot and hover lift; MATERIALS.md section
   11 fixed that, so the wrappers are now only about grouping.) */
.s-13 .s-13-head,
.s-13 .s-13-offer{position:relative;display:flex;flex-direction:column;align-items:center;width:100%}
.s-13 .s-13-offer{margin-top:var(--sp-6)}

/* ---------- the sheet: H2 + paragraph ------------------------------------ */
.s-13 .s-13-sheet{
  width:min(720px,100%);
  text-align:center;
}
.s-13 .s-13-h2 span{display:block}
.s-13 .s-13-sub{
  margin:var(--gap-row) auto 0;
  max-width:58ch;                  /* 3 lines of the 170-character leaf */
  color:var(--ink-soft);           /* 6.97:1 on paper: second voice, not a shout */
}
/* two pins, per the world brief: a 720px sheet held by one pin would read as
   about to swing off the desk. */
.s-13 .s-13-pin-a{--px:12%;--py:0%;--pr:-16deg}
.s-13 .s-13-pin-b{--px:88%;--py:0%;--pr:13deg}

/* ---------- the coral CTA card ------------------------------------------- */
/* Size, padding and the lifted corner are the material's; the section only
   says how wide it is and where its pins go, so the lift and the press are
   byte-identical to the hero's. */
.s-13 .s-13-cta{
  width:min(580px,100%);
  font-size:clamp(1rem,4.6vw,1.95rem);
  z-index:var(--z-lift);           /* the card, its shadow and both pins sit
                                      over the note tucked beneath it */
}
.s-13 .s-13-pin-top{--px:50%;--py:0%;--pr:-9deg}
.s-13 .s-13-pin-bottom{--px:50%;--py:100%;--pr:14deg}

/* ---------- the PREVENTA badge ------------------------------------------- */
.s-13 .s-13-badge{
  /* a SIBLING of the card, not a child of it: the harness reads the CTA's
     textContent against copy.json's one CTA label, and a stamp inside the
     anchor appends its own word to it (and to the link's accessible name).
     .s-13-offer's top edge IS the card's top edge, and the card is centred in
     it at min(580px,100%), so half that width places the badge on the corner
     at every viewport. */
  position:absolute;
  top:calc(-1 * var(--sp-3));
  left:calc(50% - min(290px, 50%) - var(--sp-2));
  padding:clamp(4px,.42vw,6px) clamp(8px,.85vw,12px);
  --stamp-rot:-5deg;
  color:var(--paper);
  border-color:var(--paper);
  z-index:var(--z-pin);
}

/* ---------- the offer note ----------------------------------------------- */
/* .tag is not in the materials' transform list (it is normally pinned on
     felt), so the tilt is declared here. */
.s-13 .s-13-note{
  margin-top:-2px;                 /* tucked under the card's bottom lip */
  width:min(410px,100%);           /* 71% of the card, as the comp has it */
  white-space:nowrap;
  transform:rotate(var(--rot,0deg));
}

/* ---------- the seven-day guarantee -------------------------------------- */
/* The offer's promise, so it sits with the offer and not with the section: it
   is inside the same reveal wrapper as the card and the note and lands with
   them as one object. */
.s-13 .s-13-guarantee{
  margin-top:var(--sp-4);
  width:min(410px,100%);
  text-align:center;
}
.s-13 .s-13-pin-guarantee{--px:50%;--py:0%;--pr:-17deg}

/* ---------- the two desk props ------------------------------------------- */
/* Each prop is anchored to whichever is further out: "just clear of the
   720px sheet" or "hanging off the section edge". max() picks the outer one,
   so at >= 1180px they are cut by the edge the way the comp has them, and
   between 900 and 1180 they slide outwards instead of creeping under the
   type. The sheet's half-width is 360px, so 384px leaves 24px of air. */
.s-13 .s-13-tape{
  --prop-w:clamp(160px,14.5vw,248px);
  --rot:-9deg;
  right:max(calc(50% + 384px), calc(100% - var(--prop-w) + var(--sp-6)));
  top:12%;
}
.s-13 .s-13-hangtag{
  --prop-w:clamp(130px,11.5vw,196px);
  --rot:7deg;
  left:max(calc(50% + 384px), calc(100% - var(--prop-w) + var(--sp-5)));
  top:32%;
}

/* ============================================================================
   MOTION.  This file declares none: the section is the last ask on the page
   and must not fidget, so both interactions are the frozen materials'.
   - Reveal: two [data-reveal] wrappers, --i 0 then 1.  The sheet settles, then
     the whole offer (card + its note, as one object) settles 70ms later, so
     the promise arrives just before the door it opens.  The materials' reveal
     end state now resolves to translateY(--lift) scale(--press) rotate(--rot),
     so the tilt and the hover lift survive it and this file needs no override.
   - Hover / press: .cta:hover lifts 3px and :active flattens and scales to
     .985, from materials.css, identical to the hero's card.
   ========================================================================= */

/* ============================================================================
   MOBILE  < 900px.  The same stack, full width, declared explicitly.
   390: --desk-pad resolves to 12px, so the objects are 366px wide; the props
   are removed by the material; the note may wrap instead of overflowing; every
   tilt is already under 1deg; the coral card measures 366x49, clear of 44.
   ========================================================================= */
@media (max-width: 899px){
  .s-13{padding:var(--gap-section) var(--desk-pad)}

  .s-13 .s-13-sheet{width:100%}
  .s-13 .s-13-sub{max-width:none}

  .s-13 .s-13-offer{margin-top:var(--sp-5)}

  /* the card, the note and the guarantee are min(...,100%) at every width, so
     they are already full width here: only the note's one-line promise has to
     be given up. */
  .s-13 .s-13-note{white-space:normal}
  .s-13 .s-13-badge{
    top:calc(-1 * var(--sp-2));
    left:calc(50% - min(290px, 50%) - var(--sp-1));
  }

  .s-13 .s-13-pin-a{--px:14%}
  .s-13 .s-13-pin-b{--px:86%}
}