/* ==========================================================================
   Escenas 3D de la landing principal: "Encendé tu negocio".
   Todo adentro del escenario esta en em: sceneMotion.js fija el font-size del
   escenario en ancho / 100, asi la escena escala entera y el texto sigue nitido.
   Solo se animan transform y opacity (salvo el trazo de los cables al encender).
   ========================================================================== */

.scene {
  --scene-blue: #3d5ef4;
  --scene-blue-deep: #2a45c7;
  --scene-green: #93cf4d;
  --scene-green-deep: #79ad3b;
  --scene-lime: #a6e65c;
  --scene-cyan: #00ced6;
  --scene-line: #758eff;
  --scene-tint: #e8ecff;
  --scene-hair: #dfe3f0;
  --scene-off: #d3d9ea;
  --scene-grey: #688589;
  --scene-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --scene-pop: cubic-bezier(0.3, 1.35, 0.5, 1);
  position: relative;
  width: 100%;
  font-size: 1vw;
  line-height: 1.2;
  perspective: 190em;
  perspective-origin: 50% 42%;
  -webkit-user-select: none;
  user-select: none;
}

.scene p,
.scene h3,
.scene ul {
  width: auto;
  margin: 0;
  padding: 0;
  color: inherit;
  font-size: 1em;
  line-height: inherit;
}

