/* ============================================================================
   01 · hero, "El tablero de producción".  The shipped header, unchanged: only
   the material rules moved out (to materials.css) and the tokens up (to
   tokens.css). Everything left is hero-only geometry, scoped under .s-01, and
   qa/hero-parity.mjs diffs it against headers/b-tablero/index.html.

   GEOMETRY (desktop >= 900px).  Everything is a percentage of the board, so
   the composition is identical at every width and only needs to be proved once.

   Board = calc(100dvh - 64px), min 560: the frame always fills the space under
   the nav, so no wall ever shows. Positioning box = board minus the 18px frame.
       1024x768 -> board 1024x704, box  988x668    1280x800 -> 1280x736, box 1244x700
       1440x900 -> board 1440x836, box 1404x800    1920x1080-> 1920x1016, box 1884x980
       1024x1366-> board 1024x1302,box  988x1266
   The board ratio varies, so the prints take their shape from
   width:min(15cqw,29.8cqh) + aspect-ratio 9/16 (the cqh term only bites on short
   wide windows) and the captions ride under them at
   top: calc(25% + --ph + --cap-gap). Resulting bands, in % of the box height:
       1024x768   card1 10.0-32.9  card2 44.0-59.9  cta 66.0-73.2  tag 80.0-85.0
                  strip  8.0-13.5  prints 25.0-64.4  captions 66.4-71.3
       1280x800   strip 8.0-14.5  prints 25.0-72.4  captions 74.7-80.4  tag ->85.9
       1440x900   card1 10.0-37.2  card2 44.0-61.3  cta 66.0-74.5  tag 80.0-85.8
                  strip  8.0-14.5  prints 25.0-71.8  captions 74.1-79.7
       1920x1080  strip 8.0-14.0  prints 25.0-76.3  captions 78.3-83.4  tag ->85.1
       1024x1366  strip 8.0-10.9  prints 25.0-45.8  captions 46.8-49.4  tag ->82.7
   Nothing overlaps and nothing crosses the frame at any of them.

   H1 fit, the one that decides the scale.  Card 1 is 35% wide with
   clamp(14px,1.6cqw,26px) of side padding, so the inner width is 31.80cqw.
   Measured in Chrome on the built page, real Archivo Black, letter-spacing
   -.022em (qa/hero-parity.mjs re-proves the result at four widths):
       "Aprende a crear"          =  8.497em
       "anuncios con IA."         =  8.760em
       "Aprende a crear anuncios" = 13.578em
   The copy leaf is ONE string (copy.json s01.h1), so the two-line break that
   the header made with a <br> is now made with max-width:11em on the h1.
   11em sits 2.24em above the longest of the two lines and 2.58em below the
   first overflow, so the break falls after "crear" and nowhere else. Both
   terms are em, so the ratio never changes with the viewport: the break is
   identical at 1024, 1280, 1440, 1920 and 390. Card 1's own inner width
   (31.80cqw) already forces the same break up to a 2698px viewport; the
   max-width is what keeps it true above that.  Shipping font-size 3.35cqw:
       1024 -> 33.1px   1440 -> 47.0px   1920 -> 63.1px   390 -> 33.5px
   ========================================================================= */

.s-01{
  margin:auto;
  width:100%;
  height:calc(100dvh - var(--nav-h));
  min-height:560px;
  container-type:size;

  /* print width, and from it the print height: the cap on cqh keeps the prints
     inside the board on short, wide windows (it does not bind at any of
     1024x768, 1280x800, 1440x900, 1920x1080 or 1024x1366). */
  --pw:min(15cqw, 29.8cqh);
  --ph:calc(var(--pw) / 9 * 16);
  --cap-gap:clamp(8px,1.3cqw,20px);

  /* the hero's pins and CTA corner scale with the board, not the viewport */
  --pin-size:clamp(16px,1.55cqw,24px);   /* = 22px on a 1440 board */
}

