/* Transformación Digital › 06 Trazabilidad Digital (docs/lib/trace-capability.cjs, td-trace.js).
   Left: a compact conceptual diagram (four stages with line icons on a thin vertical line). Right: copy, discreet
   applications and the "Trazabilidad Digital en acción" box with the conceptual SGIS laptop on its right edge. */
.trace-composition{grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr);gap:48px;align-items:start}

/* Diagram */
.trace-flow{padding:20px 22px 16px;border:1px solid rgba(255,255,255,.1);border-radius:16px;
  background:linear-gradient(160deg,rgba(255,255,255,.035),rgba(255,255,255,.008)),rgba(6,14,32,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.trace-flow-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:1px solid #ffffff12;font-size:.92rem;font-weight:500;color:#eef3fb}
.trace-flow-mark svg{display:block;width:20px;height:20px;fill:none;stroke:#00b0d1;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.trace-steps{position:relative;display:grid;gap:12px;margin:16px 0 0;padding:0;list-style:none}
/* The thin line joining the four stage numbers. */
.trace-steps::before{content:'';position:absolute;left:15px;top:22px;bottom:22px;width:1px;background:linear-gradient(180deg,rgba(0,176,209,.55),rgba(0,176,209,.25))}
.trace-step{display:grid;grid-template-columns:31px minmax(0,1fr);gap:12px;align-items:center}
.trace-step-num{position:relative;z-index:1;display:grid;place-items:center;width:31px;height:31px;border:1px solid rgba(0,176,209,.45);border-radius:50%;background:#070f22;font-size:.66rem;letter-spacing:.04em;color:#9fdcf0}
.trace-step-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;padding:13px 16px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.022)}
.trace-step-icon{display:grid;place-items:center;width:46px;height:46px;border:1px solid rgba(255,255,255,.1);border-radius:11px;background:rgba(6,16,38,.75);color:#00b0d1}
.trace-step-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.trace-step-text{min-width:0}
.trace-step-label{margin:0 0 4px;font-size:.68rem;font-weight:500;letter-spacing:.12em;color:#00b0d1}
.trace-step-desc{margin:0;font-size:.88rem;line-height:1.5;color:#dbe6f1}
.trace-flow-note{margin-top:14px}
/* Step-by-step signal (same rhythm as the previous diagram): a small light travels down the line over 12 s and each
   stage lights up in turn (number + icon), 3 s apart. Paused while the capability is off screen (.cap-panel.is-paused,
   digital-capabilities.css); static with reduced motion. */
.trace-steps::after{content:'';position:absolute;left:13px;top:22px;width:5px;height:5px;border-radius:50%;background:#9be8f0;box-shadow:0 0 8px rgba(0,176,209,.55);opacity:0;animation:trace-flow-signal 12s linear infinite}
.trace-step-num,.trace-step-icon{animation:trace-step-on 12s ease-in-out infinite;animation-delay:calc(var(--step) * 3s)}
@keyframes trace-flow-signal{0%{top:22px;opacity:0}4%{opacity:.9}96%{opacity:.9}100%{top:calc(100% - 26px);opacity:0}}
@keyframes trace-step-on{
  0%,22%{border-color:rgba(0,176,209,.85);color:#e9fbff;box-shadow:0 0 0 3px rgba(0,176,209,.12),0 0 14px rgba(0,176,209,.35)}
  30%,100%{border-color:rgba(0,176,209,.45);color:#9fdcf0;box-shadow:none}
}
.trace-step-icon{animation-name:trace-icon-on}
@keyframes trace-icon-on{
  0%,22%{border-color:rgba(0,176,209,.45);color:#5fe3ff;box-shadow:0 0 14px rgba(0,176,209,.22)}
  30%,100%{border-color:rgba(255,255,255,.1);color:#00b0d1;box-shadow:none}
}

/* Right column */
.trace-composition .cap-information h3{margin-bottom:20px}
.trace-composition .cap-applications{margin-top:18px;gap:8px 16px}

/* "Trazabilidad Digital en acción": moderate glass. First row: text + the conceptual laptop, which bleeds out of the
   right edge (the box clips it) as in the reference; second row: references + link across the full width, so the
   image never covers text. */
.trace-action{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.46fr);column-gap:10px;margin-top:26px;padding:24px 26px;border:1px solid rgba(255,255,255,.12);border-radius:16px;
  background:radial-gradient(110% 130% at 100% 100%,rgba(135,60,236,.16),transparent 58%),linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.012)),rgba(8,16,40,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.trace-action-head{grid-column:1;grid-row:1;min-width:0;position:relative;z-index:1}
.trace-action-foot{grid-column:1/-1;grid-row:2;min-width:0;position:relative;z-index:1}
.trace-action .cap-eyebrow{margin:0}
.trace-action h4{margin:8px 0 0;font-size:1.28rem;font-weight:400;line-height:1.35;letter-spacing:-.02em;color:#f3f5fc}
.trace-action-desc{margin:10px 0 0;font-size:.85rem;line-height:1.75;color:#b8c5d9}
.trace-action-desc strong{font-weight:600;color:#fff}
.trace-refs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:18px 0 0;padding:0;list-style:none}
.trace-ref{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start}
.trace-ref-icon{display:grid;place-items:center;width:36px;height:36px;border:1px solid rgba(255,255,255,.1);border-radius:9px;background:rgba(6,16,38,.7);color:#00b0d1}
.trace-ref-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.trace-ref-text{display:grid;gap:3px;min-width:0}
.trace-ref-text strong{font-size:.84rem;font-weight:500;line-height:1.35;color:#fff}
.trace-ref-text span{font-size:.72rem;line-height:1.5;color:#9fb2c7}
.trace-cta{display:inline-flex;align-items:center;gap:10px;margin-top:20px;padding:10px 18px;border:1px solid rgba(0,176,209,.55);border-radius:10px;background:rgba(0,176,209,.06);
  color:#fff;font-size:.86rem;font-weight:500;text-decoration:none;transition:background .25s ease,border-color .25s ease}
.trace-cta span{transition:transform .25s ease}
.trace-cta:hover{background:rgba(0,176,209,.14);border-color:rgba(0,176,209,.8)}
.trace-cta:hover span{transform:translateX(4px)}
.trace-cta:focus-visible{outline:2px solid #00b0d1;outline-offset:3px}
.trace-action-laptop{grid-column:2;grid-row:1;align-self:center;width:168%;max-width:none;height:auto;margin:-4px -68% 0 0;pointer-events:none;filter:drop-shadow(0 18px 30px rgba(0,1,14,.55))}

/* Short laptop screens (e.g. 1366×768): a little tighter. */
@media (min-width:1001px) and (max-height:820px){
  .trace-step-card{padding:11px 14px}
  .trace-steps{gap:10px}
  .trace-action{margin-top:22px;padding:20px 22px}
}
/* Narrow desktop: the right column is too narrow for three side-by-side references — one compact row each. */
@media (min-width:1001px) and (max-width:1199px){
  .trace-refs{grid-template-columns:minmax(0,1fr);gap:10px}
  .trace-ref{align-items:center}
}
/* Tablet: the composition stacks (digital-capabilities.css); the box gets the full width. */
@media (max-width:1000px){
  .trace-composition{grid-template-columns:minmax(0,1fr)}
  .trace-flow{max-width:640px}
}
/* Mobile: the laptop moves to the top of the box, whole and in flow; copy and references take the full width. */
@media (max-width:600px){
  .trace-flow{padding:16px 14px 12px}
  .trace-step{grid-template-columns:28px minmax(0,1fr);gap:10px}
  .trace-steps::before{left:14px}
  .trace-steps::after{left:12px}
  .trace-step-num{width:28px;height:28px}
  .trace-step-card{gap:12px;padding:11px 12px}
  .trace-step-icon{width:40px;height:40px;border-radius:10px}
  .trace-step-icon svg{width:21px;height:21px}
  .trace-step-desc{font-size:.84rem}
  .trace-action{display:flex;flex-direction:column;padding:18px 18px 20px}
  .trace-action-laptop{order:-1;width:88%;max-width:340px;margin:-4px auto 10px;align-self:center}
  .trace-refs{grid-template-columns:minmax(0,1fr);gap:12px}
  .trace-action h4{font-size:1.15rem}
}
@media (prefers-reduced-motion:reduce){
  .trace-cta,.trace-cta span{transition:none}
  .trace-steps::after{display:none}
  .trace-step-num,.trace-step-icon{animation:none}
}