.scene-rig {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

.scene.is-paused .scene-rig {
  will-change: auto;
}

/* Fuera de pantalla no corre nada */
.scene.is-paused *,
.scene.is-paused *::before,
.scene.is-paused *::after {
  animation-play-state: paused !important;
}

/* prefers-reduced-motion: estado final encendido, sin bucles ni transiciones */
.scene.is-static *,
.scene.is-static *::before,
.scene.is-static *::after {
  animation: none !important;
  transition: none !important;
}

.scene img {
  max-width: none;
}

/* --- Secciones que antes dependian del ancho intrinseco del SVG --- */
.scene-section > .row {
  align-self: stretch;
}

/* --- Cables y pulso --- */
.scene-wire {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.scene-wire__off,
.scene-wire__on,
.scene-wire__reveal {
  fill: none;
}

.scene-wire__off {
  stroke: var(--scene-off);
  stroke-width: 0.2;
  stroke-dasharray: 0.9 0.7;
}

.scene-wire__on {
  stroke: var(--scene-line);
  stroke-width: 0.26;
  stroke-dasharray: 0.9 0.7;
}

.scene-wire__reveal {
  stroke: #fff;
  stroke-width: 1.4;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.scene-wire.is-drawn .scene-wire__reveal {
  stroke-dashoffset: 0;
}

.scene-pulse {
  position: absolute;
  top: 0;
  left: 0;
  width: 1.1em;
  height: 1.1em;
  margin: -0.55em 0 0 -0.55em;
  border: 0.3em solid var(--scene-blue);
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}

.scene-pulse.is-traveling {
  opacity: 1;
}

.scene-wire-dot {
  position: absolute;
  width: 1em;
  height: 1em;
  margin: -0.5em 0 0 -0.5em;
  border-radius: 50%;
  background: var(--scene-line);
  opacity: 0.35;
  transition: opacity 0.5s linear;
}

.scene-wire-dot.is-awake {
  opacity: 1;
}

.scene .scene-title {
  color: var(--scene-blue);
  font-size: 2em;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* --- Discos de foto --- */
.scene-disc {
  position: absolute;
  overflow: hidden;
  border: 0.62em solid var(--scene-lime);
  border-radius: 50%;
  background: var(--scene-tint);
  box-shadow: 0 2.4em 4em -1.6em rgba(16, 26, 74, 0.32);
  opacity: 0.5;
  transition: transform 1s var(--scene-ease), opacity 0.6s linear;
}

.scene-disc img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   Isotipo 3D
   ========================================================================== */
.power-mark {
  position: relative;
  width: 100%;
  padding-bottom: 110.15%;
  transform-style: preserve-3d;
}

.power-mark__swing,
.power-mark__press,
.power-mark__bar,
.power-mark__cross {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform-style: preserve-3d;
}

.power-mark svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.power-mark.is-lit .power-mark__swing {
  animation: power-swing 24s ease-in-out 1.6s infinite;
}

@keyframes power-swing {
  0%,
  100% {
    transform: rotateY(0deg);
  }
  25% {
    transform: rotateY(22deg);
  }
  75% {
    transform: rotateY(-22deg);
  }
}

.power-mark__press {
  transform: translateZ(-1.4em) scale(0.94);
  transition: transform 0.85s var(--scene-pop);
}

.power-mark.is-lit .power-mark__press {
  transform: translateZ(0) scale(1);
}

.power-mark.is-gulping .power-mark__press {
  animation: power-gulp 0.42s var(--scene-ease);
}

@keyframes power-gulp {
  45% {
    transform: translateZ(0.8em) scale(1.06);
  }
}

.power-mark__plate path {
  fill: #fff;
  stroke: var(--scene-hair);
  stroke-width: 2;
}

.power-mark__slice {
  opacity: 0;
  transform: translateZ(0);
  transition: transform 0.7s var(--scene-ease) var(--slice-delay, 0ms),
    opacity 0.25s linear var(--slice-delay, 0ms);
}

.power-mark.is-lit .power-mark__slice {
  opacity: 1;
  transform: translateZ(var(--slice-z));
}

.power-mark__slice--plate path {
  fill: #c5cff3;
}

.power-mark__slice--ring path,
.power-mark__slice--bar rect {
  fill: var(--scene-blue-deep);
}

.power-mark__slice--cross path {
  fill: #7fb93a;
}

.power-mark__ring-face {
  transform: translateZ(0.02em);
  transition: transform 0.7s var(--scene-ease) 0.3s;
}

.power-mark.is-lit .power-mark__ring-face {
  transform: translateZ(0.5em);
}

.power-mark__ring-off,
.power-mark__bar-off {
  fill: var(--scene-off);
}

.power-mark__ring-on,
.power-mark__bar-on {
  fill: var(--scene-blue);
}

.power-mark__draw {
  fill: none;
  stroke: #fff;
  stroke-width: 64;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.75s cubic-bezier(0.45, 0.05, 0.55, 0.95) 0.1s;
}

.power-mark.is-lit .power-mark__draw {
  stroke-dashoffset: 0;
}

.power-mark__bar {
  transform: translateZ(0.04em) translateY(-5%);
  transition: transform 0.6s var(--scene-pop) 0.5s;
}

.power-mark.is-lit .power-mark__bar {
  transform: translateZ(0.6em) translateY(0);
}

.power-mark__bar-face {
  transform: translateZ(0.42em);
}

.power-mark__bar-on {
  opacity: 0;
  transition: opacity 0.2s linear 0.5s;
}

.power-mark.is-lit .power-mark__bar-on {
  opacity: 1;
}

.power-mark__cross {
  transform: translateZ(0.04em) scale(0);
  transform-origin: 49.7% 54.6%;
  transition: transform 0.6s var(--scene-pop) 0.62s;
}

.power-mark.is-lit .power-mark__cross {
  transform: translateZ(0.6em) scale(1);
}

.power-mark__cross-face {
  transform: translateZ(0.28em);
}

.power-mark__cross-face path {
  fill: var(--scene-lime);
}

/* ==========================================================================
   Paneles de la interfaz (ilustrativos, aria-hidden)
   ========================================================================== */
.mock-panel {
  position: relative;
  border-radius: 1.1em;
  background: #fff;
  box-shadow: 0 0 0 1px var(--scene-hair);
  color: #3a4a8c;
}

/* Velo del estado apagado */
.mock-panel::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: inherit;
  background: #fff;
  opacity: 0.62;
  transition: opacity 0.7s linear;
  pointer-events: none;
}

.mock-panel.is-awake::before {
  opacity: 0;
}

/* Borde verde y sombra aparecen cuando el panel se enciende */
.mock-panel::after {
  content: "";
  position: absolute;
  top: -0.28em;
  right: -0.28em;
  bottom: -0.28em;
  left: -0.28em;
  border: 0.28em solid var(--scene-green);
  border-radius: 1.38em;
  box-shadow: 0 2.6em 4.4em -1.6em rgba(16, 26, 74, 0.34);
  opacity: 0;
  transition: opacity 0.6s linear;
  pointer-events: none;
}

.mock-panel.is-awake::after {
  opacity: 1;
}

.mock-tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5em 0.6em;
  border-radius: 1.1em 1.1em 0 0;
  background: var(--scene-tint);
  color: var(--scene-blue);
  font-size: 0.68em;
  white-space: nowrap;
}

.mock-tabs span {
  padding: 0.5em 0.5em;
}

.mock-tabs .is-active {
  border-radius: 0.5em;
  background: var(--scene-blue);
  color: #fff;
  font-weight: 600;
}

.mock-field small {
  display: block;
  margin-bottom: 0.25em;
  color: var(--scene-blue);
  font-size: 0.62em;
}

.mock-select {
  position: relative;
  display: block;
  height: 1.5em;
  border: 1px solid #7f93f2;
  border-radius: 0.28em;
  background: #fff;
}

.mock-select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.45em;
  margin-top: -0.12em;
  border-top: 0.3em solid #2a3a7c;
  border-right: 0.24em solid transparent;
  border-left: 0.24em solid transparent;
}

.mock-select--plain::after {
  display: none;
}

.mock-toggle {
  position: relative;
  display: inline-block;
  flex: none;
  width: 1.85em;
  height: 0.98em;
  border-radius: 1em;
  background: #c3cbe6;
}

.mock-toggle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: #1e4fb4;
  opacity: 0;
  transition: opacity 0.25s linear;
}

.mock-toggle::after {
  content: "";
  position: absolute;
  top: 0.14em;
  left: 0.14em;
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.25s var(--scene-ease);
}

.mock-toggle.is-on::before {
  opacity: 1;
}

.mock-toggle.is-on::after {
  transform: translateX(0.87em);
}

/* Panel de ventas (Administracion y Control de Stock) */
.mock-sales .mock-tabs {
  font-size: 0.62em;
}

.mock-sales .mock-tabs span {
  padding: 0.5em 0.4em;
}

.mock-sales__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1em;
  padding: 0.8em 1em 1em;
}

.mock-sales__left {
  min-width: 0;
}

.mock-sales__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8em;
}

.mock-sales__client {
  display: flex;
  align-items: center;
  align-self: start;
  gap: 0.4em;
  margin-top: 1.5em;
  color: var(--scene-blue);
  font-size: 0.62em;
  white-space: nowrap;
}

.mock-new {
  margin-left: auto;
  padding: 0.35em 0.55em;
  border-radius: 0.3em;
  background: #5a6d70;
  color: #fff;
  font-weight: 500;
  text-transform: uppercase;
}

