body.page-id-128,
body.page-id-130,
body.page-id-232,
body.page-id-143,
body.sitw-crear-room-page {
  margin: 0 !important;
  padding: 0 !important;
  background: #0a0a0f !important;
}

body.sitw-crear-room-page {
  height: 100vh;
  height: 100dvh;
  overflow: hidden !important;
}

body.page-id-128 #page,
body.page-id-130 #page,
body.page-id-232 #page,
body.page-id-143 #page,
body.page-id-128 .site,
body.page-id-130 .site,
body.page-id-232 .site,
body.page-id-143 .site,
body.page-id-128 .site-content,
body.page-id-130 .site-content,
body.page-id-232 .site-content,
body.page-id-143 .site-content,
body.page-id-128 .content-area,
body.page-id-130 .content-area,
body.page-id-232 .content-area,
body.page-id-143 .content-area,
body.page-id-128 #primary,
body.page-id-130 #primary,
body.page-id-232 #primary,
body.page-id-143 #primary,
body.page-id-128 .site-main,
body.page-id-130 .site-main,
body.page-id-232 .site-main,
body.page-id-143 .site-main,
body.page-id-128 article,
body.page-id-130 article,
body.page-id-232 article,
body.page-id-143 article,
body.page-id-128 .entry-content,
body.page-id-130 .entry-content,
body.page-id-232 .entry-content,
body.page-id-143 .entry-content,
body.sitw-crear-room-page #page,
body.sitw-crear-room-page .site,
body.sitw-crear-room-page .site-content,
body.sitw-crear-room-page .content-area,
body.sitw-crear-room-page #primary,
body.sitw-crear-room-page .site-main,
body.sitw-crear-room-page article,
body.sitw-crear-room-page .entry-content {
  width: 100vw !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.page-id-128 .entry-header,
body.page-id-130 .entry-header,
body.page-id-232 .entry-header,
body.page-id-143 .entry-header,
body.page-id-128 .entry-title,
body.page-id-130 .entry-title,
body.page-id-232 .entry-title,
body.page-id-143 .entry-title,
body.sitw-crear-room-page .entry-header,
body.sitw-crear-room-page .entry-title {
  display: none !important;
}

.sitw-crear-page {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: #0a0a0f;
  color: #fff;
  overflow: hidden;
}

.sitw-interactive-room {
  position: relative;
  width: 100vw;
  max-width: 2560px;
  aspect-ratio: 1672 / 941;
  margin: 0 auto;
  overflow: hidden;
  line-height: 0;
  background: transparent;
  isolation: isolate;
}

@media (min-width: 769px) {
  body.sitw-crear-room-page .sitw-crear-page {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100vh - 64px);
    height: calc(100dvh - 64px);
    margin-top: 64px;
    overflow: hidden;
  }

  body.sitw-crear-room-page .sitw-interactive-room {
    flex: 0 0 auto;
    width: calc(177.6833vh - 113.7173px);
    width: calc(177.6833dvh - 113.7173px);
    max-width: none;
    margin: 0;
  }
}

.sitw-room-bg {
  display: block;
  width: 100%;
  height: auto;
}

.sitw-room-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  transform: translateZ(0);
  transition: transform 0.28s ease, filter 0.28s ease;
}

.sitw-room-title-layer {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  transform: translateZ(0);
  transition: transform 0.28s ease, filter 0.28s ease;
}

.sitw-room-title-main {
  z-index: 3;
}

.sitw-room-title-web {
  transform-origin: 34.5% 67.2%;
}

.sitw-room-title-systems {
  transform-origin: 85.5% 31.4%;
}

.sitw-room-title-automations {
  transform-origin: 71% 78.4%;
}

.sitw-room-layer-laptop {
  transform-origin: 34.5% 67.2%;
}

.sitw-room-layer-pc {
  transform-origin: 85.5% 31.4%;
}

.sitw-room-layer-robot {
  transform-origin: 71% 78.4%;
}

.sitw-room-hotspot {
  position: absolute;
  z-index: 8;
  display: block;
  cursor: pointer;
  outline: 0;
}

.sitw-room-hotspot-laptop {
  left: 21.23%;
  top: 48.67%;
  width: 16.51%;
  height: 19.98%;
}

.sitw-room-hotspot-pc {
  left: 79.67%;
  top: 22.10%;
  width: 17.11%;
  height: 31.56%;
}

.sitw-room-hotspot-robot {
  left: 64.59%;
  top: 68.23%;
  width: 10.59%;
  height: 27.42%;
}

.sitw-room-hotspot-laptop:hover ~ .sitw-room-layer-laptop,
.sitw-room-hotspot-laptop:focus-visible ~ .sitw-room-layer-laptop,
.sitw-room-hotspot-pc:hover ~ .sitw-room-layer-pc,
.sitw-room-hotspot-pc:focus-visible ~ .sitw-room-layer-pc,
.sitw-room-hotspot-robot:hover ~ .sitw-room-layer-robot,
.sitw-room-hotspot-robot:focus-visible ~ .sitw-room-layer-robot {
  transform: scale(1.08);
  filter: drop-shadow(0 0 24px rgba(160, 80, 255, 0.85)) drop-shadow(0 18px 44px rgba(0, 0, 0, 0.34));
}

.sitw-room-hotspot-laptop:hover ~ .sitw-room-title-web,
.sitw-room-hotspot-laptop:focus-visible ~ .sitw-room-title-web,
.sitw-room-hotspot-pc:hover ~ .sitw-room-title-systems,
.sitw-room-hotspot-pc:focus-visible ~ .sitw-room-title-systems,
.sitw-room-hotspot-robot:hover ~ .sitw-room-title-automations,
.sitw-room-hotspot-robot:focus-visible ~ .sitw-room-title-automations {
  transform: scale(1.08);
  filter: drop-shadow(0 0 18px rgba(160, 80, 255, 0.72));
}

@media (max-width: 768px) {
  .sitw-crear-page {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    overscroll-behavior-x: contain;
  }

  .sitw-interactive-room {
    width: max(100vw, 1180px);
    max-width: none;
    cursor: grab;
  }

  .sitw-interactive-room:active {
    cursor: grabbing;
  }

  .sitw-room-hotspot-laptop:hover ~ .sitw-room-layer-laptop,
  .sitw-room-hotspot-laptop:focus-visible ~ .sitw-room-layer-laptop,
  .sitw-room-hotspot-pc:hover ~ .sitw-room-layer-pc,
  .sitw-room-hotspot-pc:focus-visible ~ .sitw-room-layer-pc,
  .sitw-room-hotspot-robot:hover ~ .sitw-room-layer-robot,
  .sitw-room-hotspot-robot:focus-visible ~ .sitw-room-layer-robot,
  .sitw-room-hotspot-laptop:hover ~ .sitw-room-title-web,
  .sitw-room-hotspot-laptop:focus-visible ~ .sitw-room-title-web,
  .sitw-room-hotspot-pc:hover ~ .sitw-room-title-systems,
  .sitw-room-hotspot-pc:focus-visible ~ .sitw-room-title-systems,
  .sitw-room-hotspot-robot:hover ~ .sitw-room-title-automations,
  .sitw-room-hotspot-robot:focus-visible ~ .sitw-room-title-automations {
    transform: scale(1.04);
  }
}

.sitw-interactive-room-single {
  height: auto;
  max-width: none;
  aspect-ratio: auto;
  margin: 0;
  padding: 0;
  background: transparent;
}

