/* ============================================================================
   09 · Crea sin cuotas · family "receipt"
   ----------------------------------------------------------------------------
   THE COMPOSITION.  The voice module was cut from the offer, so the mockup's
   third column is gone and two objects are left: the headline sheet and the
   thermal receipt beside it. They keep the mockup's feel by staying a PAIR on a
   wide desk rather than stretching to fill it: the desk column narrows to
   1060px and centres, which leaves about 190px of oak either side at 1440 for
   the two props and keeps the sheet's measure at four big headline lines.

   GEOMETRY (desktop >= 900px), all of it a share of the 1200px desk column,
   so it only needs proving once.
       desk column   = min(1060px, 100%), padding-inline --desk-pad
       columns       = 1fr | --receipt-w, column-gap clamp(18,2.2vw,34)
       1440: column 1060, inner 985   gap 32  receipt 396  sheet 557
       1024: column 1024, inner 971   gap 23  receipt 316  sheet 632
   Measured in Chrome on the built page (Archivo Black, letter-spacing -.022em,
   avg advance .566em from the hero's own measurements):
       sheet inner 557 - 2*34.6 = 488px = 18ch at 48px, so each headline leaf
       sets in two lines: four lines, 204px of headline.
   Both objects hang from one top line with a 10 to 22px stagger, so the desk
   shows BELOW the shorter one, which is where a prop lies.

   MOTION.  One interaction, no hover: the receipt prints. Each line carries
   data-reveal="line" with a rising --i, 60ms apart, so the thermal head walks
   down the strip in reading order the way a real till prints it. The variant is
   opacity plus a 4px rise and nothing else; the receipt paper itself never
   moves, so the lines appear ON it rather than with it. The sheet keeps
   materials' own 12px settle at 70ms.
   ========================================================================= */

.s-09{
  position:relative;
  padding-block:var(--gap-section);
}

/* --ticket-w is a TRACK, not `auto`: an auto track is sized to its item's
   max-content, and a receipt full of prose has a max-content width of about a
   thousand pixels, so an auto middle column eats both fr tracks. */
.s-09 .s09-desk{
  --ticket-w:clamp(316px,27.5vw,404px);
  --col:1060px;
  width:min(var(--col),100%);
  margin-inline:auto;
  padding-inline:var(--desk-pad);
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--ticket-w);
  column-gap:clamp(18px,2.2vw,34px);
  align-items:start;
}
/* Both hang from one top line, as in the mockup, with a 10 to 22px stagger so
   the tops are not a ruled edge. The desk then shows below the sheet. */
.s-09 .s09-slot-head{margin-top:clamp(10px,1.5vw,22px)}

/* ---------- 1 · the headline sheet -------------------------------------- */
/* data-reveal sits on the slot, never on the .sheet: materials' settle variant
   ends at `transform:none`, which would erase the sheet's own --rot tilt. */
.s-09 .s09-slot-head{position:relative;z-index:var(--z-paper)}
.s-09 .s09-sheet{width:100%}
.s-09 .s09-h2{max-width:17ch}
.s-09 .s09-h2 span{display:block}
.s-09 .s09-sub{
  margin-top:var(--gap-row);
  max-width:38ch;
  color:var(--ink-soft);
}

/* ---------- 2 · the receipt --------------------------------------------- */
.s-09 .s09-slot-ticket{
  position:relative;
  z-index:var(--z-lift);           /* the tallest object, so it paints last */
}
.s-09 .s09-ticket{--receipt-w:var(--ticket-w)}
.s-09 .s09-ticket-pin{z-index:var(--z-pin)}

.s-09 .s09-r-head{
  color:var(--receipt-ink);
  padding-bottom:var(--sp-1);
}
.s-09 .s09-r-h3{
  margin-top:var(--sp-2);
  color:var(--receipt-ink);
}
.s-09 .s09-r-h3 span{display:block;color:var(--receipt-dim)}
.s-09 .s09-r-lead{
  margin-top:var(--sp-3);
  color:var(--receipt-ink);
}

/* the three steps. The ordinal is a CSS counter (01 02 03), never a digit in
   the markup, and it sits in its own gutter so the titles line up. The <li>
   itself carries .t-typed, so the counter inherits the step title's size from
   the scale and this file never declares a font-size. */
