/* ============================================================================
   08 · Dentro de tu academia  ·  family "card-box"
   ----------------------------------------------------------------------------
   GEOMETRY (desktop >= 900px)

     grid   min(1200px, 100%), columns 36% / 1fr, gap clamp(24px,3.4vw,56px)
            1440 -> left 432, gap 49, right 719 (sheet measure 639)
     Column 1 is the box, column 2 the sheet with the first-session card under
     it. The sheet is FIRST in the DOM (so the section's h2 precedes every h3,
     and the phone leads with the headline) and is placed by grid area, as are
     the box and the card.
     The right column sets the split: the h2's second line, "recursos de
     producción.", is 12.6em of Archivo Black = 605px at the capped 48px size,
     so a narrower sheet would break the headline over three lines. The h2 is
     ONE string with a max-width in em (the hero's trick), so the break falls
     after "y" at every viewport.

   THE BOX.  --lid-h and --box-front are LENGTHS here, not the material's
   percentages: the well the cards stand in has to be measured from the top of
   the box (a fixed lid) and from the bottom (a fixed front panel), while the
   box itself takes its height from the cards. A percentage front panel grows
   with the box and would swallow the front card's face.

     --lid-h       clamp(84px,8.4vw,120px)   120 at 1440, so padding-top 134
     --box-front   clamp(44px,4vw,56px)       56 at 1440
     --stack       58px between two card top edges at 1440, 78px under 1200px
     tab           height 24px, x = 10px + n * 5% of the card

   THE FAN IS OPEN, so nothing needs JS or hover to be read: the band under
   each tab is --stack tall and carries that card's one body line
   (12px of card padding + one 18px line = 30px, and the next card's tab only
   reaches 34px into the band). Under 1200px the cards are narrow enough that
   the longest line takes two lines, so --stack grows to fit them. The front
   card shows its whole face, and card one keeps the longer paragraph that its
   pull reveals. There is no second list of the same six lines anywhere.
   ========================================================================= */

.s-08{
  position:relative;
  padding:var(--gap-section) var(--desk-pad);
}

.s-08 .s08-grid{
  position:relative;
  width:min(1200px, 100%);
  margin:0 auto;
  display:grid;
  column-gap:var(--gap-object);
  row-gap:var(--gap-row);
}

/* ---------- the box ------------------------------------------------------ */
.s-08 .s08-box{
  --lid-h:clamp(84px, 8.4vw, 120px);
  --box-front:clamp(44px, 4vw, 56px);
  --stack:58px;
}

.s-08 .s08-card{
  width:100%;
  border:0;
  text-align:left;
  cursor:pointer;
  --tab-h:24px;
  --tab-x:calc(10px + var(--n, 0) * 5%);
  /* a fixed px step puts the sixth tab off the card's right edge once the
     column is under ~1100px wide: the tab itself is ~185px of tracked caps at
     every size, so the step has to scale with the card. */
  padding-top:12px;
}
.s-08 .s08-face{display:block}
/* card one's longer paragraph: below the band, so the pull reveals it */
.s-08 .s08-more{display:block;margin-top:calc(var(--stack, 0px) - 26px);color:var(--ink-soft)}

/* The contact shadow between two cards in the deck. Paper stacked this way
   needs the card in FRONT to darken the band of the card behind it, and a
   material cannot know it is in a stack: every card paints a 12px gradient
   just above its own top edge, which lands on the card behind (this card
   paints later, so it always wins). The first card has nothing behind it. */
.s-08 .s08-card:nth-child(n+2)::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-12px;
  height:12px;
  background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.20));
  pointer-events:none;
}

/* pressed stays up, but inside the box: --z-float would lift the card over the
   box's own front panel and show the padding the panel is there to hide. */
.s-08 .cardbox .card-tabbed[aria-pressed="true"]{--pull:-38px;z-index:var(--z-lift)}
.s-08 .cardbox .card-tabbed.is-active{z-index:var(--z-lift)}

/* ---------- the sheet ---------------------------------------------------- */
.s-08 .s08-sheet{padding:clamp(18px, 2.2vw, 32px) clamp(18px, 2.4vw, 40px)}
.s-08 .s08-h2{max-width:13.2em}
.s-08 .s08-sub{
  margin-top:var(--sp-4);
  color:var(--ink-soft);
}
.s-08 .s08-updates{margin-top:var(--sp-5)}
.s-08 .s08-uph3{margin-top:var(--sp-2)}
.s-08 .s08-upbody{
  margin-top:var(--sp-3);
  color:var(--ink-soft);
}
.s-08 .s08-lifetag{
  display:inline-block;
  margin-top:var(--sp-4);
  padding-left:var(--sp-6);
}

