/* =========================================================================
   diagrams.css — láminas de los servicios (web · datos · auto)
   Tres planos SVG que se dibujan una vez al entrar en pantalla y se repiten
   al pasar el cursor por la lámina. Todo el movimiento es CSS (sin rAF).

   Estados:
     (sin clase)   estado final, completo y estático — siempre válido
     .dg-run       las animaciones de entrada corren (fill backwards: el
                   estado "desde" es el oculto; el base es el final)
     .dg-hold      animaciones en pausa en t=0 (espera de IntersectionObserver)
     .dg-vis       el diagrama está en pantalla (el cursor parpadea solo así)
     .dg-paused    pestaña oculta
   ========================================================================= */

/* ---------- 1. LÁMINA ---------- */
.svc-diagram {
  --dg-ink:   var(--ink, #f2f3f0);
  --dg-mute:  var(--mute, #8b9299);
  --dg-bg:    var(--bg, #0a0a0b);
  --dg-ink2:  var(--ink-2, rgba(242, 243, 240, 0.82));
  --dg-hi:    rgba(242, 243, 240, 0.92);
  --dg-st:    rgba(242, 243, 240, 0.34);   /* trazo de detalle */
  --dg-st2:   rgba(242, 243, 240, 0.17);   /* trazo de bloque */
  --dg-st3:   rgba(242, 243, 240, 0.09);   /* trazo de relleno de plano */
  --dg-tx:    rgba(242, 243, 240, 0.58);   /* línea de texto simulada */
  --dg-tm:    rgba(242, 243, 240, 0.26);   /* línea de texto atenuada */
  --dg-soft:  var(--line-soft, rgba(242, 243, 240, 0.06));
  --dg-ac:    var(--accent-soft, #8e9a55);
  --dg-al:    var(--accent-line, rgba(142, 154, 85, 0.55));
  --dg-ag:    var(--accent-ghost, rgba(142, 154, 85, 0.20));
  --dg-fill:  var(--accent, #454f22);
  --dg-fillh: var(--accent-hi, #525e29);
  --dg-ease:  var(--ease, cubic-bezier(0.22, 1, 0.36, 1));

  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 5 / 3;            /* altura reservada: sin saltos de layout */
  margin-top: 0.4rem;
  border: 1px solid var(--line, rgba(242, 243, 240, 0.10));
  border-radius: 2px;
  background: rgba(17, 18, 20, 0.6);
  overflow: hidden;
  contain: layout paint;
}

.svc-diagram .dg-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}

/* móvil: la lámina sangra hasta los bordes de la pantalla (solo filos arriba y
   abajo, como una lámina de plano). Gana ~10% de escala: el texto más chico
   queda en ≥9px efectivos desde 360px de ancho. */
@media (max-width: 560px) {
  .svc-diagram {
    width: auto;
    max-width: none;
    margin-inline: calc(var(--pad, 1rem) * -1);
    border-inline-width: 0;
    border-radius: 0;
  }
}

/* tablets en horizontal y laptops chicas: columnas iguales, para que el texto del
   dibujo (10.5 u de un viewBox de 400) no baje de ~10px reales */
@media (min-width: 920px) and (max-width: 1100px) {
  .svc { grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); }
  .svc-diagram { max-width: none; }
}

/* base del dibujo: nada relleno ni trazado hasta que una clase lo pida */
.dg-svg * { fill: none; stroke: none; stroke-width: 1; }
.dg-svg line, .dg-svg rect { shape-rendering: crispEdges; }
.dg-svg .sm { shape-rendering: geometricPrecision; }

/* ---------- 2. VOCABULARIO DE TRAZOS ---------- */
.dg-svg .k1 { stroke: var(--dg-st); }
.dg-svg .k2 { stroke: var(--dg-st2); }
.dg-svg .k3 { stroke: var(--dg-st3); }
.dg-svg .ka { stroke: var(--dg-ac); }
.dg-svg .kl { stroke: var(--dg-al); }
.dg-svg .tx { stroke: var(--dg-tx); stroke-width: 3; }
.dg-svg .tm { stroke: var(--dg-tm); stroke-width: 2; }
.dg-svg .tb { stroke: var(--dg-hi); stroke-width: 2; }
.dg-svg .w2 { stroke-width: 2; }
.dg-svg .w15 { stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 3. TIPOGRAFÍA (mono, 3 escalones) ---------- */
.dg-svg text {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 10.5px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  fill: var(--dg-ink2);
  stroke: none;
}
.dg-svg .tf { fill: var(--dg-ink2); }                                       /* campo */
.dg-svg .tt { fill: var(--dg-ink2); }                                       /* dirección */
.dg-svg .th { fill: var(--dg-ink); font-size: 11px; font-weight: 500; letter-spacing: 0.02em; }
.dg-svg .tl { fill: var(--dg-mute); font-weight: 500; letter-spacing: 0.22em; }
.dg-svg .tk { fill: var(--dg-mute); }
.dg-svg .tg { fill: var(--dg-ink); font-size: 11.5px; }
.dg-svg .tc { fill: var(--dg-ac); font-weight: 500; }

/* ---------- 4. PIEZAS ---------- */
.dg-svg .btn  { fill: var(--dg-fill); stroke: var(--dg-ac); }
.dg-svg .cb   { fill: var(--dg-bg); stroke: var(--dg-al); }
.dg-svg .ring { stroke: var(--dg-ac); opacity: 0; transform-origin: 0 0; }
.dg-svg .cur  { fill: var(--dg-ink); stroke: var(--dg-bg); stroke-linejoin: round; transform: translate(74px, 122px); }
.dg-svg .hd   { fill: var(--dg-soft); }
.dg-svg .pkm  { fill: var(--dg-tx); }
.dg-svg .fkm  { stroke: var(--dg-tx); }
.dg-svg .rl2  { stroke: var(--dg-ac); }
.dg-svg .hlb  { fill: var(--dg-ac); }
.dg-svg .hl   { fill: var(--dg-ac); }
.dg-svg .bd   { fill: var(--dg-ag); stroke: var(--dg-al); }
.dg-svg .ins  { transform-box: fill-box; transform-origin: 50% 0; }
.dg-svg .flash { fill: var(--dg-ac); opacity: 0; }
.dg-svg .dg-dot { fill: var(--dg-ac); }
.dg-svg .pg   { fill: var(--dg-ac); transform-box: fill-box; transform-origin: 0 50%; }
.dg-svg .cblk { fill: var(--dg-ac); }

/* ---------- 5. ENTRADA (solo con .dg-run) ---------- */
/* trazado de línea: --L (longitud) · --d (retraso) · --t (duración) */
.svc-diagram.dg-run .dr {
  stroke-dasharray: var(--L, 400);
  animation: dg-draw var(--t, 0.7s) var(--dg-ease) var(--d, 0s) backwards;
}
.svc-diagram.dg-run .fi { animation: dg-fade 0.5s var(--dg-ease) var(--d, 0s) backwards; }
.svc-diagram.dg-run .fx { animation: dg-fx 0.55s var(--dg-ease) var(--d, 0s) backwards; }

.svc-diagram.dg-run .rl2 {
  animation: dg-draw var(--t, 0.7s) var(--dg-ease) var(--d, 0s) backwards,
             dg-tints 0.5s var(--dg-ease) var(--d2, 0s) backwards;
}
.svc-diagram.dg-run .hl {
  animation: dg-fx 0.55s var(--dg-ease) var(--d, 0s) backwards,
             dg-tintf 0.5s var(--dg-ease) var(--d2, 0s) backwards;
}
.svc-diagram.dg-run .btn {
  animation: dg-fade 0.5s var(--dg-ease) var(--d, 0s) backwards,
             dg-press 0.7s var(--dg-ease) var(--d2, 0s) backwards;
}
.svc-diagram.dg-run .cur  { animation: dg-cursor 0.95s var(--dg-ease) var(--d, 0s) backwards; }
.svc-diagram.dg-run .ring { animation: dg-ring 1s var(--dg-ease) var(--d, 0s) backwards; }
.svc-diagram.dg-run .ins  { animation: dg-ins 0.5s var(--dg-ease) var(--d, 0s) backwards; }
.svc-diagram.dg-run .flash { animation: dg-flash 1s var(--dg-ease) var(--d, 0s) backwards; }
.svc-diagram.dg-run .pg   { animation: dg-fill 0.55s var(--dg-ease) var(--d, 0s) backwards; }
.svc-diagram.dg-run .cblk {
  animation: dg-blink 1.1s steps(1, end) var(--d, 0s) infinite backwards;
}

/* espera del observador: todo en pausa en su fotograma inicial */
.svc-diagram.dg-hold .dg-svg * { animation-play-state: paused !important; }
/* el parpadeo (único bucle) solo corre con el diagrama a la vista */
.svc-diagram:not(.dg-vis) .cblk,
.svc-diagram.dg-paused .cblk { animation-play-state: paused; }

@keyframes dg-draw  { from { stroke-dashoffset: var(--L, 400); } to { stroke-dashoffset: 0; } }
@keyframes dg-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes dg-fx    { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@keyframes dg-tints { from { stroke: var(--dg-st); } to { stroke: var(--dg-ac); } }
@keyframes dg-tintf { from { fill: var(--dg-ink2); } to { fill: var(--dg-ac); } }
@keyframes dg-press { 0%, 100% { fill: var(--dg-fill); } 35% { fill: var(--dg-fillh); } }
@keyframes dg-cursor {
  0%   { transform: translate(334px, 208px); opacity: 0; }
  18%  { opacity: 1; }
  100% { transform: translate(74px, 122px); opacity: 1; }
}
@keyframes dg-ring {
  0%   { transform: scale(0.2); opacity: 0; }
  8%   { opacity: 0.9; }
  45%  { opacity: 0.45; }
  100% { transform: scale(1); opacity: 0; }
}
@keyframes dg-ins   { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
@keyframes dg-flash { 0% { opacity: 0; } 20% { opacity: 0.38; } 100% { opacity: 0; } }
@keyframes dg-fill  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes dg-blink { 0% { fill-opacity: 1; } 50% { fill-opacity: 0; } 100% { fill-opacity: 1; } }

/* ---------- 6. REDUCED MOTION ---------- */
/* Solo se apaga el bucle ambiental (parpadeo del cursor). Los trazados de
   entrada y el replay son microinteracciones: se conservan. */
@media (prefers-reduced-motion: reduce) {
  .svc-diagram.dg-run .cblk { animation: none; }
}