/* One continuous backdrop for copy and model, ending in the page's ivory. */
/* The original blue diode-laser photograph lives BEHIND the live WebGL box, never in the canvas. */
.hero.hero-interactive{isolation:isolate;position:relative;padding:44px 0 76px;overflow:hidden;background:linear-gradient(0deg,#efefeb 0%,#efefebee 5%,#efefeb96 13%,#efefeb21 30%,transparent 44%),linear-gradient(90deg,#111619ed 0%,#111619b8 31%,#161b1e63 59%,#161b1e42 100%),url('/assets/hero-diodo-azul-fondo.webp') center 45% / cover no-repeat,#171b1e;border:0;background-position:0 0,0 0,center calc(45% + var(--hero-parallax-y,0px))}
.hero-interactive .hero-grid{position:relative;z-index:1;grid-template-columns:1fr 1.12fr;gap:24px;min-height:420px}
.hero-interactive .hero-copy{position:relative;z-index:1;padding-bottom:22px}
.hero-interactive .eyebrow{color:#c7ccc9}.hero-interactive h1{color:#fff;max-width:560px;font-size:clamp(30px,3.6vw,46px)}
.hero-interactive h1 span{color:#eda46f}.hero-interactive .hero-lead{color:#e1e5e0}.hero-interactive .hero-note{color:#c7cdca}
.hero-interactive .button-primary{background:#b85c2e;border-color:#b85c2e}.hero-interactive .button-primary:hover{background:#d1703e;border-color:#d1703e}
.hero-interactive .button-ghost{background:#ffffff0c;color:#fff;border-color:#ffffff65}.hero-interactive .button-ghost:hover{background:#ffffff18;border-color:#fff}
.hero-interactive .hero-product{position:relative;z-index:2;margin:0;min-width:0;align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.hero-box-stage{position:relative;width:100%;height:390px;min-width:0;cursor:default}
[data-preview-state="ready"] .hero-box-stage{cursor:grab}
.hero-box-stage.is-dragging{cursor:grabbing}
.hero-box-stage canvas{display:block;width:100%;height:100%;touch-action:pan-y;outline-offset:-4px;border-radius:8px}
.hero-box-stage canvas[hidden]{display:none}
/* No stale reference image is rendered before WebGL: a quiet loading state replaces it. */
.hero-box-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;pointer-events:none;color:#d7dfd9;transition:opacity .2s ease}
.hero-box-spinner{width:34px;height:34px;border-radius:50%;border:2px solid #ddaf8840;border-top-color:#e5ad82;animation:hero-box-loading-turn 1.25s linear infinite}
.hero-box-placeholder-text,.hero-box-fallback-text{font-size:12px;letter-spacing:.035em;color:#dbe0da;text-align:center;max-width:280px;line-height:1.6}
.hero-box-fallback-text{display:none}
[data-preview-state="ready"] .hero-box-placeholder{opacity:0;visibility:hidden}
[data-preview-state="fallback"] .hero-box-spinner,[data-preview-state="fallback"] .hero-box-placeholder-text{display:none}
[data-preview-state="fallback"] .hero-box-fallback-text{display:block}
@keyframes hero-box-loading-turn{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.hero-box-spinner{animation:none}.hero-box-placeholder{transition:none}}
.hero-box-controls{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;margin:0 0 8px;position:relative;z-index:1}
.hero-box-controls[hidden]{display:none}
.hero-box-controls button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:44px;min-height:44px;padding:0 11px;background:#ffffffb8;color:#303638;border:1px solid #ffffffb3;border-radius:10px;backdrop-filter:blur(8px);font-size:12px;font-weight:600;cursor:pointer;box-shadow:0 3px 12px #17211d06}
.hero-box-controls button:hover{background:#fff;border-color:#b9c0b7}.hero-box-controls svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.hero-interactive .hero-product figcaption{display:flex;flex-direction:column;align-items:center;gap:3px;padding:0;font-size:10px;color:#353e39;letter-spacing:.02em;text-align:center;min-height:33px}
.hero-box-technical{opacity:.75}
@media(min-width:981px){.hero-interactive .hero-copy{align-self:start;padding-top:44px}}
@media(max-width:980px) and (min-width:681px){.hero-interactive .hero-grid{grid-template-columns:1fr 1fr;gap:12px}.hero-interactive h1{font-size:32px}.hero-box-stage{height:360px}}
@media(max-width:680px){
 .hero.hero-interactive{padding:28px 0 36px;background:linear-gradient(180deg,#101518d9 0%,#151a1dcc 30%,#1b2021a6 55%,#efefeb 98%),linear-gradient(90deg,#0c1114ad 0%,#0c111436 100%),url('/assets/hero-diodo-azul-fondo.webp') 30% 50% / auto calc(100% + 52px) no-repeat,#171b1e;background-position:0 0,0 0,30% calc(50% + var(--hero-parallax-y,0px))}
 .hero-interactive .hero-grid{grid-template-columns:1fr;gap:0;min-height:0}.hero-interactive .hero-copy{padding-bottom:0}.hero-interactive h1{font-size:clamp(27px,7vw,37px)}
 .hero-interactive .hero-lead{font-size:14px;line-height:1.6}.hero-interactive .hero-note{margin-top:13px;font-size:11px}
 .hero-interactive .hero-product{margin:8px 0 0}.hero-box-stage{height:clamp(265px,76vw,390px)}
 .hero-box-controls{gap:5px;margin:0 0 9px}.hero-box-controls button{padding:0 10px}.hero-interactive .hero-product figcaption{font-size:10px}
}
@media(prefers-reduced-motion:reduce){.hero-box-controls button{transition:none}}

.hero-interactive+#herramientas{border-top:0}

/* Home sections reveal in short, quiet groups as they enter the viewport. */
.hero-interactive~section .reveal-ready{transition:opacity .65s cubic-bezier(.22,1,.36,1),transform .65s cubic-bezier(.22,1,.36,1)}
.hero-interactive~section .reveal-ready.reveal-wait{opacity:0;transform:translateY(14px)}
.hero-interactive~section [data-reveal-order="1"]{transition-delay:40ms}
.hero-interactive~section [data-reveal-order="2"]{transition-delay:80ms}
.hero-interactive~section [data-reveal-order="3"]{transition-delay:120ms}
.hero-interactive~section .reveal-wait:focus-within{opacity:1;transform:none;transition:none}
@media(prefers-reduced-motion:reduce){.hero-interactive~section .reveal-ready,.hero-interactive~section .reveal-ready.reveal-wait{opacity:1;transform:none;transition:none}}