/* ==========================================================================
   Automatear — Pieza visual del caso NEXO
   Todas las clases usan el prefijo .nexo-showcase- para poder integrarse
   dentro de un HTML existente sin colisionar con otros estilos.
   ========================================================================== */

.nexo-showcase {
  --nx-ivory: #F4F0E9;
  --nx-white: #FBF9F5;
  --nx-sand: #EEE8DE;
  --nx-ink: #121212;
  --nx-muted: #66635E;
  --nx-line: rgba(18, 18, 18, .10);
  --nx-orange: #E85002;
  --nx-orange-lit: #FF6A1A;

  --nx-tiltx: 0deg;
  --nx-tilty: 0deg;
  --nx-px: 0;
  --nx-py: 0;
  --nx-scroll: 0;

  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  margin-top: clamp(52px, 7vw, 92px);
  padding: clamp(40px, 6vw, 96px) clamp(20px, 5vw, 72px);
  border-radius: clamp(20px, 2.5vw, 32px);
  background: linear-gradient(180deg, var(--nx-white), var(--nx-ivory));
  color: var(--nx-ink);
  font-family: Sora, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.nexo-showcase *,
.nexo-showcase *::before,
.nexo-showcase *::after { box-sizing: border-box; }

/* ---------- Columna de texto (solo referencia de composición) ---------- */

.nexo-showcase-copy { min-width: 0; max-width: 46ch; }

.nexo-showcase-eyebrow {
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--nx-orange);
}

.nexo-showcase-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nx-orange);
  flex: none;
}

.nexo-showcase-title {
  margin: 0;
  font-size: clamp(27px, 3.4vw, 46px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.nexo-showcase-lead {
  margin: 22px 0 0;
  font-size: clamp(15.5px, 1.25vw, 17.5px);
  line-height: 1.62;
  color: var(--nx-muted);
  text-wrap: pretty;
}

.nexo-showcase-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 30px 0 0;
  padding: 15px 26px;
  border-radius: 999px;
  background: var(--nx-orange);
  color: var(--nx-white);
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  box-shadow: 0 16px 34px -16px rgba(232, 80, 2, .75);
  transition: background .25s ease, transform .25s ease;
}

.nexo-showcase-cta:hover,
.nexo-showcase-cta:focus-visible {
  background: var(--nx-orange-lit);
  color: var(--nx-white);
  transform: translateY(-2px);
}

.nexo-showcase-cta-arrow {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 12px;
}

/* ---------- Escena 3D ---------- */

.nexo-showcase-stage {
  position: relative;
  min-width: 0;
  aspect-ratio: 4 / 3.15;
  perspective: 1400px;
  perspective-origin: 68% 44%;
  transform: translateY(calc(var(--nx-scroll) * -26px));
  will-change: transform;
}

/* Todas las capas comparten el mismo punto de fuga: la rotación vive en la
   escena y cada capa solo se separa en Z y desplazamiento. */
.nexo-showcase-scene {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform-origin: center center;
  transform:
    rotateY(calc(-10deg + var(--nx-tilty)))
    rotateX(calc(3deg + var(--nx-tiltx)))
    rotateZ(-1deg);
  transition: transform .5s cubic-bezier(.22, .78, .22, 1);
}

/* Luz cálida ambiental de la escena */
.nexo-showcase-glow {
  position: absolute;
  left: 8%;
  top: 12%;
  width: 84%;
  height: 78%;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 52% 48%, rgba(255, 106, 26, .34), rgba(232, 80, 2, .1) 48%, transparent 72%);
  filter: blur(34px);
  transform: translateZ(-340px) translate3d(calc(var(--nx-px) * 8px), calc(var(--nx-py) * 8px), 0);
  pointer-events: none;
}

/* Arco mineral claro del fondo — nivel 1, el más lejano */
.nexo-showcase-arch {
  position: absolute;
  right: 4%;
  top: 0%;
  width: 52%;
  height: 76%;
  border-radius: 999px 999px 18px 18px;
  background:
    radial-gradient(120% 70% at 30% 8%, rgba(255, 255, 255, .95), rgba(238, 232, 222, .5) 60%, rgba(238, 232, 222, .18)),
    var(--nx-sand);
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, .9),
    26px 54px 96px -56px rgba(18, 18, 18, .6);
  transform: translateZ(-300px) translate3d(calc(var(--nx-px) * 12px), calc(var(--nx-py) * 12px), 0);
}

