@layer components {
  .structure {
    width: 100%;
    height: 100%;
    overflow: visible;
    --stroke-major: 1.7;
    --stroke-minor: 1;
  }

  .structure__stroke {
    fill: none;
    stroke-linecap: square;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    animation: structure-draw 0.55s var(--ease) var(--d, 0s) backwards;
  }
  .structure__stroke--major { stroke: var(--blanco); stroke-width: var(--stroke-major); opacity: 0.95; }
  .structure__stroke--minor { stroke: var(--acero-claro); stroke-width: var(--stroke-minor); opacity: 0.8; }
  .structure__stroke--dimension { stroke: var(--senal); stroke-width: 1.5; }

  @keyframes structure-draw { from { stroke-dashoffset: 1; } }

  .structure__node {
    fill: var(--senal);
    transform-box: fill-box;
    transform-origin: center;
    animation: structure-node 0.45s var(--ease) var(--d, 0s) backwards;
  }
  @keyframes structure-node { from { scale: 0; opacity: 0; } }

  /* Luz en la punta: queda un pulso muy lento. */
  .structure__beacon { fill: var(--senal); animation: beacon-in 0.4s var(--ease) var(--d) backwards, beacon-breathe 6s ease-in-out calc(var(--d) + 0.4s) infinite; }
  .structure__halo {
    fill: var(--senal);
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    animation: beacon-pulse 5s ease-out var(--d) infinite;
  }
  @keyframes beacon-in { from { scale: 0; } }
  @keyframes beacon-breathe { 50% { opacity: 0.7; } }
  @keyframes beacon-pulse {
    from { scale: 1; opacity: 0.45; }
    70%, to { scale: 6; opacity: 0; }
  }
  .structure__beacon { transform-box: fill-box; transform-origin: center; }

  @media (max-width: 59.99rem) {
    .structure { --stroke-major: 2.2; --stroke-minor: 1.4; }
  }
}