.s-09 .s09-steps{
  counter-reset:step;
  list-style:none;
  margin:0;padding:0;
  display:flex;flex-direction:column;
  gap:var(--gap-row);
}
.s-09 .s09-step{
  counter-increment:step;
  position:relative;
  padding-left:3em;
}
.s-09 .s09-step::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;left:0;top:0;
  font-weight:700;
  letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
  color:var(--receipt-dim);
}
.s-09 .s09-step-t{color:var(--receipt-ink)}
.s-09 .s09-step-x{margin-top:var(--sp-1);color:var(--receipt-ink)}
.s-09 .s09-step-b{margin-top:var(--sp-1)}

/* The recharge block holds three reference prices in five lines. A corner stamp
   marked the heading and left "$0,30" and "$1" bare, so the ONE stamp the block
   carries is laid diagonally ACROSS the amounts instead: coral then falls within
   about 40px of every figure, the way the mockup stamps the receipt. Layout
   only (position, origin, transform); the material is untouched, and the block
   is delimited by the receipt rules above the label and below the last line. */
.s-09 .s09-recharge{padding-block:var(--sp-2)}
.s-09 .s09-recharge > .stamp:last-child{
  left:50%;right:auto;top:50%;
  transform-origin:50% 50%;
  transform:translate(-50%,-50%) rotate(-8deg) scale(1.95);
}
.s-09 .s09-r-label{color:var(--receipt-ink)}
.s-09 .s09-r-amount{
  margin-top:0;
  font-weight:700;
  color:var(--receipt-ink);
}
.s-09 .s09-r-note{margin-top:var(--sp-1)}
.s-09 .s09-r-cost,
.s-09 .s09-r-total{
  margin-top:var(--sp-2);
  color:var(--receipt-ink);
}
.s-09 .s09-r-own{color:var(--receipt-ink)}

/* ---------- desk props: outer edges only, never over anything read ------- */
/* Anchored to the desk column's own edge, so they sit in the oak margin at
   every width and are switched off when there is no margin to sit in. The
   kraft stack takes the edge the voice module used to occupy. */
.s-09 .s09-prop-tape{
  --prop-w:clamp(112px,9vw,166px);
  --rot:-9deg;
  top:calc(var(--gap-section) * .34);
  right:calc(50% + 530px - var(--prop-w) * .34);
}
.s-09 .s09-prop-kraft{
  --prop-w:clamp(120px,9.6vw,178px);
  --rot:7deg;
  bottom:calc(var(--gap-section) * .34);
  left:calc(50% + 530px + 16px);
}
@media (max-width: 1180px){
  .s-09 .prop{display:none}
}

/* ---------- the "line" reveal variant ----------------------------------- */
/* The sheet keeps materials' own 12px settle at 70ms, so this section enters
   like every other one.

   LINE is the receipt's own: opacity plus a 4px rise, nothing else, 60ms apart
   in reading order, so the thermal head walks down the strip. 220ms a line, so
   each line lands crisply instead of dissolving in; --i runs 0..7 and the whole
   print takes 640ms. Defined at (0,4,1) so it outranks the generic settle at
   equal source order. */
@media (prefers-reduced-motion: no-preference){
  html.reveal-ready .s-09 [data-reveal="line"]:not(.pinned){
    opacity:0;transform:translateY(4px);
  }
  html.reveal-ready .s-09 [data-reveal="line"]:not(.pinned).is-in{
    opacity:1;transform:none;
    transition:
      opacity 220ms cubic-bezier(.2,.8,.25,1) calc(var(--i,0) * 60ms),
      transform 220ms cubic-bezier(.2,.8,.25,1) calc(var(--i,0) * 60ms);
  }
}

/* ============================================================================
   MOBILE  < 900px.  The two columns become one, in reading order: the sheet,
   then the receipt full width under it.
   12px desk margin, tilts down to 1deg or less, props off (materials).
   390px: column = 366px, receipt --receipt-w:100% (materials), no scroller.
   ========================================================================= */
@media (max-width: 899px){
  .s-09 .s09-desk{
    display:flex;flex-direction:column;
    gap:var(--gap-object);
    padding-inline:var(--desk-pad);
  }

  .s-09 .s09-h2{max-width:18ch}
  .s-09 .s09-sub{max-width:none}

  .s-09 .s09-ticket{--receipt-w:100%}
  .s-09 .s09-step{padding-left:2.7em}

  /* every tilt in this section is set inline at 0.6deg or less, which is
     already inside the 1deg mobile ceiling, so nothing needs re-tilting. */
}