/* PromoPrint · «Fabricación a tu medida» (/servicios/fabricacion/), el taller abierto.
   La página cuenta la fabricación de UN producto: lo que el cliente decide (puntos sobre una mochila real),
   y el proceso en cinco capítulos con el video del taller fijo que cambia de escena mientras se lee, unidos por
   un hilo naranja que se va "cosiendo" con el scroll. Comparte hero, encabezados y carriles con servicios.css;
   comportamiento en taller.js. Prefijo tl-. */

/* Título del hero en dos frases largas: un poco más contenido que el de las técnicas. */
.tl .sv-hero__title { font-size: clamp(2.4rem, 0.9rem + 4vw, 5.4rem); }

/* ── Lo que decides tú ───────────────────────────────────────────────── */
.tl-decide { padding: clamp(80px, 10vw, 152px) 0 clamp(72px, 8vw, 120px); }
.tl-decide__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.tl-list { display: grid; gap: 2px; margin: 32px 0 0; padding: 0; list-style: none; }
.tl-item {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; width: 100%; padding: 14px 14px 14px 12px;
  border: 0; border-radius: 14px; background: none; color: inherit; text-align: left; cursor: pointer;
  transition: background-color var(--t-ui) var(--ease-ui);
}
.tl-item__n { padding-top: 4px; font: 600 12px/1 var(--font); letter-spacing: 0.14em; color: var(--brand); font-variant-numeric: tabular-nums; }
.tl-item__t { font: 600 17px/1.3 var(--font); letter-spacing: -0.01em; color: var(--paper); transition: color var(--t-ui) var(--ease-ui); }
.tl-item__d { grid-column: 2; margin-top: 3px; font: 400 14.5px/1.5 var(--font); color: var(--paper-64); }
.tl-item:hover, .tl-item.is-on { background: rgb(var(--paper-rgb) / 0.05); }
.tl-item.is-on .tl-item__t { color: var(--brand); }
.tl-item:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.tl-figura { margin: 0; }
.tl-figura__marco {
  position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 26px; background: var(--carbon);
  box-shadow: 0 50px 120px -50px rgba(0, 0, 0, 0.9);
}
.tl-figura__marco img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tl-figura figcaption { margin-top: 14px; font: 500 13.5px/1.4 var(--font); color: var(--paper-64); }
.tl-figura figcaption a { color: inherit; text-decoration: none; border-bottom: 1px solid rgb(var(--paper-rgb) / 0.25); }
.tl-figura figcaption a:hover { color: var(--brand); border-color: currentColor; }

/* Puntos sobre la foto: cada decisión señala la parte real de la mochila. */
.tl-punto {
  position: absolute; left: var(--x); top: var(--y); z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; margin: -15px 0 0 -15px;
  padding: 0; border: 0; border-radius: 50%; background: var(--brand); color: #0b0b0c; cursor: pointer;
  font: 700 10.5px/1 var(--font); letter-spacing: 0.04em; box-shadow: 0 0 0 3px rgba(11, 11, 12, 0.55);
  transition: transform 320ms var(--ease-out), opacity 600ms var(--ease-out);
  transition-delay: 0ms, calc(350ms + var(--i, 0) * 110ms);
}
.tl-punto::before {
  content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid var(--brand); opacity: 0.7;
  animation: tl-pulso 2.6s ease-out infinite; animation-delay: calc(var(--i, 0) * 0.4s);
}
@keyframes tl-pulso { 0% { transform: scale(0.75); opacity: 0.8; } 100% { transform: scale(2); opacity: 0; } }
.tl-punto:hover, .tl-punto.is-on { transform: scale(1.18); }
.tl-punto.is-on::before { animation: none; opacity: 1; transform: scale(1.4); }
.tl-punto:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.tl-punto__tip {
  position: absolute; left: 50%; top: calc(100% + 12px); transform: translate(-50%, -4px); white-space: nowrap; padding: 9px 13px; border-radius: 999px;
  background: rgb(var(--glass-rgb) / 0.9); color: var(--paper); font: 600 13px/1 var(--font); letter-spacing: 0;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.8);
  opacity: 0; pointer-events: none; transition: opacity 200ms var(--ease-ui), transform 260ms var(--ease-out);
}
.tl-punto.is-on .tl-punto__tip { opacity: 1; transform: translate(-50%, 0); }
.tl-punto--arriba .tl-punto__tip { top: auto; bottom: calc(100% + 12px); }
.tl-punto--izq .tl-punto__tip { left: auto; right: -10px; transform: translate(0, -4px); }
.tl-punto--izq.is-on .tl-punto__tip { transform: none; }
/* Entrada: la foto aparece (data-reveal) y los puntos van cayendo sobre ella uno a uno. */
.js-sv .tl-figura:not(.is-in) .tl-punto { opacity: 0; transform: scale(0.4); }

