/* beam.css — interactivo "Beam Patterns".
   Layout original (intacto) + gráfico v2 (de beam-v2.svg / beam.css.snippet).
   js/beam.js y el markup de la leyenda NO cambian: mismas clases
   .beam[data-k], .lit y .has-active sobre #stage. Reutilizable en technology.html. */

/* ---------- Layout (sin cambios) ---------- */
.beam-wrap{display:grid;grid-template-columns:1.08fr .92fr;gap:60px;margin-top:50px;align-items:center}
.beam-left{display:flex;flex-direction:column;gap:28px}
.beam-stage{position:relative;border:none;border-radius:0;background:radial-gradient(78% 72% at 50% 80%, rgba(255,255,255,.035), transparent 72%);padding:6px 0}
.beam-stage svg{display:block;width:100%;height:auto}

/* Contenedor del componente 3D (Three.js). Oculto hasta decidir el modo. */
.beam3d{position:relative;width:100%;aspect-ratio:1280/900;border-radius:14px;overflow:hidden;background:#070809;border:1px solid var(--line-2)}
.beam3d[hidden]{display:none}
.beam3d canvas{display:block;width:100%;height:100%}

/* Hint de interacción (solo modo 3D; lo crea beamscene.js). No bloquea el drag. */
.beam3d-hint{position:absolute;right:10px;bottom:10px;z-index:2;display:inline-flex;align-items:center;gap:7px;
  padding:6px 11px;border-radius:999px;
  background:rgba(8,8,9,.58);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.16);box-shadow:0 2px 10px rgba(0,0,0,.45);
  color:#EDEDED;font-family:var(--util);text-transform:uppercase;letter-spacing:.10em;font-size:.62rem;font-weight:600;line-height:1;
  pointer-events:none;opacity:1;transition:opacity .6s ease}
.beam3d-hint svg{width:14px;height:14px;flex:none;opacity:.9}
.beam3d-hint.is-hidden{opacity:0}
@media(max-width:560px){.beam3d-hint{font-size:.58rem;right:8px;bottom:8px;padding:5px 9px}}
.beam-eyebrow{font-family:var(--util);text-transform:uppercase;letter-spacing:.24em;font-size:.62rem;color:var(--muted-2);margin-bottom:-8px}
.beam-photo{border:1px solid var(--line-2);border-radius:14px;overflow:hidden;position:relative}
.beam-photo img{width:100%;height:100%;object-fit:cover}
.beam-photo .pc{position:absolute;left:0;right:0;bottom:0;padding:13px 15px;background:linear-gradient(0deg,rgba(0,0,0,.82),transparent);font-family:var(--util);text-transform:uppercase;letter-spacing:.12em;font-size:.66rem;color:#CFCFCF}
.beam-compare{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.beam-compare .beam-photo{aspect-ratio:16/11}
.beam-compare img{object-position:center 34%}

.legend{display:flex;flex-direction:column}
.leg[id]{scroll-margin-top:90px} /* deep-link desde los chips de producto */
.leg{position:relative;display:flex;gap:16px;align-items:flex-start;padding:20px 14px 20px 22px;border:none;border-radius:10px;background:transparent;cursor:pointer;transition:background .25s}
.leg + .leg{border-top:1px solid var(--line-2)}
.leg::before{content:"";position:absolute;left:2px;top:50%;height:0;width:2px;border-radius:2px;background:var(--c);box-shadow:0 0 12px var(--c);transform:translateY(-50%);transition:height .25s}
.leg:hover,.leg.active{background:rgba(255,255,255,.025)}
.leg:hover::before,.leg.active::before{height:58%}
.leg .swatch{width:11px;height:11px;border-radius:50%;margin-top:6px;flex:none;box-shadow:0 0 12px currentColor;transition:transform .2s}
.leg:hover .swatch,.leg.active .swatch{transform:scale(1.25)}
.leg h4{font-family:var(--display);font-style:italic;text-transform:uppercase;font-size:1.12rem;letter-spacing:.02em}
.leg p{color:var(--muted);font-size:.84rem;margin-top:3px;max-width:30em}
.leg[data-k="fog"]{--c:var(--amber)} .leg[data-k="corner"]{--c:var(--teal)} .leg[data-k="combo"]{--c:#F2F5FF} .leg[data-k="spot"]{--c:var(--accent-hi)} .leg[data-k="flood"]{--c:var(--purple)}
.leg[data-k="side"]{--c:var(--blue)} .leg[data-k="rear"]{--c:var(--green)}
.leg .swatch{color:var(--c);background:var(--c)}

/* ---------- Gráfico v2: color, brillo y glow de zonas + vehículo ---------- */
.beam{transition:opacity .35s;cursor:default}
.beam[data-k="fog"]{color:var(--amber)} .beam[data-k="corner"]{color:var(--teal)}
.beam[data-k="combo"]{color:var(--green)} .beam[data-k="spot"]{color:var(--accent-hi)}
.beam[data-k="flood"]{color:var(--purple)}
.beam polygon{fill:currentColor;fill-opacity:.5;stroke:currentColor;stroke-width:1.5;stroke-opacity:1;
  transition:fill-opacity .3s;filter:drop-shadow(0 0 6px currentColor)}
.beam text{font-family:var(--util);font-size:12px;letter-spacing:.16em;font-style:italic;font-weight:700;
  text-transform:uppercase;fill:currentColor;fill-opacity:.95;paint-order:stroke;stroke:#0a0a0a;stroke-width:3.2px;stroke-linejoin:round}
.beam .bloom{fill:currentColor;opacity:0;transition:opacity .3s;filter:url(#blur8)}
.grid line{stroke:#1a1a1a}
.rig .pod,.rig .barlamps circle{fill:#FFF6DC}
.beam-stage.has-active .beam{opacity:.1}
.beam-stage.has-active .beam.lit{opacity:1}
.beam.lit polygon{fill-opacity:.96;stroke-width:2.4;filter:drop-shadow(0 0 22px currentColor) drop-shadow(0 0 46px currentColor)}
.beam.lit .bloom{opacity:.5}

@media(max-width:980px){
  .beam-wrap{grid-template-columns:1fr}
}