/* Placa de vidrio naranja — nivel 1, con canto encendido */
.nexo-showcase-plate-orange {
  position: absolute;
  right: 3%;
  top: 6%;
  width: 64%;
  height: 68%;
  border-radius: 20px 150px 20px 20px;
  background: linear-gradient(158deg, rgba(255, 138, 61, .42), rgba(232, 80, 2, .14) 58%, rgba(232, 80, 2, .06));
  border: 1px solid rgba(255, 138, 61, .55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 3px 0 0 rgba(255, 106, 26, .55),
    inset -2px 0 0 rgba(255, 219, 194, .5),
    34px 58px 92px -54px rgba(232, 80, 2, .65);
  backdrop-filter: blur(3px);
  transform: translateZ(-190px) translate3d(calc(var(--nx-px) * 18px), calc(var(--nx-py) * 16px), 0);
}

/* Placa de vidrio extraclaro — nivel 1, justo detrás del dashboard */
.nexo-showcase-plate-clear {
  position: absolute;
  left: 2%;
  top: 13%;
  width: 86%;
  height: 76%;
  border-radius: 130px 22px 22px 22px;
  background: linear-gradient(200deg, rgba(251, 249, 245, .72), rgba(238, 232, 222, .28));
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    inset 3px 0 0 rgba(255, 255, 255, .8),
    inset -2px 0 0 rgba(255, 198, 160, .45),
    30px 56px 96px -56px rgba(18, 18, 18, .55);
  backdrop-filter: blur(5px);
  overflow: hidden;
  transform: translateZ(-110px) translate3d(calc(var(--nx-px) * 26px), calc(var(--nx-py) * 22px), 0);
}

/* Brillo que recorre lentamente el borde del vidrio */
.nexo-showcase-plate-clear::after {
  content: "";
  position: absolute;
  top: -40%;
  left: -60%;
  width: 45%;
  height: 180%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .85) 42%, rgba(255, 176, 122, .55) 58%, transparent);
  transform: rotate(14deg);
  animation: nexo-showcase-sheen 9s ease-in-out infinite;
  pointer-events: none;
}

@keyframes nexo-showcase-sheen {
  0%, 12% { transform: translateX(0) rotate(14deg); opacity: 0; }
  28% { opacity: .85; }
  72% { opacity: .5; }
  100% { transform: translateX(340%) rotate(14deg); opacity: 0; }
}

/* Superficie clara donde apoyan las pantallas */
.nexo-showcase-base {
  position: absolute;
  left: 8%;
  right: 4%;
  bottom: 7%;
  height: 9%;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(251, 249, 245, .95), rgba(238, 232, 222, .55));
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .8),
    24px 34px 50px -34px rgba(18, 18, 18, .6);
  transform: translateZ(-70px) translate3d(calc(var(--nx-px) * 30px), calc(var(--nx-py) * 24px), 0);
}

/* ---------- Pantallas ---------- */

.nexo-showcase-screen {
  position: absolute;
  margin: 0;
  border-radius: 14px;
  background: #0B0F16;
  border: 1px solid rgba(255, 255, 255, .55);
  overflow: hidden;
  transform-style: preserve-3d;
}

.nexo-showcase-screen img {
  display: block;
  width: 100%;
  height: auto;
}

/* Reflejo de vidrio sobre la pantalla, muy controlado */
.nexo-showcase-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(118deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, .05) 22%, transparent 46%, rgba(255, 138, 61, .16) 88%);
  pointer-events: none;
}

/* Nivel 2 — placa física suspendida: grosor por cantos y sombra proyectada
   hacia la derecha, coherente con el punto de fuga de la escena. */