body.page-id-130 .sitw-interactive-room-single,
body.page-id-143 .sitw-interactive-room-single {
  margin-top: 64px;
}

.sitw-interactive-room-single .sitw-room-bg {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
}

@media (max-width: 760px) {
  .sitw-interactive-room-single {
    height: auto;
  }
}

/* ---------------------------------------------------------------
   Diálogo interactivo dentro del panel derecho de la terminal.
   Panel derecho medido sobre interactive2.png (1672x941):
   borde violeta x 726..1350, y 158..724. El bloque queda inset
   ~8-12px para no tocar el marco.
   --------------------------------------------------------------- */
.sitw-terminal-dialogue {
  position: absolute;
  left: 44%;
  top: 18%;
  width: 36.2%;
  height: 57.5%;
  z-index: 8;
  display: flex;
  flex-direction: column;
  padding: clamp(10px, 1.4vw, 26px);
  box-sizing: border-box;
  border: 1px solid rgba(155, 65, 255, 0.42);
  background: rgba(12, 4, 25, 0.28);
  color: rgba(190, 105, 255, 0.92);
  font-family: "Share Tech Mono", "Courier New", monospace;
  font-size: clamp(15px, 1.55vw, 32px);
  line-height: 1.45;
  text-shadow: 0 0 8px rgba(150, 60, 255, 0.45);
  overflow: hidden;
}

.sitw-terminal-dialogue::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.025) 0px,
    rgba(255, 255, 255, 0.025) 1px,
    transparent 2px,
    transparent 4px
  );
  opacity: 0.22;
}

.sitw-dialogue-output {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  min-height: 26%;
  white-space: pre-line;
  transition: opacity 0.15s ease;
}

.sitw-dialogue-output.is-fading {
  opacity: 0.1;
}

/* Volcado de datos del perfil: letra chica, renglones acumulados */
.sitw-dialogue-output.is-readout {
  align-items: flex-start;
  font-size: 0.62em;
  line-height: 1.55;
  opacity: 0.95;
}

.sitw-dialogue-cursor {
  display: none;
  width: 0.55em;
  margin-left: 2px;
  background: rgba(190, 105, 255, 0.85);
  box-shadow: 0 0 10px rgba(150, 60, 255, 0.6);
  animation: sitw-cursor-blink 1.05s steps(1) infinite;
}

.sitw-dialogue-output.is-typing .sitw-dialogue-cursor {
  display: inline-block;
}

.sitw-dialogue-cursor::before {
  content: "\00a0";
}

@keyframes sitw-cursor-blink {
  0%, 55% { opacity: 1; }
  56%, 100% { opacity: 0; }
}

.sitw-dialogue-options {
  position: relative;
  z-index: 2;
  display: flex;
  gap: clamp(6px, 0.8vw, 14px);
  flex-wrap: wrap;
  margin-top: clamp(10px, 1.2vw, 22px);
}

/* REGLA: todo boton del dialogo es transparente con contorno violeta.
   Nada de anillos de foco del navegador/tema (turquesa), nada de
   glows exagerados, en ningun estado. */
html body .sitw-terminal-dialogue button,
html body .sitw-terminal-dialogue input,
html body .sitw-holo-dialogue button,
html body .sitw-holo-dialogue input,
html body .sitw-terminal-dialogue button:hover,
html body .sitw-terminal-dialogue button:focus,
html body .sitw-terminal-dialogue button:focus-visible,
html body .sitw-terminal-dialogue button:active,
html body .sitw-terminal-dialogue input:focus,
html body .sitw-holo-dialogue button:hover,
html body .sitw-holo-dialogue button:focus,
html body .sitw-holo-dialogue button:focus-visible,
html body .sitw-holo-dialogue button:active,
html body .sitw-holo-dialogue input:focus {
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
}

html body .sitw-terminal-dialogue button:not(.sitw-dialogue-orb),
html body .sitw-holo-dialogue button {
  background: transparent !important;
}

.sitw-dialogue-option {
  border: 1px solid rgba(165, 75, 255, 0.65);
  background: transparent;
  color: rgba(205, 140, 255, 0.96);
  padding: clamp(5px, 0.55vw, 10px) clamp(10px, 1vw, 18px);
  font-family: inherit;
  font-size: 0.95em;
  line-height: 1.3;
  cursor: pointer;
  text-transform: lowercase;
  text-shadow: inherit;
  transition: transform 0.18s ease, border-color 0.18s ease;
}

.sitw-dialogue-option:hover,
.sitw-dialogue-option:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(200, 125, 255, 0.95);
}

/* Cards en grilla: landing arriba (grande y legible), pagina web y
   tienda online abajo, lado a lado, las dos grandes */
.sitw-card-slot {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1.1fr 1fr;
  align-items: center;
  justify-items: center;
  gap: clamp(4px, 0.5vw, 10px);
  margin-top: clamp(8px, 1vw, 18px);
  min-height: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.sitw-card-slot.is-visible {
  opacity: 1;
}

/* ---- Cards: objetos sueltos, sin contenedor ni remarcado ---- */
.sitw-dialogue-card {
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: opacity 0.25s ease;
}

.sitw-dialogue-card.is-landing {
  grid-column: 1 / -1;
}

.sitw-dialogue-card.is-landing img {
  max-height: 96%;
}

.sitw-dialogue-card img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  transition: transform 0.18s ease;
}

.sitw-dialogue-card.is-noimg {
  font-family: inherit;
  font-size: 0.85em;
  color: rgba(205, 140, 255, 0.96);
  text-shadow: 0 0 8px rgba(150, 60, 255, 0.45);
  text-transform: lowercase;
  border: 1px solid rgba(165, 75, 255, 0.55);
  padding: clamp(8px, 1vw, 18px);
}

.sitw-dialogue-card:hover img,
.sitw-dialogue-card:focus-visible img {
  transform: scale(1.035);
}

.sitw-dialogue-card:focus-visible {
  outline: 0;
}

.sitw-dialogue-card.is-visited {
  opacity: 0.38;
}

.sitw-dialogue-card.is-visited img {
  filter: grayscale(0.6);
}

.sitw-dialogue-card.is-visited:hover {
  opacity: 0.75;
}

/* ---- Glifos: calibracion de estilo + verificacion de runa ---- */
.sitw-dialogue-glyph {
  font-size: 1.5em;
  line-height: 1;
  padding: clamp(8px, 0.8vw, 16px) clamp(12px, 1.1vw, 22px);
}

.sitw-dialogue-glyph.is-glitch {
  animation: sitw-glyph-glitch 0.9s steps(2) infinite;
}

@keyframes sitw-glyph-glitch {
  0%   { opacity: 1;    transform: translate(0, 0); }
  25%  { opacity: 0.35; transform: translate(1px, -1px); }
  50%  { opacity: 0.9;  transform: translate(-1px, 1px); }
  75%  { opacity: 0.2;  transform: translate(1px, 1px); }
  100% { opacity: 1;    transform: translate(0, 0); }
}

