/* ============================================================================
   07 · El Estratega  ·  family "folder-tabs"
   ----------------------------------------------------------------------------
   THE OBJECT.  One open kraft dossier lying on the desk, with a paper strip
   pinned above it and a second sheet tucked under its bottom edge.

   GEOMETRY (desktop >= 900px), everything derived from one stage width so the
   composition only has to be proved once.

     --stage      min(1140px, 100% - 2 * --desk-pad)      1140 at 1440
     --tab-w      104px   the folder tab's width (fits "RESULTADO" upright)
     --fpad       the folder's own side padding, clamp(18px,2.2vw,32px)
     --tab-out    --tab-w - --fpad = 72.3 at 1440, the part that sticks out
     folder       --stage - --tab-out                      1068 at 1440
     folder pad   31.7 side / 31.7 top / 37.4 bottom (the material's clamps)
     folder-inner 1018.6
       left flap  34%      = 346.3     the brief you write, pinned on the flap
       gap        clamp(24px,3vw,44px) = 43.2
       right      1fr      = 629.1, minus 20px of tab clearance = 609.1
       panel      609.1 wide, 34.6 side padding -> a 540px measure (~55ch)

   The four tabs stand on the folder's RIGHT edge in a flex column, top
   aligned at 43px like real file dividers: 4 x 48 + 3 x 10 = 222px, which
   still fits the shortest panel (04 Resultado, ~300px of content) and is not
   centred, so switching panels never moves a tab.

   THE TABS ARE PART OF THE FOLDER, not chips beside it. Each one carries
   .index-tab (the role=tab state machine: recess, hover, selected, press) AND
   .kraft-tag, which is later in materials.css and therefore wins the surface:
   kraft face, kraft cut edge, kraft ink, no paper. The tab column starts at
   left:100% of the working half, so a tab's left edge IS the panel sheet's
   right edge: the kraft part of the tab continues the folder's own face and
   only --tab-out sticks out past its edge, with no gap to cross.
   The SELECTED tab is the only paper one: it reads as the open sheet's own
   tab, sitting 2px over the sheet's edge so the two surfaces are continuous,
   with the weight, ink and lifted shadow the material already gives it. No
   coral anywhere (coral is the CTAs, the string and the stamps).
   UPRIGHT LABELS (founder gate 1: no rotated text): the ordinal from a CSS
   counter over the name. The material's recess (--tab-y) is re-mapped from
   the Y axis to the X axis, so "tucked in" means pulled back into the folder.

   THE PANELS grow the folder: only the selected panel is in flow (the others
   carry [hidden]), so the folder takes its height from the active sheet and
   nothing scrolls or clips. Panel 01 is the no-JS panel, and it carries the
   section's message (who the customer is, in the customer's words).
   ========================================================================= */

.s-07{
  position:relative;
  padding:var(--gap-section) var(--desk-pad);
  --tab-w:104px;
  --fpad:clamp(18px, 2.2vw, 32px);      /* the .folder material's own padding */
  --tab-out:calc(var(--tab-w) - var(--fpad));
}

.s-07 .s07-stage{
  position:relative;
  width:min(1140px, 100%);
  margin:0 auto;
}

/* ---------- the paper strip pinned above the folder ---------------------- */
/* Headline and intro stack (never a split header): the h2 breaks where the
   copy breaks it, two leaves, so no line is ever orphaned. */
.s-07 .s07-head{
  width:min(720px, 100%);
  margin:0 0 var(--sp-5) clamp(0px, 1.6vw, 28px);
  z-index:var(--z-paper);
}
.s-07 .s07-h2 span{display:block}
.s-07 .s07-h2{max-width:22ch}
.s-07 .s07-sub{
  max-width:62ch;
  margin-top:var(--sp-4);
  color:var(--ink-soft);
}

/* ---------- the dossier -------------------------------------------------- */
.s-07 .s07-folder{
  position:relative;
  z-index:var(--z-paper);
  width:calc(100% - var(--tab-out));
}

/* the open folder: two halves with a real crease between them */
.s-07 .s07-inner{
  display:grid;
  grid-template-columns:34% minmax(0, 1fr);
  gap:clamp(24px, 3vw, 44px);
  align-items:stretch;      /* so the crease runs the folder's full height */
}

.s-07 .s07-flap{
  position:relative;
  padding:clamp(8px, 1vw, 18px) clamp(4px, .6vw, 12px) clamp(10px, 1.2vw, 22px);
}
/* the crease: a fold shadow and its lit edge, drawn in the folder's own gap
   and running past the flap's content into the folder's padding. */
