/* ============================================================
   Code4you UI · LENGUAJE DE DIAGRAMAS
   Un solo lenguaje (línea fina + grafito + microtipografía mono
   + pulso ámbar). La GEOMETRÍA cambia por producto; estas reglas no.
   Uso: diagram.css + el SVG del producto inline + el CSS de recorridos del
   producto. v1.1.
   ============================================================ */
.c4y-diagram{
  --c4y-accent:#f6b72e;
  --c4y-line:rgba(236,233,228,.20);
  --c4y-line-faint:rgba(236,233,228,.10);
  --c4y-diagram-surface:rgba(236,233,228,.022);
  --c4y-ink-2:#cfccc6;
  --c4y-ink-3:#9b9893;
  display:block;width:100%;height:100%;
  font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
}
/* --- materiales --- */
.c4y-diagram .ln{fill:none;stroke:var(--c4y-line);stroke-width:1}
.c4y-diagram .ln--faint{stroke:var(--c4y-line-faint)}
.c4y-diagram .ln--dash{stroke-dasharray:2 5}
.c4y-diagram .ln--acc{stroke:var(--c4y-accent);stroke-width:1.3}
.c4y-diagram .ln--acc-tick{stroke:var(--c4y-accent);stroke-width:1.6}
.c4y-diagram .tk{stroke:var(--c4y-line-faint);stroke-width:1}
.c4y-diagram .bx{fill:var(--c4y-diagram-surface);stroke:var(--c4y-line);stroke-width:1}
.c4y-diagram .bx--out{fill:rgba(246,183,46,.05);stroke:rgba(246,183,46,.55)}
.c4y-diagram .nd{fill:rgba(236,233,228,.55)}
/* --- microtipografía técnica (mínimo 11px) --- */
.c4y-diagram .lb{font-size:13px;font-weight:500;letter-spacing:.10em;fill:var(--c4y-ink-2)}
.c4y-diagram .lb--md{font-size:12px;letter-spacing:.08em}
.c4y-diagram .lb--sm{font-size:11px;letter-spacing:.06em;fill:var(--c4y-ink-3)}
.c4y-diagram .lb--num{font-size:11px;letter-spacing:.04em;fill:rgba(246,183,46,.7)}
.c4y-diagram .lb--out{fill:#f4f2ee}
/* --- entrada: el sistema se construye (0.35s → 2.25s) --- */
.c4y-diagram .anim-in{opacity:0;animation:c4yIn .75s cubic-bezier(.4,0,.2,1) var(--d,0s) both}
.c4y-diagram .anim-pop{opacity:0;animation:c4yPop .6s cubic-bezier(.34,1.25,.5,1) var(--d,0s) both;
  transform-box:fill-box;transform-origin:center}
.c4y-diagram .anim-draw{stroke-dasharray:1;stroke-dashoffset:1;
  animation:c4yDraw 1.6s cubic-bezier(.4,0,.2,1) var(--d,0s) both}
@keyframes c4yIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes c4yPop{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}
@keyframes c4yDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
/* --- pulsos: un punto ámbar recorre el diagrama y explica el producto ---
   Aquí sólo el material y el ciclo. Cada producto declara en su propio CSS los
   recorridos (offset-path, que deben coincidir con los path del SVG) y los
   @keyframes que reparten el ciclo entre ellos. */
.c4y-diagram .p{
  fill:var(--c4y-accent);opacity:0;offset-rotate:0deg;
  animation-duration:9s;animation-timing-function:linear;animation-iteration-count:infinite;animation-delay:2.4s;
}

/* --- versión sin movimiento: el diagrama queda completo y estático --- */
@media (prefers-reduced-motion: reduce){
  .c4y-diagram .anim-in,.c4y-diagram .anim-pop,.c4y-diagram .anim-draw{
    animation:none;opacity:1;transform:none;stroke-dashoffset:0;
  }
  .c4y-diagram .p{display:none}
}