/* ---------- card 1: eyebrow + H1 ---------------------------------------- */
.s-01 .card-1{
  left:4%;top:10%;width:35%;
  padding:clamp(20px,min(2.6cqw,5.2cqh),38px) clamp(14px,1.6cqw,26px) clamp(22px,min(3cqw,6cqh),44px);
}
.s-01 .card-1 .pin-a{--px:10%;--py:0%;--pr:-16deg}
.s-01 .card-1 .pin-b{--px:90%;--py:0%;--pr:13deg}
.s-01 .eyebrow{
  margin:0 0 clamp(10px,min(1.3cqw,2.8cqh),20px);
  font-size:clamp(.66rem,min(1.05cqw,2.2cqh),1rem);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.s-01 .h1{
  margin:0;
  max-width:11em;                     /* forces the two-line break, see above */
  font-family:var(--display);
  font-weight:400;                    /* Archivo Black ships at 400 */
  font-size:clamp(1.7rem,min(3.35cqw,7.2cqh),3.95rem);
  line-height:1.06;
  letter-spacing:-.022em;
  color:var(--ink);
}

/* ---------- card 2: the paragraph --------------------------------------- */
.s-01 .card-2 p{margin:0}
.s-01 .card-2{
  left:5%;top:44%;width:31%;
  padding:clamp(14px,min(1.9cqw,4cqh),28px) clamp(14px,1.55cqw,24px);
  font-size:clamp(.95rem,min(1.35cqw,2.8cqh),1.35rem);
  line-height:1.5;
}
.s-01 .card-2 .pin{--pr:9deg}

/* ---------- CTA card ----------------------------------------------------- */
.s-01 .cta{
  left:6.5%;top:66%;width:29%;
  padding:clamp(12px,min(1.55cqw,3.4cqh),24px) clamp(12px,1.4cqw,22px);
  font-size:clamp(.95rem,min(1.5cqw,3.2cqh),1.55rem);
  white-space:nowrap;
  --cta-corner:clamp(12px,1.5cqw,22px);
}
.s-01 .cta .pin{--pr:-21deg}

/* ---------- offer tag ---------------------------------------------------- */
.s-01 .tag{
  left:11%;top:80%;width:20%;
  padding:clamp(8px,1cqw,14px) clamp(10px,1.1cqw,18px);
  text-align:center;
  font-size:clamp(.62rem,.95cqw,1rem);
  line-height:1.4;
  color:var(--ink-soft);
  white-space:nowrap;
}
.s-01 .tag .pin{--pr:18deg}

/* ---------- method strip ------------------------------------------------- */
.s-01 .strip{
  left:45%;top:8%;width:48%;
  padding:clamp(8px,1.1cqw,16px) clamp(22px,2.9cqw,46px);
  text-align:center;
  font-size:clamp(.58rem,1.1cqw,1.25rem);
  line-height:1.35;
  color:var(--ink);
}
.s-01 .strip .pin-a{--px:4%;--py:50%;--pr:-14deg}
.s-01 .strip .pin-b{--px:96%;--py:50%;--pr:22deg}

/* ---------- the three prints -------------------------------------------- */
/* .deck is display:contents at >= 900px, so the three prints and the three
   captions are laid out exactly as if they were direct children of the board
   (absolute % positioning resolves against .s-01). The wrapper exists only so
   that < 900px they can become one scroll-snap row. */
.s-01 .deck{display:contents}

.s-01 .print{top:25%;width:var(--pw);height:auto}
.s-01 #print-1{left:41.5%;--rot:-2deg;--i:5}
.s-01 #print-2{left:60.5%;--rot:1deg;--i:6}
.s-01 #print-3{left:79.5%;--rot:2.5deg;--i:7}
.s-01 #print-1 > .pin{--pr:-19deg}
.s-01 #print-2 > .pin{--pr:11deg}
.s-01 #print-3 > .pin{--pr:-8deg}

.s-01 #print-1 .hook b{color:var(--hook-1)}
.s-01 #print-2 .hook b{color:var(--hook-2)}
.s-01 #print-3 .hook b{color:var(--hook-3)}

/* ---------- captions ----------------------------------------------------- */
.s-01 .caption{
  top:calc(25% + var(--ph) + var(--cap-gap));width:17%;
  padding:clamp(7px,.9cqw,13px) clamp(8px,1cqw,16px);
  text-align:center;
  font-size:clamp(.7rem,1.05cqw,1.1rem);
  line-height:1.35;
}
.s-01 #cap-1{left:40.5%;--rot:1deg;--i:8}
.s-01 #cap-2{left:59.5%;--rot:-1.2deg;--i:9}
.s-01 #cap-3{left:78.5%;--rot:.7deg;--i:10}
.s-01 #cap-1 .pin{--pr:16deg}
.s-01 #cap-2 .pin{--pr:-13deg}
.s-01 #cap-3 .pin{--pr:20deg}

/* ============================================================================
   MOBILE  < 900px  (declared explicitly, nothing inherited by accident)
   The board stops being a stage and becomes a column: card 1, card 2, the CTA
   and its tag, the strip, then a scroll-snap row of the three prints with each
   caption under its print.  The string, the drag and the swing are all off
   (.board-stack in materials.css turns every .pinned static).
   390px: board padding 12px a side, so the column is 366px and the only
   horizontal scroller on the page is .deck.
   ========================================================================= */
@media (max-width: 899px){
  .s-01{
    margin:0;
    width:100%;height:auto;min-height:0;
    /* container-type:size implies size containment, so an auto-height board
       would resolve to 0. Every section that makes a board a size container
       MUST hand it back below 900px, in its own file (materials.css does it
       for .board, but section CSS loads later and would win). */
    container-type:normal;
    gap:14px;
    padding:16px 12px 26px;
  }

  .s-01 .card-1{--rot-m:-.7deg;padding:18px 16px 22px}
  .s-01 .card-2{--rot-m:.7deg;padding:16px}
  .s-01 .cta{--rot-m:-.8deg;padding:15px 16px}
  .s-01 .tag{--rot-m:.9deg;padding:9px 12px;align-self:center;min-width:64%}
  .s-01 .strip{--rot-m:-.5deg;padding:12px 26px}

  .s-01 .eyebrow{font-size:.7rem;margin-bottom:10px}
  .s-01 .h1{font-size:clamp(1.6rem,8.6vw,2.3rem);line-height:1.08}
  .s-01 .card-2{font-size:1rem}
  .s-01 .cta{font-size:1.1rem;white-space:normal}
  .s-01 .tag{font-size:.78rem}
  .s-01 .strip{font-size:.85rem}

  /* the print row */
  .s-01 .deck{
    display:grid;
    grid-template-columns:repeat(3,200px);
    grid-template-rows:auto auto;
    gap:8px 14px;
    justify-content:start;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    padding:4px 2px 8px;
    margin-top:2px;
    scrollbar-width:none;
  }
  .s-01 .deck::-webkit-scrollbar{display:none}

  /* three classes on purpose: materials.css resets .board-stack .pinned to
     height:auto at (0,3,0), and a print needs its explicit 200x356 back
     (height:auto + aspect-ratio 9/16 would give 355.56px and move the row). */
  .s-01 .deck .print{
    position:relative;
    left:auto;top:auto;
    width:200px;height:356px;
    scroll-snap-align:center;
    border-width:5px;
    transform:rotate(var(--rot-m,0deg));
  }
  .s-01 #print-1{--rot-m:-1deg;grid-area:1/1}
  .s-01 #print-2{--rot-m:.8deg;grid-area:1/2}
  .s-01 #print-3{--rot-m:1.2deg;grid-area:1/3}

  .s-01 .deck .caption{
    width:200px;
    padding:8px 10px;
    font-size:.82rem;
    align-self:start;
  }
  .s-01 #cap-1{--rot-m:.8deg;grid-area:2/1}
  .s-01 #cap-2{--rot-m:-.9deg;grid-area:2/2}
  .s-01 #cap-3{--rot-m:.6deg;grid-area:2/3}

  .s-01 .play{--play-y:83%}
  .s-01 .hook{--hook-y:29%}

  .s-01 .string{display:none}
}

@media (max-width: 380px){
  .s-01 .deck{grid-template-columns:repeat(3,172px)}
  .s-01 .deck .print{width:172px;height:306px}
  .s-01 .deck .caption{width:172px}
}