.mock-sales__amount {
  margin-top: 0.8em;
  text-align: center;
}

.mock-sales__amount small {
  display: block;
  margin-bottom: 0.25em;
  color: #2a3a7c;
  font-size: 0.62em;
  font-weight: 700;
  text-transform: uppercase;
}

.mock-sales__amount output {
  display: block;
  padding: 0.28em;
  border: 1px solid #7f93f2;
  border-radius: 0.28em;
  color: #2a3a7c;
  font-size: 0.82em;
  font-variant-numeric: tabular-nums;
}

.mock-sales__actions {
  margin-top: 0.45em;
}

.mock-action {
  display: block;
  margin-top: 0.4em;
  padding: 0.42em;
  border-radius: 0.3em;
  background: var(--scene-cyan);
  color: #fff;
  font-size: 0.6em;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  transition: transform 0.15s var(--scene-ease);
}

.mock-action.is-pressed {
  transform: scale(0.96);
}

/* ==========================================================================
   Hero
   ========================================================================== */
.scene--hero {
  aspect-ratio: 100 / 86.67;
}

.hero-disc {
  position: absolute;
  top: 8.79em;
  left: 11.84em;
  overflow: hidden;
  width: 85.4em;
  height: 77.88em;
  transform: translateZ(-9em) scale(1.047);
}

.hero-disc i {
  display: block;
  width: 85.4em;
  height: 85.4em;
  border-radius: 50%;
  background: linear-gradient(#a6e65c 0%, #ffffff 92%);
}

.hero-wire-plane {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateZ(-3em);
  transform-style: preserve-3d;
}

.hero-founder {
  position: absolute;
  top: 0;
  left: -5.13em;
  width: 103.9em;
  height: 86.72em;
}

.hero-mark {
  position: absolute;
  top: 12.5em;
  left: 79em;
  width: 15em;
  transform: translateZ(5em);
  transform-style: preserve-3d;
}

/* Orbita: los modulos pasan por delante y por detras del fundador */
.hero-orbit {
  position: absolute;
  top: 57em;
  left: 52em;
  width: 0;
  height: 0;
  transform: rotateX(-13deg);
  transform-style: preserve-3d;
}

.hero-orbit__plane {
  position: absolute;
  top: -38em;
  left: -38em;
  width: 76em;
  height: 76em;
  transform: rotateX(90deg);
}

.hero-orbit__plane i {
  display: block;
  width: 100%;
  height: 100%;
  border: 0.3em dashed var(--scene-line);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.72);
  transition: transform 1.1s var(--scene-ease), opacity 0.5s linear;
}

.hero-orbit.is-awake .hero-orbit__plane i {
  opacity: 0.75;
  transform: scale(1);
}

.hero-orbit__spin {
  position: absolute;
  top: 0;
  left: 0;
  transform-style: preserve-3d;
  animation: hero-orbit-spin 72s linear infinite;
}

@keyframes hero-orbit-spin {
  to {
    transform: rotateY(360deg);
  }
}

.hero-orbit__arm {
  position: absolute;
  top: 0;
  left: 0;
  transform: rotateY(var(--arm)) translateZ(38em);
  transform-style: preserve-3d;
}

.hero-chip {
  position: absolute;
  top: -3.5em;
  left: -3.5em;
  width: 7em;
  height: 7em;
  transform: rotateY(calc(var(--arm) * -1)) rotateX(13deg);
  transform-style: preserve-3d;
  animation: hero-chip-face 72s linear infinite;
}

/* Contrarrota giro, brazo e inclinacion para mirar siempre de frente */
@keyframes hero-chip-face {
  from {
    transform: rotateY(calc(var(--arm) * -1)) rotateX(13deg);
  }
  to {
    transform: rotateY(calc(var(--arm) * -1 - 360deg)) rotateX(13deg);
  }
}

.hero-chip__base,
.hero-chip__lit {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1em;
  font-style: normal;
}

.hero-chip__base::before,
.hero-chip__lit::before {
  font-size: 3em;
}

.hero-chip__base {
  background: #fff;
  box-shadow: 0 0 0 1px var(--scene-hair), 0 1.4em 2em -0.8em rgba(16, 26, 74, 0.34);
  color: var(--scene-blue);
  transform: scale(0);
  transition: transform 0.6s var(--scene-pop) var(--pop);
}

.hero-orbit.is-awake .hero-chip__base {
  transform: scale(1);
}

.hero-chip__lit {
  background: var(--scene-blue);
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s linear;
}

.hero-chip.is-active .hero-chip__lit {
  opacity: 1;
}

/* Tarjeta de modulos */
.hero-card {
  position: absolute;
  top: 12em;
  left: 0.5em;
  width: 33.5em;
  padding: 0.8em 0;
  border-radius: 2.4em;
  background: var(--scene-blue);
  color: #fff;
  transform: translateZ(0) scale(0.97);
  transition: transform 1s var(--scene-ease);
}

.hero-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  border-radius: inherit;
  background: #fff;
  opacity: 0.55;
  transition: opacity 0.6s linear;
  pointer-events: none;
}

.hero-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: inherit;
  box-shadow: 0 3.6em 5.6em -2.2em rgba(16, 26, 74, 0.5);
  opacity: 0;
  transition: opacity 0.7s linear;
  pointer-events: none;
}

