/* =========================================================
   MasterSuspension v3 · ronda 3 · 3 · Cómo trabajamos
   El despiece (render 3D de una pickup en un estudio claro) y la
   orden de trabajo, que narra los cinco pasos.
   Dueño: agente 3D. La base es la versión fija (sin JavaScript, sin
   WebGL o con «reducir movimiento»): imagen y orden completa.
   La escena fijada vive bajo .proc[data-ds="scene"], que pone
   assets/despiece.js. Tokens y tipografía (Barlow) en :root de assets/site.css.
   ========================================================= */

.proc { margin-top: var(--sec); --top-h: 69px; --ds-ease: cubic-bezier(.25, 1, .5, 1); --ds-glow: 68% 58%; }

/* ---------- el estudio: gris claro, con la luz más blanca detrás de la camioneta ---------- */
.proc__stage {
  position: relative;
  background: radial-gradient(54% 62% at var(--ds-glow), #FFFFFF, rgba(255, 255, 255, 0) 72%), var(--bg-2);
  border-block: 1px solid var(--line);
  min-height: min(100svh, 920px);
  display: flex;
  align-items: stretch;
}
.proc__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "head head head head head car car car car car car car"
    "ot ot ot ot ot car car car car car car car";
  padding-block: clamp(40px, 5vw, 64px);
  position: relative;
  z-index: 3;
}
.proc__head { grid-area: head; }

.proc__car { grid-area: car; position: relative; align-self: center; width: calc(100% + 2vw); margin-right: -2vw; }
.proc__still { width: 100%; height: auto; }
.proc__canvas, .proc__marks { display: none; }

