/* ============================================================================
   10 · Los packs · family "folders-pricing"  ·  id="precio"
   ----------------------------------------------------------------------------
   THE COMPOSITION.  One product now, sold as a disclosed pre-sale, so the two
   closed folders of the mockup are gone: the open kraft dossier keeps the left
   at about 59% and the PRE-SALE column takes the right, top-aligned with the
   hanging price tag so the terms read beside the number they qualify. The
   headline sheet sits above both, because the h2 belongs to the section.

   GEOMETRY (desktop >= 900px), all of it a share of the 1200px desk column.
       desk column = min(1200px, 100%), padding-inline --desk-pad
       1440 -> 1200 wide, inner 1125     1280 -> 1247 wide, inner 1180
       grid        = 1.52fr | 1fr, column-gap --gap-object
       1440: gap 56  left 645  right 424
       1280: gap 50  left 682  right 448
       left  645 -> folder inner 645-2*31.7 = 582 -> sheet inner 582-2*34.6 = 513
       right 424 -> folder inner 424-2*31.7 = 361
   513px of measure carries the 7-item check list in two 239px columns (about
   26ch each, 2 to 4 lines an item). The offer head keeps clear of the hanging
   price tag with padding-right, and that padding alone sets its measure: a
   max-width on top of it would subtract twice and break the headline to four
   lines (it did).

   (THE CLOSED FOLDERS are gone with the single courses; the note below is kept
   for the manager's record of why --flap-h was pinned while they existed.)
   THE CLOSED FOLDERS, and why they are still readable with no JS.
   `.folder.is-closed` paints its cover over the bottom --flap-h of the folder.
   The default 62% would bury the description and the button, and the visitor on
   a phone would never see either. So --flap-h is pinned to a fixed bottom LIP
   (clamp(52px,5vw,70px)) and .folder-inner reserves that much padding under
   its content: everything the visitor has to read or press is always in flow
   above the lip, at every width, with JS off and with reduced motion. The 12deg
   lift on hover / focus-within is then a pure flourish on the lip, which is
   exactly what it should be for an object whose content is not a secret.

   STAMP BUDGET.  Five leaves are still claims: the two price placeholders and
   the three counted check-list lines. Each stamps itself INLINE, so the coral
   always sits beside the figure it marks; there is no block claim left in this
   section.

   MOTION.  One interaction (plus materials' own 12px settle on the five
   objects, in reading order).
   1. The price tags swing once on entry (data-reveal="swing"): a paper tag on a
      cord that has just been hung would swing and settle, and it is the one
      thing that tells the eye "this is the price" without adding a colour.
   The three accordions are native <details name="pack">, so one-open-at-a-time
   and the keyboard cost nothing and work with no script at all.
   ========================================================================= */

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

.s-10 .s10-desk{
  width:min(var(--content-max),100%);
  margin-inline:auto;
  padding-inline:var(--desk-pad);
}

/* ---------- the section headline ---------------------------------------- */
.s-10 .s10-slot-head{
  position:relative;
  z-index:var(--z-paper);
  margin-bottom:var(--gap-object);
}
.s-10 .s10-title{padding-block:clamp(16px,1.9vw,28px)}
/* Two lines, no orphan, at 1440 and at 1024. The h2 is one string per leaf, so
   the break is made by the measure: 13.8em is 662px at the 48px cap and 473px
   at 1024's 34.3px, and the headline is 1250em/893px long, i.e. 1.89 lines at
   both. text-wrap:balance then evens them so no single word is left alone. */
.s-10 .s10-title{width:min(100%,940px)}
.s-10 .s10-h2{max-width:13.8em;text-wrap:balance}
.s-10 .s10-h2 span{display:inline}

/* ---------- the two-column desk ----------------------------------------- */
/* padding-top is the room the folder tabs need: a .folder-tab is absolutely
   positioned ABOVE its folder, so without it the Pack's tab would crowd the
   headline sheet. Each stacked folder repeats the trick with a margin. */
.s-10 .s10-grid{
  display:grid;
  grid-template-columns:minmax(0,1.46fr) minmax(0,1fr);
  column-gap:var(--gap-object);
  align-items:start;
  padding-top:clamp(20px,2.2vw,34px);
}
.s-10 .s10-aside{
  display:flex;flex-direction:column;
  gap:var(--gap-object);
}
.s-10 .s10-slot{position:relative}