.hero-card.is-awake {
  transform: translateZ(9em) scale(1);
}

.hero-card.is-awake::before {
  opacity: 0;
}

.hero-card.is-awake::after {
  opacity: 1;
}

.scene .hero-card__title {
  padding: 0.9em 1.1em 1em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  color: #fff;
  font-size: 2.4em;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.hero-card__title .bi {
  margin-right: 0.4em;
}

.hero-card ul {
  padding: 0.7em 1.1em 0.5em;
  list-style: none;
}

.hero-card li {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0.62em 0.6em;
  font-size: 2.3em;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.hero-card li .bi {
  position: relative;
  z-index: 1;
  margin-right: 0.55em;
}

.hero-card li::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 0.5em;
  background: rgba(255, 255, 255, 0.18);
  opacity: 0;
  transition: opacity 0.3s linear;
}

.hero-card li.is-active::before {
  opacity: 1;
}

/* Firma */
.scene .hero-signature {
  position: absolute;
  top: 75em;
  left: 59.5em;
  padding: 1.1em 2.2em 1.2em;
  border-radius: 1.6em;
  background: var(--scene-grey);
  color: #fff;
  opacity: 0.6;
  transform: translateZ(0);
  transition: transform 1s var(--scene-ease), opacity 0.5s linear;
}

.scene .hero-signature.is-awake {
  opacity: 1;
  transform: translateZ(13em);
}

.hero-signature em,
.hero-signature strong {
  display: block;
  color: #fff;
  line-height: 1.25;
  white-space: nowrap;
}

.hero-signature em {
  font-size: 2em;
}

.hero-signature strong {
  font-size: 2.3em;
  font-weight: 700;
  text-transform: uppercase;
}

/* Hero angosto: la tarjeta y la firma crecen para seguir siendo legibles */
.scene--hero.is-compact .hero-card {
  top: 9em;
  left: 0;
  width: 42em;
}

.scene--hero.is-compact .hero-card__title {
  font-size: 3em;
}

.scene--hero.is-compact .hero-card li {
  font-size: 2.9em;
}

.scene--hero.is-compact .hero-signature {
  top: 73em;
  left: 46em;
}

.scene--hero.is-compact .hero-signature em {
  font-size: 2.6em;
}

.scene--hero.is-compact .hero-signature strong {
  font-size: 3em;
}

/* ==========================================================================
   Pilares (Sin descarga, Soporte, Multi monedas)
   ========================================================================== */
.scene--pillars {
  aspect-ratio: 100 / 21;
}

.scene--pillars.is-compact {
  aspect-ratio: 100 / 58;
}

.pillars-mark {
  position: absolute;
  top: 4.6em;
  left: 10em;
  width: 6em;
  transform: translateZ(2em);
  transform-style: preserve-3d;
}

.pillars-end {
  top: 8em;
  left: 88em;
}

.pillar {
  position: absolute;
  top: 0.4em;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 26em;
  text-align: center;
  transform-style: preserve-3d;
}

.pillar--cloud {
  left: 16em;
}

.pillar--headset {
  left: 37em;
}

.pillar--coin {
  left: 58em;
}

.pillar__object {
  position: relative;
  flex: none;
  width: 26em;
  height: 13em;
  transform: translateZ(0) scale(0.94);
  transform-style: preserve-3d;
  transition: transform 0.9s var(--scene-pop);
}

.pillar.is-awake .pillar__object {
  transform: translateZ(3.4em) scale(1);
}

.scene .pillar__label {
  flex: none;
  margin-top: 0.5em;
  color: var(--scene-blue);
  font-size: 1.42em;
  font-weight: 700;
  line-height: 1.32;
  text-transform: uppercase;
}

.pillar__label span {
  display: block;
}

.pillar svg {
  overflow: visible;
}

/* Nube con globo real */
.pillar-cloud {
  position: absolute;
  top: 1.6em;
  left: 5em;
  width: 16em;
  height: 9.9em;
  fill: var(--scene-green);
  opacity: 0.38;
  transition: opacity 0.6s linear;
}

.pillar.is-awake .pillar-cloud {
  opacity: 1;
}

.pillar-globe {
  position: absolute;
  top: 4.5em;
  left: 10.1em;
  width: 5.8em;
  height: 5.8em;
  transform: rotateZ(-14deg) rotateX(10deg);
  transform-style: preserve-3d;
}

.pillar-globe__spin {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform-style: preserve-3d;
  animation: pillar-globe-spin 26s linear infinite;
}

@keyframes pillar-globe-spin {
  to {
    transform: rotateY(360deg);
  }
}

.pillar-globe__meridian,
.pillar-globe__parallel {
  position: absolute;
  border: 0.13em solid var(--scene-green);
  border-radius: 50%;
  opacity: 0.32;
  transition: opacity 0.6s linear;
}

.pillar.is-awake .pillar-globe__meridian,
.pillar.is-awake .pillar-globe__parallel {
  opacity: 1;
}

.pillar-globe__meridian {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: rotateY(var(--turn));
}

.pillar-globe__parallel {
  top: 50%;
  left: 50%;
  width: calc(5.8em * var(--size));
  height: calc(5.8em * var(--size));
  margin-top: calc(-2.9em * var(--size));
  margin-left: calc(-2.9em * var(--size));
  transform: rotateX(90deg) translateZ(var(--lift));
}

/* Auricular extruido con ondas de sonido hacia el frente */
.pillar-headset {
  position: absolute;
  top: 1.2em;
  left: 6.9em;
  width: 12.2em;
  height: 10.6em;
  transform-style: preserve-3d;
}

.pillar.is-awake .pillar-headset {
  animation: pillar-swing 20s ease-in-out 1.2s infinite;
}

@keyframes pillar-swing {
  0%,
  100% {
    transform: rotateY(0deg);
  }
  25% {
    transform: rotateY(18deg);
  }
  75% {
    transform: rotateY(-18deg);
  }
}

.pillar-headset svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.pillar-headset__face {
  fill: var(--scene-green);
  opacity: 0.38;
  transition: opacity 0.6s linear;
}

.pillar-headset__slice {
  fill: var(--scene-green-deep);
  opacity: 0;
  transform: translateZ(0);
  transition: transform 0.7s var(--scene-ease), opacity 0.25s linear;
}

.pillar.is-awake .pillar-headset__face {
  opacity: 1;
}

.pillar.is-awake .pillar-headset__slice {
  opacity: 1;
  transform: translateZ(var(--slice-z));
}

.pillar-headset__wave {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11em;
  height: 11em;
  margin: -5.5em 0 0 -5.5em;
  border: 0.13em solid var(--scene-green);
  border-radius: 50%;
  opacity: 0;
}

.pillar.is-awake .pillar-headset__wave {
  animation: pillar-wave 7s var(--scene-ease) infinite;
  animation-delay: calc(var(--wave) * 0.55s + 0.9s);
}

@keyframes pillar-wave {
  0% {
    opacity: 0;
    transform: translateZ(0) scale(0.5);
  }
  5% {
    opacity: 0.7;
  }
  34%,
  100% {
    opacity: 0;
    transform: translateZ(7em) scale(1.2);
  }
}

/* Moneda con espesor que gira mostrando otra divisa */
.pillar-arrows {
  position: absolute;
  top: 0;
  left: 6.5em;
  width: 13em;
  height: 13em;
  fill: var(--scene-green);
  opacity: 0.38;
  transition: opacity 0.6s linear;
}

.pillar.is-awake .pillar-arrows {
  opacity: 1;
  animation: pillar-arrows-turn 48s linear infinite;
}

@keyframes pillar-arrows-turn {
  to {
    transform: rotate(360deg);
  }
}

.pillar-coin {
  position: absolute;
  top: 3em;
  left: 9.5em;
  width: 7em;
  height: 7em;
  transform-style: preserve-3d;
  transition: transform 1s cubic-bezier(0.5, 0, 0.2, 1);
}

.pillar-coin__edge,
.pillar-coin__face {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50%;
}

.pillar-coin__edge {
  background: var(--scene-green-deep);
  opacity: 0;
  transform: translateZ(var(--edge-z));
  transition: opacity 0.3s linear;
}

.pillar.is-awake .pillar-coin__edge {
  opacity: 1;
}

.pillar-coin__face {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--scene-green);
  color: #fff;
  font-size: 2.6em;
  font-weight: 800;
  opacity: 0.45;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: opacity 0.6s linear;
}