/* ---- Orbes de color ---- */
.sitw-dialogue-orb {
  --orb: #8b3dff;
  width: clamp(30px, 2.6vw, 52px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(165, 75, 255, 0.45);
  background: radial-gradient(circle at 35% 32%, var(--orb), rgba(10, 3, 22, 0.95) 78%);
  box-shadow: 0 0 14px color-mix(in srgb, var(--orb) 55%, transparent);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.sitw-dialogue-orb:hover,
.sitw-dialogue-orb:focus-visible {
  transform: scale(1.18);
  box-shadow: 0 0 26px var(--orb);
  outline: 0;
}

/* ---- Input estilo terminal ---- */
.sitw-dialogue-input-wrap {
  display: flex;
  align-items: center;
  gap: clamp(6px, 0.6vw, 12px);
  width: 100%;
}

.sitw-dialogue-input-mark {
  color: rgba(205, 140, 255, 0.96);
  font-size: 1.1em;
}

/* !important: los temas de WP pintan inputs blancos; aqui manda la terminal */
.sitw-terminal-dialogue .sitw-dialogue-input,
.sitw-holo-dialogue .sitw-dialogue-input {
  flex: 1 1 auto;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(165, 75, 255, 0.65) !important;
  border-radius: 0 !important;
  box-shadow: none;
  color: rgba(205, 140, 255, 0.96) !important;
  font-family: inherit !important;
  font-size: 1em !important;
  line-height: 1.4 !important;
  padding: 6px 8px !important;
  margin: 0 !important;
  caret-color: rgba(205, 140, 255, 0.96);
  text-shadow: 0 0 8px rgba(150, 60, 255, 0.45);
  outline: 0 !important;
}

.sitw-terminal-dialogue .sitw-dialogue-input::placeholder,
.sitw-holo-dialogue .sitw-dialogue-input::placeholder {
  color: rgba(150, 80, 220, 0.45);
  font-family: inherit;
}

.sitw-terminal-dialogue .sitw-dialogue-input:focus,
.sitw-holo-dialogue .sitw-dialogue-input:focus {
  border-bottom-color: rgba(200, 125, 255, 0.95) !important;
  box-shadow: 0 6px 18px -8px rgba(150, 65, 255, 0.5);
}

/* Aviso de limite del input */
.sitw-dialogue-warn {
  width: 100%;
  margin-top: 6px;
  font-size: 0.55em;
  letter-spacing: 0.18em;
  color: rgba(255, 95, 135, 0.9);
  text-shadow: 0 0 8px rgba(255, 60, 110, 0.55);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.sitw-dialogue-warn.is-on {
  opacity: 1;
  animation: sitw-warn-flicker 0.55s steps(2) infinite;
}

@keyframes sitw-warn-flicker {
  0%, 60% { opacity: 1; }
  61%, 100% { opacity: 0.45; }
}

.sitw-dialogue-input.is-error {
  animation: sitw-input-shake 0.4s ease;
  border-bottom-color: rgba(255, 80, 110, 0.85);
}

@keyframes sitw-input-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}

.sitw-dialogue-send {
  flex: 0 0 auto;
}

/* ===============================================================
   ENTIDAD VIVA — busto clonado de interactive2.png recortado por
   clip-path (cabeza: x 400-680, y 190-720 sobre 1672x941), con
   ojos y boca superpuestos. Respira siempre; al hablar se mece y
   mueve la boca; parpadea y glitchea a intervalos aleatorios.
   =============================================================== */
.sitw-entity {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  transform-origin: 31.8% 74.4%;
  animation: sitw-entity-breathe 5.6s ease-in-out infinite;
  will-change: transform;
}

.sitw-entity-bust {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  clip-path: inset(20.2% 59.3% 23.5% 23.9%);
}

@keyframes sitw-entity-breathe {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(0.22%) rotate(0.12deg); }
}

.sitw-interactive-room-single.is-speaking .sitw-entity {
  animation: sitw-entity-talk 1.35s ease-in-out infinite;
}

@keyframes sitw-entity-talk {
  0%, 100% { transform: translateY(0) rotate(-0.18deg); }
  35%      { transform: translateY(0.16%) rotate(0.22deg); }
  70%      { transform: translateY(0.05%) rotate(-0.08deg); }
}

/* Ojos: halo pulsante sobre los ojos ya pintados en la imagen */
.sitw-entity-glow {
  position: absolute;
  width: 3.1%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(195, 115, 255, 0.55) 0%, rgba(150, 60, 255, 0.22) 45%, transparent 70%);
  mix-blend-mode: screen;
  animation: sitw-eye-pulse 3.6s ease-in-out infinite;
}

.sitw-entity-glow-left  { left: 27.2%; top: 39.6%; }
.sitw-entity-glow-right { left: 33.2%; top: 39.7%; }

@keyframes sitw-eye-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.18); }
}

.sitw-interactive-room-single.is-speaking .sitw-entity-glow {
  animation-duration: 1.3s;
}

/* Parpadeo: parpados oscuros que cubren los ojos un instante */
.sitw-entity-eyelid {
  position: absolute;
  width: 2.85%;
  height: 4.7%;
  background: #080120;
  border-radius: 40%;
  opacity: 0;
}

.sitw-entity-eyelid-left  { left: 27.35%; top: 40.1%; }
.sitw-entity-eyelid-right { left: 33.33%; top: 40.2%; }

.sitw-interactive-room-single.is-blinking .sitw-entity-eyelid { opacity: 1; }
.sitw-interactive-room-single.is-blinking .sitw-entity-glow   { opacity: 0; animation: none; }

/* Boca: barra pixelada sonriente (esquinas levantadas), bien abajo
   en el menton (y~489 de 941). Solo existe mientras la entidad habla. */
.sitw-entity-mouth {
  position: absolute;
  left: 30.6%;
  top: 52%;
  width: 2.2%;
  height: 0.75%;
  background: rgba(140, 70, 220, 0.85);
  box-shadow: 0 0 10px rgba(150, 60, 255, 0.75);
  border-radius: 0 0 45% 45%;
  opacity: 0;
  transform-origin: center;
  transition: opacity 0.25s ease;
}

.sitw-entity-mouth::before,
.sitw-entity-mouth::after {
  content: "";
  position: absolute;
  top: -62%;
  width: 24%;
  height: 75%;
  background: inherit;
  box-shadow: inherit;
}

.sitw-entity-mouth::before { left: -16%; }
.sitw-entity-mouth::after  { right: -16%; }

.sitw-interactive-room-single.is-speaking .sitw-entity-mouth {
  opacity: 0.9;
  animation: sitw-mouth-talk 0.38s steps(3, end) infinite;
}

@keyframes sitw-mouth-talk {
  0%   { transform: scaleY(0.35) scaleX(1); }
  30%  { transform: scaleY(1.7)  scaleX(0.85); }
  60%  { transform: scaleY(0.7)  scaleX(1.05); }
  100% { transform: scaleY(1.25) scaleX(0.95); }
}

/* Glitch del entorno: sacudida breve de escena + busto + dialogo */
.sitw-interactive-room-single.is-glitching .sitw-room-bg,
.sitw-interactive-room-single.is-glitching .sitw-entity-bust {
  animation: sitw-scene-glitch 0.26s steps(2) both;
}

@keyframes sitw-scene-glitch {
  0%   { transform: translateX(0);                filter: none; }
  20%  { transform: translateX(-5px);             filter: hue-rotate(40deg) saturate(1.7); }
  45%  { transform: translateX(4px) skewX(0.5deg); filter: hue-rotate(-30deg) contrast(1.35); }
  70%  { transform: translateX(-2px);             filter: saturate(1.4); }
  100% { transform: translateX(0);                filter: none; }
}