.s-07 .s07-flap::after{
  content:"";
  position:absolute;
  top:calc(-1 * clamp(18px, 2.2vw, 32px));
  bottom:calc(-1 * clamp(22px, 2.6vw, 38px));
  right:calc(-1 * clamp(12px, 1.5vw, 22px));
  width:16px;
  pointer-events:none;
  background:linear-gradient(90deg,
    rgba(0,0,0,0),
    rgba(0,0,0,.20) 42%,
    rgba(0,0,0,.30) 54%,
    rgba(255,255,255,.13) 62%,
    rgba(0,0,0,0));
}

/* every label typed straight on the kraft takes the kraft ink (8.6:1); the
   paper inks would sit at 3.3:1 on this face. */
.s-07 .s07-dossier,
.s-07 .s07-caption,
.s-07 .s07-worklabel{color:var(--kraft-ink)}

.s-07 .s07-dossier{margin-bottom:var(--sp-5)}

.s-07 .s07-input{
  width:100%;
  padding-top:clamp(18px, 1.9vw, 27px);
}
.s-07 .s07-egtag{margin-top:var(--sp-1)}
.s-07 .s07-fields{
  margin:var(--sp-4) 0 0;
  display:grid;
  gap:var(--sp-1);
}
.s-07 .s07-fields dt{margin-top:var(--sp-3)}
.s-07 .s07-fields dt:first-child{margin-top:0}
.s-07 .s07-fields dd{margin:0}
.s-07 .s07-caption{margin-top:var(--sp-4)}

/* ---------- the working half -------------------------------------------- */
.s-07 .s07-work{
  position:relative;
}
.s-07 .s07-worklabel{margin-bottom:var(--sp-3)}

.s-07 .s07-tablist{
  position:absolute;
  top:clamp(26px, 3vw, 44px);
  left:100%;
  width:var(--tab-w);
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:var(--z-tab);
  counter-reset:s07tab;
}
/* the two materials, turned 90 degrees as a composition (no rotated type):
   right-edge radius, and the recess re-mapped to the X axis. .kraft-tag makes
   it inline-block, so the two-line label needs the flex back. */
.s-07 .s07-tab{
  --tab-y:4px;
  display:flex;
  width:100%;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  padding:clamp(6px, .7vw, 9px) clamp(8px, .9vw, 13px) clamp(7px, .8vw, 10px);
  border-radius:0 4px 4px 0;
  text-transform:none;
  transform:translateX(calc(-1 * var(--tab-y))) scale(var(--press,1));
  counter-increment:s07tab;
}
.s-07 .s07-tab::before{
  content:counter(s07tab, decimal-leading-zero);
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.s-07 .s07-tabname{display:block;text-transform:uppercase}
/* the selected tab is the sheet's own tab: paper, 2px over the sheet's edge.
   The paper GRAIN is a url() in materials.css that a section may not write,
   so this face is the flat --paper token; at 104x48 next to the sheet the
   grain is imperceptible (a .index-tab.is-paper modifier would fix it). */
.s-07 .s07-tab[aria-selected="true"]{
  --tab-y:2px;
  background-image:none;
  background-color:var(--paper);
}

/* the sheets. Two blank cards under the live one so the dossier reads as a
   stack of paper and not as one floating page. */
.s-07 .s07-panels{position:relative;z-index:1}
.s-07 .s07-stack{
  position:absolute;
  inset:0;
  padding:0;
  z-index:0;
}
.s-07 .s07-stack-a{transform:rotate(-1.1deg) translate(-9px, 9px)}
.s-07 .s07-stack-b{transform:rotate(.8deg) translate(11px, 17px)}

.s-07 .s07-panel{
  position:relative;
  z-index:var(--z-paper);
  width:100%;
}
.s-07 .s07-psub{margin-top:var(--sp-3);color:var(--ink-soft)}

/* the analysis quotes: kraft label over the customer's own words */
.s-07 .s07-quotes,
.s-07 .s07-beats,
.s-07 .s07-options{
  list-style:none;
  margin:var(--sp-5) 0 0;
  padding:0;
  display:grid;
  gap:var(--sp-4);
}
.s-07 .s07-quotes q,
.s-07 .s07-beats q,
.s-07 .s07-quotes p,
.s-07 .s07-beats p{display:block;margin-top:var(--sp-2)}

/* 02 · the three angles. The chosen one is marked by its kraft label, not by
   a colour: coral belongs to the CTAs, the string and the stamps. The option
   title is body size at 900 so it never competes with the panel's own h3. */
.s-07 .s07-options{gap:var(--sp-5)}
.s-07 .s07-otitle{margin-top:var(--sp-2);font-weight:900}
.s-07 .s07-option > .t-typed{margin-top:var(--sp-1);color:var(--ink-soft)}

/* 04 · the result. The closing paragraph reads as the note the agent hands
   back, so it keeps the typed voice and the CTA sits under it. */
.s-07 .s07-panel4 .s07-vclosing{margin-top:var(--sp-4);color:var(--ink-soft)}
.s-07 .s07-panel4 .btn{margin-top:var(--sp-5)}

.s-07 .s07-next{
  display:inline-block;
  margin-top:var(--sp-5);
}

/* ---------- the second sheet, tucked under the folder -------------------- */
/* The strip is the part that peeks out: its top 32px sit behind the folder's
   bottom edge, so it reads as one more sheet in the dossier. */
.s-07 .s07-variant{
  position:relative;
  z-index:0;
  width:min(880px, 100%);
  margin:calc(-1 * var(--sp-6)) auto 0;
}
.s-07 .s07-vbtn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-3);
  width:100%;
  min-height:44px;
  padding-top:calc(var(--sp-6) + clamp(9px, 1.1vw, 15px));
  border:0;
  cursor:pointer;
  z-index:var(--z-paper);
}
.s-07 .s07-vbtn > .t-h3{text-align:center}

