/* ==========================================================================
   Mudanzas · «De tu hogar actual. A lo que sigue.»
   Escena fija por scroll con una sala en 3D: se pinta, se etiqueta como
   inventario, se prepara para la mudanza (cobijas, cajas, diablito) y se abre
   queda lista para la mudanza mientras aparecen los tres pasos.

   Sin JavaScript (o con «reducir movimiento») se ve como contenido normal;
   mudanzas-3d.js agrega .mud--animado.
   ========================================================================== */

.mud { position: relative; background: #f5f7fc; }

/* ------------------------------------------------------------------ versión estática */
.mud__fijo { position: relative; }
.mud__lienzo, .mud__etiquetas, .mud__lineas { display: none; }
.mud__escena { max-width: 1440px; margin: auto; padding: 100px 5% 0; }
.mud__escena--pasos { padding-top: 30px; padding-bottom: 100px; }
.mud__titulo { font-size: clamp(34px, 3.5vw, 53px); line-height: 1.08; letter-spacing: -1.8px; font-weight: 400; margin: 0 0 30px; }
.mud__titulo-a, .mud__titulo-b { display: block; }
.mud__pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.mud__pasos li { padding: 28px; border-radius: 24px; background: var(--soft-blue); }
.mud__pasos li:nth-child(2) { background: var(--soft-yellow); }
.mud__pasos li:nth-child(3) { background: var(--soft-red); }
.mud__pasos span { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--blue); color: #fff; font-size: 12px; }
.mud__pasos li:nth-child(2) span { background: var(--yellow); color: #493b00; }
.mud__pasos li:nth-child(3) span { background: var(--red); }
.mud__pasos h3 { font-size: 21px; font-weight: 500; margin: 25px 0 12px; }
.mud__pasos p { font-size: 14px; line-height: 1.7; color: var(--muted); margin: 0; }
@media (max-width: 760px) { .mud__pasos { grid-template-columns: 1fr; } .mud__escena { padding-top: 60px; } }

/* ------------------------------------------------------------------ versión animada */
.mud--animado { height: 480vh; }
.mud--animado .mud__fijo { position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate; }
.mud--animado .mud__imagen { display: none; }
.mud--animado .mud__lienzo { display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.mud--animado .mud__lienzo canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.mud--animado .mud__lienzo canvas + canvas { clip-path: circle(0 at 50% 50%); }
.mud--animado .mud__escena { position: absolute; inset: 0; max-width: none; margin: 0; padding: 0; }

/* título enorme alrededor de la sala */
.mud--animado .mud__eyebrow { position: absolute; left: 5%; top: 7vh; z-index: 3; }
.mud--animado .mud__titulo { position: absolute; inset: 0; margin: 0; z-index: 1; pointer-events: none; font-size: clamp(50px, 8.6vw, 160px); line-height: .92; letter-spacing: -.05em; font-weight: 500; }
.mud--animado .mud__titulo-a { position: absolute; left: 3.5%; top: 12vh; }
.mud--animado .mud__titulo-b { position: absolute; right: 3.5%; bottom: 7vh; color: var(--blue); }

/* etiquetas de inventario sobre cada mueble */
.mud--animado .mud__etiquetas { display: block; position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.mud__etiqueta {
  position: absolute; left: 0; top: 0;
  padding: 6px 11px 6px 9px; border-radius: 999px;
  background: #fff; color: var(--ink); font-size: 12px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 10px 24px -12px rgba(16, 58, 140, .45);
  opacity: 0;
}
.mud__etiqueta::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--red); margin-right: 7px; vertical-align: 1px; }
.mud__etiqueta i { font-style: normal; color: var(--blue); margin-left: 6px; font-weight: 500; }

/* pasos con líneas guía */
.mud--animado .mud__escena--pasos { z-index: 4; pointer-events: none; }
.mud--animado .mud__lineas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mud--animado .mud__lineas polyline { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.mud--animado .mud__lineas circle { fill: #fff; stroke: var(--blue); stroke-width: 2.5; opacity: 0; }
.mud--animado .mud__pasos { display: block; }
.mud--animado .mud__pasos li { position: absolute; width: 290px; padding: 0; background: none; border-radius: 0; opacity: 0; pointer-events: auto; }
.mud--animado .mud__pasos li span { margin-bottom: 14px; }
.mud--animado .mud__pasos h3 { font-size: 23px; margin: 0 0 8px; letter-spacing: -.4px; }
.mud--animado .mud__pasos p { font-size: 14px; }

@media (max-width: 760px) {
  .mud--animado { height: 460vh; }
  .mud--animado .mud__titulo { font-size: clamp(38px, 11.5vw, 70px); }
  .mud--animado .mud__titulo-a { top: 11vh; left: 5%; right: 5%; white-space: normal; }
  .mud--animado .mud__titulo-b { right: 5%; bottom: 9vh; text-align: right; }
  .mud--animado .mud__lineas { display: none; }
  .mud--animado .mud__pasos li { left: 5% !important; right: 5%; top: auto !important; bottom: 6vh; width: auto; }
  .mud__etiqueta { font-size: 10.5px; padding: 4px 8px; }
  .mud__etiqueta i { display: none; }
}