/* Proto&Go! — Colada al vacío (16-09-2026). Se carga después de pg.css e interiores.css. Prefijo cv-. */

.pg-colada .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pg-colada .cnc-frame img{object-position:58% 50%}

/* 01 · Autonomous 3D loop, same studio palette as the CNC scenes. */
.cv-flow{scroll-margin-top:var(--nav)}
.cv-view{position:relative;margin:0;aspect-ratio:16/9.4;border-radius:var(--r);overflow:hidden;background:#e7eae5;box-shadow:inset 0 0 0 1px var(--line),0 40px 80px -50px rgba(30,32,35,.35);isolation:isolate}
.cv-view canvas{display:block;width:100%;height:calc(100% - 102px);position:absolute;inset:0 0 auto}
.cv-loop-fade{position:absolute;inset:0 0 102px;background:#e7eae5;opacity:0;pointer-events:none}
.cv-unavailable{position:absolute;inset:0;background:#e7eae5;display:grid;place-content:center;text-align:center}
.cv-unavailable[hidden]{display:none}
.cv-unavailable img{width:min(80%,560px);max-height:70%;object-fit:contain;margin:auto}
.cv-unavailable p{padding:16px;color:var(--ink-2)}
/* Passive subtitles: the scene remains a video-like loop with no controls. */
.cv-caption{position:absolute;bottom:0;left:0;right:0;min-height:102px;box-sizing:border-box;display:flex;align-items:center;gap:18px;padding:18px 30px;background:rgba(247,248,244,.94);border-top:1px solid rgba(38,61,70,.1);color:#263740}
.cv-phase-number{font:500 .86rem var(--mono);color:var(--orange-deep);align-self:center;flex:none}
.cv-caption strong{display:block;font-size:.77rem;letter-spacing:.09em;text-transform:uppercase;line-height:1.4;margin-bottom:5px}
.cv-caption p{margin:0;font-size:clamp(.94rem,1.45vw,1.12rem);line-height:1.45;max-width:70ch}
@media(max-width:700px){.cv-view{aspect-ratio:auto;height:clamp(420px,78vw,560px)}.cv-flow .head-2{gap:20px}.cv-view canvas{height:calc(100% - 128px)}.cv-loop-fade{bottom:128px}.cv-caption{min-height:128px;padding:16px;gap:12px}.cv-caption strong{font-size:.66rem}.cv-caption p{font-size:.89rem}.cv-phase-number{font-size:.76rem}}

/* Match the CNC layout: a compact scene and its current phase alongside. */
.cv-view--split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,3.4vw,56px);align-items:center;aspect-ratio:auto;height:auto;overflow:visible;background:none;box-shadow:none}
.cv-stage{position:relative;min-width:0;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:#e7eae5;box-shadow:inset 0 0 0 1px var(--line),0 40px 80px -50px rgba(30,32,35,.35);isolation:isolate}
.cv-view--split canvas{inset:0;height:100%}
.cv-view--split .cv-loop-fade{inset:0}
.cv-view--split .cv-caption{position:static;min-width:0;min-height:0;flex-direction:column;align-items:flex-start;gap:18px;padding:0;background:none;border:0;color:var(--ink)}
.cv-view--split .cv-phase-number{align-self:flex-start;font-size:.7rem;letter-spacing:.1em}
.cv-view--split .cv-phase-number::after{content:' / 04'}
.cv-view--split .cv-caption strong{font-family:var(--display);font-variation-settings:'wdth' 112;font-weight:600;font-size:clamp(1.8rem,2.8vw,2.6rem);letter-spacing:-.03em;text-transform:none;line-height:1.15;margin-bottom:18px}
.cv-view--split .cv-caption p{font-size:1.02rem;line-height:1.6;max-width:44ch;min-height:4.8em;color:var(--ink-2)}
@media(max-width:900px){.cv-view--split{grid-template-columns:1fr;gap:24px}.cv-view--split .cv-caption{gap:12px}.cv-view--split .cv-caption strong{margin-bottom:12px}.cv-view--split .cv-caption p{max-width:60ch;min-height:4.8em}}

/* =====================================================================
   02 · materiales (oscura): selector de PU y durómetro
   ===================================================================== */
.cv-pu{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,3.4vw,56px);align-items:stretch}
.cv-pu-stage{position:relative;border-radius:var(--r);overflow:hidden;background:#0c0c0c;box-shadow:inset 0 0 0 1px var(--line-on-ink);aspect-ratio:8/5;align-self:start}
.cv-pu-photos{position:absolute;inset:0}
.cv-pu-photos img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transform:scale(1.035);transition:opacity .8s var(--ease),transform 1.4s var(--ease)}
.cv-pu-photos img.on{opacity:1;transform:none}
.cv-pu-tabs{position:absolute;left:14px;top:14px;right:14px;display:flex;flex-wrap:wrap;gap:6px;z-index:2}
.cv-pu-tabs button{display:inline-flex;align-items:center;gap:8px;font-size:.84rem;font-weight:500;padding:9px 14px;border-radius:999px;background:rgba(30,32,35,.72);color:var(--paper);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px var(--line-on-ink);transition:background .3s,color .3s,transform .3s var(--ease)}
.cv-pu-tabs button:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1px var(--paper-on-ink)}
.cv-pu-tabs button[aria-selected=true]{background:var(--paper);color:var(--ink);box-shadow:none}
.cv-pu-tabs button:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.cv-pu-tabs i{width:9px;height:9px;border-radius:50%;background:var(--c);flex:none}
.cv-pu-tabs i.clear{background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(255,255,255,.15));box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.cv-pu-tabs button[aria-selected=true] i.clear{box-shadow:inset 0 0 0 1px var(--steel);background:linear-gradient(135deg,#fff,#c9ccce)}
.cv-pu-info{display:flex;flex-direction:column;gap:22px;min-width:0}
.cv-pu-panel{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.cv-pu-panel[hidden]{display:none}
.cv-pu-panel.show>*{animation:rise .6s var(--ease) both}
.cv-pu-panel.show>:nth-child(2){animation-delay:.05s}.cv-pu-panel.show>:nth-child(3){animation-delay:.1s}.cv-pu-panel.show>:nth-child(4){animation-delay:.15s}
.cv-pu-panel .num{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:#ff8a16}
.cv-pu-panel h3{font-size:clamp(1.8rem,2.8vw,2.6rem)}
.cv-pu-panel p{color:var(--paper-on-ink);max-width:42ch;font-size:1.02rem}
.cv-eq{display:flex;flex-wrap:wrap;gap:6px}
.cv-eq span{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;padding:5px 9px;border-radius:3px;box-shadow:inset 0 0 0 1px var(--line-on-ink);color:var(--paper)}

.cv-duro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);grid-template-areas:"read svg" "rng rng" "tk tk";column-gap:18px;row-gap:4px;align-items:center;padding-top:22px;border-top:1px solid var(--line-on-ink);margin-top:auto}
.cv-duro[hidden]{display:none}
.cv-duro-read{grid-area:read;display:flex;flex-direction:column;gap:6px;min-width:0}
.cv-duro-read .mono{color:var(--paper-on-ink)}
.cv-duro output{font-family:var(--display);font-variation-settings:'wdth' 112;font-weight:600;font-size:clamp(2.6rem,4.2vw,3.8rem);letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums;color:var(--paper)}
.cv-duro output small{font-size:.3em;color:#ff8a16;letter-spacing:0;margin-left:6px}
.cv-duro p{color:var(--paper-on-ink);font-size:.95rem;min-height:2.8em;line-height:1.4}
.cv-duro-svg{grid-area:svg;width:100%;height:auto;display:block;overflow:visible}
.cv-duro input{grid-area:rng}
.cv-duro .ticks{grid-area:tk;color:var(--paper-on-ink)}
.cv-duro-svg .body{fill:#2b2e32;stroke:rgba(246,246,244,.35);stroke-width:1}
.cv-duro-svg .arc{fill:none;stroke:rgba(246,246,244,.28);stroke-width:1}
.cv-duro-svg .ticks line{stroke:rgba(246,246,244,.5);stroke-width:1}
.cv-duro-svg .ticks line.o{stroke:#ff8a16}
.cv-duro-svg .needle{stroke:#ff8a16;stroke-width:1.6;stroke-linecap:round}
.cv-duro-svg .hub{fill:var(--paper)}
.cv-duro-svg .foot{fill:#3a3e43;stroke:rgba(246,246,244,.35);stroke-width:1}
.cv-duro-svg .pin{fill:#c9ced3}
.cv-duro-svg .sample{fill:var(--sc,#3b7bd8);fill-opacity:var(--so,1);transition:fill .5s var(--ease),fill-opacity .5s}
.cv-duro-svg .surf{fill:none;stroke:rgba(255,255,255,.75);stroke-width:1.2}
.cv-duro-svg .base{stroke:rgba(246,246,244,.3);stroke-width:1}

@media (max-width:900px){
  .cv-pu{grid-template-columns:1fr}
  .cv-pu-tabs{left:10px;top:10px;right:10px;gap:5px}
  .cv-pu-tabs button{font-size:.76rem;padding:7px 10px;gap:6px}
}
@media (max-width:560px){
  .cv-pu-stage{aspect-ratio:auto;background:none;box-shadow:none;overflow:visible}
  .cv-pu-tabs{position:static;margin-bottom:10px}
  .cv-pu-photos{position:relative;aspect-ratio:8/5;border-radius:var(--r);overflow:hidden;background:#0c0c0c}
  .cv-pu-photos img{object-position:50% 50%}
  .cv-duro{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:10px}
  .cv-duro output{font-size:2.5rem}
}

/* =====================================================================
   03 · color: fotografía independiente para cada color, proceso y brillo
   ===================================================================== */
.cv-paint{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,3.4vw,56px);align-items:start;--c:#ee5418}
.cv-paint-stage{position:relative;margin:0;border-radius:var(--r);overflow:hidden;background:#0c0c0c;aspect-ratio:8/5;box-shadow:0 40px 80px -46px rgba(30,32,35,.55)}
.cv-paint-img{position:absolute;inset:0}
.cv-paint-img img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.cv-paint-status{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:28px;color:#e1e6ea;font-size:.9rem;background:#0c0c0c}
.cv-paint-status[hidden]{display:none}
.cv-paint-label{position:absolute;right:14px;top:14px;text-align:right;font:10px/1.6 var(--mono);letter-spacing:.04em;padding:11px 14px;background:rgba(21,25,29,.9);border:1px solid #ffffff26;border-radius:6px;color:#e1e6ea;z-index:2}
.cv-paint-label strong{display:block;font:600 17px/1.35 var(--body);color:#fff}
.cv-paint-label strong::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--c);margin-right:8px;vertical-align:1px;box-shadow:0 0 0 1px rgba(255,255,255,.4);transition:background .6s}
.cv-paint[data-fin=clear] .cv-paint-label strong::before{background:linear-gradient(135deg,#fff,rgba(255,255,255,.1))}

.cv-paint-ctl{display:flex;flex-direction:column;gap:24px;min-width:0;padding-top:clamp(0px,1.4vw,22px)}
.cv-field{display:flex;flex-direction:column;gap:10px}
.cv-field[hidden]{display:none}
.cv-swatches{display:flex;flex-wrap:wrap;gap:8px}
.cv-swatches button{width:44px;height:44px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(30,32,35,.18),0 0 0 3px var(--paper),0 0 0 4px transparent;transition:transform .3s var(--ease),box-shadow .3s}
.cv-swatches button:hover{transform:translateY(-2px)}
.cv-swatches button[aria-checked=true]{box-shadow:inset 0 0 0 1px rgba(30,32,35,.18),0 0 0 3px var(--paper),0 0 0 5px var(--ink)}
.cv-swatches button:focus-visible{outline:2px solid var(--orange);outline-offset:5px}
.cv-ral-name{font-size:1rem;color:var(--ink-2)}
.cv-ral-name b{font-family:var(--display);font-variation-settings:'wdth' 112;font-weight:600;font-size:1.5rem;letter-spacing:-.03em;color:var(--ink);margin-right:8px}
.cv-seg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);align-self:flex-start}
.cv-seg button{font-size:.88rem;font-weight:500;padding:9px 15px;border-radius:999px;color:var(--ink-2);transition:background .3s var(--ease),color .3s}
.cv-seg button:hover{color:var(--ink)}
.cv-seg button[aria-checked=true]{background:var(--ink);color:var(--paper)}
.cv-seg button:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.cv-finish-explanation{padding-top:20px;border-top:1px solid var(--line)}
.cv-finish-explanation [hidden]{display:none}
.cv-finish-explanation h3{font-family:var(--display);font-variation-settings:'wdth' 112;font-weight:600;letter-spacing:-.02em;font-size:1.2rem;line-height:1.3;margin:0 0 12px}
.cv-finish-explanation p{font-size:.94rem;line-height:1.6;color:var(--ink-2);margin:0 0 10px}
.cv-paint-ctl .cv-color-note{font-size:.77rem;line-height:1.5;color:var(--steel);margin-top:-12px}

@media (max-width:900px){
  .cv-paint{grid-template-columns:1fr}
  .cv-paint-label{right:10px;top:10px;padding:8px 11px}
  .cv-paint-label strong{font-size:15px}
}
@media (max-width:560px){
  .cv-paint-stage{aspect-ratio:auto}
  .cv-paint-img{position:relative;aspect-ratio:8/5}
  .cv-paint-label{position:static;text-align:left;border:0;border-top:1px solid #ffffff20;border-radius:0;background:#15191d;padding:10px 14px}
  .cv-swatches{gap:6px}
  .cv-swatches button{width:38px;height:38px}
  .cv-seg button{padding:8px 12px;font-size:.84rem}
}

/* =====================================================================
   04 · ¿colada o inyección? cantidad y comparativa viva
   ===================================================================== */
.cv-qty{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,72px);align-items:start}
.cv-qty-ctl{display:flex;flex-direction:column;gap:26px;position:sticky;top:calc(60px + 28px)}
.cv-qty-read{display:flex;flex-direction:column;gap:8px}
.cv-qty-read output{font-family:var(--display);font-variation-settings:'wdth' 112;font-weight:600;font-size:clamp(3.4rem,6.4vw,6rem);letter-spacing:-.06em;line-height:.9;font-variant-numeric:tabular-nums}
.cv-qty-read output small{font-size:.24em;color:var(--steel);letter-spacing:0;margin-left:8px}
.cv-qty-rail{display:flex;flex-direction:column;gap:4px}
.cv-zones{position:relative;height:34px}
.cv-zones .z{position:absolute;top:0;bottom:0;left:calc(var(--a)*100%);width:calc((var(--b) - var(--a))*100%);border-radius:3px;background:var(--paper-2);display:flex;align-items:center;padding:0 8px;overflow:hidden;transition:background .4s var(--ease),color .4s;box-shadow:inset -2px 0 0 var(--paper)}
.cv-zones .z b{position:relative;z-index:1;font-family:var(--mono);font-size:.58rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:var(--steel);overflow:hidden;text-overflow:ellipsis}
.cv-zones .sweet{position:absolute;bottom:0;height:3px;left:calc(var(--a)*100%);width:calc((var(--b) - var(--a))*100%);background:var(--orange)}
.cv-qty[data-zone="3d"] .z3d,.cv-qty[data-zone=cv] .zcv,.cv-qty[data-zone=in] .zin{background:var(--ink)}
.cv-qty[data-zone="3d"] .z3d b,.cv-qty[data-zone=cv] .zcv b,.cv-qty[data-zone=in] .zin b{color:var(--paper)}
.cv-qty .rng{margin-top:2px}
.cv-molds{display:flex;flex-direction:column;gap:12px;padding-top:20px;border-top:1px solid var(--line)}
.cv-molds-head{display:flex;align-items:baseline;gap:10px}
.cv-molds-head b{font-family:var(--display);font-variation-settings:'wdth' 112;font-weight:600;font-size:clamp(2rem,3vw,2.6rem);letter-spacing:-.05em;line-height:1;color:var(--orange);font-variant-numeric:tabular-nums}
.cv-molds-head span{color:var(--ink-2)}
.cv-molds-row{display:flex;flex-wrap:wrap;gap:5px;min-height:26px}
.cv-molds-row i{width:22px;height:22px;border-radius:3px;background:#e8ebea;box-shadow:inset 0 0 0 1px rgba(30,32,35,.2);position:relative;animation:cv-pop .45s var(--ease) both}
.cv-molds-row i::after{content:"";position:absolute;left:5px;right:5px;top:8px;height:6px;border-radius:1px;background:var(--orange)}
.cv-molds-row .more{font-family:var(--mono);font-size:.7rem;align-self:center;color:var(--steel);margin-left:4px}
.cv-qty[data-zone=in] .cv-molds{opacity:.45}
@keyframes cv-pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}

.cv-cmp{display:flex;flex-direction:column;border-top:1px solid var(--line-strong)}
.cv-cmp-row{display:grid;grid-template-columns:minmax(0,.8fr) repeat(3,minmax(0,1fr));border-bottom:1px solid var(--line)}
.cv-cmp-row>span{padding:16px 14px;font-size:.95rem;line-height:1.35;transition:background .4s var(--ease),color .4s}
.cv-cmp-row .lbl{padding-left:0;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);align-self:center}
.cv-cmp-row .col{color:var(--steel)}
.cv-cmp-row.head .col{display:flex;flex-direction:column;gap:6px;align-items:flex-start;padding-top:18px}
.cv-cmp-row.head b{font-family:var(--display);font-variation-settings:'wdth' 110;font-weight:600;font-size:1.15rem;letter-spacing:-.02em;line-height:1.1;color:var(--ink)}
.cv-cmp .fit{font-style:normal;font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;padding:3px 7px;border-radius:3px;background:var(--orange);color:var(--ink);opacity:0;transform:translateY(4px);transition:opacity .35s,transform .35s var(--ease)}
.cv-cmp .lnks{display:flex;gap:12px;font-size:.84rem}
.cv-qty[data-zone="3d"] .c3d,.cv-qty[data-zone=cv] .ccv,.cv-qty[data-zone=in] .cin{background:#fff;color:var(--ink)}
.cv-qty[data-zone="3d"] .cv-cmp-row:not(.head) .c3d,.cv-qty[data-zone=cv] .cv-cmp-row:not(.head) .ccv,.cv-qty[data-zone=in] .cv-cmp-row:not(.head) .cin{font-weight:500}
.cv-qty[data-zone="3d"] .head .c3d .fit,.cv-qty[data-zone=cv] .head .ccv .fit,.cv-qty[data-zone=in] .head .cin .fit{opacity:1;transform:none}
.cv-qty[data-zone="3d"] .head .c3d,.cv-qty[data-zone=cv] .head .ccv,.cv-qty[data-zone=in] .head .cin{box-shadow:inset 0 2px 0 var(--orange)}
.cv-q-flash{animation:cv-flash .6s var(--ease)}
@keyframes cv-flash{from{color:var(--orange-deep)}}

@media (max-width:900px){
  .cv-qty{grid-template-columns:1fr}
  .cv-qty-ctl{position:static}
}
@media (max-width:640px){
  .cv-cmp-row{grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr)}
  .cv-cmp-row .col,.cv-cmp-row.head .col{display:none}
  .cv-qty[data-zone="3d"] .cv-cmp-row .c3d,.cv-qty[data-zone=cv] .cv-cmp-row .ccv,.cv-qty[data-zone=in] .cv-cmp-row .cin{display:flex;align-items:center}
  .cv-cmp-row.head .lbl{display:none}
  .cv-qty .cv-cmp-row.head .col{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:14px 12px}
  .cv-cmp-row.head .lnks{margin-left:auto}
  .cv-cmp-row>span{padding:13px 12px}
  .cv-zones .z b{font-size:.5rem;letter-spacing:.04em}
  .cv-zones .z{padding:0 5px}
  .cv-zones .z3d b,.cv-zones .zin b{font-size:0}
  .cv-zones .z3d b::after{content:"3D·CNC";font-size:.5rem}
  .cv-zones .zin b::after{content:"Iny.";font-size:.5rem}
}

/* =====================================================================
   05 · reglas de diseño (dibujo que se traza al entrar)
   ===================================================================== */
.pg-colada .rule svg{height:140px}
.pg-colada .rule svg .ins{fill:#9aa1a8;stroke:var(--ink);stroke-width:1}
.pg-colada .rule svg .hatch{fill:none;stroke:rgba(30,32,35,.35);stroke-width:.8}
.pg-colada .rule h3{margin-top:4px}
.pg-colada .rule p{max-width:40ch}
@media (prefers-reduced-motion:reduce){.pg-colada .rule svg .draw{transition:none;stroke-dashoffset:0}}

/* Referencias de las seis recomendaciones de colada. */
