/* ==========================================================================
   Trazos que se dibujan en los heroes — skill svg-draw-in

   pathLength="1" en el marcado normaliza el largo de cada curva, así el mismo
   par dasharray/dashoffset sirve para todas sin tener que medir nada.

   Variantes: reticula (Servicios) · monograma (Quiénes somos) ·
   ondas (Contacto) · columnas (Actualidad). La portada no lleva trazo.
   ========================================================================== */

/*
   La máscara oculta la franja del texto y alcanza opacidad plena ANTES de
   donde arranca la figura. Si el degradado sigue subiendo por encima de la
   forma, le come el costado izquierdo y la figura se lee "sin cerrar".
*/
.zr-trazo{
  position:absolute;inset:0;z-index:1;pointer-events:none;

  /* Presupuesto de tiempo: --dur es lo que tarda cada trazo y --esc reescala
     los retardos del marcado. Como cada variante tiene su propio retardo
     máximo, se ajusta --esc por variante para que todas cierren en 2s. */
  --dur:.85s;
  --esc:1;

  -webkit-mask-image:linear-gradient(100deg,transparent 48%,rgba(0,0,0,.55) 52%,#000 56%);
          mask-image:linear-gradient(100deg,transparent 48%,rgba(0,0,0,.55) 52%,#000 56%);
}
.zr-trazo svg{width:100%;height:100%;display:block;}

/* Retardo máximo del marcado en cada variante:
   retícula 1.5s · monograma 2s · ondas .96s · columnas 1s
   El factor lo lleva a ~1.05s, que con --dur da 1.9s de total. */
.zr-trazo.es-reticula{--esc:.70;}
.zr-trazo.es-monograma{--esc:.525;}
.zr-trazo.es-ondas{--esc:1.09;}
.zr-trazo.es-columnas{--esc:1.05;}

/* -------------------------------------------------------------------------
   El trazo base
   ------------------------------------------------------------------------- */

.zr-trazo .draw{
  stroke:rgba(124,182,232,.6);
  stroke-width:1.4;
  fill:none;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  animation:zrDraw var(--dur) cubic-bezier(.65,0,.35,1) forwards;
  animation-delay:calc(var(--d,0s) * var(--esc));
}
.zr-trazo .draw.fino{stroke-width:1;stroke:rgba(124,182,232,.4);}
.zr-trazo .draw.grueso{stroke-width:2;stroke:rgba(124,182,232,.85);}

/*
   Nada de vector-effect:non-scaling-stroke aquí. Combinado con
   pathLength="1" rompe el dibujado: el navegador deja de interpretar el
   dasharray en la longitud normalizada del trazo y lo toma como 1 píxel,
   con lo que la línea sale punteada en vez de dibujarse entera.
   Con preserveAspectRatio="meet" no hay deformación, así que no hace falta.
*/

/* Las órbitas y aros exteriores van más apagados: sostienen la figura sin
   competir con el cuerpo principal. */
.zr-trazo .orbita{stroke:rgba(124,182,232,.3);stroke-width:1.1;}

/* -------------------------------------------------------------------------
   Monograma Z+A
   ------------------------------------------------------------------------- */

/* La Z manda y la A se apoya sobre ella: el contraste de peso es lo que
   permite leer las dos letras aunque compartan el mismo espacio. */
.zr-mono .mono-z{stroke:rgba(160,205,240,.92);stroke-width:2.6;}
.zr-mono .mono-a{stroke:rgba(124,182,232,.62);stroke-width:1.8;}



/* La retícula es ortogonal: sin brillos ni pesos fuertes, para que se lea
   como estructura y no como adorno. */
.zr-trazo.es-reticula .draw{stroke:rgba(124,182,232,.5);stroke-width:1.2;}
.zr-trazo.es-reticula .draw.fino{stroke:rgba(124,182,232,.26);stroke-width:1;}

/* Los page-hero son mucho más bajos y el texto ocupa menos ancho: ahí la
   máscara puede cerrar todavía antes. */
.zr-trazo.es-monograma,
.zr-trazo.es-ondas,
.zr-trazo.es-columnas{
  -webkit-mask-image:linear-gradient(100deg,transparent 44%,rgba(0,0,0,.55) 49%,#000 54%);
          mask-image:linear-gradient(100deg,transparent 44%,rgba(0,0,0,.55) 49%,#000 54%);
}

@keyframes zrDraw{ to{ stroke-dashoffset:0; } }

/* -------------------------------------------------------------------------
   Nodos
   ------------------------------------------------------------------------- */

.zr-trazo .nodos circle{
  fill:var(--acento-claro);
  opacity:0;
  transform-origin:center;
  transform-box:fill-box;
  animation:zrLate 3.4s ease-in-out infinite;
  animation-delay:calc(var(--d,0s) * var(--esc) + .3s);
}
.zr-trazo .nodos circle.aro{
  fill:none;stroke:var(--acento-claro);stroke-width:1.5;
}

@keyframes zrLate{
  0%,100% { opacity:.35; transform:scale(1); }
  50%     { opacity:1;   transform:scale(1.5); }
}

/* -------------------------------------------------------------------------
   Las ondas de contacto siguen respirando tras dibujarse
   ------------------------------------------------------------------------- */

/* El atajo `animation` reinicia animation-delay, así que el retardo de las dos
   capas se declara aparte: el dibujado escalado como el resto, y el respiro
   arrancando recién a los 2s, cuando ya terminó de trazarse. */
.zr-trazo .onda{
  animation:zrDraw var(--dur) cubic-bezier(.65,0,.35,1) forwards,
            zrRespira 4.6s ease-in-out infinite;
  animation-delay:calc(var(--d,0s) * var(--esc)), 2s;
}

@keyframes zrRespira{
  0%,100% { opacity:1; }
  50%     { opacity:.32; }
}

/* -------------------------------------------------------------------------
   Estado final sin movimiento
   ------------------------------------------------------------------------- */

@media(prefers-reduced-motion:reduce){
  .zr-trazo .draw,
  .zr-trazo .onda{animation:none;stroke-dashoffset:0;}
  .zr-trazo .nodos circle{animation:none;opacity:.7;}
}

/* -------------------------------------------------------------------------
   Responsive: en una columna el texto ocupa todo el ancho, así que la
   máscara pasa a vertical y el trazo respira arriba y abajo.
   ------------------------------------------------------------------------- */

@media(max-width:760px){
  .zr-trazo{
    -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.4) 0%,transparent 26%,transparent 74%,#000 100%);
            mask-image:linear-gradient(180deg,rgba(0,0,0,.4) 0%,transparent 26%,transparent 74%,#000 100%);
  }
}