/* ---------- orden de trabajo: panel blanco, centrado en su columna ---------- */
.ot {
  grid-area: ot; align-self: center; position: relative;
  margin-top: 28px;
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  color: var(--fg);
  box-shadow: 0 1px 2px rgba(18, 20, 23, .05), 0 18px 40px -18px rgba(18, 20, 23, .22);
}
.ot__h {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  font: 600 16px/1.2 var(--f-sans);
  color: var(--fg);
}
.ot__rows { position: relative; padding-inline: 20px; }
.ot__row {
  position: relative;
  display: grid; grid-template-columns: 28px minmax(0, 1fr) 22px; column-gap: 10px; align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-2);
  color: var(--fg-2);
}
.ot__row > * { position: relative; }
.ot__row:last-child { border-bottom: 0; }
.ot__n { font: 500 14px/1 var(--f-sans); font-variant-numeric: tabular-nums; color: var(--fg-2); }
.ot__b { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ot__tt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.ot__tt > b { font-weight: 600; font-size: 19px; line-height: 1.2; color: var(--fg); }
.ot__d { display: grid; grid-template-rows: 1fr; }
.ot__in { min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.ot__t { font-size: 15px; line-height: 1.45; color: var(--fg-2); }
.ot__pts { font-variant-numeric: tabular-nums; }
/* tilde: verde, en un círculo */
.ot__ck {
  width: 22px; height: 22px; padding: 3px; align-self: center; justify-self: end;
  border-radius: 50%; background: var(--bg-2);
  fill: none; stroke: var(--green); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 16; stroke-dashoffset: 16;
}
.ot__row.is-done .ot__ck { stroke-dashoffset: 0; background: rgba(21, 128, 61, .1); }
.ot__row:not(.is-done):not(.is-on) .ot__tt > b { color: var(--fg-2); font-weight: 500; }

/* insignias: sólidas, naranja de botón con texto blanco (5,2:1) */
.stamp {
  flex: none; display: inline-flex; align-items: center;
  font: 600 13px/1 var(--f-sans); white-space: nowrap;
  color: #FFFFFF; background: var(--orange-ink);
  padding: 6px 10px; border-radius: 6px;
}

.ot__f {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  font: 500 14px/1 var(--f-sans); font-variant-numeric: tabular-nums; color: var(--fg-2);
}
.ot__f i { flex: 1; height: 4px; border-radius: 2px; background: var(--bg-3); position: relative; overflow: hidden; }
.ot__f b { position: absolute; inset: 0; border-radius: 2px; background: var(--orange); transform-origin: 0 50%; transform: scaleX(var(--p, 1)); }

/* =========================================================
   La escena fijada (la pone despiece.js si hay WebGL y movimiento)
   ========================================================= */
.proc[data-ds="scene"] .proc__scene { height: 500vh; }
.proc[data-ds="scene"] .proc__stage {
  position: sticky;
  top: var(--top-h);
  height: calc(100vh - var(--top-h));
  height: calc(100svh - var(--top-h));
  min-height: 0;
  overflow: hidden;
}
.proc[data-ds="scene"] .proc__grid { height: 100%; }
.proc[data-ds="scene"] .proc__car { align-self: stretch; width: auto; margin-right: calc(-1 * var(--gut)); }
.proc[data-ds="scene"] .proc__car picture { display: none; }
.proc[data-ds="scene"] .proc__canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.proc[data-ds="scene"] .proc__marks { display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; }

/* los 18 puntos de la revisión: marcadores que se encienden cuando pasa el láser */
.pd {
  position: absolute; left: 0; top: 0;
  width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: #FFFFFF; box-shadow: inset 0 0 0 1.5px rgba(18, 20, 23, .6), 0 1px 3px rgba(18, 20, 23, .2);
  opacity: 0;
  transition: opacity 240ms var(--ds-ease), background-color 160ms, box-shadow 200ms;
}
.pd.is-show { opacity: 1; }
.pd.is-on { background: var(--orange); box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 5px rgba(234, 88, 12, .28); }
.pd.is-anchor { background: var(--orange); box-shadow: 0 0 0 2.5px #FFFFFF, 0 1px 4px rgba(18, 20, 23, .35); }

/* llamadas por pieza: tarjetita blanca con el número en naranja */
.proc__leads { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.proc__lead { fill: none; stroke: rgba(18, 20, 23, .55); stroke-width: 1; stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 520ms var(--ds-ease); }
.proc__lead.is-on { stroke-dashoffset: 0; }
.pc {
  position: absolute; left: 0; top: 0;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 11px 4px 4px;
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 18px -10px rgba(18, 20, 23, .3);
  font: 600 14px/1 var(--f-sans); color: var(--fg); white-space: nowrap;
  opacity: 0; visibility: hidden;
  transition: opacity 280ms var(--ds-ease), visibility 0s linear 280ms;
}
.pc b { font-weight: 600; font-size: 12.5px; font-variant-numeric: tabular-nums; padding: 4px 6px; border-radius: 5px; color: #FFFFFF; background: var(--orange-ink); }
.pc.is-left { flex-direction: row-reverse; padding: 4px 4px 4px 11px; }
.pc.is-on { opacity: 1; visibility: visible; transition: opacity 320ms var(--ds-ease) 200ms, visibility 0s; }

/* la orden en la escena: el renglón activo manda (la hoja no cambia de alto) */
.proc[data-ds="scene"] .ot__row { transition: color 260ms; }
.proc[data-ds="scene"] .ot__row:not(.is-done):not(.is-on) .ot__ck { opacity: 0; }
.proc[data-ds="scene"] .ot__ck { transition: stroke-dashoffset 380ms var(--ds-ease), opacity 200ms, background-color 300ms; }
/* renglón en curso: el círculo vacío con un aro naranja (pendiente) */
.proc[data-ds="scene"] .ot__row.is-on:not(.is-done) .ot__ck { background: none; box-shadow: inset 0 0 0 1.5px var(--orange-ink); }
.proc[data-ds="scene"] .ot__row.is-on { color: var(--fg); }
.proc[data-ds="scene"] .ot__row.is-on .ot__n { color: var(--orange-ink); font-weight: 600; }   /* 4,7:1 sobre el velo */
.proc[data-ds="scene"] .ot__tt > b { transform-origin: 0 100%; transition: transform 380ms var(--ds-ease), color 260ms; }
.proc[data-ds="scene"]:not(.is-compact) .ot__row.is-on .ot__tt > b { transform: scale(1.16); }
.proc[data-ds="scene"] .ot__row.is-on .ot__t { color: var(--fg); }
/* renglón activo: velo naranja muy claro y una franja naranja al borde del panel */
.proc[data-ds="scene"] .ot__row::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -20px; right: -20px;
  border-left: 3px solid var(--orange);
  background: var(--orange-tint);
  opacity: 0;
  transition: opacity 320ms var(--ds-ease);
}
.proc[data-ds="scene"] .ot__row.is-on::before { opacity: 1; }
/* la insignia aparece de izquierda a derecha, como cuando el sistema registra algo */
.proc[data-ds="scene"] .stamp {
  opacity: 0; transform: translateY(3px);
  clip-path: inset(0 100% 0 0 round 6px);
  transition: opacity 120ms linear, transform 280ms var(--ds-ease), clip-path 360ms var(--ds-ease);
}
.proc[data-ds="scene"] .stamp.is-on { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 6px); }
/* en la escena la insignia no suma alto: la hoja no cambia de tamaño cuando aparece */
.proc[data-ds="scene"] .ot__tt { flex-wrap: nowrap; }
.proc[data-ds="scene"] .stamp { margin-block: -6px; padding: 5px 9px; }
/* compacta: la insignia va con el renglón abierto y puede pisar la columna del tilde */
.proc.is-compact .stamp { margin-right: -32px; }
.proc.is-compact .ot__row:not(.is-on) .stamp { visibility: hidden; }
/* 02 cuenta los puntos mientras pasa el láser */
.proc[data-ds="scene"] .ot__pts.is-count { color: var(--orange-ink); font-weight: 700; }

/* Orden compacta (pantallas bajas o angostas): solo el renglón activo abierto.
   Todos los detalles miden lo mismo (--ot-on, lo pone despiece.js) y el que se abre y el que se
   cierra hacen la misma transición: la suma no cambia y la hoja no salta (CLS). */
.proc.is-compact .ot__d { grid-template-rows: minmax(0, 0fr); overflow: hidden; transition: grid-template-rows 460ms var(--ds-ease); }
.proc.is-compact .ot__row.is-on .ot__d { grid-template-rows: minmax(0, 1fr); }
.proc.is-compact .ot__in { min-height: var(--ot-on, 0px); }
.proc.is-compact .ot__row { padding: 9px 0; }
.proc.is-compact .ot__row:not(.is-on) .ot__tt > b { font-size: 17px; }
.proc.is-compact .ot__row.is-on .ot__tt > b { font-size: 22px; }
.proc.is-compact .ot__t { font-size: 16px; }

/* despiece.js mide la orden asentada */
.proc.is-measuring .ot__d, .proc.is-measuring .ot__in, .proc.is-measuring .ot__row { transition: none !important; }

/* =========================================================
   Angosto (tablet y mobile): título, camioneta y orden apilados
   ========================================================= */
@media (max-width: 1100px) {
  .proc { --ds-glow: 50% 44%; }
  .proc__grid {
    grid-template-areas:
      "head head head head head head head head head head head head"
      "car car car car car car car car car car car car"
      "ot ot ot ot ot ot ot ot ot ot ot ot";
  }
  .ot { max-width: 620px; align-self: end; }
  .proc[data-ds="scene"] .proc__grid { grid-template-rows: auto minmax(0, 1fr) auto; }
  .proc[data-ds="scene"] .proc__car { margin-right: 0; margin-inline: calc(-1 * var(--gut)); }
  .proc[data-ds="scene"] .ot { margin-top: 12px; }
}

@media (max-width: 720px) {
  .proc { --top-h: 0px; --ds-glow: 50% 36%; }
  .proc__stage { min-height: 0; }
  .proc__grid { grid-template-columns: 1fr; grid-template-areas: "head" "car" "ot"; padding-block: 40px; }
  .proc__car { margin: 14px -8px 0; width: calc(100% + 16px); }
  .ot { margin-top: 18px; }
  .ot__h { padding: 12px 14px; }
  .ot__rows { padding-inline: 14px; }
  .ot__f { padding: 11px 14px; }
  .ot__row { grid-template-columns: 24px minmax(0, 1fr) 22px; }
  .proc[data-ds="scene"] .ot__row::before { left: -14px; right: -14px; }
  .ot__tt > b { font-size: 18px; }
  .ot__t { font-size: 14.5px; }

  .proc[data-ds="scene"] .proc__scene { height: 400vh; }
  .proc[data-ds="scene"] .proc__stage { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .proc[data-ds="scene"] .proc__grid { grid-template-rows: auto minmax(0, 1fr) auto; padding-block: 22px 10px; }
  .proc[data-ds="scene"] .proc__car { margin: 0 calc(-1 * var(--gut)); width: auto; }
  .proc[data-ds="scene"] .ot { margin-top: 6px; }
  .proc[data-ds="scene"] .ot__h { padding-block: 10px; }
  .proc.is-compact .ot__row.is-on .ot__tt > b { font-size: 21px; }
  .proc[data-ds="scene"] .ot__f { padding-block: 9px; }
  .proc.is-compact .ot__row { padding: 7px 0; }
  .proc.is-compact .ot__row:not(.is-on) .ot__tt > b { font-size: 16px; }
  .proc.is-compact .ot__t { font-size: 15px; }
  .stamp { font-size: 11.5px; padding: 5px 8px; }
  .proc[data-ds="scene"] .stamp { padding: 4px 7px; }
  .proc.is-compact .stamp { margin-right: -30px; }
  .pc { font-size: 12.5px; gap: 6px; }
  .pc b { font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .ot__ck { stroke-dashoffset: 0; }
}