.sitw-interactive-room-single.is-glitching .sitw-terminal-dialogue {
  animation: sitw-dialogue-glitch 0.26s steps(2) both;
}

@keyframes sitw-dialogue-glitch {
  0%, 100% { opacity: 1;   transform: translateX(0); }
  30%      { opacity: 0.55; transform: translateX(3px); }
  65%      { opacity: 0.85; transform: translateX(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  .sitw-entity,
  .sitw-interactive-room-single.is-speaking .sitw-entity,
  .sitw-entity-glow,
  .sitw-entity-mouth {
    animation: none !important;
  }
}

/* ===============================================================
   VIDA AMBIENTAL — criaturas y objetos de ambas escenas.
   Todas las posiciones en % sobre el lienzo 1672x941.
   Solo CSS: parpadeos, lluvia, latidos de luz, fan, scanline.
   =============================================================== */
.sitw-ambient {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* Parpados genericos: tapan ojos pintados durante un instante */
.sitw-amb-eyes {
  position: absolute;
  background: #03000a;
  border-radius: 45%;
  opacity: 0;
  animation: sitw-amb-blink 7s linear infinite;
}

@keyframes sitw-amb-blink {
  0%, 91.4%, 96.6%, 100% { opacity: 0; }
  92%, 96%               { opacity: 1; }
}

/* Halos pulsantes (luna, cristal) */
.sitw-amb-glow {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  mix-blend-mode: screen;
  animation: sitw-amb-pulse 5s ease-in-out infinite;
}

@keyframes sitw-amb-pulse {
  0%, 100% { opacity: 0.1;  transform: scale(0.92); }
  50%      { opacity: 0.5;  transform: scale(1.1); }
}

/* ---- Escena pagina-web (interactive2.png) ---- */
/* Figura encapuchada del cuadro: parches sobredimensionados (la capucha
   alrededor es negra) para que el ojo quede totalmente negro al cerrarse */
.sitw-amb2-fig-l { left: 7.06%;  top: 3.83%;  width: 2.39%; height: 4.68%; border-radius: 30%; animation-duration: 9.3s; animation-delay: 3.4s; }
.sitw-amb2-fig-r { left: 9.99%;  top: 3.83%;  width: 2.63%; height: 4.68%; border-radius: 30%; animation-duration: 9.3s; animation-delay: 3.4s; }
/* Gato de la ventana derecha: ojos+glow en (1489,304) y (1525,306) */
.sitw-amb2-cat-l { left: 88.40%; top: 31.14%; width: 1.32%; height: 2.34%; animation-duration: 6.4s; animation-delay: 1.7s; }
.sitw-amb2-cat-r { left: 90.55%; top: 31.35%; width: 1.32%; height: 2.34%; animation-duration: 6.4s; animation-delay: 1.7s; }

/* ---- Escena crear (interactive.png) ---- */
/* Lluvia: vidrio de la ventana (x433-760, y157-403).
   La mascara desvanece el borde inferior (alfeizar) y recorta
   dos zonas: la planta (izquierda) y el gato que parpadea (derecha),
   para que las gotas no caigan encima de ellos. */
.sitw-amb-rain {
  left: 25.9%;
  top: 16.7%;
  width: 19.6%;
  height: 26.1%;
  position: absolute;
  overflow: hidden;
  -webkit-mask-image:
    linear-gradient(to bottom, #000 0 68%, transparent 94%),
    radial-gradient(ellipse 70px 95px at 12% 82%, transparent 0 58%, #000 78%),
    radial-gradient(ellipse 60px 55px at 94% 96%, transparent 0 58%, #000 78%);
  -webkit-mask-composite: source-in, source-in;
  mask-image:
    linear-gradient(to bottom, #000 0 68%, transparent 94%),
    radial-gradient(ellipse 70px 95px at 12% 82%, transparent 0 58%, #000 78%),
    radial-gradient(ellipse 60px 55px at 94% 96%, transparent 0 58%, #000 78%);
  mask-composite: intersect;
}

.sitw-amb-rain::before,
.sitw-amb-rain::after {
  content: "";
  position: absolute;
  left: -30%;
  top: -120%;
  width: 160%;
  height: 240%;
  mix-blend-mode: screen;
}

/* La mascara corta las lineas en gotas: sin ella, las lineas se
   trasladan sobre si mismas y el movimiento no se percibe. */
.sitw-amb-rain::before {
  background: repeating-linear-gradient(
    103deg,
    rgba(195, 165, 255, 0.34) 0 1px,
    transparent 1px 15px
  );
  -webkit-mask-image: repeating-linear-gradient(13deg, #000 0 26px, transparent 26px 50px);
  mask-image: repeating-linear-gradient(13deg, #000 0 26px, transparent 26px 50px);
  animation: sitw-amb-rainfall 0.8s linear infinite;
}

.sitw-amb-rain::after {
  background: repeating-linear-gradient(
    103deg,
    rgba(165, 135, 240, 0.24) 0 1px,
    transparent 1px 24px
  );
  -webkit-mask-image: repeating-linear-gradient(13deg, #000 0 44px, transparent 44px 78px);
  mask-image: repeating-linear-gradient(13deg, #000 0 44px, transparent 44px 78px);
  animation: sitw-amb-rainfall 1.45s linear infinite;
}

@keyframes sitw-amb-rainfall {
  from { transform: translate3d(3.5%, -15%, 0); }
  to   { transform: translate3d(-3.5%, 15%, 0); }
}

/* Relampagos: doble destello dentro del vidrio cada ~14s */
.sitw-amb-lightning {
  position: absolute;
  left: 25.9%;
  top: 16.7%;
  width: 19.6%;
  height: 26.1%;
  background: radial-gradient(ellipse at 60% 18%, rgba(230, 215, 255, 0.95) 0%, rgba(180, 140, 255, 0.5) 38%, transparent 75%);
  mix-blend-mode: screen;
  opacity: 0;
  animation: sitw-amb-lightning 14s linear infinite;
}

@keyframes sitw-amb-lightning {
  0%, 86.5%, 100% { opacity: 0; }
  87%             { opacity: 0.9; }
  88%             { opacity: 0.12; }
  89.2%           { opacity: 0.65; }
  91%             { opacity: 0; }
}

/* Luna del cuadro: centro (222,212) */
.sitw-amb-moon {
  left: 10.65%;
  top: 17.85%;
  width: 5.26%;
  background: radial-gradient(circle, rgba(205, 170, 255, 0.5) 0%, rgba(160, 100, 245, 0.18) 50%, transparent 72%);
  animation-duration: 7.5s;
}

/* Figura del cuadro: parches sobredimensionados sobre (165-180,245-268)
   y (198-214,245-268) — el ojo debe quedar 100% negro al cerrarse */
.sitw-amb-painting-l { left: 9.45%;  top: 25.29%; width: 1.73%; height: 3.93%; border-radius: 30%; background: #02020c; animation-duration: 9.8s; animation-delay: 4.6s; }
.sitw-amb-painting-r { left: 11.42%; top: 25.29%; width: 1.79%; height: 3.93%; border-radius: 30%; background: #02020c; animation-duration: 9.8s; animation-delay: 4.6s; }

/* Gato del alfeizar: ojos (737,391) y (752,392) */
.sitw-amb-sillcat { left: 43.54%; top: 40.91%; width: 2.03%; height: 1.70%; background: #02000a; animation-duration: 8.2s; animation-delay: 5.1s; }

/* Antenas rojas de la ciudad: (477,222) y (490,244) */
.sitw-amb-beacon {
  position: absolute;
  width: 0.36%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 70, 110, 0.9);
  box-shadow: 0 0 6px rgba(255, 50, 100, 0.8);
  animation: sitw-amb-beacon 2.8s linear infinite;
}

.sitw-amb-beacon-1 { left: 28.35%; top: 23.27%; }
.sitw-amb-beacon-2 { left: 29.13%; top: 25.61%; animation-duration: 3.7s; animation-delay: 1.1s; }

@keyframes sitw-amb-beacon {
  0%, 42%   { opacity: 0.08; }
  50%, 68%  { opacity: 0.95; }
  76%, 100% { opacity: 0.08; }
}

/* Almohada calavera: cuencas (218-245, 498-528) y (252-282, 495-522).
   Aqui el parpado es color hueso: la calavera "cierra los ojos". */
.sitw-amb-skull-l { left: 12.92%; top: 52.60%; width: 1.85%; height: 3.72%; background: #28124f; border-radius: 50%; animation-duration: 11s; animation-delay: 6s; }
.sitw-amb-skull-r { left: 14.95%; top: 52.28%; width: 2.03%; height: 3.51%; background: #28124f; border-radius: 50%; animation-duration: 11s; animation-delay: 6s; }

/* Robot: ojos (1102-1127, 717-742) y (1142-1167, 722-747) */
.sitw-amb-robot-l { left: 65.67%; top: 75.66%; width: 2.03%; height: 3.61%; background: #05010a; animation-duration: 7.6s; animation-delay: 2.6s; }
.sitw-amb-robot-r { left: 68.06%; top: 76.20%; width: 2.03%; height: 3.61%; background: #05010a; animation-duration: 7.6s; animation-delay: 2.6s; }

/* Cristal del estante: centro (1578,73) */
.sitw-amb-crystal {
  left: 92.6%;
  top: 4.57%;
  width: 3.59%;
  background: radial-gradient(circle, rgba(215, 140, 255, 0.65) 0%, rgba(165, 80, 255, 0.25) 48%, transparent 70%);
  animation-duration: 3.2s;
}

/* Fan del PC: centro (1400,261) — aspas de luz girando sobre el fan pintado */
.sitw-amb-fan {
  position: absolute;
  left: 81.82%;
  top: 24.34%;
  width: 3.83%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(
    rgba(200, 110, 255, 0.55) 0deg 24deg, transparent 24deg 90deg,
    rgba(200, 110, 255, 0.55) 90deg 114deg, transparent 114deg 180deg,
    rgba(200, 110, 255, 0.55) 180deg 204deg, transparent 204deg 270deg,
    rgba(200, 110, 255, 0.55) 270deg 294deg, transparent 294deg 360deg
  );
  mix-blend-mode: screen;
  opacity: 0.32;
  animation: sitw-amb-spin 1.9s linear infinite;
}

@keyframes sitw-amb-spin {
  to { transform: rotate(360deg); }
}

/* Laptop de la cama: la pantalla respira luz (centro 445,520) */
.sitw-amb-laptop {
  position: absolute;
  left: 21.53%;
  top: 46.23%;
  width: 10.17%;
  aspect-ratio: 1.6;
  background: radial-gradient(ellipse, rgba(235, 225, 255, 0.5) 0%, rgba(180, 140, 255, 0.18) 50%, transparent 75%);
  mix-blend-mode: screen;
  animation: sitw-amb-pulse 4.6s ease-in-out infinite;
}

/* Antena del robot: punta que late (1186,642) */
.sitw-amb-antenna {
  position: absolute;
  left: 70.51%;
  top: 67.48%;
  width: 0.84%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(225, 195, 255, 0.95) 0%, rgba(170, 100, 255, 0.4) 55%, transparent 78%);
  mix-blend-mode: screen;
  animation: sitw-amb-pulse 2.3s ease-in-out infinite;
}

/* Motas de polvo: particulas que flotan y se desvanecen */
.sitw-amb-mote {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(205, 175, 255, 0.55);
  box-shadow: 0 0 6px rgba(170, 110, 255, 0.5);
  opacity: 0;
  animation: sitw-amb-mote 14s linear infinite;
}

.sitw-amb-mote-1 { left: 30%; top: 72%; animation-duration: 16s; }
.sitw-amb-mote-2 { left: 52%; top: 64%; animation-duration: 13s; animation-delay: 4s; }
.sitw-amb-mote-3 { left: 68%; top: 80%; animation-duration: 18s; animation-delay: 8s; }
.sitw-amb-mote-4 { left: 84%; top: 58%; animation-duration: 15s; animation-delay: 11s; }

@keyframes sitw-amb-mote {
  0%   { opacity: 0;    transform: translate3d(0, 0, 0); }
  12%  { opacity: 0.55; }
  50%  { opacity: 0.35; transform: translate3d(14px, -46px, 0); }
  88%  { opacity: 0.5; }
  100% { opacity: 0;    transform: translate3d(-8px, -92px, 0); }
}

/* Titulos flotando: se anima `translate` (propiedad independiente)
   para no pisar el transform:scale del hover */
.sitw-room-title-web         { animation: sitw-title-float 4.6s ease-in-out infinite; }
.sitw-room-title-systems     { animation: sitw-title-float 5.4s ease-in-out infinite; animation-delay: 0.9s; }
.sitw-room-title-automations { animation: sitw-title-float 5s ease-in-out infinite;   animation-delay: 1.7s; }
.sitw-room-title-main        { animation: sitw-title-float 7s ease-in-out infinite; }

@keyframes sitw-title-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -6px; }
}

/* Monitor con codigo (x1110-1305, y255-400): barrido de scanline */
.sitw-amb-scan {
  position: absolute;
  left: 66.4%;
  top: 27.1%;
  width: 11.7%;
  height: 15.4%;
  overflow: hidden;
}

.sitw-amb-scan::before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 16%;
  background: linear-gradient(to bottom, transparent, rgba(140, 255, 190, 0.16), transparent);
  mix-blend-mode: screen;
  animation: sitw-amb-scanline 4.2s linear infinite;
}

@keyframes sitw-amb-scanline {
  from { top: -18%; }
  to   { top: 105%; }
}

@media (prefers-reduced-motion: reduce) {
  .sitw-ambient * ,
  .sitw-amb-rain::before,
  .sitw-amb-rain::after,
  .sitw-amb-scan::before {
    animation: none !important;
  }
}

/* ===============================================================
   ESCENA AUTOMATIZACIONES (robotito.png / cambio.png)
   El panel holografico vacio mide x178-746, y234-568 (1672x941).
   Las notificaciones del robot viven dentro de ese rectangulo.
   =============================================================== */
.sitw-holo-stage2 {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s ease;
}

.sitw-interactive-room-automation.is-projecting .sitw-holo-stage2 {
  opacity: 1;
}

.sitw-interactive-room-automation.is-glitching .sitw-holo-stage2 {
  animation: sitw-scene-glitch 0.26s steps(2) both;
}

/* El dialogo desaparece durante la proyeccion antes de abrir el sistema. */
.sitw-interactive-room-automation.is-projecting .sitw-holo-dialogue {
  opacity: 0;
  pointer-events: none;
}

.sitw-holo-dialogue {
  transition: opacity 0.45s ease;
  position: absolute;
  left: 10.65%;
  top: 24.87%;
  width: 33.97%;
  height: 35.49%;
  z-index: 8;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(8px, 1vw, 20px);
  box-sizing: border-box;
  overflow: hidden;
  color: rgba(205, 150, 255, 0.95);
  font-family: "Share Tech Mono", "Courier New", monospace;
  font-size: clamp(11px, 0.95vw, 19px);
  line-height: 1.4;
  text-shadow: 0 0 7px rgba(150, 60, 255, 0.4);
}

.sitw-holo-stream {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: clamp(6px, 0.6vw, 12px);
  min-height: 0;
}

/* Notificacion estilo celular */
.sitw-notif {
  border: 1px solid rgba(160, 75, 255, 0.4);
  border-radius: 10px;
  background: rgba(14, 5, 28, 0.62);
  backdrop-filter: blur(2px);
  padding: clamp(7px, 0.7vw, 14px) clamp(9px, 0.9vw, 16px);
  transform: translateY(14px);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.sitw-notif.is-in {
  transform: translateY(0);
  opacity: 1;
}

.sitw-notif.is-old {
  opacity: 0.45;
}

.sitw-notif.is-out {
  opacity: 0;
  transform: translateY(-10px);
}

.sitw-notif-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 4px;
  font-size: 0.62em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.75;
}

.sitw-notif-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(180, 95, 255, 0.95);
  box-shadow: 0 0 6px rgba(160, 70, 255, 0.7);
  flex: 0 0 auto;
}

.sitw-notif-app { flex: 1 1 auto; min-width: 0; }
.sitw-notif-time { opacity: 0.7; }

.sitw-notif-body {
  white-space: pre-line;
  word-break: break-word;
}

/* Chips de respuesta rapida (como respuestas de notificacion) */
.sitw-notif-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.sitw-notif-chip {
  border: 1px solid rgba(165, 75, 255, 0.6);
  border-radius: 999px;
  background: transparent;
  color: rgba(205, 150, 255, 0.95);
  font-family: inherit;
  font-size: 0.78em;
  line-height: 1.2;
  padding: 5px 13px;
  cursor: pointer;
  text-transform: lowercase;
  text-shadow: inherit;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.sitw-notif-chip:hover,
.sitw-notif-chip:focus-visible {
  border-color: rgba(205, 130, 255, 0.95);
  transform: translateY(-1px);
}

/* Respuesta inline (input dentro de la notificacion) */
.sitw-notif-reply {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
}

.sitw-notif-reply .sitw-dialogue-input {
  font-size: 0.85em !important;
  padding: 4px 6px !important;
}

.sitw-notif-reply .sitw-notif-chip {
  flex: 0 0 auto;
}

/* Notificaciones "de otras apps" (ejemplos de automatizacion) */
.sitw-notif.is-app .sitw-notif-dot {
  background: rgba(120, 220, 170, 0.9);
  box-shadow: 0 0 6px rgba(90, 200, 150, 0.6);
}

.sitw-notif.is-app {
  border-color: rgba(160, 75, 255, 0.25);
}

/* ── "Ver el final ⏭": salto directo a la escena final de cada experiencia ── */
.sitw-xp-final{
  position:absolute;right:16px;bottom:14px;z-index:60;
  display:inline-flex;align-items:center;gap:6px;
  border:1px solid rgba(199,155,255,.4);border-radius:999px;
  background:rgba(10,6,20,.6);backdrop-filter:blur(6px);
  color:rgba(233,221,255,.85);font-size:11.5px;font-weight:800;letter-spacing:.06em;
  padding:8px 14px;cursor:pointer;text-decoration:none !important;
  opacity:.65;transition:.25s;
}
.sitw-xp-final:hover{
  opacity:1;color:#fff;border-color:#c79bff;
  background:rgba(123,47,255,.35);box-shadow:0 8px 26px rgba(155,48,255,.5);
}
@media(max-width:640px){.sitw-xp-final{right:10px;bottom:10px;padding:7px 11px;font-size:10.5px;}}

/* el <picture> de las escenas no altera el layout del img */
.sitw-interactive-room picture { display: contents; }

/* ===============================================================
   RESPONSIVE de la seccion /crear (≤768px) — escenas verticales
   Cada experiencia usa su asset vertical (zsuite*.png): la imagen
   se ajusta a la ALTURA del viewport y se centra. Todo lo
   interactivo se posiciona en % de esa imagen via las variables
   --zh (alto de imagen) y --zw (ancho dibujado).
   =============================================================== */
@media (max-width: 768px) {
  /* ya no hay drag lateral: las escenas son verticales */
  .sitw-crear-page {
    overflow-x: hidden;
    overflow-y: visible;
  }

  /* sin globos flotantes dentro de la experiencia crear */
  body:has(.sitw-crear-page) .sitw-asesor-fab,
  body:has(.sitw-crear-page) .sitw-asesor-panel,
  body:has(.sitw-crear-page) .sitw-stour-fab {
    display: none !important;
  }

  /* ---- base comun de las escenas verticales ---- */
  .sitw-interactive-room {
    --zh: calc(100vh - 64px);
    --zh: calc(100dvh - 64px);
    --zw: calc(56.28vh - 36.0192px);
    --zw: calc(56.28dvh - 36.0192px);
    --sh: var(--zh);
    --scene-left: calc(50% - var(--zw) / 2);
    --scene-top: calc((var(--zh) - var(--sh)) / 2);
    --sitw-room-web-shift: clamp(18px, 7vw, 32px);
    --sitw-room-systems-shift: clamp(-36px, -7vw, -20px);
    width: 100vw;
    max-width: none;
    aspect-ratio: auto;
    height: var(--zh);
    margin-top: 64px; /* deja libre el header fijo */
    cursor: default;
    overflow: hidden;
    line-height: normal;
    background:
      radial-gradient(120vw 70vw at 50% 0%, rgba(72, 24, 128, 0.38), transparent 70%),
      #0a0512;
  }

  .sitw-interactive-room .sitw-room-bg {
    position: absolute;
    inset: auto;
    top: var(--scene-top);
    left: var(--scene-left);
    width: var(--zw);
    max-width: none;
    height: var(--sh);
    object-fit: cover;
    object-position: center;
  }

  /* capas panoramicas y vida ambiental: no aplican en vertical */
  .sitw-interactive-room .sitw-ambient,
  .sitw-interactive-room .sitw-room-title-layer,
  .sitw-interactive-room .sitw-room-layer,
  .sitw-holo-stage2 {
    display: none;
  }

  /* ---- EL CUARTO (/crear/) — zsuite.png ----
     hotspots recalibrados: laptop en la cama, PC en el escritorio,
     robot caminando. Los recortes flotantes marcan lo clickeable. */
  /* En mobile los propios recortes reemplazan a los hotspots de escritorio. */
  .sitw-interactive-room .sitw-room-hotspot {
    display: none;
  }

  .sitw-interactive-room .sitw-room-button {
    display: block;
    position: absolute;
    top: var(--scene-top);
    left: var(--scene-left);
    width: var(--zw);
    height: var(--sh);
    z-index: 8;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    animation: sitw-piece-float 4.6s ease-in-out infinite;
    will-change: transform;
  }

  .sitw-interactive-room .sitw-room-button-compu {
    clip-path: inset(55.2% 54% 33.2% 23.5% round 12px);
    transform-origin: 34.7% 60.9%;
  }

  .sitw-interactive-room .sitw-room-button-pc {
    clip-path: inset(44.6% 0.8% 41.2% 80.4% round 12px);
    transform-origin: 89.7% 51.7%;
    animation-delay: 1.5s;
    animation-duration: 5.4s;
  }

  .sitw-interactive-room .sitw-room-button-robot {
    clip-path: inset(68.8% 14.7% 12.2% 63.4% round 12px);
    transform-origin: 74.3% 78.3%;
    animation-delay: 2.7s;
    animation-duration: 5s;
  }

  .sitw-interactive-room .sitw-room-piece {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    pointer-events: none;
    filter: drop-shadow(0 8px 14px rgba(6, 2, 14, 0.55));
    transition: filter 0.2s ease;
  }

  .sitw-room-button:focus-visible {
    outline: none;
  }

  .sitw-room-button:focus-visible .sitw-room-piece,
  .sitw-room-button:active .sitw-room-piece {
    filter: brightness(1.12) drop-shadow(0 0 12px rgba(168, 92, 255, 0.65));
  }

  .sitw-interactive-room .sitw-room-mobile-title {
    display: block;
    position: absolute;
    top: var(--scene-top);
    left: var(--scene-left);
    width: var(--zw);
    height: var(--sh);
    max-width: none;
    z-index: 10;
    pointer-events: none;
    filter: drop-shadow(0 5px 9px rgba(90, 20, 170, 0.42));
    animation: sitw-piece-float 4.6s ease-in-out infinite;
    will-change: transform;
  }

  .sitw-interactive-room .sitw-room-mobile-title-compu {
    left: calc(var(--scene-left) + var(--sitw-room-web-shift) + 14px);
    transform-origin: 34.7% 60.9%;
  }

  .sitw-interactive-room .sitw-room-mobile-title-main {
    left: calc(var(--scene-left) + clamp(18px, 6vw, 34px));
  }

  .sitw-interactive-room .sitw-room-mobile-title-pc {
    left: calc(var(--scene-left) + var(--sitw-room-systems-shift));
    transform-origin: 89.7% 51.7%;
    animation-delay: 1.5s;
    animation-duration: 5.4s;
  }

  .sitw-interactive-room .sitw-room-mobile-title-robot {
    transform-origin: 74.3% 78.3%;
    animation-delay: 2.7s;
    animation-duration: 5s;
  }

  /* Vida ambiental recalibrada sobre zsuite.png (941x1672). */
  .sitw-interactive-room:not(.sitw-interactive-room-single) .sitw-ambient {
    display: block;
    inset: auto;
    top: var(--scene-top);
    left: var(--scene-left);
    width: var(--zw);
    height: var(--sh);
    z-index: 9;
  }

  .sitw-interactive-room:not(.sitw-interactive-room-single) .sitw-ambient > * {
    display: none;
  }

  .sitw-interactive-room:not(.sitw-interactive-room-single) .sitw-amb-rain,
  .sitw-interactive-room:not(.sitw-interactive-room-single) .sitw-amb-lightning,
  .sitw-interactive-room:not(.sitw-interactive-room-single) .sitw-amb-moon,
  .sitw-interactive-room:not(.sitw-interactive-room-single) .sitw-amb-painting-l,
  .sitw-interactive-room:not(.sitw-interactive-room-single) .sitw-amb-painting-r,
  .sitw-interactive-room:not(.sitw-interactive-room-single) .sitw-amb-sillcat,
  .sitw-interactive-room:not(.sitw-interactive-room-single) .sitw-amb-skull-l,
  .sitw-interactive-room:not(.sitw-interactive-room-single) .sitw-amb-skull-r,
  .sitw-interactive-room:not(.sitw-interactive-room-single) .sitw-amb-beacon,
  .sitw-interactive-room:not(.sitw-interactive-room-single) .sitw-amb-robot-l,
  .sitw-interactive-room:not(.sitw-interactive-room-single) .sitw-amb-robot-r,
  .sitw-interactive-room:not(.sitw-interactive-room-single) .sitw-amb-crystal,
  .sitw-interactive-room:not(.sitw-interactive-room-single) .sitw-amb-fan,
  .sitw-interactive-room:not(.sitw-interactive-room-single) .sitw-amb-scan,
  .sitw-interactive-room:not(.sitw-interactive-room-single) .sitw-amb-laptop,
  .sitw-interactive-room:not(.sitw-interactive-room-single) .sitw-amb-antenna,
  .sitw-interactive-room:not(.sitw-interactive-room-single) .sitw-amb-mote {
    display: block;
  }

  .sitw-interactive-room:not(.sitw-interactive-room-single) .sitw-amb-rain,
  .sitw-interactive-room:not(.sitw-interactive-room-single) .sitw-amb-lightning {
    left: 31.9%;
    top: 35.4%;
    width: 23%;
    height: 15.5%;
  }

  .sitw-interactive-room:not(.sitw-interactive-room-single) .sitw-amb-rain {
    -webkit-mask-image: linear-gradient(to bottom, #000 0 82%, transparent 100%);
    -webkit-mask-composite: source-over;
    mask-image: linear-gradient(to bottom, #000 0 82%, transparent 100%);
    mask-composite: add;
  }

  .sitw-interactive-room:not(.sitw-interactive-room-single) .sitw-amb-moon {
    left: 11.9%;
    top: 23%;
    width: 12.8%;
  }

  .sitw-interactive-room:not(.sitw-interactive-room-single) .sitw-amb-painting-l {
    left: 13.4%;
    top: 31.8%;
    width: 2.15%;
    height: 1.35%;
  }

  .sitw-interactive-room:not(.sitw-interactive-room-single) .sitw-amb-painting-r {
    left: 16.25%;
    top: 31.8%;
    width: 2.15%;
    height: 1.35%;
  }

  .sitw-interactive-room:not(.sitw-interactive-room-single) .sitw-amb-sillcat {
    left: 47.6%;
    top: 50.5%;
    width: 4.5%;
    height: 1.75%;
    background: #050114;
  }

  .sitw-interactive-room:not(.sitw-interactive-room-single) .sitw-amb-skull-l {
    left: 15.8%;
    top: 56%;
    width: 3.15%;
    height: 1.9%;
  }

  .sitw-interactive-room:not(.sitw-interactive-room-single) .sitw-amb-skull-r {
    left: 20.6%;
    top: 56%;
    width: 3.15%;
    height: 1.9%;
  }

  .sitw-interactive-room:not(.sitw-interactive-room-single) .sitw-amb-beacon-1 {
    left: 47.1%;
    top: 39.8%;
  }

  .sitw-interactive-room:not(.sitw-interactive-room-single) .sitw-amb-beacon-2 {
    left: 48.6%;
    top: 41.3%;
  }

  .sitw-interactive-room:not(.sitw-interactive-room-single) .sitw-amb-robot-l {
    left: 68.1%;
    top: 72.9%;
    width: 2.4%;
    height: 2.2%;
  }

  .sitw-interactive-room:not(.sitw-interactive-room-single) .sitw-amb-robot-r {
    left: 72.1%;
    top: 73%;
    width: 2.4%;
    height: 2.2%;
  }

  .sitw-interactive-room:not(.sitw-interactive-room-single) .sitw-amb-robot-l,
  .sitw-interactive-room:not(.sitw-interactive-room-single) .sitw-amb-robot-r {
    animation: sitw-amb-blink 7.6s linear 2.6s infinite,
      sitw-ambient-object-float 5s ease-in-out 2.7s infinite;
  }

  .sitw-interactive-room:not(.sitw-interactive-room-single) .sitw-amb-crystal {
    left: 6.4%;
    top: 38.9%;
    width: 6.4%;
  }

  .sitw-interactive-room:not(.sitw-interactive-room-single) .sitw-amb-fan {
    left: 82.25%;
    top: 47.65%;
    width: 7%;
    animation: sitw-amb-spin 1.9s linear infinite,
      sitw-ambient-object-float 5.4s ease-in-out 1.5s infinite;
  }

  .sitw-interactive-room:not(.sitw-interactive-room-single) .sitw-amb-scan {
    left: 67.6%;
    top: 46.55%;
    width: 12.8%;
    height: 6.4%;
  }

  .sitw-interactive-room:not(.sitw-interactive-room-single) .sitw-amb-laptop {
    left: 24.5%;
    top: 56.5%;
    width: 16%;
    animation: sitw-amb-pulse 4.6s ease-in-out infinite,
      sitw-ambient-object-float 4.6s ease-in-out infinite;
  }

  .sitw-interactive-room:not(.sitw-interactive-room-single) .sitw-amb-antenna {
    left: 76.5%;
    top: 69.75%;
    width: 2%;
    animation: sitw-amb-pulse 2.3s ease-in-out infinite,
      sitw-ambient-object-float 5s ease-in-out 2.7s infinite;
  }

  .sitw-interactive-room:not(.sitw-interactive-room-single) .sitw-amb-mote {
    width: 3px;
    height: 3px;
  }

  /* ---- LA ENTIDAD (/crear/pagina-web) — zsuite-paginasweb.png ----
     La cara dibujada vive en el panel superior; los overlays de ojos,
     parpados y boca se recalibran a esa cara. El busto clonado del
     lienzo horizontal no participa. */
  .sitw-web-room .sitw-entity {
    position: absolute;
    inset: auto;
    top: var(--scene-top);
    left: calc(50% - var(--zw) / 2);
    width: var(--zw);
    height: var(--sh);
    max-width: none;
    transform-origin: 50% 38%;
  }

  .sitw-web-room .sitw-entity-bust { display: none; }

  .sitw-web-room .sitw-entity-glow { width: 5%; }
  .sitw-web-room .sitw-entity-glow-left  { left: 42.6%; top: 32.9%; }
  .sitw-web-room .sitw-entity-glow-right { left: 52.6%; top: 32.9%; }

  .sitw-web-room .sitw-entity-eyelid { width: 5%; height: 3%; }
  .sitw-web-room .sitw-entity-eyelid-left  { left: 42.6%; top: 33.1%; }
  .sitw-web-room .sitw-entity-eyelid-right { left: 52.6%; top: 33.1%; }

  .sitw-web-room .sitw-entity-mouth {
    left: 48%;
    top: 38.4%;
    width: 3.4%;
    height: 0.55%;
  }

  /* Chat: nace en el panel vacio dibujado bajo la cara y crece
     hacia abajo segun el contenido */
  .sitw-web-room .sitw-terminal-dialogue {
    position: absolute;
    left: 50%;
    top: calc(var(--scene-top) + var(--sh) * 0.515);
    transform: translateX(-50%);
    width: min(calc(100vw - 24px), calc(var(--zw) * 0.8));
    height: auto;
    margin: 0;
    min-height: 0;
    max-height: calc(var(--sh) * 0.465);
    overflow-y: auto;
    padding: 14px 14px 12px;
    font-size: 20px;
    line-height: 1.5;
    background: rgba(12, 4, 25, 0.92);
  }

  .sitw-web-room .sitw-dialogue-output {
    min-height: 0;
    align-items: flex-start;
  }

  .sitw-web-room .sitw-dialogue-output { order: 0; }
  .sitw-web-room .sitw-card-slot      { order: 1; }

  .sitw-web-room .sitw-dialogue-options {
    order: 2;
    padding: 10px 4px 2px;
    justify-content: center;
    gap: 8px;
  }

  .sitw-web-room .sitw-dialogue-options:empty { display: none; }

  .sitw-web-room .sitw-dialogue-option {
    padding: 10px 16px;
    min-height: 44px;
    font-size: 17px;
  }

  .sitw-web-room .sitw-card-slot.is-populated {
    min-height: 0;
    width: min(100%, 420px);
    margin-inline: auto;
    gap: 8px;
    margin-top: 10px;
    padding: 0 6px 8px;
  }

  /* El salto al final va arriba a la derecha, sobre la escena */
  .sitw-web-room .sitw-xp-final,
  .sitw-crm-room .sitw-xp-final {
    position: fixed;
    top: 74px;
    right: 10px;
    bottom: auto;
    z-index: 40;
  }

  /* ---- LOOP (/crear/automatizaciones) — zsuite-automatizaciones.png
     (853x1844): las notificaciones viven en el panel holografico
     superior dibujado en la escena */
  .sitw-interactive-room-automation {
    --zw: calc(46.26vh - 29.6064px);
    --zw: calc(46.26dvh - 29.6064px);
    --sh: var(--zh);
  }

  .sitw-interactive-room-automation .sitw-holo-dialogue {
    left: 50%;
    transform: translateX(-50%);
    top: calc(var(--scene-top) + var(--sh) * 0.104);
    width: min(calc(100vw - 24px), calc(var(--zw) * 0.86));
    height: calc(var(--sh) * 0.235);
    padding: 8px;
  }

  /* ---- ORDEN (/servicios/crm-leads) — zsuite-crm.png ----
     usa la base comun; la terminal ya se fija centrada al abrirse */
}

/* los botones y piezas del cuarto solo existen en el layout vertical */
.sitw-room-button,
.sitw-room-mobile-title,
.sitw-room-piece { display: none; }

@keyframes sitw-piece-float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(0, -3px, 0) scale(1.035); }
}

@keyframes sitw-ambient-object-float {
  0%, 100% { translate: 0 0; scale: 1; }
  50%      { translate: 0 -3px; scale: 1.035; }
}

body.page-id-130,
body.page-id-143,
body.page-id-232 {
  height: 100vh;
  height: 100dvh;
  overflow: hidden !important;
}

@media (min-width: 769px) {
  body.page-id-130 .sitw-crear-page,
  body.page-id-143 .sitw-crear-page,
  body.page-id-232 .sitw-crear-page {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100vh - 64px);
    height: calc(100dvh - 64px);
    margin-top: 64px;
    overflow: hidden;
  }

  body.page-id-130 .sitw-interactive-room-single,
  body.page-id-143 .sitw-interactive-room-single,
  body.page-id-232 .sitw-interactive-room-single {
    flex: 0 0 auto;
    width: calc(177.6833vh - 113.7173px);
    width: calc(177.6833dvh - 113.7173px);
    height: calc(100vh - 64px);
    height: calc(100dvh - 64px);
    max-width: none;
    aspect-ratio: 1672 / 941;
    margin: 0;
  }

  body.page-id-130 .sitw-interactive-room-single .sitw-room-bg,
  body.page-id-143 .sitw-interactive-room-single .sitw-room-bg,
  body.page-id-232 .sitw-interactive-room-single .sitw-room-bg {
    width: 100%;
    height: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sitw-room-button,
  .sitw-room-mobile-title {
    animation: none !important;
  }
}