/* ---------- folder thickness: the back cover ---------------------------- */
/* 10.6. A dossier is two covers with paper between them, so each folder sits in
   a wrapper whose ::before is the BACK cover in --kraft-deep: it stands 5px
   above the front cover's top edge (visible either side of the tab, which
   paints over it), and peeks 8px past the right and bottom edges with its own
   contact shadow. The wrapper also carries the tilt, so the back cover turns
   with the folder; --rot no longer inherits, and the folder itself keeps its
   own transform free for the material's hover --lift. */
.s-10 .s10-fold{
  position:relative;
  transform:rotate(var(--rot,0deg));
}
.s-10 .s10-fold::before{
  content:"";
  position:absolute;
  left:var(--back-in,7px);
  right:calc(-1 * var(--back-out,8px));
  top:calc(-1 * var(--back-up,5px));
  bottom:calc(-1 * var(--back-out,8px));
  border-radius:2px;
  background-color:var(--kraft-deep);
  box-shadow:
    inset 0 0 0 1px var(--kraft-edge),
    inset 0 2px 0 rgba(255,255,255,.10),
    0 1px 0 rgba(0,0,0,.28),
    0 14px 24px rgba(0,0,0,.34);
}
.s-10 .s10-fold-pack{--rot:-.8deg;--back-in:10px;--back-out:10px;--back-up:6px}

/* ---------- the open Pack Completo folder -------------------------------- */
.s-10 .s10-pack{--tab-h:30px}
/* 10.4: the section's ONE tracked-caps line is the [data-qa=eyebrow]. These two
   are plain small text (the copy is typed in caps, but no tracking and no
   uppercase transform), so they read as labels on their object, not as kickers
   competing with the eyebrow. The folder tab keeps its tracking: it names the
   object it sits on. */
.s-10 .s10-pack-sub{
  margin-bottom:var(--sp-3);
  letter-spacing:normal;
  color:var(--kraft-ink);
}
.s-10 .s10-pack-sheet{position:relative}

/* the pre-sale badge. .stamp-block keeps its inked look on kraft, where coral
   measures about 2:1, so it is stamped on the PAPER (4.6:1) at the sheet's top
   left, reading across the corner nearest the folder tab. */
.s-10 .s10-badge{
  position:absolute;
  left:clamp(10px,1.4vw,22px);
  top:clamp(8px,1vw,14px);
  --stamp-rot:-3deg;
  z-index:var(--z-tab);
}

/* the hanging price tag: pin, cord, tag. The cord is the page's red string
   colour and 2px wide, the same cord the hero's board draws. */
.s-10 .s10-hang{
  position:absolute;
  z-index:var(--z-tab);
  --cord:clamp(16px,1.7vw,26px);
}
.s-10 .s10-hang::before{
  content:"";
  position:absolute;left:50%;top:0;
  width:2px;height:calc(var(--cord) + 4px);
  transform:translateX(-50%);
  background:var(--string);
  border-radius:1px;
}
.s-10 .s10-hang > .pin{z-index:var(--z-pin)}
/* The tag is given a WIDTH, not max-content: the price sets on one line and the
   inline EJEMPLO stamp wraps under it, which is the mockup's tag exactly. The
   Pack's tag is a .t-h3 and the two singles' are a .t-body, so the offer the
   section is selling carries the bigger number. */
/* --rot lives here, not in the markup: an inline custom property beats a
   stylesheet rule, so a tag tilted 2.3deg inline could not be brought back
   under the 1deg mobile ceiling. Everything tilted 1deg or less stays inline. */
.s-10 .s10-price{
  --rot:2deg;
  width:clamp(158px,14.1vw,202px);
  margin-top:var(--cord);
  padding:clamp(9px,1vw,14px) clamp(11px,1.2vw,16px);
  transform:rotate(var(--rot,0deg));   /* .tag has no material transform */
  transform-origin:50% calc(-1 * var(--cord));
}
.s-10 .s10-price > span{display:block;line-height:1.15;color:var(--ink)}

.s-10 .s10-hang-pack{top:calc(-1 * clamp(10px,1.1vw,16px));right:clamp(6px,1vw,18px)}

/* the offer head. The top block keeps clear of the hanging tag. */
.s-10 .s10-formats{
  margin-top:var(--sp-5);
  padding-right:clamp(150px,14vw,200px);
  font-weight:700;
  letter-spacing:normal;
  color:var(--ink-soft);
}
.s-10 .s10-pack-h3{
  margin-top:var(--sp-3);
  padding-right:clamp(150px,14vw,200px);
}
.s-10 .s10-pack-h3 span{display:block}

