/* ============================================================================
   12 · "Lo que aún te puedes estar preguntando."
   Family: card-accordion. A paper strip pinned above, and under it a deck of
   nine index cards, offset down and to the right like a deck squared up by
   hand: each card's top edge carries its question, the open one straightens,
   lifts and comes forward.

   Founder note at gate 1: NO coral rule under the question. Coral on this
   section is the chevron's absence and nothing else; the only accent left is
   the one the materials already own.

   GEOMETRY (desktop >= 900px), measured in Chrome at 1440:
     section    1440 x 839 with every card shut.
     strip      1200 x 95, padding 20 / 44 / 24, two pins at 4% and 96% of its
                own box. The H2 is a .t-h2 span INSIDE the strip: the strip
                material sets its own font-size, so the scale class goes on a
                child rather than being re-declared here. 48.2px Archivo
                Black, one line down to 900px, two balanced lines at 390.
     deck       700 x 612 shut, centred. --deck-step 13px, so card i is inset
                13 * i from the left and every card is 700 - 104 = 596px wide:
                the fan uses the container and never overflows it.
     overlap    --deck-lap is the card's own bottom padding (22px at 1440), so
                the card below always stops at the question's box: the two
                desktop questions that wrap, and every question at 390, can
                never be clipped. A shut card shows a 65px band.
     open card  --rot 0, --lift -4px, z-index --z-float so it paints above the
                cards after it, and both overlaps dropped so neither the
                question above it nor its own answer is ever covered. Nothing
                is clipped and no box has a height: the answers run 3 to 5
                lines and the deck below simply moves down.
     summary    655 x 44 (min-height 44 for the tap target), TOP aligned so
                the deck can overlap deeply without clipping; the chevron
                rides the first line, pushed right by the material's own
                summary flex row. One brass pin on the front card (v12-03).
   390: 390 x 744 shut. The horizontal offset collapses to 0, the strip wraps
        to two balanced lines, cards are 366px wide inside the 12px desk margin
        and the pile overlaps 12px. Props are off (the material hides them).
   ========================================================================= */

.s-12{
  position:relative;
  padding:var(--gap-section) var(--desk-pad);
  --pin-size:clamp(18px,1.85vw,27px);
}

/* ---------- the pinned title strip -------------------------------------- */
.s-12 .s12-strip{
  width:100%;
  max-width:var(--content-max);
  margin:0 auto;
  padding-top:clamp(12px,1.5vw,20px);
  padding-bottom:clamp(14px,1.7vw,24px);
}

/* ---------- the deck ----------------------------------------------------- */
/* Verifier 12: each shut card was showing its whole 65px row, so the deck read
   as a staggered list. The overlap is now deep enough to hide about 45% of
   every card behind the next, and the question survives it because the summary
   is TOP aligned (see below): the band a shut card shows is
   card padding-top + one line + 3px, which is 48px at 1440 and 42px at 1024.
   The deck is also 820px wide now, so the flanks are props, not bare oak. */
.s-12 .s12-deck{
  --deck-step:13px;
  --deck-lap:clamp(29px,2.4vw,33px);
  position:relative;
  width:100%;
  max-width:820px;
  margin:var(--gap-object) auto 0;
}

/* A shut card is 83px tall (17 + 44 + 22): a slightly tighter top padding than
   the material's, so a 38px overlap can hide 46% of the card and still leave
   the question's line box 4px clear of the card below at 1440, 10px at 1024.
   That is the mockup's reveal: about 50px of every card at 1440, 43px at 1024,
   and the tilt is part of the sum (a rotated card's painted top edge sits up
   to 3.7px above its layout box on the side the question is on). */
.s-12 .s12-card{
  padding-top:clamp(12px,1.2vw,17px);
  padding-bottom:clamp(14px,1.5vw,22px);
}

/* A hand-squared pile: the tilt alternates and the left edge jitters a few
   pixels. Both are set on the card itself, never on the deck: MATERIALS.md
   section 11 registered --rot as non-inheriting. The 8px of slack in the width
   absorbs the +6px of jitter, so the pile never leaves its container. */
