/* hero 3D */
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:20px;align-items:center;text-align:left!important}
.hero-copy{text-align:left}
.hero-grid .hero-copy h1{font-size:clamp(38px,5.1vw,80px);margin:24px 0 22px;max-width:none;line-height:1.02}
.hero-grid .lead{margin:0 0 34px;max-width:560px}
.hero-grid .cta-row,.hero-grid .chips{justify-content:flex-start}
.hero-3d{position:relative;aspect-ratio:1/1;min-height:420px;width:100%}
.hero-3d canvas{position:absolute;inset:-6%;width:112%!important;height:112%!important;display:block;pointer-events:none}
.hero-3d.gl-off{background:radial-gradient(closest-side,rgba(124,92,255,.45),transparent 70%)}
.hero-3d.gl-off::after{content:"";position:absolute;left:50%;top:50%;width:46%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:28%;background:var(--g);box-shadow:0 0 80px rgba(124,92,255,.8)}
.oc{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;border-radius:16px;background:rgba(14,14,26,.72);border:1px solid var(--line2);backdrop-filter:blur(14px);box-shadow:0 20px 50px -14px rgba(0,0,0,.9),0 0 40px -14px rgba(124,92,255,.7);font-size:12.5px;animation:bob 6s ease-in-out infinite}
.oc b{display:block;font-size:13px;line-height:1.2}.oc small{color:var(--mute);font-size:11.5px}
.oc .ic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--g);flex:none}.oc .ic svg{width:17px;height:17px}
.oc.o1{left:-4%;top:14%}.oc.o2{right:-2%;top:26%;animation-delay:-2s}.oc.o3{left:2%;bottom:16%;animation-delay:-4s}.oc.o4{right:2%;bottom:8%;animation-delay:-1s}
.oc.o2 .ic{background:linear-gradient(135deg,#22d3ee,#4f6bff)}.oc.o3 .ic{background:linear-gradient(135deg,#f5c76b,#e3993e)}.oc.o4 .ic{background:linear-gradient(135deg,#25d366,#128c7e)}
.h3d-hint{position:absolute;left:50%;bottom:-2%;transform:translateX(-50%);display:flex;gap:8px;align-items:center;font:600 12px var(--ui);color:var(--mute);letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.h3d-hint svg{width:14px;height:14px}
@media(max-width:1000px){
  .hero-grid{grid-template-columns:1fr;text-align:center!important}
  .hero-copy{text-align:center}
  .hero-grid .lead{margin-inline:auto}.hero-grid .cta-row,.hero-grid .chips{justify-content:center}
  .hero-grid .hero-copy h1{font-size:clamp(38px,8.4vw,72px)}
  .hero-3d{aspect-ratio:1/.9;min-height:0;max-width:560px;margin:10px auto 0;order:2}
}
@media(max-width:600px){
  .hero-3d{aspect-ratio:1/1.02}
  .oc{padding:8px 12px 8px 8px;font-size:11px;border-radius:13px}.oc .ic{width:28px;height:28px;border-radius:9px}
  .oc small{display:none}.oc.o1{left:0}.oc.o2{right:0}.oc.o3{left:2%}.oc.o4{right:2%}
}
/* rendimiento: menos efectos costosos en GPU integradas */
.bgfx i{filter:none!important}
.grain{mix-blend-mode:normal!important;opacity:.028!important}
.cur{mix-blend-mode:normal!important}
/* respaldo estático (sin WebGL): la L de Lumenix flotando */
.hero-3d.gl-off::after{width:62%;aspect-ratio:1;border-radius:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4 3 30 32'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%234f6bff'/%3E%3Cstop offset='.5' stop-color='%237c5cff'/%3E%3Cstop offset='1' stop-color='%23d45bf0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M13 9v16.5c0 1.4 1.1 2.5 2.5 2.5H27' fill='none' stroke='url(%23g)' stroke-width='5.2' stroke-linecap='round'/%3E%3Ccircle cx='27.5' cy='12.5' r='3.2' fill='%2322d3ee'/%3E%3C/svg%3E") center/contain no-repeat;box-shadow:none;filter:drop-shadow(0 0 40px rgba(124,92,255,.8));animation:bob 6s ease-in-out infinite}