/* ---------------------------------------------------------------------------
 * Esquemas animados de las áreas de actividad (inc/animaciones.php).
 *
 * Mismo idioma que la infografía de las naves de la portada: línea fina sobre
 * fondo oscuro y un solo acento naranja. Todo es SVG + CSS; no hay JavaScript.
 * Con `prefers-reduced-motion` cada animación se para en un fotograma que ya
 * cuenta la historia, no en el inicial.
 * ------------------------------------------------------------------------ */

/* El dibujo no ocupa todo el ancho: el texto va a la izquierda y el esquema,
   a la derecha, en siete de doce columnas. En pantallas estrechas se apilan. */
.esquema-sec{padding-top:clamp(64px,8vw,120px)}
.esquema-sec .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,64px);align-items:center}
.esquema-sec .svc-head{display:grid;grid-template-columns:1fr;gap:22px;align-items:start;margin-bottom:0}
.esquema-sec .svc-head .lede{max-width:44ch}
@media (max-width:900px){.esquema-sec .wrap{grid-template-columns:1fr}.esquema{margin-top:0}}
/* Entrada ligada al scroll (scroll.js → --p): el marco sube y se endereza; dentro,
   los grupos del dibujo (suelo, cintas, máquinas, piezas, rótulos) van apareciendo por orden. */
.esquema{margin:0;border-radius:8px;overflow:hidden;
  background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px var(--line-on-ink);
  --q:clamp(0,calc(var(--p,1)*1.6),1);opacity:var(--q);
  transform:perspective(1200px) translateY(calc((1 - var(--q))*60px)) rotateX(calc((1 - var(--q))*10deg));
  transition:opacity .22s linear,transform .22s linear}
