/* Hero del inicio: KetherLabs plateado al centro, destellos debajo y piezas flotando sobre negro puro.
   (Julian eligió la versión negra entre tres pruebas: universo en degradé, ciudad y negro.) */
.hero2 { padding: 12px 0 0; }
.hero2__frame { --mx: 0; --my: 0; --sy: 0; position: relative; isolation: isolate; overflow: hidden; border-radius: 28px; border: 1px solid var(--line); min-height: min(90svh, 880px); display: grid; place-items: center; padding: 110px 20px 70px; background: var(--bg); }
@media (min-width: 720px) { .hero2__frame { padding: 120px 48px 80px; } }

/* Fondos */
.hero2__fondo { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero2__fondo > * { position: absolute; }
.hero2--negro .hero2__frame { background: #000; border-color: rgba(255, 255, 255, .07); }
.hero2--negro .hero2__fondo { background: #000; }
.hero2__cielo { inset: 0; width: 100%; height: 100%; }

/* Piezas flotando: cada una se mueve con el mouse según su profundidad (--d) */
.pieza { left: var(--x); top: var(--y); width: var(--w); transform: translate3d(calc(var(--mx) * var(--d) * 70px), calc(var(--my) * var(--d) * 50px + var(--sy) * var(--d) * -160px), 0); transition: transform 1.2s var(--ease); opacity: 0; animation: piezaEntra 1.6s var(--ease) forwards; animation-delay: var(--t, .2s); }
.pieza > * { animation: flotar var(--f, 9s) ease-in-out infinite alternate; }
@keyframes flotar { from { transform: translateY(-10px) rotate(var(--r1, -4deg)); } to { transform: translateY(12px) rotate(var(--r2, 4deg)); } }
@keyframes piezaEntra { from { opacity: 0; scale: .85; } to { opacity: var(--o, 1); scale: 1; } }
/* planetas */
.planeta { display: block; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #fff 0%, #ffc4e4 10%, #ff4fa3 32%, #8b6cff 62%, #1b0f33 100%); box-shadow: 0 0 80px rgba(255, 79, 163, .45), inset -18px -24px 50px rgba(7, 7, 11, .65); }
.planeta--cyan { background: radial-gradient(circle at 30% 28%, #fff 0%, #c9fbff 12%, #3fe0f0 38%, #3b5bff 72%, #0b1030 100%); box-shadow: 0 0 60px rgba(63, 224, 240, .4), inset -10px -14px 30px rgba(7, 7, 11, .6); }
.planeta--violeta { background: radial-gradient(circle at 30% 28%, #fff 0%, #ddd2ff 12%, #8b6cff 40%, #3a1f7a 80%, #10081f 100%); box-shadow: 0 0 50px rgba(139, 108, 255, .45), inset -8px -10px 24px rgba(7, 7, 11, .6); }
.anillo { position: absolute; left: 50%; top: 50%; width: 170%; aspect-ratio: 3.2; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: rgba(255, 255, 255, .08); transform: translate(-50%, -50%) rotate(-18deg); box-shadow: 0 0 24px rgba(139, 108, 255, .35); }
.orbita { position: relative; display: block; }
/* tarjetas de vidrio con los productos */
.vidrio { display: block; padding: 7px; border-radius: 18px; background: linear-gradient(140deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .8), 0 0 40px -10px var(--g, rgba(139, 108, 255, .5)), inset 0 1px 0 rgba(255, 255, 255, .3); }
.vidrio img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; }
/* cubo de vidrio que gira */
.cubo { position: relative; display: block; width: var(--w); aspect-ratio: 1; transform-style: preserve-3d; animation: cuboGira 26s linear infinite !important; }
.cubo span { position: absolute; inset: 0; border: 1px solid rgba(255, 255, 255, .35); background: linear-gradient(135deg, rgba(255, 79, 163, .22), rgba(63, 224, 240, .14)); box-shadow: inset 0 0 30px rgba(139, 108, 255, .35); }
.cubo span:nth-child(1) { transform: translateZ(calc(var(--w) / 2)); }
.cubo span:nth-child(2) { transform: rotateY(180deg) translateZ(calc(var(--w) / 2)); }
.cubo span:nth-child(3) { transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); }
.cubo span:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); }
.cubo span:nth-child(5) { transform: rotateX(90deg) translateZ(calc(var(--w) / 2)); }
.cubo span:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--w) / 2)); }
@keyframes cuboGira { from { transform: rotateX(-20deg) rotateY(0); } to { transform: rotateX(-20deg) rotateY(360deg); } }
.pieza--cubo { perspective: 600px; }
/* fragmentos (esquirlas de vidrio) */
.esquirla { display: block; aspect-ratio: 1 / 1.4; clip-path: polygon(50% 0, 100% 38%, 72% 100%, 0 76%); background: linear-gradient(160deg, rgba(255, 255, 255, .5), rgba(139, 108, 255, .25) 50%, rgba(63, 224, 240, .3)); filter: drop-shadow(0 0 14px rgba(139, 108, 255, .6)); }

/* Centro */
.hero2__centro { container-type: inline-size; position: relative; z-index: 2; display: grid; justify-items: center; text-align: center; width: 100%; }
.hero2__titulo { display: grid; justify-items: center; margin: 0; font-weight: 700; }
/* el tamaño sale del ancho del marco (cqw), así nunca se sale ni se corta la "s" */
.hero2__marca { display: block; font-size: min(17cqw, 210px); line-height: .9; letter-spacing: -.06em; padding: 0 .08em;
  background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .9) 50%, transparent 65%) 200% 0 / 250% 100% no-repeat, linear-gradient(180deg, #fff 0%, #eef0f6 34%, #a7aab8 76%, #6d6f7e 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 10px 50px rgba(255, 255, 255, .1)) drop-shadow(0 0 60px rgba(139, 108, 255, .25));
  animation: marcaEntra 1.4s var(--ease) both, brillo 7s ease-in-out 1.6s infinite; }
@keyframes marcaEntra { from { opacity: 0; transform: translateY(30px) scale(.96); letter-spacing: -.02em; filter: blur(10px); } }
@keyframes brillo { 0%, 55% { background-position: 200% 0, 0 0; } 100% { background-position: -120% 0, 0 0; } }
.hero2 .marca__luz { width: min(100%, 64rem); height: clamp(120px, 15vw, 200px); margin-top: -4px; }
.hero2__frase { display: block; margin-top: calc(-1 * clamp(70px, 8vw, 120px)); position: relative; font-size: clamp(20px, 2.6vw, 32px); font-weight: 500; letter-spacing: -.03em; color: var(--text); animation: aparece 1.2s var(--ease) .5s both; }
.hero2__acciones { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-top: 30px; animation: aparece 1.2s var(--ease) .7s both; }
@keyframes aparece { from { opacity: 0; transform: translateY(18px); } }

/* Celular: menos piezas y más pequeñas */
@media (max-width: 700px) {
  .pieza--lejos { display: none; }
  .pieza { --w: var(--wm, var(--w)); }
  .hero2__marca { font-size: 19.5cqw; }
}
@media (prefers-reduced-motion: reduce) {
  .pieza > *, .cubo, .hero2__marca, .hero2__frase, .hero2__acciones, .pieza { animation: none !important; }
  .pieza { opacity: var(--o, 1); }
}