/* 10.1 / 10.2: every price and count stamps itself inline, so a reader sees
   coral beside the figure it marks and no block needs to reserve a corner. */
/* ---------- the check list: seven items, two columns, CSS check marks ---- */
/* Ink check marks, not coral: coral on this page belongs to CTAs, the cord and
   the stamps, and seven coral ticks would read as seven small CTAs. */
.s-10 .s10-check{
  margin:var(--gap-row) 0 0;
  padding:0;
  list-style:none;
  columns:2;
  column-gap:clamp(20px,2.4vw,36px);
}
.s-10 .s10-check > li{
  position:relative;
  break-inside:avoid;
  margin-bottom:var(--sp-3);
  padding-left:1.8em;
  color:var(--ink);
}
.s-10 .s10-check > li::before{
  content:"";
  position:absolute;left:.25em;top:.42em;
  width:.5em;height:.26em;
  border-left:2px solid var(--ink);
  border-bottom:2px solid var(--ink);
  transform:rotate(-45deg);
}

/* two 239px columns need a 513px sheet: below that the items break to four and
   five lines each and the list stops reading as a list. */
@media (max-width: 1099px){
  .s-10 .s10-check{columns:1}
}

/* ---------- the buy block ----------------------------------------------- */
.s-10 .s10-buy{
  margin-top:var(--gap-row);
  display:flex;align-items:center;
  flex-wrap:wrap;
  gap:var(--sp-4);
}
/* min-height, not padding: at 390 the material's .btn is 39px tall and every
   [data-qa^=cta] has to clear 44x44. */
.s-10 .s10-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;
}
.s-10 .s10-repeat{font-weight:900}
.s-10 .s10-ctanote{margin-top:var(--sp-3);color:var(--ink-soft)}
.s-10 .s10-pay{margin-top:var(--sp-1);color:var(--ink-soft)}

/* ---------- the three accordions ---------------------------------------- */
.s-10 .s10-acc{
  margin-top:var(--gap-row);
  border-top:1px solid var(--paper-edge);
}
.s-10 .s10-det{border-bottom:1px solid var(--paper-edge)}
.s-10 .s10-sum{
  padding:clamp(12px,1.3vw,17px) 0;
  font-weight:700;
}
.s-10 .s10-ans{padding:0 0 clamp(14px,1.5vw,20px)}
.s-10 .s10-ans > .t-small{color:var(--ink-soft)}
.s-10 .s10-ans > .t-small + .t-small{margin-top:var(--sp-2)}
.s-10 .s10-ans-sub{margin-bottom:var(--sp-3)}
.s-10 .s10-temario{
  margin:0;padding:0;
  list-style:none;
  display:flex;flex-direction:column;
  gap:var(--sp-2);
}
.s-10 .s10-temario > li{
  position:relative;
  padding-left:1.1em;
  color:var(--ink-soft);
}
.s-10 .s10-temario > li::before{
  content:"";
  position:absolute;left:0;top:.62em;
  width:5px;height:1.5px;
  background:var(--ink-soft);
}

/* ---------- the small print, demoted ----------------------------------- */
/* 10.5: this is policy copy, not the pitch. It sits after the accordions under
   a hairline, at .t-small in --ink-soft on a 58ch measure with tight leading
   between paragraphs, so the offer head, price, check list and button above it
   read as one block the eye can take in at a glance. */
.s-10 .s10-fine{max-width:100%}
.s-10 .s10-fine > .t-small{color:var(--ink-soft)}
.s-10 .s10-fine > .t-small + .t-small{margin-top:var(--sp-1)}
.s-10 .s10-closing{color:var(--ink)}

/* ---------- the pre-sale column ----------------------------------------- */
/* The offer is a disclosed pre-sale, so what the buyer is actually agreeing to
   sits beside the price rather than under it: the terms card is top-aligned
   with the hanging price tag, the guarantee gets a card of its own because it
   is the offer's promise and not a footnote, and the legal note joins the other
   fine print at the foot of the column. */
