/* Capa futurista: escena 3D, HUD, cursor con anillo, textura y profundidad. Se carga al final. */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}

/* Textura de película sobre todo el sitio */
body::after {
  content: ""; position: fixed; inset: -50%; z-index: 9999; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grano 1.2s steps(6) infinite;
}
@keyframes grano {
  0% { transform: translate(0,0); } 20% { transform: translate(-3%,2%); } 40% { transform: translate(2%,-3%); }
  60% { transform: translate(-2%,3%); } 80% { transform: translate(3%,1%); } 100% { transform: translate(0,0); }
}

/* Etiquetas técnicas tipo HUD */
.eyebrow, .etiqueta {
  font-family: var(--mono) !important; text-transform: uppercase; letter-spacing: .12em; font-size: 12px !important;
}
.eyebrow::before {
  content: "[ "; color: var(--texto-suave);
}
.eyebrow::after {
  content: " ]"; color: var(--texto-suave);
}

/* Escena 3D en el inicio */
.hero { overflow: hidden; }
.hero > .contenedor { position: relative; z-index: 2; }
.escena {
  position: absolute; z-index: 1; top: 50%; right: -12%;
  width: min(1000px, 88vw); height: min(1000px, 88vw);
  transform: translateY(-50%); pointer-events: none;
}
.hero h1 { text-shadow: 0 0 60px rgba(255,122,26,.12); }
.hero .lead { position: relative; padding-left: 18px; border-left: 2px solid rgba(255,122,26,.7); }

/* Datos flotantes del hero */
.hud-chip {
  position: absolute; z-index: 3; font-family: var(--mono); font-size: 12px; color: var(--texto-suave);
  padding: 8px 12px; border: 1px solid var(--cristal-borde); border-radius: 10px;
  background: rgba(5,7,13,.5); backdrop-filter: blur(8px);
  animation: levitar 6s ease-in-out infinite;
}
.hud-chip b { color: var(--texto); font-weight: 500; }
.hud-chip.a { top: 22%; right: 8%; }
.hud-chip.b { bottom: 24%; right: 22%; animation-delay: -3s; }
@keyframes levitar { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* Cursor con anillo */
.cursor-anillo {
  position: fixed; left: 0; top: 0; z-index: 10000; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.55); pointer-events: none; mix-blend-mode: difference;
  transition: width .35s var(--ease), height .35s var(--ease), background .35s;
}
.cursor-anillo.activo { width: 70px; height: 70px; background: rgba(255,255,255,.12); }
@media (pointer: coarse) { .cursor-anillo { display: none; } }

/* Tarjetas con profundidad 3D */
.bento .tarjeta, .productos .tarjeta { transform-style: preserve-3d; }
.bento .tarjeta .icono { transform: translateZ(40px); transition: transform .5s var(--ease); }
.bento .tarjeta:hover .icono { transform: translateZ(70px) rotate(-6deg); }
.bento .tarjeta h3 { transform: translateZ(20px); }
.bento .tarjeta:nth-child(1), .bento .tarjeta:nth-child(4) {
  background: linear-gradient(160deg, rgba(255,122,26,.07), rgba(59,130,246,.04) 60%, transparent), var(--cristal);
}
.producto h3 { transform: translateZ(30px); }
.producto .chip { transform: translateZ(30px); }

/* Números con aspecto de panel */
.cifras { border-block: 1px solid var(--cristal-borde); }
.cifra { position: relative; }
.cifra::before {
  content: ""; position: absolute; left: 0; top: -1px; width: 40px; height: 2px; background: var(--gradiente);
}
.cifra strong { font-feature-settings: "tnum"; }

/* Títulos grandes con acento */
.seccion h2 { font-weight: 700; }
.seccion h2 em { font-style: normal; background: var(--gradiente); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Línea de luz al pasar por la sección de productos */
#productos::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,122,26,.6), rgba(59,130,246,.6), transparent);
}

@media (max-width: 760px) {
  .escena { right: -40%; top: 30%; width: 120vw; height: 120vw; opacity: .8; }
  .hud-chip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
  .hud-chip { animation: none; }
}