.pillar.is-awake .pillar-coin__face {
  opacity: 1;
}

/* Las caras tienen font-size 2.6em: 0.254em queda justo sobre el canto */
.pillar-coin__face--front {
  transform: translateZ(0.254em);
}

.pillar-coin__face--back {
  transform: rotateY(180deg) translateZ(0.254em);
}

/* Pilares en angosto: mismos tres objetos, mas grandes respecto del escenario */
.scene--pillars.is-compact .pillars-mark {
  top: 3.6em;
  left: 8em;
  width: 10em;
}

.scene--pillars.is-compact .pillars-end {
  top: 10.5em;
  left: 89em;
}

.scene--pillars.is-compact .pillar {
  top: 14em;
  width: 32em;
}

.scene--pillars.is-compact .pillar--cloud {
  left: 2em;
}

.scene--pillars.is-compact .pillar--headset {
  left: 34em;
}

.scene--pillars.is-compact .pillar--coin {
  left: 66em;
}

.scene--pillars.is-compact .pillar__object {
  font-size: 1.75em;
}

.scene.scene--pillars.is-compact .pillar__label {
  margin-top: 0.8em;
  font-size: 2.45em;
}

/* ==========================================================================
   Local y en el Mundo
   ========================================================================== */
.scene--local {
  aspect-ratio: 100 / 52;
}

.scene--local.is-compact {
  aspect-ratio: 100 / 142;
}

.local-copy {
  position: absolute;
  z-index: 1;
  top: 27.8em;
  left: 8em;
  width: 38em;
}

.local-copy,
.pillar__label,
.hero-signature {
  -webkit-user-select: text;
  user-select: text;
}

.scene .local-copy h3 {
  margin-bottom: 0.3em;
  color: var(--scene-green);
  font-size: 3.5em;
  font-weight: 700;
  line-height: 1.1;
}

.scene .local-copy p {
  color: var(--scene-blue);
  font-size: 1.72em;
  font-weight: 400;
  line-height: 1.4;
}

.local-copy strong {
  font-weight: 700;
}