.s-10 .s10-presale{--rot:.5deg}
.s-10 .s10-presale-line{color:var(--ink)}
.s-10 .s10-date{
  display:block;
  width:max-content;max-width:100%;
  margin:var(--gap-row) 0;
  padding:clamp(9px,1vw,13px) clamp(16px,1.8vw,26px);
  transform:rotate(var(--rot,0deg));   /* .tag has no material transform */
  font-variant-numeric:tabular-nums;   /* it will hold a date */
  color:var(--ink);
}
.s-10 .s10-presale-note{margin-top:var(--sp-2);color:var(--ink-soft)}

/* the guarantee: its own card, one pin, the biggest type in this column */
.s-10 .s10-guarantee{
  padding:clamp(18px,2vw,28px) clamp(16px,1.9vw,26px) clamp(20px,2.2vw,30px);
}
.s-10 .s10-guarantee-t{max-width:26ch}

/* ---------- desk props: outer edges only -------------------------------- */
.s-10 .s10-prop-tape{
  --prop-w:clamp(110px,8.8vw,160px);
  --rot:11deg;
  top:calc(var(--gap-section) * .3);
  right:calc(50% + var(--content-max) / 2 - var(--prop-w) * .3);
}
.s-10 .s10-prop-clip{
  --prop-w:clamp(40px,3.2vw,58px);
  --rot:-24deg;
  bottom:calc(var(--gap-section) * .36);
  left:calc(50% + var(--content-max) / 2 - var(--prop-w) * .3);
}
@media (max-width: 1319px){
  .s-10 .prop{display:none}
}

/* ---------- the "swing" reveal variant ---------------------------------- */
/* The seven objects keep materials' own 12px settle at 70ms, in reading order:
   headline, Pack folder, then the right-hand column top to bottom.

   SWING is the price tags' own. A paper tag just hung from a cord swings once
   and stops, and it is the one thing that says "this is the price" without
   spending the page's single accent colour. Each tag carries the --i of the
   object it hangs in, so it swings as that object lands. Transform and opacity
   only, one overshoot, nothing loops; the rotation resolves to the tag's own
   resting --rot, so reduced motion and no-JS show exactly the same tag.
   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-10 [data-reveal="swing"]:not(.pinned){
    opacity:0;
    transform:rotate(calc(var(--rot,0deg) + 9deg));
  }
  html.reveal-ready .s-10 [data-reveal="swing"]:not(.pinned).is-in{
    opacity:1;
    transform:rotate(var(--rot,0deg));
    transition:
      opacity 300ms cubic-bezier(.2,.8,.25,1) calc(var(--i,0) * 70ms),
      transform 720ms cubic-bezier(.26,1.36,.42,1) calc(var(--i,0) * 70ms);
  }
}

/* ============================================================================
   MOBILE  < 900px.  One column: the headline, the open folder, then the chooser
   tag and the two single courses as full-width cards with their buttons always
   visible (they always were: the cover is a bottom lip, never a lid over the
   content). The check list drops to one column, the price tags stop hanging off
   the corner and sit in flow, and no tilt is larger than 1deg.
   390px: desk column 366px, no horizontal overflow.
   ========================================================================= */
@media (max-width: 899px){
  .s-10 .s10-title{width:100%}
  .s-10 .s10-h2{max-width:none}

  .s-10 .s10-grid{
    display:flex;flex-direction:column;
    gap:var(--gap-object);
  }
  .s-10 .s10-aside{gap:var(--gap-object)}

  /* the tag stops hanging off the sheet's corner: at 366px there is no corner
     to spare, so it becomes the first row of the offer, still on its cord. */
  .s-10 .s10-hang{
    position:relative;
    top:auto;right:auto;left:auto;
    margin:0 0 var(--gap-row);
    width:max-content;
  }
  .s-10 .s10-hang::before{left:22px}
  /* no tilt on a full-width folder: rotating a 2000px-tall object by even
     0.4deg widens its bounding box by 14px a side and pushes the 390 page into
     horizontal scroll. The back cover pulls in to fit the 12px desk margin. */
  .s-10 .s10-fold{--rot:0deg;--back-in:5px;--back-out:5px;--back-up:4px}
  .s-10 .s10-price{--rot:1deg}
  .s-10 .s10-date{--rot:-.8deg}
  .s-10 .s10-presale{--rot:.6deg}
  .s-10 .s10-guarantee{--rot:-.7deg}
  .s-10 .s10-formats,
  .s-10 .s10-pack-h3{padding-right:0}

  .s-10 .s10-check{columns:1}

  .s-10 .s10-buy{gap:var(--sp-3)}
  .s-10 .s10-btn{width:100%;padding-inline:var(--sp-4)}
}