/* NO JS: the sheet is fully out and readable, because the only thing that can
   open it is the script. The closed state therefore lives behind
   @media (scripting: enabled) and NOT behind html.reveal-ready: site.js adds
   reveal-ready only when motion is allowed, so a reduced-motion visitor with
   a working script would have been left with a sheet that is open, and the
   reduced-vs-allowed renderings of the section would not match. A browser
   that does not know the `scripting` feature evaluates the query as false and
   keeps the readable state. */
.s-07 .s07-vwrap{
  display:grid;
  grid-template-rows:1fr;
  overflow:hidden;
  padding:0 20px 20px;
  margin:0 -20px;
}
/* the grid item carries no padding of its own: a track at 0fr still reserves
   its item's padding box, so the collapsing item has to be a bare slot and the
   paper sheet lives inside it. */
.s-07 .s07-vslot{min-height:0;overflow:hidden}
.s-07 .s07-vsheet{margin-top:-4px}
.s-07 .s07-vsteps{
  list-style:none;
  margin:var(--sp-4) 0 0;
  padding:0;
  display:grid;
  gap:var(--sp-3);
  counter-reset:s07v;
}
.s-07 .s07-vsteps li{
  counter-increment:s07v;
  display:grid;
  grid-template-columns:auto minmax(0, 1fr);
  gap:var(--sp-3);
  max-width:74ch;
}
.s-07 .s07-vsteps li::before{
  content:counter(s07v, decimal-leading-zero);
  font-weight:900;
  letter-spacing:.08em;
  color:var(--ink-soft);
}
.s-07 .s07-vclose{margin-top:var(--sp-5);max-width:62ch}

@media (scripting: enabled){
  .s-07 .s07-vwrap{grid-template-rows:0fr}
  .s-07 .s07-vwrap.is-open,
  .s-07 .s07-vbtn[aria-expanded="true"] + .s07-vwrap{grid-template-rows:1fr}
}

/* ---------- desk props (two, outer edges, never over type) -------------- */
.s-07 .s07-prop-tape,
.s-07 .s07-prop-clips{display:none}
@media (min-width: 1400px){
  .s-07 .s07-prop-tape{
    display:block;
    left:14px;
    top:calc(var(--gap-section) + 150px);
    --prop-w:132px;
    --rot:-8deg;
  }
  .s-07 .s07-prop-clips{
    display:block;
    right:16px;
    bottom:calc(var(--gap-section) + 40px);
    --prop-w:150px;
    --rot:6deg;
  }
}

