.hero-arte.escena-activa { transform: none !important; }
.escena-activa > img { visibility: hidden; }
.escena-montaje {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  overflow: hidden; background: #09090c; pointer-events: none; isolation: isolate;
  perspective: 1100px; perspective-origin: 50% 52%;
}
.escena-montaje .pieza { position: absolute; display: block; max-width: none; height: auto; object-fit: fill; user-select: none; }
.escena-montaje .cielo, .escena-montaje .estructuras { inset: 0; width: 100%; }
.plano-profundidad { position: absolute; inset: 0; pointer-events: none; }
.plano-exterior { transform: translate3d(calc(var(--x, 0) * -9px), calc(var(--y, 0) * -5px), -60px) scale(1.055); }
.plano-jardin { transform: translate3d(calc(var(--x, 0) * -15px), calc(var(--y, 0) * -8px), -33px) scale(1.03); }
.plano-arquitectura {
  transform: translate3d(calc(var(--x, 0) * -22px), calc(var(--y, 0) * -12px), 0) rotateY(calc(var(--x, 0) * -.7deg)) scale(1.05);
}
.plano-estudio {
  transform: translate3d(calc(var(--x, 0) * -34px), calc(var(--y, 0) * -17px), 28px) rotateY(calc(var(--x, 0) * -1.1deg)) scale(.975);
}
.plano-escritorio {
  transform: translate3d(calc(var(--x, 0) * -46px), calc(var(--y, 0) * -22px), 55px) rotateY(calc(var(--x, 0) * -1.5deg)) scale(.97);
}
.escena-montaje .nubes {
  left: -12%; top: -19%; width: 92%; opacity: .63;
  animation: deriva-nubes 34s ease-in-out infinite alternate; transition: opacity 5s ease;
}
.escena-montaje .nubes-lejos { left: -24%; top: -15%; opacity: .27; filter: blur(1.6px); animation-duration: 61s; animation-delay: -25s; }
.escena-montaje .nubes-cerca { animation-delay: -8s; }
.escena-montaje .ciudad { left: -28%; top: 1%; width: 110%; filter: brightness(.86) saturate(.85); }
.ciudad-dinamica { position: absolute; left: -28%; top: 1%; width: 110%; height: auto; mix-blend-mode: screen; opacity: .65; }
.escena-montaje .calles { left: -15%; top: 21%; width: 73%; opacity: .22; }
.escena-montaje .ventanas { left: 0; top: 0; width: 50%; opacity: .11; }
.transito { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; opacity: .66; }
.auto-blanco { fill: #ffe3c7; filter: drop-shadow(0 0 .7px #ffd4a0); }
.auto-rojo { fill: #e45954; filter: drop-shadow(0 0 .7px #f55450); }
.auto:nth-child(3n) { opacity: .63; }
.vuelo { position: absolute; left: -16%; top: 10%; width: 16%; aspect-ratio: 3 / 1; animation: vuelo 51s -11s linear infinite; }
.escena-montaje .vuelo .helicoptero { width: 100%; }
.vuelo i {
  position: absolute; left: 57.6%; top: 42.2%; width: 1.3px; height: 1.3px; border-radius: 50%;
  background: #ee776a; box-shadow: 0 0 3px #ff5b5580; animation: baliza 1.9s linear infinite;
}
.bruma, .lluvia { position: absolute; inset: 0 50% 22% 0; opacity: 0; transition: opacity 5s ease; }
.bruma { background: radial-gradient(ellipse at 44% 62%, #7e819755, transparent 72%); }
.lluvia {
  background: repeating-linear-gradient(105deg, transparent 0 19px, #c7c8ea20 20px, transparent 21px 45px);
  mask-image: linear-gradient(transparent, #000 25%, #000 75%, transparent);
}
[data-clima="cubierto"] .nubes-cerca, [data-clima="lluvia"] .nubes-cerca { opacity: .84; }
[data-clima="cubierto"] .nubes-lejos, [data-clima="lluvia"] .nubes-lejos { opacity: .4; }
[data-clima="despejado"] .nubes-cerca { opacity: .47; }
[data-clima="despejado"] .nubes-lejos { opacity: .19; }
[data-clima="niebla"] .bruma { opacity: .91; }
[data-clima="lluvia"] .bruma { opacity: .49; }
[data-clima="lluvia"] .lluvia { opacity: .48; animation: lluvia 1.9s linear infinite; }

.planta { position: absolute; left: 46%; top: 20%; width: 20%; height: 34%; }
.escena-montaje .fronda {
  left: 52%; bottom: 0; width: var(--ancho); translate: calc(-1 * var(--ancla)) 0;
  transform-origin: var(--ancla) 96%; filter: brightness(.62) saturate(.58); animation: hojas 8s ease-in-out infinite;
}
.fronda:nth-child(2n) { filter: brightness(.49) saturate(.51); }
.fronda:nth-child(3n) { bottom: -3%; }
.escena-montaje .silla { left: 42.7%; top: 39%; width: 23%; filter: brightness(.77); }
.figura { position: absolute; left: 31%; top: 30%; width: 35%; }
.escena-montaje .figura .personaje { position: relative; display: block; width: 100%; }
.escena-montaje .mesa-compuesta, .escena-montaje .notebook-registrada { left: -3%; top: 15.5%; width: 106%; }
.escena-montaje .mesa-objetos { left: 0; top: -5.55%; width: 100%; }
.notebook-luz {
  position: absolute; left: 69%; top: 62.2%; width: 1.65%; transform: skewX(-17deg) rotate(-2deg);
  animation: notebook 16s -3s ease-in-out infinite; filter: drop-shadow(0 0 2px #ffffff70);
}
.notebook-luz img { width: 100%; height: auto; }
.notebook-reflejo {
  position: absolute; left: 68.7%; top: 75.7%; width: 2.4%; height: 2.5%;
  background: #ffffff17; mask: url('/escena/e-blanca.svg') center / contain no-repeat; filter: blur(3px);
  transform: scaleY(-.6) skewX(35deg); animation: notebook 16s -3s ease-in-out infinite;
}
.sombra-notebook {
  position: absolute; left: 59.5%; top: 73.1%; width: 18%; height: 2%;
  background: radial-gradient(ellipse, #03020588, transparent 70%);
}
.suelo-escena { position: absolute; inset: 63% 0 0; background: linear-gradient(transparent, #09090c1a 35%, #09090cc9 88%, #09090c); }
[data-pausa="true"] *, [data-pausa="true"] *::after { animation-play-state: paused !important; }
@keyframes deriva-nubes { from { translate: -11% 0; } to { translate: 25% 2%; } }
@keyframes hojas {
  0%, 100% { rotate: calc(var(--angulo) - var(--amplitud)); }
  27% { rotate: calc(var(--angulo) + var(--amplitud)); }
  48% { rotate: calc(var(--angulo) + var(--amplitud) * .18); }
  68% { rotate: calc(var(--angulo) + var(--amplitud) * .5); }
}
@keyframes baliza { 0%, 18%, 24%, 100% { opacity: .08; } 19%, 21% { opacity: .8; } }
@keyframes vuelo {
  0%, 4% { transform: translate(415%, 29%); opacity: 0; }
  8% { opacity: .8; } 25% { transform: translate(230%, 6%); }
  50% { transform: translate(15%, 21%); opacity: .75; }
  55%, 100% { transform: translate(-25%, 29%); opacity: 0; }
}
@keyframes notebook { 0%, 12%, 75%, 100% { opacity: 0; } 23%, 59% { opacity: .9; } 63% { opacity: .65; } 67% { opacity: .86; } }
@keyframes lluvia { from { background-position: 0 0; } to { background-position: 38px 360px; } }
.escena-controles select { max-width: 112px; padding: 5px 3px; border: 0; border-radius: 4px; background: #201a1e; color: #e8dce1; font: inherit; }
@media (max-width: 390px) { .escena-controles { font-size: 11px; } .escena-controles button { padding-inline: 6px; } }
@media (max-width: 430px) { .escena-controles { flex-wrap: wrap; max-width: calc(100vw - 32px); } }

.palmera { position: absolute; filter: brightness(var(--luz-palma, .5)) saturate(.5); }
.escena-montaje .palmera .palmera-tronco {
  position: relative; width: 100%;
  mask-image: linear-gradient(transparent 0 23%, #000 25% 86%, transparent 100%);
}
.escena-montaje .palmera .copa-respaldo {
  position: absolute; transform-origin: 50% 58%;
  animation: copa-respaldo 8.7s ease-in-out infinite alternate;
  animation-delay: var(--fase-palma);
}
[data-palmeras="vivas"] .copa-respaldo { visibility: hidden; }
.palmeras-vivas { position: absolute; inset: 0; width: 100%; height: 100%; }
.telefono-objeto {
  position: absolute; left: 0; top: -5.55%; width: 100%; aspect-ratio: 1585 / 992;
  transform: translateX(var(--vibra-x, 0px)) rotate(var(--vibra-giro, 0deg));
  transform-origin: 45.7% 77.2%;
}
.telefono-modelo {
  position: absolute; left: 0; top: 0; width: 1585px; height: 992px;
  transform: scale(var(--escala-objetos, 1)); transform-origin: 0 0;
}
.escena-montaje .telefono-carcasa { left: 0; top: 0; width: 100%; }
.telefono-pantalla {
  position: absolute; left: 0; top: 0; width: 240px; height: 420px;
  transform-origin: 0 0; max-width: none; opacity: var(--pantalla, 0);
  border-radius: 16px; filter: brightness(.76);
}
.telefono-reflejo {
  position: absolute; left: 41.6%; top: 84.2%; width: 10%; height: 2.6%;
  background: radial-gradient(ellipse, var(--color-aviso, #25d366), transparent 66%);
  opacity: 0; filter: blur(6px); mix-blend-mode: screen;
}
.vapor-cafe { position: absolute; left: 18.2%; top: 57.2%; width: 10%; height: 15.8%; opacity: .95; }
@keyframes copa-respaldo { from { rotate: -1.2deg; } to { rotate: 1.8deg; } }

.escena-montaje::after { content: ''; position: absolute; inset: 0; background: rgba(5, 6, 10, .16); pointer-events: none; }
html:not(.escena-sola) .escena-controles { display: none; }

.lluvia { inset: -35% 50% -35% -10%; background-position: 0 0; will-change: transform; }
@keyframes lluvia { from { transform: translate3d(0,-12%,0); } to { transform: translate3d(12px,12%,0); } }
.auto-blanco, .auto-rojo { filter: none; }