/* Proto&Go! — Corte y plegado de chapa (16-09-2026). Se carga después de pg.css e interiores.css.
   Prefijo ch-; los ajustes a componentes compartidos van acotados a body.pg-chapa. */

/* ---------- cabecera: la foto de 1200 px se refleja para dejar la pieza a la derecha del texto ---------- */
.pg-chapa .cnc-copy{max-width:min(700px,52%)}
.pg-chapa .cnc-copy h1{font-size:clamp(50px,6.2vw,100px)}
.pg-chapa .cnc-frame img{object-position:50% 58%;transform:translateX(calc(6% - var(--e)*2%)) scale(calc(.8 + var(--e)*.27)) scaleX(-1)}
.pg-chapa .cnc-specs dd{white-space:nowrap}

/* ---------- 01 · escena 3D ---------- */
.ch-stage{aspect-ratio:4/3;scroll-margin-top:calc(var(--nav,60px) + 24px)}
.ch-scene{position:absolute;inset:0;background:#e7eae5}
.ch-canvas{position:absolute;left:0;right:0;top:58px;bottom:78px;width:100%;height:calc(100% - 136px);display:block;touch-action:pan-y}
.ch-unavailable{position:absolute;inset:45% 20px auto;text-align:center;color:#40545b;font-size:14px}
.ch-readouts{position:absolute;left:14px;right:14px;bottom:14px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;border:1px solid #cbd2cb;border-radius:6px;background:#f6f8f4;overflow:hidden}
.ch-readouts>div{min-width:0;padding:9px 12px;border-left:1px solid #d7ddd6}
.ch-readouts>div:first-child{border-left:0}
.ch-readouts dt{display:flex;align-items:baseline;justify-content:space-between;gap:2px;font:600 12px/1.2 var(--mono);color:#40545b}
.ch-readouts dt span{font-size:10px;font-weight:400;color:#6a7772}
.ch-readouts dd{margin:5px 0 0;font:500 clamp(12px,1.35vw,18px)/1.2 var(--mono);font-variant-numeric:tabular-nums;color:#253941;white-space:nowrap}
.ch-readouts dd.hot{color:#b35a00}
.ch-axis .axis-info{align-self:stretch;justify-content:center}
.ch-metal-pick{display:flex;flex-direction:column;gap:10px;padding-top:20px;border-top:1px solid var(--line)}

/* pastillas de metal (claras y sobre tinta) */
.ch-pills{display:flex;flex-wrap:wrap;gap:6px}
.ch-pills button{font-size:.84rem;font-weight:500;padding:8px 13px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--graphite);display:inline-flex;align-items:center;gap:8px;transition:background .3s,color .3s,box-shadow .3s}
.ch-pills button::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--sw,#aaa);box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.ch-pills button:hover{box-shadow:inset 0 0 0 1px var(--ink);color:var(--ink)}
.ch-pills button[aria-pressed=true]{background:var(--ink);color:var(--paper);box-shadow:none}
.ch-pills.on-ink button{box-shadow:inset 0 0 0 1px var(--line-on-ink);color:var(--paper-on-ink)}
.ch-pills.on-ink button:hover{color:var(--paper);box-shadow:inset 0 0 0 1px var(--paper-on-ink)}
.ch-pills.on-ink button[aria-pressed=true]{background:var(--paper);color:var(--ink)}
.ch-pills button:focus-visible,.ch-mcard:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
[data-metal=acero-al-carbono]{--sw:#737b82}[data-metal=acero-inoxidable]{--sw:#c9d0d4}[data-metal=aluminio]{--sw:#e3e6e9}[data-metal=cobre]{--sw:#c77a4f}[data-metal=laton]{--sw:#d2ad5b}

/* ---------- 02 · metales y espesores ---------- */
.ch-weigh{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,72px);align-items:center;padding:clamp(22px,3vw,40px);border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line-on-ink);background:rgba(246,246,244,.03)}
.ch-weigh-ctl{display:flex;flex-direction:column;gap:clamp(24px,3vw,40px);min-width:0}
.ch-thick{display:flex;flex-direction:column;gap:12px}
.ch-thick .mono{color:var(--paper-on-ink)}
.ch-thick-out{font-family:var(--display);font-variation-settings:'wdth' 112;font-weight:600;font-size:clamp(4rem,8vw,7.4rem);letter-spacing:-.06em;line-height:.9;font-variant-numeric:tabular-nums;color:var(--paper)}
.ch-thick-out small{font-size:.28em;color:var(--orange);letter-spacing:0;margin-left:8px}
.sec.ink .ch-thick .ticks{color:var(--paper-on-ink)}
.ch-weigh-out{display:flex;flex-direction:column;gap:clamp(16px,2vw,26px);min-width:0}
.ch-edge{margin:0;position:relative}
.ch-edge svg{display:block;width:100%;height:auto;overflow:visible}
.ch-edge-side{fill:rgba(0,0,0,.25)}
.ch-edge-dim path{fill:none;stroke:var(--orange);stroke-width:1.5}
.ch-edge-dim text{font:500 15px var(--mono);fill:var(--paper);font-variant-numeric:tabular-nums}
.ch-edge-cap{position:absolute;left:0;top:0;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-on-ink)}
.ch-kpis{margin:0;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:0;border-top:1px solid var(--line-on-ink)}
.ch-kpis>div{padding:18px 18px 0 0;min-width:0}
.ch-kpis>div+div{padding-left:18px;border-left:1px solid var(--line-on-ink)}
.ch-kpis dt{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-on-ink)}
.ch-kpis dd{margin:8px 0 0;font-family:var(--display);font-variation-settings:'wdth' 112;font-weight:600;font-size:clamp(1.6rem,2.6vw,2.4rem);letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.ch-kpis .big dd{font-size:clamp(2.4rem,4.2vw,3.8rem);color:var(--paper)}
.ch-kpis dd small{font-size:.42em;color:var(--orange);letter-spacing:0;margin-left:5px}

.ch-mcards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:clamp(28px,3vw,44px)}
.ch-mcard{position:relative;display:flex;flex-direction:column;gap:6px;padding:16px 16px 18px;border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line-on-ink);background:rgba(246,246,244,.03);min-height:190px;transition:box-shadow .3s,background .3s,transform .4s var(--ease)}
.ch-mcard:hover{box-shadow:inset 0 0 0 1px var(--orange);background:rgba(246,246,244,.06);transform:translateY(-3px)}
.ch-mcard.on{box-shadow:inset 0 0 0 1px var(--paper-on-ink)}
.ch-mcard .sym{font-family:var(--display);font-variation-settings:'wdth' 112;font-weight:600;font-size:clamp(1.8rem,2.6vw,2.4rem);letter-spacing:-.04em;line-height:1;margin-bottom:auto;padding-bottom:18px}
.ch-mcard .nm{font-weight:500;line-height:1.25}
.ch-mcard .dn{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;color:var(--paper-on-ink);font-variant-numeric:tabular-nums}
.ch-mcard .fin{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.ch-mcard .fin i{font-style:normal;font-size:.7rem;padding:3px 7px;border-radius:3px;background:rgba(246,246,244,.08);color:var(--paper-on-ink)}
.ch-mcard .go{position:absolute;right:14px;top:14px;width:15px;height:15px;stroke:var(--paper-on-ink);fill:none;stroke-width:1.8;transition:transform .3s var(--ease),stroke .3s}
.ch-mcard:hover .go{stroke:var(--orange);transform:translate(2px,-2px)}

/* ---------- 03 · calculadora de desarrollo ---------- */
.ch-form{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;padding:18px}
.ch-calc .out{display:block}
.ch-result{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.ch-main{padding:24px 18px 18px;display:flex;flex-direction:column;gap:18px;justify-content:center}
.ch-L .lbl,.ch-sub .lbl{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}
.ch-L b{display:flex;align-items:baseline;gap:8px;margin-top:10px;font-family:var(--display);font-variation-settings:'wdth' 112;font-weight:600;font-size:clamp(3rem,5.4vw,5.2rem);letter-spacing:-.06em;line-height:.9;font-variant-numeric:tabular-nums}
.ch-L b small{font-size:.3em;color:var(--orange);letter-spacing:0}
.ch-sub{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ch-sub>div{padding:14px 16px;border-radius:4px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column;gap:8px;min-width:0}
.ch-sub .val{font-family:var(--display);font-variation-settings:'wdth' 112;font-weight:600;font-size:clamp(1.5rem,2.2vw,2rem);letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:6px}
.ch-sub .val small{font-size:.45em;color:var(--steel);letter-spacing:0}
.ch-formula{font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;color:var(--steel)}
.ch-viz{padding:18px;border-left:1px solid var(--line);background:var(--paper);display:grid;align-content:center}
.ch-strip{grid-column:1/-1;padding:12px 18px 18px;background:var(--paper);border-top:1px solid var(--line)}
.ch-viz svg,.ch-strip svg{width:100%;height:auto;display:block;background:#fff;border-radius:4px;box-shadow:inset 0 0 0 1px var(--line);font-family:var(--mono)}
.ch-calc .sheet{fill:#e3e4e1;stroke:var(--ink);stroke-width:1.4;stroke-linejoin:round}
.ch-calc .neutral{fill:none;stroke:var(--orange);stroke-width:1.4;stroke-dasharray:6 4}
.ch-calc .bend{fill:rgba(240,138,2,.14);stroke:none}
.ch-calc .bl{stroke:var(--orange-deep);stroke-width:1;stroke-dasharray:3 3}
.ch-calc .dim{fill:none;stroke:var(--graphite);stroke-width:1}
.ch-calc .ext{fill:none;stroke:rgba(30,32,35,.35);stroke-width:.8;stroke-dasharray:2 3}
.ch-calc .arrow{fill:var(--graphite)}
.ch-calc svg text{font-size:13px;fill:var(--ink);font-variant-numeric:tabular-nums}
.ch-calc svg text.o{fill:var(--orange-deep)}
.ch-calc svg text.s{fill:var(--steel);font-size:11px;letter-spacing:.06em}
.ch-calc .halo{paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round}
.ch-calc .out.stale .ch-result{opacity:.4}

/* ---------- 04 · reglas ---------- */
.pg-chapa .rule svg .k{fill:none;stroke:var(--ink);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.pg-chapa .rule svg .ch-bendline{fill:none;stroke:var(--orange);stroke-width:1.2;stroke-dasharray:5 4}
.pg-chapa .rule .big{white-space:nowrap}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .ch-mcards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ch-form{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .pg-chapa .cnc-copy{max-width:none}
  .pg-chapa .cnc-copy h1{font-size:clamp(44px,11.4vw,88px)}
  .pg-chapa .cnc-frame img{transform:scaleX(-1);object-position:30% 60%}
  .ch-weigh,.ch-result{grid-template-columns:1fr}
  .ch-viz{border-left:0;border-top:1px solid var(--line);padding-top:12px}
}
@media (max-width:600px){
  .ch-stage{aspect-ratio:1/1}
  .ch-stage .axis-tabs{gap:4px;left:10px;right:10px;top:10px;flex-wrap:nowrap}
  .ch-stage .axis-tabs button{flex:1;padding:9px 6px;font-size:12px;white-space:nowrap}
  .ch-canvas{top:48px;bottom:70px;height:calc(100% - 118px)}
  .ch-readouts{left:10px;right:10px;bottom:10px}
  .ch-readouts>div{padding:8px 7px}
  .ch-readouts dt{font-size:10px}
  .ch-readouts dd{font-size:13px}
  .ch-mcards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ch-mcards .ch-mcard:last-child{grid-column:1/-1;min-height:0}
  .ch-mcard{min-height:170px}
  .ch-form{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ch-edge-dim text{font-size:26px}
  .ch-kpis{grid-template-columns:1fr 1fr}
  .ch-kpis .big{grid-column:1/-1;padding-bottom:18px}
  .ch-kpis>div+div{border-left:0;padding-left:0}
  .ch-kpis>div:nth-child(3){padding-left:18px;border-left:1px solid var(--line-on-ink)}
  .ch-kpis>div:nth-child(2){border-top:1px solid var(--line-on-ink)}
  .ch-kpis>div:nth-child(3){border-top:1px solid var(--line-on-ink)}
  .ch-sub{grid-template-columns:1fr 1fr;gap:8px}
  .ch-sub>div{padding:12px}
  .ch-sub .lbl{font-size:.54rem}
  .ch-viz{padding:10px 10px 0}
  .ch-strip{padding:10px}
}