/* ══════════════════════════════════════════════════════════════════
   TRAZOS · pedido de Sebas del 18/10/2026 (08-FONDOS-Y-DATOS.md)

   Tres piezas que se suman al fondo de marca (css/fondo.css):
     1 · Líneas con punta (Stripe, sección 0): un abanico de líneas finas en
         celeste → azul detrás del título del panel y en la tarjeta de contacto
         del cierre. Las dibuja js/trazos.js en un lienzo 2D.
     2 · Grilla de logos (Boostlab, sección 7): la grilla de la home con líneas
         de 1 px; cada celda se llena de azul y el logo pasa a papel.
     3 · El plano de los cuatro pasos (Crosswalk + Orizon, secciones 1 y 6), en
         /servicios. Lo arma svPlano() en js/servicios.js.
   Los anillos de la O y las columnas están en css/fondo.css.
   Colores: azul #0E2A5C, profundo #081936, celeste #53BDEB (solo luz o relleno,
   nunca texto sobre papel), papel #F7F5F0, hueso #EFEDE7.
══════════════════════════════════════════════════════════════════ */

/* ── 1 · Líneas con punta ── */
/* El lienzo va arriba del flujo y abajo del contenido. Sin el nivel c del fondo no se ve. */
.lineas-host--rel{position:relative}
.lineas-host>:not(.lineas):not(.fondo-flujo){position:relative;z-index:1}
.lineas{position:absolute;left:0;top:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:hidden}
.lineas canvas{display:block;width:100%;height:100%;opacity:0;transition:opacity 1.2s ease}
.lineas--lista canvas{opacity:1}
html:not([data-fondo=c]) .lineas{display:none}

/* ── 2 · Grilla de logos (Boostlab) ──
   La grilla se dibuja con los bordes de cada celda (1 px de azul al 10 %).
   Al pasar el mouse la celda se llena de azul en 0,15 s y se vacía en 2 s: deja estela,
   como en Boostlab (transition: all 2s ease). El logo pasa a papel mientras está lleno.
   Al entrar en pantalla corre una onda una sola vez (js/trazos.js pone --onda y la clase).
   El relleno es opacidad de una capa: no repinta la celda. */