/* ============================================================================
   MOTION.  Two sentences, one per interaction.
   1. The dossier and its sheets settle onto the desk as you reach them, in
      reading order, so the eye lands on the headline before the folder.
   2. The service sheet slides down out from under the folder when you ask for
      it, which is the same gesture as pulling a sheet out of a real dossier.
   The "lay" reveal variant exists for two reasons. The shared one ends at
   transform:none, which would flatten every tilt on the desk; and it fades
   from opacity 0, which on this desk reads as paper turning grey and lets
   whatever lies under a sheet show through it while the fade runs (the folder
   would show the service strip through itself). A settle with no fade, with
   the pin already through the paper, is what "placed on the desk" looks like.
   Same 520ms / 70ms cadence as the shared reveal.
   ========================================================================= */
@media (prefers-reduced-motion: no-preference){
  html.reveal-ready .s-07 [data-reveal="lay"]{
    opacity:1;
    transform:translateY(14px) rotate(var(--rot, 0deg));
  }
  html.reveal-ready .s-07 [data-reveal="lay"].is-in{
    transform:rotate(var(--rot, 0deg));
    transition:transform 520ms cubic-bezier(.2,.8,.25,1) calc(var(--i,0) * 70ms);
  }
  /* the pin is already through the paper when the paper lands: the material's
     pop is delayed by --i, and a still taken during the entry would show an
     object with no pin in it. */
  html.reveal-ready .s-07 [data-reveal] .pin,
  html.reveal-ready .s-07 [data-reveal].is-in .pin{animation:none}
  /* the 6px slide of a panel swap and of the sheet coming out */
  .s-07 .s07-panel.is-entering{transform:translateY(6px)}
  .s-07 .s07-panel{transition:transform .22s cubic-bezier(.2,.8,.25,1)}
  .s-07 .s07-vwrap .s07-vsheet{transition:transform .26s cubic-bezier(.2,.8,.25,1)}
}

/* the sheet slides down out of the strip as the row opens */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled){
  .s-07 .s07-vwrap .s07-vsheet{transform:translateY(-12px)}
  .s-07 .s07-vwrap.is-open .s07-vsheet,
  .s-07 .s07-vbtn[aria-expanded="true"] + .s07-vwrap .s07-vsheet{transform:translateY(0)}
}

/* ============================================================================
   MOBILE  < 900px.  The folder stops being a two-page spread: the flap's
   content stacks on top, the four tabs become a segmented row directly above
   the sheet, and the second sheet keeps its strip. 12px desk margin, one
   column, no tilt over 1 degree, nothing wider than the viewport.
   ========================================================================= */
@media (max-width: 899px){
  .s-07 .s07-stage{width:100%}

  .s-07 .s07-head{width:100%;margin:0 0 var(--sp-4)}
  .s-07 .s07-sub{margin-top:var(--sp-3)}

  .s-07 .s07-folder{width:100%}
  .s-07 .s07-inner{display:block}

  .s-07 .s07-flap{padding:0}
  .s-07 .s07-flap::after{display:none}
  .s-07 .s07-dossier{margin-bottom:var(--sp-3)}
  .s-07 .s07-caption{margin-top:var(--sp-3)}

  .s-07 .s07-work{margin-top:var(--sp-5)}
  .s-07 .s07-worklabel{margin-bottom:var(--sp-3)}

  /* the segmented row: four equal parts, each a 44px tap target */
  .s-07 .s07-tablist{
    position:static;
    left:auto;
    width:auto;
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:3px;
    margin-bottom:-2px;      /* the paper tab meets the sheet under it */
  }
  .s-07 .s07-tab{
    --tab-y:3px;
    width:auto;
    min-height:48px;
    align-items:center;
    justify-content:center;
    gap:1px;
    padding:6px 4px 7px;
    border-radius:4px 4px 0 0;
    transform:translateY(var(--tab-y)) scale(var(--press,1));
  }
  .s-07 .s07-tab[aria-selected="true"]{--tab-y:0px}

  .s-07 .s07-stack{display:none}
  .s-07 .s07-quotes,.s07-beats{margin-top:var(--sp-4);gap:var(--sp-3)}
  .s-07 .s07-options{margin-top:var(--sp-4);gap:var(--sp-4)}

  .s-07 .s07-variant{width:100%;margin-top:calc(-1 * var(--sp-5))}
  .s-07 .s07-vbtn{
    padding:calc(var(--sp-5) + 12px) 14px 14px;
    gap:var(--sp-2);
  }
  .s-07 .s07-vwrap{padding:0 12px 12px;margin:0 -12px}
  .s-07 .s07-head .pin-a{--px:6%}
  .s-07 .s07-head .pin-b{--px:94%}
  .s-07 .s07-vsteps li{gap:var(--sp-2)}
  
}