.nexo-showcase-desktop {
  left: 19%;
  top: 24%;
  width: 76%;
  transform: translateZ(40px) translate3d(calc(var(--nx-px) * 34px), calc(var(--nx-py) * 28px), 0);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    -5px 0 0 rgba(255, 255, 255, .5),
    -9px 0 22px -6px rgba(232, 80, 2, .42),
    3px 0 0 rgba(18, 18, 18, .35),
    38px 58px 96px -44px rgba(18, 18, 18, .66);
}

/* Nivel 3 — primer plano: se apoya sobre el ángulo inferior izquierdo del
   dashboard. El `left` compensa la magnificación de translateZ, que empuja
   la capa hacia afuera del punto de fuga. */
.nexo-showcase-mobile {
  left: 12%;
  bottom: -4%;
  width: 22%;
  border-radius: 20px;
  transform:
    translateZ(150px)
    translate3d(calc(var(--nx-px) * 52px), calc(var(--nx-py) * 40px), 0)
    rotateY(5deg) rotateZ(1deg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    -4px 0 0 rgba(255, 255, 255, .45),
    3px 0 0 rgba(18, 18, 18, .3),
    30px 48px 74px -34px rgba(18, 18, 18, .62),
    -6px 0 24px -6px rgba(232, 80, 2, .34);
}

.nexo-showcase-mobile img {
  /* Captura completa: sin recorte, la barra inferior del portal queda visible */
  aspect-ratio: 1179 / 2556;
  height: auto;
}

/* Etiqueta técnica discreta */
.nexo-showcase-caption {
  position: absolute;
  right: 3%;
  bottom: 1%;
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nx-muted);
}

.nexo-showcase-caption::before {
  content: "";
  width: 22px;
  height: 1px;
  background: linear-gradient(90deg, rgba(232, 80, 2, .15), var(--nx-orange));
}

/* ---------- Tablet: menos inclinación ---------- */

@media (max-width: 900px) {
  .nexo-showcase-stage { perspective: 1900px; }
  .nexo-showcase-scene {
    transform:
      rotateY(calc(-6.5deg + var(--nx-tilty)))
      rotateX(calc(2deg + var(--nx-tiltx)))
      rotateZ(-.6deg);
  }
  .nexo-showcase-desktop { transform: translateZ(30px) translate3d(calc(var(--nx-px) * 20px), calc(var(--nx-py) * 16px), 0); }
  .nexo-showcase-mobile { transform: translateZ(120px) translate3d(calc(var(--nx-px) * 30px), calc(var(--nx-py) * 24px), 0) rotateY(3deg); }
}

/* ---------- Móvil: sin perspectiva, capas conservadas ---------- */

@media (max-width: 760px) {
  .nexo-showcase { padding: clamp(32px, 7vw, 48px) 18px; }
  .nexo-showcase-stage {
    aspect-ratio: 4 / 3.6;
    perspective: 2600px;
    transform: none;
  }
  .nexo-showcase-scene {
    transform: rotateY(-3deg) rotateX(1deg);
    transform-style: preserve-3d;
  }
  .nexo-showcase-arch { right: 2%; width: 58%; height: 60%; transform: translateZ(-120px); }
  .nexo-showcase-plate-orange { right: 3%; top: 4%; width: 74%; height: 52%; transform: translateZ(-80px); }
  .nexo-showcase-plate-clear { left: 2%; top: 10%; width: 92%; height: 72%; transform: translateZ(-40px); }
  .nexo-showcase-base { display: none; }
  .nexo-showcase-desktop {
    left: 5%;
    top: 12%;
    width: 90%;
    transform: translateZ(20px);
  }
  .nexo-showcase-mobile {
    left: 8%;
    bottom: 0%;
    width: 28%;
    transform: translateZ(70px) rotateY(2deg);
  }
  .nexo-showcase-caption { position: static; margin: 14px 0 0; justify-content: flex-start; }
}

/* ---------- Accesibilidad ---------- */

@media (prefers-reduced-motion: reduce) {
  .nexo-showcase-stage { transform: none; }
  .nexo-showcase-scene { transition: none; }
  .nexo-showcase-plate-clear::after { animation: none; opacity: .35; }
  .nexo-showcase-cta { transition: none; }
}

.nexo-showcase :focus-visible {
  outline: 2px solid var(--nx-orange);
  outline-offset: 3px;
}