/* ============================================================
   El oficio — el CSS del mockup aprobado mockups/el-oficio.html, tal cual (brief §0). Solo se
   quitaron las reglas de su barra de demostración (.intro, .brand, .note, .hint). Lo que pide el
   build va aparte, al final.
   ============================================================ */
  :root{
    --paper:#F3F0E8; --paper2:#E9E4D8; --ink:#1B1F1C; --muted:#6E736D; --rule:#C9C3B4;
    --copper:#B4632E; --copper-soft:rgba(180,99,46,.16); --moss:#1F4D3A;
    --font:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  }
  html{color-scheme:light}
  body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;
       background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);
       background-size:48px 48px;background-position:-1px -1px}
  body::before{content:"";position:fixed;inset:0;background:var(--paper);opacity:.8;pointer-events:none;z-index:-1}
  .wrap{padding-inline:clamp(16px,5vw,64px)}
  .eb{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin:0 0 12px;font-weight:600}
  h1,h2,h3{text-wrap:balance}
  .btn{display:inline-block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:13px 20px;border:1px solid var(--ink);border-radius:2px;color:var(--paper);background:var(--ink);text-decoration:none;margin-top:24px}

  .head{padding-block:64px 40px;max-width:62ch}
  .head h1{font-weight:300;font-size:clamp(34px,5.6vw,68px);margin:0;line-height:1;letter-spacing:-.015em}
  .head h1 b{font-weight:800}
  .head p{color:#3A3F3B;line-height:1.6;margin:18px 0 0;font-size:clamp(15px,1.7vw,18px);max-width:52ch}

  /* ingredients, full */
  .ings{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 40px;padding-block:24px 56px;border-top:1px solid var(--rule)}
  .ing{display:grid;grid-template-columns:56px 1fr;gap:18px;align-items:start}
  .ing svg{width:56px;height:56px;stroke:var(--ink);fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
  .ing h3{font-weight:800;font-size:22px;margin:0 0 8px;letter-spacing:-.01em}
  .ing p{margin:0 0 10px;line-height:1.6;font-size:15px;color:#3A3F3B;max-width:48ch}
  .ing .k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--copper);font-weight:600;font-variant-numeric:tabular-nums}
  .more{border-top:1px dashed var(--rule);padding-block:28px 40px;max-width:60ch}
  .more h3{font-weight:300;font-size:clamp(20px,2.4vw,28px);margin:0 0 8px;line-height:1.15}
  .more h3 b{font-weight:600}
  .more p{color:#3A3F3B;line-height:1.6;font-size:15px;margin:8px 0 0}
  .todo{border-top:1px solid var(--ink);padding-block:40px 8px}
  .todo h2{font-weight:300;font-size:clamp(28px,4vw,50px);margin:0;line-height:1.05}
  .todo h2 b{font-weight:800}
  .todo p{color:#3A3F3B;line-height:1.6;font-size:16px;max-width:56ch;margin:14px 0 0}

  /* process: sticky cards + line + stations */
  .oficio{display:grid;grid-template-columns:minmax(220px,30%) 1fr;gap:clamp(24px,5vw,80px);position:relative;padding-block:24px 60px}
  .cards{position:sticky;top:0;height:100vh;height:100dvh;display:flex;flex-direction:column;justify-content:center;gap:12px;box-sizing:border-box}
  .cards h4{margin:0 0 6px;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);font-weight:600}
  .badge{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:center;padding:11px 14px;border:1px solid var(--rule);
         border-radius:3px;background:rgba(243,240,232,.7);opacity:.4;transition:opacity .4s,border-color .4s,transform .4s;transform:translateX(-6px)}
  .badge.on{opacity:1;border-color:var(--copper);transform:none;background:rgba(243,240,232,.95)}
  .badge svg{width:40px;height:40px;stroke:var(--ink);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
  .badge.on svg{stroke:var(--copper)}
  .badge b{display:block;font-weight:800;font-size:14px}
  .badge span{font-size:11px;color:var(--muted);line-height:1.4;font-variant-numeric:tabular-nums}
  .badge small{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--copper);margin-top:3px;opacity:0;transition:opacity .4s}
  .badge.on small{opacity:1}
  .stations{position:relative;padding-left:64px}
  .spine{position:absolute;left:0;top:0;width:64px;height:100%;overflow:visible}
  .spine .bg{stroke:var(--rule);stroke-width:1.5;fill:none;stroke-dasharray:3 5}
  .spine .fg{stroke:var(--copper);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .spine .br{stroke:var(--copper);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-dasharray:2 4;opacity:0;transition:opacity .4s}
  .spine .br.on{opacity:1}
  .spine .chk{stroke:var(--ink);stroke-width:1.4;opacity:.35;transition:opacity .4s,stroke .4s}
  .spine .chk.on{opacity:1;stroke:var(--copper)}
  .st{min-height:56vh;display:flex;flex-direction:column;justify-content:center;padding-block:30px;position:relative}
  .st .n{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums;margin:0 0 10px;display:flex;align-items:center;gap:12px}
  .st .n i{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--rule);background:var(--paper);display:inline-block;transition:all .4s;position:absolute;left:-64px;margin-left:27px}
  .st.on .n i{border-color:var(--copper);background:var(--copper);box-shadow:0 0 0 6px var(--copper-soft)}
  .st.on .n{color:var(--copper)}
  .st h2{font-weight:800;font-size:clamp(24px,3.4vw,42px);margin:0;line-height:1.05;letter-spacing:-.015em}
  .st p{margin:14px 0 0;max-width:48ch;line-height:1.6;font-size:clamp(14px,1.4vw,16px);color:#3A3F3B}
  .st .k{margin-top:12px;font-size:12px;color:var(--muted);letter-spacing:.06em}
  .st .k b{color:var(--ink);font-weight:600}
  .st .in{margin-top:10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--copper);font-weight:600}
  .st>*{opacity:.35;transition:opacity .5s}
  .st.on>*{opacity:1}
  .fig{margin-top:18px;height:120px;max-width:380px;border:1px dashed var(--rule);border-radius:3px;display:flex;align-items:flex-end;padding:10px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);box-sizing:border-box}
  /* branch + checkpoint */
  .st.branch{min-height:auto;padding:22px 20px 22px 24px;margin:8px 0 8px 32px;border-left:1.5px dashed var(--copper);background:rgba(180,99,46,.05);border-radius:0 3px 3px 0}
  .st.branch .n i{display:none}
  .st.branch h2{font-size:clamp(20px,2.4vw,28px);font-weight:600}
  .st.branch p{max-width:44ch;font-size:14px}
  .st.check{min-height:auto;padding:18px 0;display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
  .st.check .n{margin:0}
  .st.check .n i{display:none}
  .st.check .mark{width:34px;height:34px;border:1.5px solid var(--rule);border-radius:3px;display:flex;align-items:center;justify-content:center;transition:all .4s}
  .st.check.on .mark{border-color:var(--copper);background:var(--copper-soft)}
  .st.check .mark svg{width:18px;height:18px;stroke:var(--ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .st.check.on .mark svg{stroke:var(--copper)}
  .st.check h2{font-size:18px;font-weight:600}
  .st.check p{font-size:14px;margin-top:8px}

  .close{padding-block:64px 90px;border-top:1px solid var(--ink)}
  .close h2{font-weight:300;font-size:clamp(30px,4.6vw,58px);margin:0;line-height:1.02}
  .close h2 b{font-weight:800;display:block}
  .close p{color:#3A3F3B;max-width:56ch;line-height:1.6;font-size:16px;margin:16px 0 0}
  .close p.b{font-weight:600;color:var(--ink)}

  @media (max-width:760px){
    .ings{grid-template-columns:1fr}
    .oficio{grid-template-columns:1fr;gap:0}
    .cards{position:sticky;top:0;height:auto;flex-direction:row;gap:8px;padding-block:10px;background:var(--paper);z-index:2;border-bottom:1px solid var(--rule);overflow-x:auto}
    .cards h4{display:none}
    .badge{grid-template-columns:26px 1fr;gap:8px;padding:8px 10px;flex:0 0 auto;min-width:130px}
    .badge svg{width:26px;height:26px}
    .badge b{font-size:12px}.badge span{display:none}.badge small{margin-top:0}
    .stations{padding-left:44px}.spine{width:44px}.st .n i{left:-44px;margin-left:17px}
    .st{min-height:auto;padding-block:40px}
    .st.branch{margin-left:12px}
  }
  @media (prefers-reduced-motion:reduce){.badge,.st>*,.st .n i,.spine .br,.spine .chk,.st.check .mark{transition:none}}

/* ================================================================
   Adaptación al build (brief §0), lo único que no viene del mockup.
   (d) Espacios de foto F##: el código y la descripción van dentro del .fig del mockup; la foto,
   cuando llega, lo llena.
   ================================================================ */
.fig{position:relative;overflow:hidden}
.fig > .media,.fig > .foto{position:absolute;inset:0}
.fig > .media{background:none;padding:30px 10px 10px;align-items:flex-start;justify-content:flex-start;text-align:left}
.fig > .media::before{top:10px;left:10px}
.fig > .media::after{text-align:left;max-width:none}
.fig:has(> .foto){border-style:solid}

/* El mockup se aprobó dentro del marco de artifact de claude.ai, cuyo reset pone el cuerpo a
   14 px (y las imágenes a max-width:100%): todo lo que el mockup mide en ch o hereda, se mide así. */
body{font-size:14px}
img{max-width:100%}