.ins-logos{--lg-linea:rgb(14 42 92 / .10)}
.ins-logos__grid{border-top:1px solid var(--lg-linea);border-left:1px solid var(--lg-linea)}
.ins-logos__celda{border-right:1px solid var(--lg-linea);border-bottom:1px solid var(--lg-linea)}
.ins-logos__celda::before,.ins-logos__cinta-celda::before{content:"";position:absolute;inset:0;background:#0E2A5C;opacity:0;pointer-events:none;transition:opacity 2s ease}
.ins-logos__celda .ins-logos__logo,.ins-logos__cinta-celda .ins-logos__logo{transition:opacity 1.4s ease,filter 2s ease}
@media (hover:hover){
  .ins-logos__celda:hover::before{opacity:1;transition-duration:.15s}
  .ins-logos__celda:hover .ins-logos__logo{filter:brightness(0) invert(1);transition-duration:1.4s,.15s}
}
/* Con el teclado, lo mismo que con el mouse. */
.ins-logos__celda:focus-within::before{opacity:1;transition-duration:.15s}
.ins-logos__celda:focus-within .ins-logos__logo{filter:brightness(0) invert(1);transition-duration:1.4s,.15s}
.ins-logos__enlace:focus-visible{outline-color:#53BDEB}
/* La onda: cada celda se llena y se vacía con su demora (fila y columna, como fade-in-square). */
.ins-logos__grid--onda .ins-logos__celda::before{animation:logos-onda 2.6s ease-out var(--onda,0s) backwards}
.ins-logos__grid--onda .ins-logos__celda .ins-logos__logo{animation:logos-onda-logo 2.6s ease-out var(--onda,0s) backwards}
@keyframes logos-onda{0%{opacity:0}9%{opacity:1}100%{opacity:0}}
@keyframes logos-onda-logo{0%{filter:none}9%{filter:brightness(0) invert(1)}100%{filter:none}}
/* Celular: las dos filas llevan la misma grilla y una celda se enciende sola cada 2 s (Boostlab). */
@media (max-width:767px) and (prefers-reduced-motion:no-preference){
  .ins-logos__cintas{gap:0}
  .ins-logos__cinta{border-top:1px solid var(--lg-linea)}
  .ins-logos__cinta:last-child{border-bottom:1px solid var(--lg-linea)}
  .ins-logos__cinta-celda{border-right:1px solid var(--lg-linea)}
  .ins-logos__cinta-celda.is-luz::before{opacity:1;transition-duration:.15s}
  .ins-logos__cinta-celda.is-luz .ins-logos__logo{filter:brightness(0) invert(1);transition-duration:1.4s,.15s}
}
@media (prefers-reduced-motion:reduce){
  .ins-logos__grid--onda .ins-logos__celda::before,.ins-logos__grid--onda .ins-logos__celda .ins-logos__logo{animation:none}
}

/* ── 3 · El plano de los cuatro pasos (/servicios) ──
   Tres grosores, como machine1.svg de Crosswalk: contorno de la rueda (1,6 px),
   aros (1 px) y cotas, ejes y rayos (0,5 px). vector-effect deja el grosor fijo
   en pantalla aunque el dibujo se achique. */
.ins-plano{background:#081936;color:#EFEDE7;padding:clamp(56px,8vw,112px) var(--page-margin,20px);display:grid;justify-items:center;overflow:hidden}
.ins-plano svg{display:block;width:100%;max-width:1200px;height:auto;overflow:visible}
.ins-plano .ins-plano__m{display:none}
@media (max-width:767px){.ins-plano .ins-plano__d{display:none}.ins-plano .ins-plano__m{display:block;max-width:440px}}
.ins-plano path,.ins-plano circle{fill:none;stroke:#EFEDE7;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.ins-plano .pl-g{stroke-width:1.6;stroke-opacity:.9}
.ins-plano .pl-m{stroke-width:1;stroke-opacity:.55}
.ins-plano .pl-f{stroke-width:.5;stroke-opacity:.42}
.ins-plano .pl-guion{stroke-dasharray:2.2 2.2}
.ins-plano .pl-eje{stroke-dasharray:10 4 1.5 4;stroke-opacity:.3}
.ins-plano .pl-rotulo{fill:#EFEDE7;fill-opacity:.78;font-weight:600;font-size:14px;font-family:inherit;letter-spacing:.14em}
.ins-plano .pl-rotulo--vuelta{fill-opacity:.5}
.ins-plano__m .pl-rotulo{font-size:26px}
/* las ruedas: 360° en 24 s, lineal (Crosswalk gira en 3 s: para nosotros es demasiado) */
.ins-plano .pl-rueda{transform-box:fill-box;transform-origin:center;animation:pl-gira 24s linear infinite}
.ins-plano .pl-rueda--inv{animation-direction:reverse}
@keyframes pl-gira{to{transform:rotate(360deg)}}
/* el flujo (.sing-flow de Orizon): guiones de .06 cada .22 del largo, que avanzan en 3,2 s */
.ins-plano .pl-flujo{stroke:#53BDEB;stroke-width:1.2;stroke-opacity:.55;stroke-dasharray:.06 .16;animation:pl-flujo 3.2s linear infinite}
@keyframes pl-flujo{to{stroke-dashoffset:-.22}}
/* el pulso (.sing-pulse): un tramo de luz que recorre cada conexión, una detrás de otra */
.ins-plano .pl-pulso{stroke:#53BDEB;stroke-width:2.6;stroke-dasharray:.12 calc(var(--pl-l,1) + 1);stroke-dashoffset:.12;
  animation:pl-pulso 5.2s cubic-bezier(.45,0,.55,1) calc(var(--pl-i,0) * 1.3s) infinite both}
@keyframes pl-pulso{0%{stroke-dashoffset:.12}50%,100%{stroke-dashoffset:calc(var(--pl-l,1) * -1)}}
.ins-plano .pl-punta{fill:#53BDEB;stroke:none}
/* Fuera de pantalla (js/trazos.js saca .ins-plano--vivo) y con la pestaña oculta, quieto. */
.ins-plano:not(.ins-plano--vivo) *{animation-play-state:paused}
/* Movimiento reducido: el dibujo completo y quieto, sin pulso. */
@media (prefers-reduced-motion:reduce){
  .ins-plano *{animation:none!important}
  .ins-plano .pl-pulso{display:none}
}