.esquema svg>g{opacity:clamp(0,calc(var(--p,1)*2.6 - .6 - var(--k,0)*.3),1);transition:opacity .2s linear}
.esquema svg>g:nth-child(2){--k:1}.esquema svg>g:nth-child(3){--k:2}.esquema svg>g:nth-child(4){--k:3}
.esquema svg>g:nth-child(5){--k:4}.esquema svg>g:nth-child(6){--k:5}.esquema svg>g:nth-child(n+7){--k:6}
.esquema svg{display:block;width:100%;height:auto;
  fill:none;stroke:var(--paper-on-ink);stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
.esquema .tenue{stroke:rgba(255,255,255,.24)}
.esquema .acento{stroke:var(--orange)}
.esquema .acento-f{fill:var(--orange);stroke:none}
.esquema text{stroke:none;fill:rgba(255,255,255,.45);
  font-family:var(--mono);font-size:11px;letter-spacing:.12em}
.esquema .acento-t{fill:var(--orange)}

/* --- Prototipado: capas que se apilan ------------------------------------ */
.esquema-prototipos .capa{stroke:rgba(255,255,255,.45);fill:rgba(255,255,255,.04);
  opacity:0;animation:apilar 6s ease-in-out infinite}
.esquema-prototipos .capa:nth-child(1){animation-delay:0s}
.esquema-prototipos .capa:nth-child(2){animation-delay:.28s}
.esquema-prototipos .capa:nth-child(3){animation-delay:.56s}
.esquema-prototipos .capa:nth-child(4){animation-delay:.84s}
.esquema-prototipos .capa:nth-child(5){animation-delay:1.12s}
.esquema-prototipos .capa:nth-child(6){animation-delay:1.4s}
.esquema-prototipos .capa:nth-child(7){animation-delay:1.68s}
.esquema-prototipos .capa:nth-child(8){animation-delay:1.96s;stroke:var(--orange)}
@keyframes apilar{0%{opacity:0;transform:translateY(-14px)}
  8%,80%{opacity:1;transform:none}100%{opacity:0;transform:none}}
.esquema-prototipos .cabezal{stroke:rgba(255,255,255,.55);animation:cabezal 6s ease-in-out infinite}
@keyframes cabezal{
  0%{transform:translate(320px,286px)}
  8%{transform:translate(230px,286px)}
  30%{transform:translate(400px,238px)}
  55%{transform:translate(268px,190px)}
  75%{transform:translate(340px,160px)}
  100%{transform:translate(320px,120px);opacity:0}
}

/* --- UX/UI: del armazón a la interfaz ------------------------------------ */
.esquema-ux-ui .b{stroke:rgba(255,255,255,.3);fill:rgba(255,255,255,.05);
  opacity:0;animation:armar 6s ease-in-out infinite}
.esquema-ux-ui .b2{animation-delay:.18s}
.esquema-ux-ui .b3{animation-delay:.36s}
.esquema-ux-ui .b4{animation-delay:.54s}
.esquema-ux-ui .b5{animation-delay:.72s}
.esquema-ux-ui .b6{animation-delay:.9s}
@keyframes armar{0%{opacity:0;transform:translateY(10px)}12%,88%{opacity:1;transform:none}100%{opacity:0}}
.esquema-ux-ui .foco{fill:rgba(240,138,2,.18);stroke-width:2;opacity:0;
  animation:resolver 6s ease-in-out infinite}
@keyframes resolver{0%,52%{opacity:0}64%,88%{opacity:1}100%{opacity:0}}
.esquema-ux-ui .cursor{fill:var(--paper);stroke:var(--ink);stroke-width:1;
  animation:apuntar 6s ease-in-out infinite}
@keyframes apuntar{
  0%{transform:translate(200px,300px);opacity:0}
  20%{opacity:1}
  55%{transform:translate(384px,262px);opacity:1}
  62%{transform:translate(384px,266px)}
  88%{transform:translate(384px,262px);opacity:1}
  100%{opacity:0}
}

/* --- Los esquemas en 3D (esquemas.js): la línea de inspección y la placa --
   Las caras de cada volumen llevan tres grises distintos —arriba, derecha,
   frente— y con eso el ojo lee el relieve sin necesidad de sombras. */
.esquema-3d svg{stroke-width:1.1}
.esquema-3d .cara-z{fill:rgba(255,255,255,.10);stroke:rgba(255,255,255,.55)}
.esquema-3d .cara-x{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.45)}
.esquema-3d .cara-y{fill:rgba(255,255,255,.025);stroke:rgba(255,255,255,.4)}
.esquema-3d .linea{stroke:rgba(255,255,255,.45)}
.esquema-3d .tenue{stroke:rgba(255,255,255,.09)}
.esquema-3d text{fill:rgba(255,255,255,.55)}
.esquema-3d .acento-t{fill:var(--orange)}
/* línea */
.esquema-3d .cinta.cara-z{fill:rgba(255,255,255,.06)}
.esquema-3d .rodillo{fill:rgba(255,255,255,.08);stroke:rgba(255,255,255,.35);stroke-width:.8}
.esquema-3d .banda{stroke:rgba(255,255,255,.3);stroke-dasharray:6 10}
.esquema-3d .rampa{fill:rgba(240,138,2,.08);stroke:rgba(240,138,2,.4)}
.esquema-3d .camara.cara-z{fill:rgba(255,255,255,.16)}
.esquema-3d .cono{fill:rgba(240,138,2,.07);stroke:rgba(240,138,2,.35);stroke-width:.8;transition:opacity .15s}
.esquema-3d .huella{fill:rgba(240,138,2,.22);stroke:var(--orange);stroke-width:.9}
.esquema-3d .barrido{stroke:var(--orange);stroke-width:2}
/* el brazo robot que retira la pieza rechazada */
.esquema-3d .robot-base.cara-z{fill:rgba(255,255,255,.16)}
.esquema-3d .columna{stroke:rgba(255,255,255,.7);stroke-width:3.2}
.esquema-3d .brazo{stroke:rgba(255,255,255,.9);stroke-width:3;stroke-linecap:round}
.esquema-3d .brazo-sombra{stroke:rgba(0,0,0,.35);stroke-width:5;stroke-linecap:round}
.esquema-3d .articulacion{fill:var(--ink);stroke:rgba(255,255,255,.9);stroke-width:1.2}
.esquema-3d .pinza{stroke:var(--orange);stroke-width:1.8;stroke-linecap:round}
.esquema-3d .muneca{fill:var(--orange);stroke:none}
.esquema-3d .bloque.cara-z{fill:rgba(255,255,255,.22);stroke:rgba(255,255,255,.8)}
.esquema-3d .bloque.cara-x{fill:rgba(255,255,255,.1);stroke:rgba(255,255,255,.6)}
.esquema-3d .bloque.cara-y{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.5)}
.esquema-3d .pieza.nok .cara-z{fill:rgba(240,138,2,.28);stroke:var(--orange)}
.esquema-3d .pieza.nok .cara-x,.esquema-3d .pieza.nok .cara-y{stroke:rgba(240,138,2,.7)}
.esquema-3d .marca-ok{stroke:var(--orange);stroke-width:2.2}
.esquema-3d .marca-no{stroke:var(--orange);stroke-width:1.8}
/* placa */
.esquema-3d .pcb.cara-z{fill:rgba(255,255,255,.06)}
.esquema-3d .taladro{fill:var(--ink);stroke:rgba(255,255,255,.4);stroke-width:.8}
.esquema-3d .comp .cara-z{fill:rgba(255,255,255,.2);stroke:rgba(255,255,255,.75)}
.esquema-3d .comp .cara-x{fill:rgba(255,255,255,.09)}
.esquema-3d .comp .cara-y{fill:rgba(255,255,255,.05)}
.esquema-3d .chip .cara-z{fill:rgba(255,255,255,.26)}
.esquema-3d .pata{stroke:rgba(255,255,255,.6);stroke-width:.9}
.esquema-3d .pista{stroke:rgba(255,255,255,.5);stroke-width:1.3;fill:none}
.esquema-3d .antena{stroke:var(--orange);stroke-width:1.5}
.esquema-3d .pulso{stroke:var(--orange);stroke-width:2.4;fill:none;stroke-linecap:round}
.esquema-3d .led{fill:var(--orange);stroke:none}
.esquema-3d .onda{fill:none;stroke:var(--orange);stroke-width:1.2}
.esquema-3d .puente{stroke:rgba(255,255,255,.3);stroke-dasharray:3 4}
.esquema-3d .boquilla{stroke:rgba(255,255,255,.85);stroke-width:1.6}
.esquema-3d .cabeza.cara-z{fill:rgba(240,138,2,.6);stroke:var(--orange)}
.esquema-3d .cabeza.cara-x,.esquema-3d .cabeza.cara-y{fill:rgba(240,138,2,.3);stroke:var(--orange)}
.esquema-3d .comp,.esquema-3d .pista,.esquema-3d .pulso,.esquema-3d .led,.esquema-3d .onda{opacity:var(--alpha,1)}

@media (max-width:700px){.esquema text{font-size:14px}}

/* Sin movimiento: cada esquema se queda en el fotograma que ya se explica
   —la pieza marcada, la pieza mecanizada, el conjunto montado— y no en el
   primero, que suele estar vacío. */
@media (prefers-reduced-motion:reduce){
  .esquema *{animation:none!important}
  .esquema,.esquema svg>g{transition:none}
  /* Los esquemas en 3D pintan un solo fotograma (data-quieto) y no se mueven. */
  .esquema-prototipos .capa{opacity:1}
  .esquema-prototipos .cabezal{transform:translate(320px,140px)}
  .esquema-ux-ui .b,.esquema-ux-ui .foco{opacity:1}
  .esquema-ux-ui .cursor{transform:translate(384px,262px);opacity:1}
}