.local-route {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.local-route__pin {
  position: absolute;
  top: 31em;
  left: 2.4em;
  width: 3.2em;
  height: 4.7em;
  fill: var(--scene-blue);
  transform: scale(0);
  transform-origin: 50% 100%;
  transition: transform 0.6s var(--scene-pop);
}

.local-route__pin.is-awake {
  transform: scale(1);
}

/* El piso va bien atras: su borde cercano no debe cortar paneles ni fotos */
.local-floor {
  position: absolute;
  top: -13.5em;
  left: 56em;
  width: 37em;
  height: 78.5em;
  transform: translateZ(-30em) rotateX(58deg) rotateZ(-7deg);
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
}

.local-floor__shadow {
  position: absolute;
  top: -3%;
  left: -14%;
  width: 128%;
  height: 106%;
  background: radial-gradient(closest-side, rgba(16, 26, 74, 0.14), rgba(16, 26, 74, 0));
  opacity: 0;
  transform: translateZ(-3em);
  transition: opacity 1s linear;
}

.scene--local.is-on .local-floor__shadow {
  opacity: 1;
}

.local-map {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform-style: preserve-3d;
}

.local-map img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.local-map__base {
  opacity: 0;
  transform: translateZ(0);
  transition: transform 1.1s var(--scene-ease) 0.3s, opacity 0.4s linear 0.3s;
}

.scene--local.is-on .local-map__base {
  opacity: 1;
  transform: translateZ(var(--slab));
}

.local-map__top {
  opacity: 0.6;
  transition: opacity 0.8s linear 0.3s;
}

.scene--local.is-on .local-map__top {
  opacity: 1;
}

.local-spot {
  position: absolute;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
}

.local-spot__ring {
  position: absolute;
  top: -2.4em;
  left: -2.4em;
  width: 4.8em;
  height: 4.8em;
  border: 0.16em solid var(--scene-blue);
  border-radius: 50%;
  opacity: 0;
  transform: translateZ(0.1em) scale(0.3);
}

.local-spot.is-awake .local-spot__ring {
  animation: local-spot-echo 8s var(--scene-ease) var(--echo) infinite;
}

@keyframes local-spot-echo {
  0% {
    opacity: 0;
    transform: translateZ(0.1em) scale(0.3);
  }
  4% {
    opacity: 0.8;
  }
  26%,
  100% {
    opacity: 0;
    transform: translateZ(0.1em) scale(1.25);
  }
}

.local-spot__pin {
  position: absolute;
  bottom: 0;
  left: -1.5em;
  width: 3em;
  height: 4.38em;
  fill: var(--scene-blue);
  opacity: 0;
  transform: rotateZ(7deg) rotateX(0deg) scale(0.7);
  transform-origin: 50% 100%;
  transition: transform 0.75s var(--scene-pop), opacity 0.2s linear;
}

.local-spot.is-awake .local-spot__pin {
  opacity: 1;
  transform: rotateZ(7deg) rotateX(-90deg) scale(1);
}

.local-link {
  transform: translateZ(6em);
}

.local-mark {
  position: absolute;
  top: 0.6em;
  left: 64.5em;
  width: 11em;
  transform: translateZ(15em);
  transform-style: preserve-3d;
}

.local-unit {
  position: absolute;
  transition: transform 1s var(--scene-ease);
}

.scene .local-unit .scene-title {
  margin-bottom: 0.3em;
  opacity: 0.5;
  transition: opacity 0.6s linear;
}

.scene .local-unit.is-awake .scene-title {
  opacity: 1;
}

.local-unit--admin {
  top: 2.8em;
  left: 37em;
  width: 24em;
  transform: translateZ(0) scale(0.97);
}

.local-unit--admin.is-awake {
  transform: translateZ(8em) scale(1);
}

.local-unit--stock {
  top: 30em;
  left: 73.5em;
  width: 24em;
  transform: translateZ(0) scale(0.97);
}

.local-unit--stock.is-awake {
  transform: translateZ(9em) scale(1);
}

.scene-disc.local-disc--people {
  top: 29em;
  left: 47em;
  width: 15.5em;
  height: 15.5em;
  transform: translateZ(0) scale(0.92);
}

.scene-disc.local-disc--people.is-awake {
  opacity: 1;
  transform: translateZ(15em) scale(1);
}

.scene-disc.local-disc--market {
  top: 1em;
  left: 84em;
  width: 13.5em;
  height: 13.5em;
  transform: translateZ(0) scale(0.92);
}

.scene-disc.local-disc--market.is-awake {
  opacity: 1;
  transform: translateZ(5em) scale(1);
}

/* Local en angosto: texto arriba, diorama abajo */
.scene--local.is-compact .local-copy {
  top: 0;
  left: 0;
  width: 100%;
}

.scene.scene--local.is-compact .local-copy h3 {
  font-size: 8.4em;
}

.scene.scene--local.is-compact .local-copy p {
  font-size: 4.2em;
}

.scene--local.is-compact .local-route__pin {
  top: 88em;
  left: 0.6em;
  width: 5em;
  height: 7.2em;
}

.scene--local.is-compact .local-floor {
  top: 24.3em;
  left: 18em;
  width: 68em;
  height: 144.2em;
  transform: translateZ(-56em) rotateX(58deg) rotateZ(-7deg);
}

.scene--local.is-compact .local-mark {
  top: 45em;
  left: 66em;
  width: 17em;
}

.scene--local.is-compact .local-unit--admin {
  top: 27em;
  left: 4em;
  width: 28em;
  font-size: 1.7em;
}

.scene--local.is-compact .local-unit--stock {
  top: 62.5em;
  left: 26em;
  width: 28em;
  font-size: 1.7em;
}

.scene--local.is-compact .local-disc--people {
  top: 94em;
  left: 8em;
  width: 22em;
  height: 22em;
}

.scene--local.is-compact .local-disc--market {
  top: 69em;
  left: 76em;
  width: 21em;
  height: 21em;
}

/* ==========================================================================
   Facturacion y Mercado Libre
   ========================================================================== */
.scene--billing {
  aspect-ratio: 100 / 60;
}

.billing-measure {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  pointer-events: none;
}

.billing-dot--label {
  top: 3.8em;
  left: 28em;
}

.billing-dot--seller {
  top: 44em;
  left: 69em;
}

.billing-unit {
  position: absolute;
  transition: transform 1s var(--scene-ease);
}

.scene .billing-unit .scene-title {
  margin-bottom: 0.32em;
  font-size: 3em;
  opacity: 0.5;
  transition: opacity 0.6s linear;
}

.scene .billing-unit.is-awake .scene-title {
  opacity: 1;
}

.billing-unit--chart {
  top: 0.6em;
  left: 0.8em;
  width: 42.5em;
  transform: translateZ(0) scale(0.97);
}

.billing-unit--chart.is-awake {
  transform: translateZ(5em) scale(1);
}

.billing-unit--orders {
  top: 5.5em;
  left: 57.2em;
  width: 42em;
  transform: translateZ(0) scale(0.97);
}

.billing-unit--orders.is-awake {
  transform: translateZ(8em) scale(1);
}

.mock-chart,
.mock-orders {
  font-size: 1.42em;
}

.mock-chart {
  padding: 0.8em 0.9em 0.7em;
}

.scene .mock-chart__title,
.scene .mock-orders__title {
  color: var(--scene-blue);
  font-size: 0.82em;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.mock-chart__title {
  text-align: center;
}

.mock-chart__legend {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5em;
  margin: 0.5em 0 0.55em;
  color: var(--scene-blue);
  font-size: 0.6em;
  text-align: center;
}

.mock-chart__legend span::before {
  content: "";
  display: block;
  height: 0.9em;
  margin-bottom: 0.25em;
  border-radius: 0.2em;
}

.mock-chart__legend .is-total::before {
  background: var(--scene-lime);
}

.mock-chart__legend .is-taxed::before {
  background: var(--scene-cyan);
}

.mock-chart__legend .is-exempt::before {
  background: var(--scene-blue);
}

.mock-chart__plot {
  position: relative;
  height: 14em;
  border: 1px solid #9fb0f5;
  border-radius: 0.5em;
}

/* La grilla comparte alto con las barras: 300.000 es exactamente el 100% */
.mock-chart__axis {
  position: absolute;
  top: 2.9em;
  right: 0.5em;
  bottom: 1.35em;
  left: 0.4em;
  color: #6a78a8;
}

.mock-chart__axis span {
  position: absolute;
  right: 0;
  left: 0;
  border-top: 1px solid #e8ebf6;
  font-size: 0.5em;
  font-weight: 600;
  line-height: 1.2;
}

.mock-chart__axis span:nth-child(1) {
  top: 0;
}

.mock-chart__axis span:nth-child(2) {
  top: 33.33%;
}

.mock-chart__axis span:nth-child(3) {
  top: 66.66%;
}

.mock-chart__months {
  position: absolute;
  top: 2.9em;
  right: 0.5em;
  bottom: 0.35em;
  left: 2.7em;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.mock-chart__month {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mock-chart__bars {
  position: relative;
  display: flex;
  flex: none;
  align-items: flex-end;
  justify-content: center;
  gap: 0.14em;
  width: 100%;
  height: calc(100% - 1em);
}

.mock-chart__bars i {
  display: block;
  width: 0.62em;
  height: 100%;
  border-radius: 0.14em 0.14em 0 0;
  transform-origin: 50% 100%;
  transition: transform 0.7s var(--scene-ease);
}

.mock-chart__bars .is-total {
  background: var(--scene-lime);
}

.mock-chart__bars .is-taxed {
  background: var(--scene-cyan);
}

.mock-chart__bars .is-exempt {
  background: var(--scene-blue);
}

.mock-chart__month small {
  height: 1em;
  margin-top: 0.3em;
  color: #2a3a7c;
  font-size: 0.56em;
  font-weight: 700;
  line-height: 1;
}

.mock-chart__month.is-current small {
  color: var(--scene-blue);
}

.mock-chart__total {
  position: absolute;
  top: 0.35em;
  right: 0.5em;
  padding: 0.3em 0.6em 0.35em;
  border-radius: 0.35em;
  background: #8fa4ff;
  color: #fff;
  text-align: right;
}

.mock-chart__total small {
  display: block;
  font-size: 0.54em;
  line-height: 1.2;
}

.mock-chart__total b {
  display: block;
  font-size: 0.86em;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.mock-orders {
  padding: 0.7em 0.8em 0.75em;
  background: var(--scene-tint);
}

.mock-orders .mock-tabs--orders {
  justify-content: flex-start;
  gap: 0.4em;
  margin-top: 0.4em;
  padding: 0.3em;
  border-radius: 0.4em;
  background: #d4dbff;
  font-size: 0.6em;
}

.scene .mock-orders__hint {
  margin-top: 0.55em;
  color: #2a3a7c;
  font-size: 0.58em;
}

.mock-orders__hint::before {
  content: "";
  display: inline-block;
  width: 0.34em;
  height: 0.34em;
  margin-right: 0.5em;
  border-radius: 50%;
  background: #2a3a7c;
  vertical-align: 0.14em;
}

.mock-orders__filters {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 0.45em;
  align-items: end;
  margin-top: 0.3em;
}

.mock-orders .mock-select {
  height: 1.05em;
  border-color: #9fb0f5;
  background: #d4dbff;
}

.mock-page {
  display: block;
  padding: 0.42em 0.1em;
  border-radius: 0.5em;
  background: var(--scene-blue);
  color: #fff;
  font-size: 0.48em;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

.mock-orders__rows {
  position: relative;
  overflow: hidden;
  height: 6.3em;
  margin-top: 0.55em;
  border-radius: 0.45em;
  background: #fff;
}

.mock-order {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  align-items: center;
  height: 2.1em;
  padding: 0 0.7em;
  border-bottom: 1px solid var(--scene-tint);
  color: #2a3a7c;
  font-size: 1em;
  transform: translateY(calc(var(--row) * 2.1em));
  transition: transform 0.5s var(--scene-ease), opacity 0.35s linear;
}

.mock-order span {
  font-size: 0.66em;
  white-space: nowrap;
}

.mock-order.is-new {
  opacity: 0;
  transform: translateY(-2.1em);
}

.mock-order__amount {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.mock-order__state {
  position: relative;
  height: 1.2em;
  text-align: right;
}

.mock-order__state em {
  position: absolute;
  top: 0;
  right: 0;
  font-style: normal;
  transition: opacity 0.3s linear;
}

.mock-order__state em:first-child {
  color: #8a94b8;
}

.mock-order__state em:last-child {
  color: #4f8a1c;
  font-weight: 700;
  opacity: 0;
}

.mock-order.is-billed .mock-order__state em:first-child {
  opacity: 0;
}

.mock-order.is-billed .mock-order__state em:last-child {
  opacity: 1;
}

.scene-disc.billing-disc--cart {
  top: 30.5em;
  left: 8em;
  width: 27em;
  height: 27em;
  transform: translateZ(0) scale(0.92);
}

.scene-disc.billing-disc--cart.is-awake {
  opacity: 1;
  transform: translateZ(10em) scale(1);
}

.scene-disc.billing-disc--seller {
  top: 32em;
  left: 69em;
  width: 25em;
  height: 25em;
  transform: translateZ(0) scale(0.92);
}

.scene-disc.billing-disc--seller.is-awake {
  opacity: 1;
  transform: translateZ(12em) scale(1);
}

.billing-mark {
  position: absolute;
  top: 11em;
  left: 43.75em;
  width: 13.5em;
  transform: translateZ(7em);
  transform-style: preserve-3d;
}

/* Ticket que viaja de la orden a la barra */
.billing-ticket {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  pointer-events: none;
}

.billing-ticket__card {
  position: absolute;
  top: -3.2em;
  left: -5.6em;
  width: 11.2em;
  height: 6.4em;
  opacity: 0;
  transition: opacity 0.2s linear;
}

.billing-ticket.is-flying .billing-ticket__card {
  opacity: 1;
}

.billing-ticket__face {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 1em;
  border-radius: 0.8em;
  background: #fff;
  box-shadow: 0 0 0 1px var(--scene-hair), 0 1.8em 2.4em -1em rgba(16, 26, 74, 0.42);
  color: #2a3a7c;
  transition: opacity 0.25s linear;
}

.billing-ticket__face small {
  color: var(--scene-blue);
  font-size: 1.12em;
  font-weight: 700;
  line-height: 1.2;
}

.billing-ticket__face b {
  display: none;
}

.billing-ticket__face span {
  font-size: 1.4em;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

.billing-ticket__face--invoice {
  background: var(--scene-lime);
  opacity: 0;
}

.billing-ticket__face--invoice small {
  color: #2f5a0a;
}

.billing-ticket__face--invoice span {
  color: #24450a;
}

.billing-ticket.is-invoice .billing-ticket__face--invoice {
  opacity: 1;
}

.billing-ticket.is-invoice .billing-ticket__face--order {
  opacity: 0;
}

/* Facturacion en angosto: flujo vertical de la orden al grafico */
.scene--billing.is-compact {
  aspect-ratio: 100 / 158;
}

.scene--billing.is-compact .billing-unit--orders {
  top: 0;
  left: 2em;
  width: 96em;
}

.scene--billing.is-compact .billing-unit--chart {
  top: 85em;
  left: 2em;
  width: 96em;
}

.scene.scene--billing.is-compact .billing-unit .scene-title {
  font-size: 5.2em;
}

.scene--billing.is-compact .mock-chart,
.scene--billing.is-compact .mock-orders {
  font-size: 3.1em;
}

.scene--billing.is-compact .billing-mark {
  top: 60em;
  left: 41em;
  width: 18em;
}

.scene--billing.is-compact .billing-disc--cart {
  top: 59em;
  left: 8em;
  width: 24em;
  height: 24em;
}

.scene--billing.is-compact .billing-disc--seller {
  top: 59em;
  left: 68em;
  width: 24em;
  height: 24em;
}

.scene--billing.is-compact .billing-dot--label {
  top: 88em;
  left: 50em;
}

.scene--billing.is-compact .billing-dot--seller {
  top: 56em;
  left: 50em;
}

.scene--billing.is-compact .billing-ticket__card {
  font-size: 1.9em;
}