body {
  margin: 0;
  background: #05060b;
  font-family: system-ui, sans-serif;
  color: #fff;
}

/* Layout principal: móvil columna, desktop fila */
.sim-wrapper {
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
  gap: 12px;
}

/* CONTROLES */

.sim-controls {
  background: #141826;
  padding: 18px;
  border-radius: 14px;
  border: 1px solid #22283a;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.sim-controls h1 {
  margin: 0 0 8px;
  font-size: 1.3rem;
  color: #ffffff; /* blanco puro */
}

.sim-subtitle {
  margin: 0 0 16px;
  font-size: 0.9rem;
  color: #9ba0b5;
}

.sim-controls label {
  margin-top: 12px;
  font-size: 0.9rem;
  display: block;
  color: #c4c7d6;
}

.sim-controls select,
.sim-controls input[type="range"] {
  width: 100%;
  margin-top: 6px;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #2a3045;
  background: #0d101b;
  color: #fff;
  font-size: 0.9rem;
}

/* Slider con look más pro */
.sim-controls input[type="range"] {
  padding: 0;
  height: 4px;
  appearance: none;
  background: linear-gradient(90deg, #38405c, #707aa5);
}

.sim-controls input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffcc4d;
  border: 1px solid #000;
  cursor: pointer;
  box-shadow: 0 0 0 3px rgba(255, 204, 77, 0.3);
}

.btn-primary {
  margin-top: 16px;
  background: #ffcc4d;
  border: none;
  padding: 10px;
  width: 100%;
  border-radius: 8px;
  color: #000;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
}

/* PREVIEW (esto es lo que mantiene la imagen perfecta) */

.sim-preview {
  background: #0d101b;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid #22283a;
  display: flex;
  justify-content: center;
}

.house-frame {
  position: relative;
  width: 100%;
  max-width: 900px;
  border-radius: 12px;
  overflow: hidden;
}

.house-base {
  width: 100%;
  height: auto; /* clave: NO se deforma */
  display: block;
}

.house-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: screen;
  pointer-events: none;
  transition: filter 0.2s linear, opacity 0.2s linear;
}

/* Desktop: controles izquierda, preview derecha */

@media (min-width: 900px) {
  .sim-wrapper {
    flex-direction: row;
    max-width: 1200px;
    margin: 0 auto;
  }

  .sim-controls {
    width: 32%;
    max-width: 360px;
  }

  .sim-preview {
    width: 68%;
  }
}