/* the four counts: slim kraft hang tags in ONE row, each pinned through its
   own eyelet (the material punches it at the left for a tag on a string; here
   the tag hangs from a pin, so the hole moves to the top centre). Each tag is
   its own claim, so it carries exactly one EJEMPLO stamp, parked top right by
   the material with 38px of head room before the count starts. */
.s-08 .s08-counts{
  list-style:none;
  margin:var(--sp-5) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:var(--sp-3);
  align-items:stretch;
  margin-inline:calc(-1 * clamp(10px, 1.6vw, 28px));
}
.s-08 .s08-count{
  padding:38px 12px 14px;
  text-align:center;
}
.s-08 .s08-count.is-punched::before{
  left:50%;
  top:11px;
  transform:translate(-50%, 0);
}
.s-08 .s08-countn{
  display:block;
  font-weight:900;
  color:var(--kraft-ink);
}
.s-08 .s08-countb{
  display:block;
  margin-top:var(--sp-2);
  text-transform:none;
  letter-spacing:0;
  color:var(--kraft-ink);
}

/* ---------- the first session ------------------------------------------- */
.s-08 .s08-firsth3{margin-top:var(--sp-1);text-wrap:balance}
.s-08 .s08-dur{margin-top:var(--sp-3)}
.s-08 .s08-durn{font-weight:900}
.s-08 .s08-durnote{color:var(--ink-soft)}
.s-08 .s08-steps{
  list-style:none;
  margin:var(--sp-4) 0 0;
  padding:0;
  display:grid;
  gap:var(--sp-3);
}
.s-08 .s08-steps li{
  display:grid;
  grid-template-columns:18px minmax(0, 1fr);
  gap:var(--sp-3);
}
/* the checklist box is drawn, never a form control */
.s-08 .s08-steps li::before{
  content:"";
  width:18px;
  height:18px;
  margin-top:2px;
  border:1.5px solid var(--ink-soft);
  border-radius:2px;
}
.s-08 .s08-stept{font-weight:900}
.s-08 .s08-stepb{color:var(--ink-soft)}

/* ---------- desk props (two, outer edges, never over type) -------------- */
.s-08 .s08-prop-kraft,
.s-08 .s08-prop-tag{display:none}
@media (min-width: 1400px){
  .s-08 .s08-prop-kraft{
    display:block;
    left:16px;
    bottom:calc(var(--gap-section) - 10px);
    --prop-w:150px;
    --rot:5deg;
  }
  .s-08 .s08-prop-tag{
    display:block;
    right:18px;
    top:calc(var(--gap-section) - 18px);
    --prop-w:100px;
    --rot:-11deg;
  }
}

/* ============================================================================
   DESKTOP composition, >= 900px only (the materials' own mobile rules turn the
   box into a column, and this file loads after them).
   ========================================================================= */
@media (min-width: 900px){
  .s-08 .s08-grid{
    grid-template-columns:36% minmax(0, 1fr);
    align-items:start;
  }
  .s-08 .s08-box{grid-area:1 / 1}
  .s-08 .s08-sheet{grid-area:1 / 2}
  .s-08 .s08-first{grid-area:2 / 2}

  /* the fan: every card in the same grid cell, offset down by --stack and its
     tab right by 5%, so the deck reads back to front, top to bottom. */
  .s-08 .cardbox > .cardbox-cards{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    align-items:start;
  }
  .s-08 .cardbox > .cardbox-cards > .s08-card{
    grid-area:1 / 1;
    margin-top:calc(var(--n, 0) * var(--stack));
  }
  /* every card must be TALLER than --stack or the deck stops overlapping and
     the box shows kraft (and card one's longer text) between the cards. */
  .s-08 .cardbox > .cardbox-cards > .s08-card{padding-bottom:34px}
  .s-08 .s08-card:nth-child(1){--n:0;--i:1}
  .s-08 .s08-card:nth-child(2){--n:1;--i:2}
  .s-08 .s08-card:nth-child(3){--n:2;--i:3}
  .s-08 .s08-card:nth-child(4){--n:3;--i:4}
  .s-08 .s08-card:nth-child(5){--n:4;--i:5}
  /* the front card shows its whole face; the 56px under it is what the box's
     front panel hides, and what makes the box tall enough for that face to
     clear the panel. */
  .s-08 .cardbox > .cardbox-cards > .s08-card:nth-child(6){padding-bottom:56px}
  .s-08 .s08-card:nth-child(6){--n:5;--i:6}
}