.s-12 .s12-card{
  --rot:0deg;
  --jit:0px;
  width:calc(100% - 8 * var(--deck-step) - 8px);
  margin-left:calc(var(--i,0) * var(--deck-step) + var(--jit));
}
.s-12 .s12-card:nth-child(1){--rot:-.6deg;--jit:0px}
.s-12 .s12-card:nth-child(2){--rot:.45deg;--jit:5px}
.s-12 .s12-card:nth-child(3){--rot:-.35deg;--jit:-4px}
.s-12 .s12-card:nth-child(4){--rot:.7deg;--jit:3px}
.s-12 .s12-card:nth-child(5){--rot:-.5deg;--jit:-3px}
.s-12 .s12-card:nth-child(6){--rot:.6deg;--jit:6px}
.s-12 .s12-card:nth-child(7){--rot:-.75deg;--jit:-5px}
.s-12 .s12-card:nth-child(8){--rot:.4deg;--jit:4px}
.s-12 .s12-card:nth-child(9){--rot:-.55deg;--jit:0px}
.s-12 .s12-card + .s12-card{margin-top:calc(-1 * var(--deck-lap))}

/* The open card comes out of the deck: it straightens, lifts 4px, paints above
   the cards after it, and drops both overlaps so neither the question above it
   nor the answer inside it is ever covered. --lift and --rot are the two
   custom properties the .card transform already reads, so the material's own
   transition carries the movement and this file writes no transition. */
.s-12 .s12-card[open],
.s-12 .s12-card.is-open{
  --rot:0deg;
  --lift:-4px;
  z-index:var(--z-float);
  margin-top:0;
  margin-bottom:var(--deck-lap);
}

/* ---------- question and answer ----------------------------------------- */
/* summary is already a flex row with the chevron pushed right and the marker
   removed. 44px is the tap target, but the LINE sits at the top of it: that is
   what lets the deck overlap deeply without ever clipping a question, at 1440,
   at 1024 and at 390 (where two of the nine wrap to two lines). The chevron
   rides the first line instead of the box. Focus rings come from the materials
   (paper gets an ink ring since MATERIALS.md section 11). */
.s-12 .s12-q{
  min-height:44px;
  align-items:flex-start;
  padding-right:2px;
}
.s-12 .s12-q .chev{margin-top:clamp(5px,.55vw,8px)}
/* the front card of the pile carries one brass pin, as in the mockup. It
   lives inside the summary, which is the part of a shut <details> that is
   always rendered. */
.s-12 .s12-front > .s12-q > .pin{--px:50%}

.s-12 .s12-a{
  padding-top:clamp(9px,1vw,15px);
  max-width:var(--measure);
}

/* ---------- desk props (decorative, outer edges only) ------------------- */
/* Two is the ceiling (MATERIALS.md section 10), so the kraft stack takes the
   left flank and a hang tag the right one, both clear of the 820px deck and of
   the 1200px strip above it. The hang tag rather than the clothespins because
   02 and 05 already use those. */
.s-12 .s12-prop-kraft{
  left:0;
  top:calc(var(--gap-section) + 146px);
  --prop-w:clamp(130px,13vw,196px);
  --rot:-6deg;
}
.s-12 .s12-prop-tag{
  right:16px;
  top:calc(var(--gap-section) + 210px);
  --prop-w:clamp(112px,10.6vw,158px);
  --rot:9deg;
}

/* ============================================================================
   MOTION
   1. the strip settles 12px, then the deck 70ms behind it: the question is
      asked before the answers are laid out.
   2. opening a card is the native <details> toggle. The chevron's rotation and
      the card's straighten-and-lift both ride the transition materials.css
      already declares for .chev and .card, so this file writes no transition
      and no shadow: the only thing it changes is --rot, --lift and z-index.
   State hooks expected from site.js: `.is-in` on the strip and the deck, and
   `.is-open` on the open <details> (one at a time). The nine cards share
   name="faq", so exclusivity, the keyboard and the no-JS state are native.
   ========================================================================= */

/* ============================================================================
   MOBILE < 900px: the fan collapses to a clean stack, full width.
   ========================================================================= */
@media (max-width: 899px){
  .s-12 .s12-strip{
    padding-top:clamp(12px,3.4vw,16px);
    padding-bottom:clamp(14px,3.8vw,18px);
  }
  .s-12 .pin-a{--px:5%}
  .s-12 .pin-b{--px:95%}

  .s-12 .s12-deck{
    --deck-step:0px;
    /* 12px, because at 390 two of the nine questions wrap to two lines and the
       band must clear 12 + 40 + slack; the pile still overlaps, it just
       overlaps less than on the desk. */
    --deck-lap:12px;
    margin-top:var(--gap-row);
    max-width:none;
  }
  .s-12 .s12-card{
    width:100%;
    --jit:0px;
  }
}