/* ── Cómo se fabrica: escenario fijo + capítulos ─────────────────────── */
.tl-proceso { padding: 0 0 clamp(88px, 10vw, 152px); }
.tl-proceso__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.tl-stage {
  position: sticky; top: calc(var(--site-nav-h, 80px) + 24px); aspect-ratio: 4 / 3; overflow: hidden; border-radius: 26px; background: var(--carbon);
  box-shadow: 0 50px 120px -50px rgba(0, 0, 0, 0.9);
}
.tl-video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 68% 40%); transition: object-position 900ms var(--ease-out); }
.tl-stage__tag {
  position: absolute; left: 18px; bottom: 18px; display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 999px;
  background: rgba(11, 11, 12, 0.62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #f4f2ee; font: 600 13px/1 var(--font);
}
.tl-stage__tag [data-stage-n] { color: var(--brand); letter-spacing: 0.14em; font-variant-numeric: tabular-nums; }

.tl-capitulos { position: relative; padding-left: 48px; }
/* El hilo: la base son puntadas tenues; el trazo naranja se cose encima según avanza el scroll (--p de taller.js). */
.tl-hilo { position: absolute; left: 12px; top: 0; width: 24px; height: 100%; overflow: visible; pointer-events: none; }
.tl-hilo path { fill: none; stroke-linecap: round; }
.tl-hilo__base { stroke: rgb(var(--paper-rgb) / 0.2); stroke-width: 2; stroke-dasharray: 3 7; }
.tl-hilo__trazo { stroke: var(--brand); stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 0)); }
.tl-caps { margin: 0; padding: 0; list-style: none; }
.tl-cap { position: relative; min-height: 50vh; padding: 10px 0 clamp(40px, 7vh, 88px); opacity: 0.38; transition: opacity 500ms var(--ease-ui); }
.tl-cap:last-child { min-height: 0; padding-bottom: 24px; }
.tl-cap.is-on { opacity: 1; }
.tl-cap::before {
  content: ""; position: absolute; left: -43px; top: 16px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink);
  border: 2px solid rgb(var(--paper-rgb) / 0.32); transition: background-color 300ms var(--ease-ui), border-color 300ms var(--ease-ui), box-shadow 300ms var(--ease-ui);
}
.tl-cap.is-on::before { background: var(--brand); border-color: var(--brand); box-shadow: 0 0 0 6px rgba(253, 87, 0, 0.18); }
.tl-cap__n { font: 600 12.5px/1 var(--font); letter-spacing: 0.14em; color: var(--brand); font-variant-numeric: tabular-nums; }
.tl-cap__t { margin: 12px 0 10px; font: 600 clamp(1.5rem, 1.1rem + 1.2vw, 2.3rem)/1.1 var(--font); letter-spacing: -0.025em; }
.tl-cap p { max-width: 40ch; margin: 0; font: 400 clamp(1rem, 0.95rem + 0.25vw, 1.15rem)/1.6 var(--font); color: var(--paper-80); }

/* ── Tableta y teléfono ──────────────────────────────────────────────── */
@media (max-width: 860px) {
  .tl-decide__grid { grid-template-columns: 1fr; gap: 28px; }
  .tl-decide__grid .tl-figura { order: -1; }
  .tl-list { margin-top: 20px; }
  .tl-proceso__grid { grid-template-columns: 1fr; gap: 0; }
  /* El escenario queda pegado arriba, bajo el menú; los capítulos pasan por debajo y lo hacen cambiar. */
  .tl-stage { position: sticky; top: var(--site-nav-h, 68px); z-index: 2; aspect-ratio: 16 / 10; border-radius: 0 0 20px 20px; margin-inline: calc(-1 * var(--edge-x)); box-shadow: 0 24px 40px -20px rgba(0, 0, 0, 0.9); }
  .tl-capitulos { padding-top: 28px; padding-left: 40px; }
  .tl-hilo { top: 28px; height: calc(100% - 28px); left: 6px; }
  .tl-cap { min-height: 44vh; }
  .tl-cap::before { left: -41px; }
}
@media (max-width: 600px) {
  .tl-figura__marco { border-radius: 20px; }
  .tl-punto { width: 26px; height: 26px; margin: -13px 0 0 -13px; font-size: 9.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .tl-punto::before { animation: none; }
  .tl-punto, .tl-punto__tip, .tl-video, .tl-cap, .tl-item { transition: none; }
  .js-sv .tl-figura:not(.is-in) .tl-punto { opacity: 1; transform: none; }
}