/* between 900 and 1200 the cards are narrow enough that the longest body line
   wraps to two, so the band has to be tall enough to show both. */
@media (min-width: 900px) and (max-width: 1199px){
  .s-08 .s08-box{--stack:78px}
}

/* ============================================================================
   MOTION.  Two sentences, one per interaction.
   1. The six cards rise into the box in reading order, 45ms apart, because the
      box is the promise and the cards are what is in it.
   2. Pointing at a card lifts it 24px out of the box and presses keep it out,
      which is how you read a card in a real index box (the material owns both;
      this file only maps the pressed state).
   Neither variant fades: a card at half opacity lets the card behind it read
   through, which on a deck of six overlapping cards reads as a rendering
   fault, and paper on a desk is placed, not faded in. For the same reason the
   pin does not pop in after its paper has already landed. Both end states
   repeat the materials' own transform, so a revealed object keeps its tilt,
   its hover lift and (in the box) its pull.
   ========================================================================= */
@media (prefers-reduced-motion: no-preference){
  html.reveal-ready .s-08 [data-reveal="lay"]{
    opacity:1;
    transform:translateY(14px) rotate(var(--rot, 0deg));
  }
  html.reveal-ready .s-08 [data-reveal="lay"].is-in{
    transform:translateY(var(--lift, 0px)) scale(var(--press, 1)) rotate(var(--rot, 0deg));
    transition:transform 520ms cubic-bezier(.2,.8,.25,1) calc(var(--i,0) * 70ms);
  }
  html.reveal-ready .s-08 [data-reveal="rise"]{
    opacity:1;
    transform:translateY(30px) rotate(var(--rot, 0deg));
  }
  html.reveal-ready .s-08 [data-reveal="rise"].is-in{
    transform:translateY(var(--pull, 0px)) rotate(var(--rot, 0deg));
    animation:s08rise 420ms cubic-bezier(.2,.8,.25,1) backwards;
    animation-delay:calc(var(--i,0) * 45ms);
  }
  @keyframes s08rise{
    from{transform:translateY(30px) rotate(var(--rot, 0deg))}
    to  {transform:translateY(var(--pull, 0px)) rotate(var(--rot, 0deg))}
  }
  html.reveal-ready .s-08 [data-reveal] .pin,
  html.reveal-ready .s-08 [data-reveal].is-in .pin{animation:none}
}

/* ============================================================================
   MOBILE  < 900px.  The box becomes a vertical list of tabbed cards (every
   face visible), the counts wrap to 2x2 and both columns become one. 12px desk
   margin, nothing wider than the viewport, no tilt over 1 degree.
   ========================================================================= */
@media (max-width: 899px){
  .s-08 .s08-grid{gap:var(--gap-row)}

  .s-08 .s08-box{
    --lid-h:84px;
    --box-front:52px;
    --stack:0px;
  }
  .s-08 .cardbox > .cardbox-cards{gap:34px}
  .s-08 .s08-card{
    --tab-x:14px;
    margin-top:0;
    padding-top:14px;
  }
  /* the whole card is open here, and card one's longer paragraph opens with
     the same sentence as its band line, so the band line stands down. */
  .s-08 .s08-card:first-child .s08-face{display:none}
  .s-08 .s08-more{margin-top:0}
  .s-08 .s08-card:last-child{padding-bottom:44px}

  /* the pull is off below 900px (the material switches it off for hover and
     for .is-active; the pressed state has to follow it) */
  .s-08 .cardbox .card-tabbed[aria-pressed="true"]{--pull:0px}

  .s-08 .s08-h2{text-wrap:balance}
  .s-08 .s08-sub,
  .s-08 .s08-upbody{margin-top:var(--sp-3)}
  .s-08 .s08-counts{grid-template-columns:repeat(2, minmax(0, 1fr));gap:var(--sp-3)}
  .s-08 .s08-count{padding:34px 10px 12px}
  .s-08 .s08-lifetag{padding-left:var(--sp-7)}
  .s-08 .s08-steps{gap:var(--sp-3)}
  .s-08 .s08-sheet .pin-a{--px:6%}
  .s-08 .s08-sheet .pin-b{--px:94%}
}