/* ══ EL JUEGO — CSS COMPARTIDO (2026-10-20) ══════════════════════════════════════════════
   El juego de Mi mueble (fases M3–M5b, 13-17 oct), movido TAL CUAL desde css/mi-mueble.css
   (se carga justo después de él: la cascada de Mi mueble es la misma de antes). Lo usan los dos
   perfiles del juego (js/juego/): el cliente (mi-mueble.html, todo lo de `.mm …`) y el taller
   (el Diseño 3D paso a paso: la raíz del juego lleva `.jg`). Los componentes que
   valen para los dos van con `:is(.mm, .jg)`, que pesa lo mismo que `.mm`. Lo que acomoda el
   juego al marco del taller (columnas, cápsula dentro del panel) vive en css/diseno3d.css. */
/* ══ EL JUEGO (fase M3, 2026-10-13) — solo con ?v2=1 (juego.js pone data-v2 en <body>) ══
   Fondo blanco infinito, la pregunta arriba al centro, el mueble al medio (55 % del alto
   en el teléfono), las tarjetas abajo y la flecha → abajo a la derecha, al pulgar.
   La pantalla es UN atributo en <body>: data-pantalla = inicio | tipo | medidas | fuera |
   guardar | color | listo. Colores solo por token, con su respaldo exacto. */
.mmj[hidden], :is(.mmj, .jg) [hidden]{display:none}
.mm[data-v2] .phdr, .mm[data-v2] .mm-main, .mm[data-v2] .pftr{display:none}
/* M5a: antes de que corra app.js la página va en blanco: ni el esqueleto del modo clásico
   ni su encabezado aparecen un instante antes del póster del juego (y el logo del
   encabezado, que el juego no muestra, no se pide: va con loading="lazy"). */
.mm:not([data-arranque]) .phdr, .mm:not([data-arranque]) .mm-main, .mm:not([data-arranque]) .pftr{display:none}
.mm[data-v2]{background:var(--belk-paper,#FFFFFF); color:var(--belk-paper-text,#0D2350)}
.mmj{
  display:grid; grid-template-columns:minmax(0, 1fr); gap:8px;
  grid-template-areas:"barra" "pregunta" "aviso" "escenario" "cuerpo";
  align-content:start;
  max-width:1280px; margin:0 auto; padding:8px 16px 88px; min-height:100vh;
  background:var(--belk-paper,#FFFFFF); color:var(--belk-paper-text,#0D2350);
}
/* La bienvenida, al centro de la pantalla; el sonido queda en su esquina. */
.mmj{position:relative}
.mm[data-pantalla="inicio"] .mmj{padding-bottom:24px; align-content:center}
.mm[data-pantalla="inicio"] .mmj-barra{position:absolute; grid-area:auto; top:8px; left:16px; right:16px}

/* Arriba: el taller (con enlace), los puntos de progreso y el sonido. */
.mmj-barra{grid-area:barra; display:flex; align-items:center; gap:12px; min-height:44px}
.mmj-para{
  flex:0 1 auto; max-width:40%; font-weight:700; font-size:15px; color:var(--belk-paper-text,#0D2350);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mm[data-pantalla="inicio"] .mmj-historias{visibility:hidden}
:is(.mm, .jg) .mmj-sonido{flex:none; width:44px; height:44px; min-height:44px; padding:0}
.mmj-sonido svg{width:22px; height:22px}

/* La pregunta: grande y al centro. */
.mmj-pregunta{
  grid-area:pregunta; text-align:center; font-size:clamp(1.4rem, 5.6vw, 2.2rem); line-height:1.2;
  font-weight:800; color:var(--belk-paper-text,#0D2350); outline:none; margin:0;
}
.mmj-pregunta:focus-visible{outline:2px solid var(--belk-paper-brand,#143A7D); outline-offset:4px; border-radius:4px}
.mmj-aviso{grid-area:aviso}
.mmj-aviso:has(> [hidden]){display:none}

/* El escenario: el mueble (y, en la bienvenida, Adam a su izquierda). */
.mmj-escenario{grid-area:escenario; position:relative; display:grid; grid-template-columns:minmax(0, 1fr); gap:8px; min-width:0}
.mm .mmj-anfitrion{display:none}
.mm[data-pantalla="inicio"] .mmj-escenario{grid-template-columns:minmax(0, 42fr) minmax(0, 58fr); align-items:center}
.mm[data-pantalla="inicio"] .mmj-anfitrion{display:flex}
.mmj-lienzo{
  position:relative; height:55vh; min-height:280px; min-width:0; overflow:hidden;
  border-radius:var(--belk-radius-sm,8px);
  /* El piso blanco que se funde: sin horizonte (la sala blanca de Codex pone su propia luz). */
  background:radial-gradient(ellipse at 50% 78%, var(--belk-paper-alt,#F5F8FC) 0%, var(--belk-paper,#FFFFFF) 68%);
}
.mm[data-pantalla="inicio"] .mmj-lienzo{height:46vh; min-height:240px}
.mm[data-pantalla="listo"] .mmj-lienzo{height:55vh}
.mmj-lienzo canvas{display:block; width:100%; height:100%; touch-action:none; transition:opacity .3s ease}
/* Antes de elegir, el mueble de ejemplo es una silueta: todavía no es el suyo. */
.mm[data-pantalla="tipo"][data-elegido="no"] .mmj-lienzo canvas{opacity:.35}

/* ── Adam ── */
.mm-anf{display:flex; flex-direction:column; align-items:center; gap:8px; min-width:0}
.mm-anf-fig{position:relative; overflow:hidden; background:var(--belk-paper-alt,#F5F8FC); border:1px solid var(--belk-paper-border,rgba(13,35,80,.10))}
.mm-anf-img, .mm-anf-video{display:block; width:100%; height:100%; object-fit:cover}
.mm-anf-video{position:absolute; inset:0}
.mm-anf-burbuja{
  margin:0; padding:8px 12px; border-radius:12px; font-size:15px; line-height:1.35; font-weight:600;
  background:var(--belk-paper,#FFFFFF); color:var(--belk-paper-text,#0D2350);
  border:1px solid var(--belk-paper-border,rgba(13,35,80,.10));
}
.mm-anf-burbuja:empty{display:none}
.mm-anf-burbuja.is-nueva{animation:mmj-entra .26s ease-out}
/* La bienvenida: el clip entero, entra desde la izquierda. */
.mm-anf--entero{opacity:0; transform:translateX(-28px); transition:opacity .5s ease, transform .5s ease}
.mm-anf--entero.is-dentro{opacity:1; transform:none}
.mm-anf--entero .mm-anf-fig{width:100%; aspect-ratio:1 / 1; border-radius:16px}
.mm-anf--entero .mm-anf-burbuja{align-self:stretch; text-align:center}
/* La esquina: su cara y la frase del paso, sobre el mueble (no tapa los toques). */
/* 28-oct (dueño): justo DEBAJO del 3D, a lo ancho (antes iba encima, arriba a la izquierda, y
   tapaba la escena). Solo en Mi mueble (.mm): Diseño 3D también carga este archivo. */
.mm .mmj-adam{position:static; min-width:0; pointer-events:none}
.mm .mmj-adam.mm-anf--cara{align-items:center}
.mm .mmj-adam .mm-anf-burbuja{flex:1 1 auto; min-width:0; max-width:none; overflow-wrap:anywhere}
.mm[data-pantalla="inicio"] .mmj-adam{display:none}
.mm-anf--cara{flex-direction:row; align-items:flex-start}
.mm-anf--cara .mm-anf-fig{flex:none; width:48px; height:48px; border-radius:50%}
.mm-anf--cara .mm-anf-burbuja{max-width:min(80%, 440px)}
.mm-anf.is-senala .mm-anf-fig{animation:mmj-senala .6s ease-in-out 2}
@keyframes mmj-entra{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
@keyframes mmj-senala{50%{transform:rotate(-8deg) translateX(3px)}}

/* ── Las alternativas: tarjetas con dibujo + palabra ── */
.mmj-cuerpo{grid-area:cuerpo; display:flex; flex-direction:column; gap:12px; min-width:0}
.mmj-opciones{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px}
.mmj-opciones--tipos{grid-template-columns:repeat(3, minmax(0, 1fr))}
.mmj-opciones--medidas{grid-template-columns:minmax(0, 1fr)}
.mmj-opciones--color{display:flex; flex-direction:column}
.mmj-tarjeta{
  font:inherit; font-size:15px; font-weight:600; line-height:1.2; text-align:center; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  min-height:92px; padding:10px 8px; border-radius:12px;
  background:var(--belk-paper,#FFFFFF); color:var(--belk-paper-text,#0D2350);
  border:2px solid var(--belk-paper-border,rgba(13,35,80,.10));
  transition:border-color var(--belk-transition,.18s ease), background var(--belk-transition,.18s ease), transform .12s ease;
}
/* M5a: el borde al pasar el ratón, solo donde hay ratón (en el teléfono quedaba «pegado»
   en la última tarjeta tocada y parecía elegida). */
@media (hover:hover){ .mmj-tarjeta:hover{border-color:var(--belk-paper-brand,#143A7D)} }
.mmj-tarjeta:active{transform:scale(.97)}
.mmj-tarjeta:focus-visible{outline:3px solid var(--belk-paper-brand,#143A7D); outline-offset:2px}
.mmj-tarjeta[aria-pressed="true"]{
  border-color:var(--belk-paper-brand,#143A7D); background:var(--belk-paper-sunken,#E9F0F9); color:var(--belk-paper-text,#0D2350);
  box-shadow:inset 0 0 0 1px var(--belk-paper-brand,#143A7D);
}
.mmj-dibujo{width:44px; height:44px; color:var(--belk-paper-brand,#143A7D)}
/* Seis tipos en tres columnas: el nombre en dos líneas como mucho. */
.mmj-opciones--tipos .mmj-tarjeta{min-height:76px; padding:6px 4px; font-size:14px; gap:4px}
.mmj-opciones--tipos .mmj-dibujo{width:30px; height:30px}
/* El baño (20-oct): cinco modelos en tres columnas, con su medida sugerida debajo. */
.mmj-opciones--modelos{grid-template-columns:repeat(3, minmax(0, 1fr))}
.mmj-opciones--modelos .mmj-tarjeta{min-height:104px; padding:8px 4px; font-size:14px; gap:4px}
.mmj-opciones--modelos .mmj-dibujo{width:40px; height:40px}
.mmj-modelo-med{font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--belk-paper-muted,#414B5C)}
.mmj-medida input{font-size:22px; min-height:56px}
.mmj-fila{display:flex; flex-wrap:wrap; gap:6px}
.mmj-fila .belk-btn{flex:1 1 auto; min-height:40px}
/* Las familias de color: una fila que se desliza con el dedo (no se come el alto). */
.mmj-opciones--color > .mmj-fila:first-child{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:2px}
.mmj-opciones--color > .mmj-fila:first-child .belk-btn{flex:none}
.mmj-otro{padding:4px 0}
.mmj-otro .lb{font-size:15px; font-weight:600; color:var(--belk-paper-text,#0D2350); cursor:pointer}
.mmj-muestras{display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:8px}
.mmj-tarjeta--muestra{min-height:0; padding:6px; align-items:stretch; font-size:14px}
.mmj-tarjeta--muestra .mlam-chip{display:block; width:100%; height:56px; object-fit:cover; border-radius:6px;
  border:1px solid var(--belk-paper-border,rgba(13,35,80,.10))}
.mmj-elige{text-align:center; font-size:15px; color:var(--belk-paper-muted,#414B5C)}

/* La bienvenida: un solo botón. */
.mm .mmj-empezar{align-self:center; width:100%; max-width:360px; min-height:56px; font-size:18px; font-weight:700}

/* «¡Listo!» */
.mmj-listo{display:flex; flex-direction:column; gap:12px}
.mmj-acciones{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.mmj-acciones .belk-btn{width:100%}
.mmj-listo .mm-final{display:flex}
.mmj-listo .mm-final[hidden]{display:none}

/* La navegación de abajo: desde la fase M5b es la CÁPSULA flotante (bloque M5b, al final). */
.mm[data-pantalla="inicio"] .mmj-nav{display:none}

/* Escritorio: las tarjetas a la izquierda y el mueble grande a la derecha. */
@media (min-width:900px){
  .mmj{
    grid-template-columns:400px minmax(0, 1fr); column-gap:24px; align-items:start;
    grid-template-areas:"barra barra" "pregunta pregunta" "aviso aviso" "cuerpo escenario";
  }
  .mm[data-pantalla="inicio"] .mmj{grid-template-areas:"barra barra" "pregunta pregunta" "aviso aviso" "escenario escenario" "cuerpo cuerpo"}
  .mmj-lienzo{height:min(68vh, 680px)}
  .mm[data-pantalla="inicio"] .mmj-escenario{grid-template-columns:minmax(260px, 380px) minmax(0, 1fr)}
  .mm[data-pantalla="inicio"] .mmj-lienzo{height:min(62vh, 600px)}
  .mm[data-pantalla="listo"] .mmj-lienzo{height:min(74vh, 760px)}
  /* Adam debajo del 3D (28-oct): el 3D cede solo lo que falta para que 3D + su frase (hasta
     dos líneas) quepan sin scroll nuevo; en pantallas altas sigue igual. */
  .mm .mmj-lienzo{height:min(68vh, calc(100vh - 286px), 680px)}
  .mm[data-pantalla="listo"] .mmj-lienzo{height:min(74vh, calc(100vh - 210px), 760px)}
  .mmj-cuerpo{position:sticky; top:12px}
  .mm[data-pantalla="listo"] .mmj-cuerpo{position:static}
  .mmj-opciones--tipos{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .mmj-tarjeta, .mmj-opciones--tipos .mmj-tarjeta{min-height:104px; font-size:15px}
  .mmj-opciones--tipos .mmj-dibujo{width:44px; height:44px}
}
/* Teléfono, la bienvenida (plan §1, 13-oct): el mueble ARRIBA a ~55 % del alto y Adam
   DEBAJO, su tarjeta chica con la frase al lado. Lado a lado el lienzo quedaba de ~190 px. */
@media (max-width:899px){
  .mm[data-pantalla="inicio"] .mmj{align-content:start; padding-top:52px}
  .mm[data-pantalla="inicio"] .mmj-escenario{grid-template-columns:minmax(0, 1fr); align-items:stretch}
  .mm[data-pantalla="inicio"] .mmj-lienzo{order:-1; height:55vh; min-height:300px}
  .mm[data-pantalla="inicio"] .mm-anf--entero{flex-direction:row; align-items:center; gap:12px}
  .mm[data-pantalla="inicio"] .mm-anf--entero .mm-anf-fig{flex:none; width:84px; border-radius:12px}
  .mm[data-pantalla="inicio"] .mm-anf--entero .mm-anf-burbuja{flex:1; align-self:auto; text-align:left}
}

/* ── La cocina (fase M3b): forma, espacio, cuánto mueble y módulo por módulo ── */
.mmj-opciones--tres{grid-template-columns:repeat(3, minmax(0, 1fr))}
.mmj-opciones--dos{grid-template-columns:repeat(2, minmax(0, 1fr))}
.mmj-opciones--modulos{grid-template-columns:repeat(3, minmax(0, 1fr))}
.mmj-opciones--tres .mmj-tarjeta, .mmj-opciones--modulos .mmj-tarjeta{min-height:88px; padding:8px 4px; font-size:14px}
.mmj-tarjeta:disabled{cursor:default; transform:none}
.mmj-otra{grid-column:1 / -1; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px}
.mmj-opciones--tres > .mm-campo{grid-column:1 / -1}
.mmj-sugerido{font-size:12px; font-weight:700; color:var(--belk-paper-brand,#143A7D)}
:is(.mm, .jg) .mmj-mas{grid-column:1 / -1; min-height:44px}
/* La propuesta de Adam en «¡Listo!». */
.mmj-propuesta{
  display:flex; flex-direction:column; gap:10px; padding:12px; border-radius:12px;
  background:var(--belk-paper-alt,#F5F8FC); color:var(--belk-paper-text,#0D2350);
  border:1px solid var(--belk-paper-border,rgba(13,35,80,.10));
}
.mmj-prop-titulo{margin:0; font-size:17px; font-weight:800; color:var(--belk-paper-text,#0D2350)}
.mmj-prop-texto{margin:0; font-size:15px; line-height:1.4; color:var(--belk-paper-text,#0D2350)}
.mmj-prop-lista{margin:0; padding-left:20px; font-size:15px; line-height:1.4; color:var(--belk-paper-text,#0D2350)}
.mmj-prop-ver .belk-btn{flex:1 1 0}
.mmj-prop-decide{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.mmj-prop-decide .belk-btn{width:100%}

@media (min-width:900px){
  .mmj-opciones--modulos{grid-template-columns:repeat(2, minmax(0, 1fr))}
  /* La planta en la columna de la izquierda: entera a la vista junto a sus controles. */
  .mmj-plano svg{max-height:min(42vh, 340px)}
  .mmj-opciones--tres .mmj-tarjeta, .mmj-opciones--modulos .mmj-tarjeta{min-height:104px; font-size:15px}
}

/* ── «¿Hay algo en los muros?» (fase M3c): tarjetas + la planta tocable (aberturas.js).
   La planta es `planoSalon` de salon.js: sus clases d3-pl-* se pintan aquí con los
   tokens del papel (css/diseno3d.css no se carga en esta página). ── */
.mmj-opciones--aberturas{display:flex; flex-direction:column; gap:12px}
.mmj-ab-tarjetas{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px}
.mmj-ab-tarjetas .mmj-tarjeta{min-height:92px; padding:8px 4px; font-size:14px; gap:4px}
.mmj-ab-tarjetas .mmj-dibujo{width:36px; height:36px}
.mmj-sugerido--pista{font-weight:600; color:var(--belk-paper-muted,#414B5C)}
.mmj-plano{
  padding:4px; border-radius:12px;
  background:var(--belk-paper-alt,#F5F8FC); color:var(--belk-paper-text,#0D2350);
  border:2px solid var(--belk-paper-border,rgba(13,35,80,.10));
  transition:border-color var(--belk-transition,.18s ease);
}
/* Con una tarjeta tocada, la planta espera el toque: su borde lo dice. */
.mmj-plano[data-armado="si"]{border-color:var(--belk-paper-brand,#143A7D)}
.mmj-plano svg{display:block; width:100%; height:auto; max-height:58vh; margin:0 auto; touch-action:manipulation; cursor:pointer}
.mmj-plano .d3-pl-piso{fill:var(--belk-paper,#FFFFFF)}
.mmj-plano .d3-pl-muro{stroke:var(--belk-paper-text,#0D2350); stroke-width:6; stroke-linecap:square}
.mmj-plano .d3-pl-muro--abierto{stroke:var(--belk-paper-muted,#414B5C); stroke-width:1.5; stroke-dasharray:5 4}
.mmj-plano .d3-pl-ventana{stroke:var(--belk-paper-sunken,#E9F0F9); stroke-width:7}
.mmj-plano .d3-pl-puerta{stroke:var(--belk-paper,#FFFFFF); stroke-width:8}
.mmj-plano .d3-pl-hoja{stroke:var(--belk-paper-text,#0D2350); stroke-width:2}
.mmj-plano .d3-pl-barrido{fill:none; stroke:var(--belk-paper-text,#0D2350); stroke-width:1; stroke-dasharray:3 3}
.mmj-plano .d3-pl-estorbo{stroke:var(--belk-paper-warn,#9C4A12); stroke-width:8}
.mmj-plano .d3-pl-toma{stroke:var(--belk-paper-warn,#9C4A12); stroke-width:8}
.mmj-plano .mmj-pl-estorbo{fill:url(#mmjRayas); stroke:var(--belk-paper-warn,#9C4A12); stroke-width:1.5}
.mmj-plano .mmj-pl-raya{stroke:var(--belk-paper-warn,#9C4A12); stroke-width:2}
.mmj-plano .mmj-pl-sel{fill:none; stroke:var(--belk-accent,#E87722); stroke-width:4; stroke-linecap:round; opacity:.9}
.mmj-plano .d3-pl-letra{cursor:pointer}
.mmj-plano .d3-pl-letra circle{fill:var(--belk-paper,#FFFFFF); stroke:var(--belk-paper-text,#0D2350); stroke-width:1.5}
.mmj-plano .d3-pl-letra text{fill:var(--belk-paper-text,#0D2350); font-size:13px; font-weight:700; pointer-events:none}
.mmj-plano .d3-pl-letra:focus{outline:none}
.mmj-plano .d3-pl-letra:focus-visible circle{stroke:var(--belk-paper-brand,#143A7D); stroke-width:3}
/* Las letras de los muros que no son de la forma: solo nombre, no se tocan. */
.mmj-plano .d3-pl-letra[aria-hidden="true"]{cursor:default}
.mmj-plano .d3-pl-letra[aria-hidden="true"] circle{stroke:var(--belk-paper-muted,#414B5C); stroke-width:1}
.mmj-plano .d3-pl-letra[aria-hidden="true"] text{fill:var(--belk-paper-muted,#414B5C); font-weight:600}
.mmj-ab-control{
  display:flex; flex-direction:column; gap:8px; padding:10px; border-radius:12px;
  background:var(--belk-paper-alt,#F5F8FC); color:var(--belk-paper-text,#0D2350);
  border:1px solid var(--belk-paper-border,rgba(13,35,80,.10));
}
.mmj-ab-control .mm-elegido{margin:0}
.mmj-ab-mover{display:flex; align-items:center; gap:8px}
:is(.mm, .jg) .mmj-ab-flecha{width:48px; height:48px; min-height:48px; padding:0; border-radius:50%}
.mmj-ab-flecha svg{width:22px; height:22px}
:is(.mm, .jg) .mmj-ab-quitar{margin-left:auto; min-height:44px}
.mmj-ab-tamanos .belk-btn, .mmj-ab-lista .belk-btn{flex:0 1 auto}
.mmj-ab-sin{margin:0; font-size:15px; color:var(--belk-paper-warn,#9C4A12)}

/* ── El estilo (fase M3c): seis tarjetas con la foto de sus dos muestras ── */
.mmj-estilos{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px}
.mmj-tarjeta--estilo{min-height:0; padding:6px 6px 8px; gap:4px; align-items:stretch}
.mmj-estilo-foto{
  display:grid; grid-template-columns:1fr 1fr; height:64px; overflow:hidden; border-radius:8px;
  border:1px solid var(--belk-paper-border,rgba(13,35,80,.10));
}
.mmj-estilo-foto img{display:block; width:100%; height:100%; object-fit:cover}
.mmj-estilo-det{font-size:12px; font-weight:600; color:var(--belk-paper-muted,#414B5C)}
:is(.mm, .jg) .mmj-mis{min-height:44px}
.mmj-pista{margin:0}

/* Teléfono: en «¿Hay algo en los muros?» y en «¿Dónde están el agua y el gas?» la planta
   ocupa el lugar del 3D (queda Adam). */
@media (max-width:899px){
  .mm[data-pantalla="aberturas"] .mmj-lienzo, .mm[data-pantalla="tomas"] .mmj-lienzo{height:auto; min-height:0; overflow:visible; background:none}
  .mm[data-pantalla="aberturas"] .mmj-lienzo canvas, .mm[data-pantalla="tomas"] .mmj-lienzo canvas{display:none}
  .mm[data-pantalla="aberturas"] .mmj-escenario, .mm[data-pantalla="tomas"] .mmj-escenario{gap:0}
}

/* ── Instalable (fase M3d): el agua y el gas en la planta, los electrodomésticos ── */
.mmj-ab-tarjetas--tres{grid-template-columns:repeat(3, minmax(0, 1fr))}
.mmj-plano .d3-pl-toma_gas{stroke:var(--belk-paper-warn,#9C4A12); stroke-width:8}
.mmj-plano .mmj-pl-punto circle{stroke:var(--belk-paper,#FFFFFF); stroke-width:2.5}
.mmj-plano .mmj-pl-agua circle{fill:var(--belk-paper-brand,#143A7D)}
.mmj-plano .mmj-pl-gas circle{fill:var(--belk-paper-warn,#9C4A12)}
/* M5a: en «¿Dónde están el agua y el gas?» las puertas, ventanas y estorbos van en gris
   claro (de referencia) y solo los puntos en color (aberturas.js `plano`, capa 'tomas').
   La ventana ya es un hueco claro en el muro: queda igual. */
.mmj-plano .mmj-pl--tomas .d3-pl-hoja, .mmj-plano .mmj-pl--tomas .d3-pl-barrido,
.mmj-plano .mmj-pl--tomas .d3-pl-estorbo, .mmj-plano .mmj-pl--tomas .mmj-pl-raya,
.mmj-plano .mmj-pl--tomas .mmj-pl-estorbo{stroke:var(--belk-border-strong,rgba(13,35,80,.18))}
.mmj-el-tarjetas{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px}
.mmj-el-tarjetas .mmj-tarjeta{min-height:92px; padding:8px 4px; font-size:14px; gap:4px}
.mmj-el-tarjetas .mmj-dibujo{width:36px; height:36px}
.mmj-el-control .mmj-fila .belk-btn{flex:1 1 auto}
@media (min-width:900px){
  .mmj-el-tarjetas{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
/* 28-oct (solo Mi mueble): cada electrodoméstico con su «Quitar» / «＋ Agregar» a la vista (el
   que no está, con el borde punteado), y la hoja del refrigerador en cuadrícula: una puerta
   60 · 70 · 80 arriba; dos cuerpos y «No llevo» abajo. Sin carrusel: nada queda cortado. */
body.mm .mmj-el-item{display:flex; flex-direction:column; gap:6px; min-width:0}
body.mm .mmj-el-item .mmj-tarjeta{flex:1 1 auto}
body.mm .mmj-el-item.is-sin .mmj-tarjeta{border-style:dashed}
body.mm .mmj-el-item.is-sin .mmj-dibujo{opacity:.45}
body.mm .mmj-el-accion{width:100%; min-height:48px; padding:8px 6px; font-size:15px}
body.mm .mmj-hoja-opciones--refri{grid-template-columns:repeat(6, minmax(0, 1fr))}
body.mm .mmj-hoja-opciones--refri .mmj-tarjeta{grid-column:span 2; min-height:88px; padding:8px 4px}
body.mm .mmj-hoja-opciones--refri .mmj-tarjeta[data-refri="lado"],
body.mm .mmj-hoja-opciones--refri .mmj-tarjeta[data-refri="no"]{grid-column:span 3}

@media (prefers-reduced-motion: reduce){
  .mm-anf--entero, .mmj-tarjeta, .mmj-lienzo canvas, .mmj-plano{transition:none}
  .mm-anf-burbuja.is-nueva, .mm-anf.is-senala .mm-anf-fig{animation:none}
}

/* ── Sin fatiga (fase M3d): los atajos del módulo y «Terminar» desde el principio ── */
.mmj-atajos{grid-column:1 / -1}
:is(.mm, .jg) .mmj-atajos .belk-btn{flex:1 1 auto; min-height:44px}
.mmj-nota{grid-column:1 / -1; margin:0}
:is(.mm, .jg) .mmj-terminar{min-height:48px}

/* ── El porqué, el aviso de medida y retomar (fase M3d) ── */
.mmj-porque-lista{margin:0; padding-left:18px; font-size:15px; line-height:1.45; color:var(--belk-paper-text,#0D2350)}
.mmj-porque-lista li + li{margin-top:8px}
.mmj-medida-aviso{grid-column:1 / -1}
.mmj-medida-aviso .mm-elegido{margin:0}
:is(.mm, .jg) .mmj-usar{align-self:flex-start; min-height:44px}
.mmj-memoria{
  display:flex; flex-direction:column; align-items:center; gap:10px; padding:12px; border-radius:12px;
  background:var(--belk-paper-alt,#F5F8FC); color:var(--belk-paper-text,#0D2350);
  border:1px solid var(--belk-paper-border,rgba(13,35,80,.10));
}
.mmj-memoria[hidden]{display:none}
.mmj-memoria-foto{width:120px; height:auto; border-radius:8px; border:1px solid var(--belk-paper-border,rgba(13,35,80,.10))}
.mmj-memoria-texto{margin:0; font-size:15px; text-align:center; color:var(--belk-paper-text,#0D2350)}
.mmj-memoria-botones{display:grid; grid-template-columns:1fr 1fr; gap:8px; width:100%}
.mmj-memoria-botones .belk-btn{width:100%; min-height:48px}
/* Adam al tiro (M3d): «¿Querías esta otra? Sí / No» dentro de su burbuja. */
.mm-adam-otra{display:flex; gap:6px; margin-top:6px}

/* ── Accesibilidad básica del juego (fase M5a, DeepSeek 24) ──────────────────────────
   Todo lo que se toca mide al menos 48 × 48 px (la flecha ←, el sonido, las píldoras de
   tamaños y de opciones, los atajos, los puntos de los módulos, el interruptor, las
   letras de la planta y los botones de Adam). El foco con teclado se ve en todo (anillo
   de 2-3 px del color de la marca sobre el papel). */
:is(.mm, .jg) .mmj-sonido, :is(.mm, .jg) .mmj-atras{width:48px; height:48px; min-height:48px}
:is(.mmj, .jg) .belk-btn, :is(.mmj, .jg) .belk-btn--sm, .mmj-fila .belk-btn, :is(.mm, .jg) .mmj-ab-quitar, :is(.mm, .jg) .mmj-mas, :is(.mm, .jg) .mmj-atajos .belk-btn,
:is(.mm, .jg) .mmj-usar, :is(.mm, .jg) .mmj-mis, :is(.mmj, .jg) .mm-adam-pie .belk-btn{min-height:48px; min-width:48px}
:is(.mmj, .jg) .belk-btn--icon{min-width:48px; min-height:48px}
/* El interruptor: toda la fila (la etiqueta) se toca, y la pastilla es más grande. */
:is(.mmj, .jg) .tgr{min-height:48px; padding:0; gap:12px}
:is(.mmj, .jg) .tgr .lb{flex:1; display:flex; align-items:center; min-height:48px}
:is(.mmj, .jg) .tg{width:52px; height:48px}
:is(.mmj, .jg) .tg .sl{top:12px; bottom:12px; left:0; right:0}
:is(.mmj, .jg) .tg .sl::after{width:18px; height:18px}
:is(.mmj, .jg) .tg input:checked+.sl::after{transform:translateX(28px)}
:is(.mmj, .jg) .tg input:focus-visible+.sl{outline:2px solid var(--belk-paper-brand,#143A7D); outline-offset:2px}
/* Las letras de la planta: su círculo de toque (aberturas.js) no se pinta. */
.mmj-plano .d3-pl-letra circle.mmj-pl-toque, .mmj-plano .d3-pl-letra:focus-visible circle.mmj-pl-toque{fill:transparent; stroke:none}

/* ── Teléfono de verdad (fase M5a) ───────────────────────────────────────────────────
   Ningún doble toque agranda la página (botones, tarjetas, planta, interruptores: se
   hereda de aquí; el pellizco sigue, para quien necesita la letra más grande). El 3D
   sigue con `touch-action:none` (lo maneja la órbita). Con viewport-fit=cover, los
   márgenes y la barra de la flecha respetan la muesca y la barra de inicio. */
.mm[data-v2]{touch-action:manipulation; -webkit-tap-highlight-color:transparent}
.mmj{padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px));
  padding-top:max(8px, env(safe-area-inset-top, 0px))}
@media (max-width:899px){
  .mmj-nav{padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px))}
}

/* ══ FASE M5b (17-oct): interfaz predictiva, como Instagram y Facebook (dueño). Tokens del sello;
   el naranjo solo en la chispa de «para ti». Movimiento ≤ 300 ms (salvo los bucles de espera) y
   apagado con «reducir movimiento». ══ */

/* ── Escala de 5 pasos con clamp() (ratio ~1,2, ritmo de 4/8 px), escrita en cada regla (el
   guardián solo admite tokens --belk-*): 13-14 razones y pistas · 15-16 cuerpo y tarjetas ·
   17-19 la cápsula y los títulos de hoja · 22-30 la pregunta · 28-40 la bienvenida. ── */
.mmj{padding-bottom:calc(104px + env(safe-area-inset-bottom, 0px))}
.mmj-pregunta{font-size:clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem); line-height:1.15; letter-spacing:-0.02em; text-wrap:balance}
.mm[data-pantalla="inicio"] .mmj-pregunta{font-size:clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem)}
:is(.mmj, .jg) .mm-ayuda, .mmj-elige{font-size:clamp(0.9375rem, 0.92rem + 0.1vw, 1rem); text-wrap:pretty}
.mmj-tarjeta{font-size:clamp(0.9375rem, 0.92rem + 0.1vw, 1rem); border-radius:var(--belk-radius,1rem)}
.mmj-sugerido, .mmj-estilo-det{font-size:clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem)}
.mmj-medida input, .mm-unidad{font-variant-numeric:tabular-nums}
:is(.mmj, .jg) ::selection{background:var(--belk-paper-sunken,#E9F0F9); color:var(--belk-paper-text,#0D2350)}

/* ── 1. El progreso como las historias ── */
.mmj-historias{
  flex:1; min-width:0; height:48px; display:flex; align-items:stretch; gap:4px;
  cursor:pointer; touch-action:manipulation; border-radius:var(--belk-radius-sm,8px);
}
.mmj-historias:focus-visible{outline:2px solid var(--belk-paper-brand,#143A7D); outline-offset:2px}
.mmj-seg{flex:1 1 0; min-width:0; display:flex; align-items:center; gap:2px}
.mmj-seg > i, .mmj-sub > i{
  position:relative; display:block; width:100%; height:4px; border-radius:2px; overflow:hidden;
  /* pista vacía: 2,6:1 sobre el papel */
  background:color-mix(in srgb, var(--belk-paper-muted,#414B5C) 40%, var(--belk-paper,#FFFFFF));
  transition:height var(--belk-transition,.18s ease);
}
.mmj-seg > i::after, .mmj-sub > i::after{
  content:""; position:absolute; inset:0; background:var(--belk-paper-brand,#143A7D);
  transform:scaleX(0); transform-origin:left center;
}
.mmj-seg.is-hecho > i::after, .mmj-sub.is-hecho > i::after{transform:none}
/* visto más adelante: se puede saltar ahí */
.mmj-seg.is-visto > i::after{transform:none; background:color-mix(in srgb, var(--belk-paper-brand,#143A7D) 45%, var(--belk-paper,#FFFFFF))}
/* El de ahora se llena con una animación corta y queda más grueso. */
.mmj-seg.is-aqui > i, .mmj-sub.is-aqui > i{height:6px; border-radius:3px}
.mmj-seg.is-aqui > i::after, .mmj-sub.is-aqui > i::after{animation:mmj-llena .3s cubic-bezier(.16,1,.3,1) both}
.mmj-sub{flex:1 1 0; min-width:0; display:flex; align-items:center}
.mmj-sub.is-arriba{align-items:center; padding-bottom:6px}
@keyframes mmj-llena{from{transform:scaleX(0)} to{transform:none}}
.mm .mmj-barra .mmj-sonido{flex:none}

/* ── 2. Los carruseles con vista previa en vivo ── */
.mmj-opciones--modulos, .mmj-opciones--color{display:flex; flex-direction:column; gap:8px}
.mmj-carrusel{
  position:relative; display:flex; gap:12px; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scrollbar-width:none;
  /* 68 % del ancho (asoma la siguiente); los separadores centran la primera y la última. */
  margin-inline:-16px; padding:6px 0 4px; container-type:inline-size;
}
.mmj-carrusel::before, .mmj-carrusel::after{content:""; flex:0 0 calc(16cqi - 12px)}
.mmj-carrusel::-webkit-scrollbar{display:none}
.mmj-carta{
  flex:0 0 68cqi; scroll-snap-align:center; scroll-snap-stop:always; min-height:136px; position:relative;
  transform:scale(.93); transform-origin:center bottom;
  transition:transform .2s cubic-bezier(.16,1,.3,1), border-color var(--belk-transition,.18s ease), background var(--belk-transition,.18s ease), box-shadow .2s ease;
  -webkit-touch-callout:none; user-select:none;
}
.mmj-carta.is-centro{transform:none; box-shadow:var(--belk-shadow-1,0 2px 8px rgba(13,35,80,.08))}
.mmj-carta .mmj-dibujo{width:64px; height:64px}
.mmj-carta.mmj-tarjeta--estilo{padding:8px 8px 10px; gap:6px}
.mmj-carta .mmj-estilo-foto{height:96px; border-radius:12px}
.mmj-prueba{margin:0; min-height:1.4em; text-align:center; font-size:clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem); color:var(--belk-paper-muted,#414B5C); text-wrap:balance}
.mmj-atajos{display:flex; gap:8px}
:is(.mm, .jg) .mmj-atajos .belk-btn{flex:1 1 0; min-width:0; border-radius:999px; gap:8px}
:is(.mm, .jg) .mmj-atajos .belk-btn svg{width:20px; height:20px}

/* ── 3. La cápsula flotante y ← redondo ── */
.mmj-nav{
  position:fixed; z-index:20; left:max(16px, env(safe-area-inset-left, 0px)); right:max(16px, env(safe-area-inset-right, 0px));
  bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  display:flex; align-items:center; gap:8px; pointer-events:none; view-transition-name:mmj-capsula;
}
.mmj-nav .belk-btn{pointer-events:auto}
:is(.mm, .jg) .mmj-nav .mmj-atras{
  flex:none; width:56px; height:56px; min-height:56px; padding:0; border-radius:50%;
  background:var(--belk-paper,#FFFFFF); color:var(--belk-paper-text,#0D2350); border-color:var(--belk-paper-border,rgba(13,35,80,.10));
  box-shadow:var(--belk-shadow-2,0 8px 24px rgba(13,35,80,.16));
}
:is(.mm, .jg) .mmj-nav .mmj-atras svg{width:24px; height:24px}
:is(.mm, .jg) .mmj-capsula-ir{
  position:relative; flex:1; min-width:0; height:56px; min-height:56px; padding:0 18px 0 24px; border-radius:999px;
  justify-content:space-between; gap:12px; font-size:clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem); font-weight:700; letter-spacing:-0.01em;
  box-shadow:var(--belk-shadow-2,0 8px 24px rgba(13,35,80,.16));
  transition:background var(--belk-transition,.18s ease), opacity var(--belk-transition,.18s ease), transform .12s ease;
}
:is(.mm, .jg) .mmj-capsula-ir:active{transform:scale(.98)}
:is(.mm, .jg) .mmj-capsula-ir svg{width:26px; height:26px}
.mmj-sig-txt{min-width:0; display:flex; flex-direction:column; align-items:flex-start; line-height:1.15; text-align:left}
.mmj-sig-txt small{font-size:clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem); font-weight:600; opacity:.86}
.mmj-sig-txt strong{max-width:100%; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mmj-sig-txt.is-cambia{animation:mmj-rotulo .18s cubic-bezier(.16,1,.3,1)}
@keyframes mmj-rotulo{from{opacity:0; transform:translateY(6px)}}
.mmj-nav .belk-btn:focus-visible{outline:3px solid var(--belk-paper-brand,#143A7D); outline-offset:3px}
/* el pulso: una vez, al poder seguir */
.mmj-capsula-ir::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  border:2px solid var(--belk-paper-brand,#143A7D); opacity:0;
}
.mmj-capsula-ir.is-pulso::after{animation:mmj-pulso .3s cubic-bezier(.16,1,.3,1)}
@keyframes mmj-pulso{from{opacity:.9; transform:none} to{opacity:0; transform:scale(1.08, 1.3)}}
/* en «¡Listo!» la cápsula es el envío (envio.js sigue usando estos botones) */
.mm[data-v2] #mmPedir{display:none}

/* ── 4. Las hojas que suben (<dialog> modal) ── */
.mmj-hoja{
  position:fixed; inset:auto 0 0 0; margin:0; padding:0; width:100%; max-width:none;
  max-height:min(56svh, 560px); border:0; border-radius:var(--belk-radius,1rem) var(--belk-radius,1rem) 0 0;
  background:var(--belk-paper,#FFFFFF); color:var(--belk-paper-text,#0D2350);
  box-shadow:var(--belk-shadow-2,0 8px 24px rgba(13,35,80,.16));
  transform:translateY(100%); transition:transform .24s cubic-bezier(.16,1,.3,1), max-height .24s cubic-bezier(.16,1,.3,1);
  overscroll-behavior:contain;
}
.mmj-hoja[open]{display:flex; flex-direction:column}
.mmj-hoja.is-abierta{transform:none}
.mmj-hoja.is-arrastrando{transition:none}
.mmj-hoja[data-alto="alta"]{max-height:92svh; height:92svh}
.mmj-hoja::backdrop{background:color-mix(in srgb, var(--belk-paper-text,#0D2350) 42%, transparent); opacity:0; transition:opacity .2s ease}
.mmj-hoja.is-abierta::backdrop{opacity:1}
.mmj-hoja-cab{
  position:relative; display:flex; align-items:center; gap:8px; padding:20px 8px 8px 20px; flex:none;
  touch-action:none; cursor:grab; border-bottom:1px solid var(--belk-paper-border,rgba(13,35,80,.10));
}
.mmj-hoja-asa{position:absolute; top:8px; left:50%; width:40px; height:5px; margin-left:-20px; border-radius:3px; background:var(--belk-border-strong,rgba(13,35,80,.18))}
.mmj-hoja-titulo{flex:1; min-width:0; margin:0; font-size:clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem); font-weight:800; line-height:1.25; text-wrap:balance; color:var(--belk-paper-text,#0D2350)}
.mmj-hoja-cerrar{
  flex:none; width:48px; height:48px; display:grid; place-items:center; padding:0; cursor:pointer;
  border:0; border-radius:50%; background:none; color:var(--belk-paper-text,#0D2350);
}
@media (hover:hover){ .mmj-hoja-cerrar:hover{background:var(--belk-paper-alt,#F5F8FC)} }
.mmj-hoja-cerrar svg{width:22px; height:22px}
.mmj-hoja-cerrar:focus-visible{outline:2px solid var(--belk-paper-brand,#143A7D); outline-offset:-2px}
.mmj-hoja-cuerpo{
  flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column; gap:12px;
  padding:16px 20px calc(20px + env(safe-area-inset-bottom, 0px)); font-size:clamp(0.9375rem, 0.92rem + 0.1vw, 1rem);
}
.mmj-hoja-opciones{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px}
.mmj-hoja-opciones .mmj-tarjeta{min-height:96px}
.mmj-hoja .mmj-carrusel{margin-inline:-20px}
.mmj-hoja .tgr{min-height:48px; padding:0; gap:12px}
.mmj-hoja .tgr .lb{flex:1; display:flex; align-items:center; min-height:48px; font-size:clamp(0.9375rem, 0.92rem + 0.1vw, 1rem); font-weight:600}
.mmj-hoja .tg{width:52px; height:48px}
.mmj-hoja .tg .sl{top:12px; bottom:12px; left:0; right:0}
.mmj-hoja .tg .sl::after{width:18px; height:18px}
.mmj-hoja .tg input:checked+.sl::after{transform:translateX(28px)}
.mmj-hoja .tg input:focus-visible+.sl{outline:2px solid var(--belk-paper-brand,#143A7D); outline-offset:2px}
.mmj-hoja .belk-btn{font-size:15px; min-height:48px; min-width:48px; white-space:normal}
.mmj-hoja .mmj-ab-flecha{width:48px; height:48px; padding:0; border-radius:50%}
.mmj-hoja .mmj-ab-flecha svg{width:22px; height:22px}
.mmj-hoja .mmj-ab-quitar{margin-left:auto}
@media (min-width:900px){
  /* En PC, un panel a la derecha (sin asa: no se arrastra). */
  .mmj-hoja{inset:0 0 0 auto; width:min(440px, 92vw); height:100dvh; max-height:none; border-radius:var(--belk-radius,1rem) 0 0 var(--belk-radius,1rem); transform:translateX(100%)}
  .mmj-hoja[data-alto="alta"]{height:100dvh; max-height:none}
  .mmj-hoja-asa{display:none}
  .mmj-hoja-cab{padding-top:12px; cursor:default; touch-action:auto}
}

/* El porqué: una línea que se toca (abre la hoja). */
.mmj-porque{
  display:flex; align-items:center; gap:12px; width:100%; min-height:56px; padding:8px 14px; cursor:pointer; text-align:left; font:inherit;
  border-radius:var(--belk-radius,1rem); background:var(--belk-paper-alt,#F5F8FC); color:var(--belk-paper-text,#0D2350);
  border:1px solid var(--belk-paper-border,rgba(13,35,80,.10)); transition:border-color var(--belk-transition,.18s ease);
}
.mmj-porque[hidden]{display:none}
@media (hover:hover){ .mmj-porque:hover{border-color:var(--belk-paper-brand,#143A7D)} }
.mmj-porque:focus-visible{outline:3px solid var(--belk-paper-brand,#143A7D); outline-offset:2px}
.mmj-porque > svg{flex:none; width:24px; height:24px; color:var(--belk-paper-brand,#143A7D)}
.mmj-porque-txt{min-width:0; display:flex; flex-direction:column}
.mmj-porque-titulo{font-size:clamp(0.9375rem, 0.92rem + 0.1vw, 1rem); font-weight:800}
.mmj-porque-uno{font-size:clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem); color:var(--belk-paper-muted,#414B5C); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* ── 5. «Para ti»: las sugerencias, en una fila que se desliza ── */
.mmj-parati{
  display:flex; gap:8px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; scrollbar-width:none;
  margin-inline:-16px; padding:2px 16px 4px; scroll-padding-inline:16px;
}
.mmj-parati[hidden]{display:none}
.mmj-parati::-webkit-scrollbar{display:none}
.mmj-chip{
  flex:0 0 auto; max-width:min(80%, 320px); scroll-snap-align:start; display:flex; align-items:center; gap:10px;
  min-height:56px; padding:8px 16px 8px 8px; cursor:pointer; text-align:left; font:inherit;
  border-radius:var(--belk-radius,1rem); background:var(--belk-paper-alt,#F5F8FC); color:var(--belk-paper-text,#0D2350);
  border:1px solid var(--belk-paper-border,rgba(13,35,80,.10));
  transition:border-color var(--belk-transition,.18s ease), transform .12s ease;
  -webkit-touch-callout:none;
}
@media (hover:hover){ .mmj-chip:hover{border-color:var(--belk-paper-brand,#143A7D)} }
.mmj-chip:active{transform:scale(.97)}
.mmj-chip:focus-visible{outline:3px solid var(--belk-paper-brand,#143A7D); outline-offset:2px}
/* La chispa: el único naranjo de la pantalla (un dibujo, no texto). */
.mmj-chip-ico{
  flex:none; width:36px; height:36px; padding:7px; border-radius:50%;
  color:var(--belk-accent,#E87722); background:var(--belk-paper,#FFFFFF); border:1px solid var(--belk-paper-border,rgba(13,35,80,.10));
}
.mmj-chip-txt{min-width:0; display:flex; flex-direction:column; gap:2px}
.mmj-chip-txt strong{font-size:clamp(0.9375rem, 0.92rem + 0.1vw, 1rem); font-weight:700; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mmj-chip-txt small{font-size:clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem); line-height:1.25; color:var(--belk-paper-muted,#414B5C);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}

/* ── 6. La barra de reacciones (mantener presionado) ── */
.mmj-reacciones{
  position:fixed; z-index:60; display:flex; gap:4px; padding:6px; border-radius:999px;
  background:var(--belk-paper,#FFFFFF); color:var(--belk-paper-text,#0D2350);
  border:1px solid var(--belk-paper-border,rgba(13,35,80,.10)); box-shadow:var(--belk-shadow-2,0 8px 24px rgba(13,35,80,.16));
  opacity:0; transform:translateY(8px) scale(.92); transform-origin:center bottom;
  transition:opacity .14s ease, transform .2s cubic-bezier(.16,1,.3,1);
  touch-action:none; user-select:none; -webkit-touch-callout:none;
}
.mmj-reacciones.is-abierta{opacity:1; transform:none}
.mmj-reaccion{
  position:relative; width:56px; height:56px; display:grid; place-items:center; padding:0; cursor:pointer;
  border:0; border-radius:50%; background:var(--belk-paper-alt,#F5F8FC); color:var(--belk-paper-brand,#143A7D);
  transition:transform .14s cubic-bezier(.16,1,.3,1), background var(--belk-transition,.18s ease);
}
.mmj-reaccion-dibujo{width:36px; height:36px}
.mmj-reaccion.is-encima, .mmj-reaccion:focus-visible{transform:translateY(-10px) scale(1.3); background:var(--belk-paper-sunken,#E9F0F9); z-index:1}
.mmj-reaccion:focus-visible{outline:2px solid var(--belk-paper-brand,#143A7D); outline-offset:2px}
@media (hover:hover){ .mmj-reaccion:hover{background:var(--belk-paper-sunken,#E9F0F9)} .mmj-reaccion:hover .mmj-reaccion-txt{opacity:1} }
/* El nombre sale sobre la opción que está bajo el dedo. */
.mmj-reaccion-txt{
  position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); white-space:nowrap; pointer-events:none;
  padding:4px 10px; border-radius:999px; font-size:13px; font-weight:700;
  background:var(--belk-paper-text,#0D2350); color:var(--belk-paper,#FFFFFF); opacity:0; transition:opacity .12s ease;
}
.mmj-reaccion.is-encima .mmj-reaccion-txt, .mmj-reaccion:focus-visible .mmj-reaccion-txt{opacity:1}
.mmj-lienzo, .mmj-carta{-webkit-user-select:none; user-select:none}

/* ── 7. El aviso con «Deshacer», sobre la cápsula ── */
.mmj-toast{
  position:fixed; z-index:21; left:max(16px, env(safe-area-inset-left, 0px)); right:max(16px, env(safe-area-inset-right, 0px));
  bottom:calc(12px + 56px + 10px + env(safe-area-inset-bottom, 0px));
  display:flex; align-items:center; gap:8px; min-height:52px; padding:4px 4px 4px 16px; border-radius:var(--belk-radius,1rem);
  background:var(--belk-paper-text,#0D2350); color:var(--belk-paper,#FFFFFF); box-shadow:var(--belk-shadow-2,0 8px 24px rgba(13,35,80,.16));
  font-size:15px; line-height:1.3; visibility:hidden; opacity:0; transform:translateY(8px);
  transition:opacity .1s ease, transform .1s ease, visibility 0s linear .1s;
}
.mmj-toast.is-visible{visibility:visible; opacity:1; transform:none; transition:opacity .14s ease, transform .14s cubic-bezier(.16,1,.3,1), visibility 0s}
.mmj-toast-txt{flex:1; min-width:0; overflow-wrap:anywhere}
.mmj-toast-btn{
  flex:none; display:inline-flex; align-items:center; gap:6px; min-height:48px; min-width:48px; padding:0 14px; cursor:pointer;
  border:0; border-radius:12px; background:none; font:inherit; font-weight:800; color:var(--belk-accent,#E87722);
}
.mmj-toast-btn[hidden]{display:none}
.mmj-toast-btn svg{width:20px; height:20px}
.mmj-toast-btn:focus-visible{outline:2px solid var(--belk-paper,#FFFFFF); outline-offset:-2px}

/* ── 8. Cargas con esqueleto brillante (mismo tamaño final: nada salta) ── */
.mmj-lienzo canvas{position:relative; z-index:1}
.mmj-lienzo .mm-vacio{z-index:2}
.mmj-lienzo[data-carga]::before, .mmj-estilo-foto::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(100deg, transparent 30%, var(--belk-paper,#FFFFFF) 50%, transparent 70%) 0 0 / 220% 100% no-repeat,
    var(--belk-paper-alt,#F5F8FC);
  animation:mmj-brillo 1.3s linear infinite;
}
.mmj-estilo-foto{position:relative; background:var(--belk-paper-alt,#F5F8FC)}
.mmj-estilo-foto img{position:relative; z-index:1; opacity:0; transition:opacity .2s ease}
.mmj-estilo-foto img.is-lista{opacity:1}
@keyframes mmj-brillo{from{background-position:120% 0, 0 0} to{background-position:-120% 0, 0 0}}

/* ── 9. Entre pantallas: el panel desliza y funde; lo elegido se encoge a su segmento ── */
.mmj-cuerpo{view-transition-name:mmj-panel}
.mmj-pregunta{view-transition-name:mmj-pregunta}
::view-transition-old(root), ::view-transition-new(root){animation:none}
::view-transition-old(mmj-capsula){display:none}
::view-transition-new(mmj-capsula), ::view-transition-group(mmj-capsula){animation:none}
::view-transition-group(mmj-panel), ::view-transition-group(mmj-pregunta){animation-duration:.22s; animation-timing-function:cubic-bezier(.16,1,.3,1)}
::view-transition-old(mmj-panel), ::view-transition-old(mmj-pregunta){animation:mmj-sale .14s cubic-bezier(.4,0,1,1) both}
::view-transition-new(mmj-panel), ::view-transition-new(mmj-pregunta){animation:mmj-llega .22s cubic-bezier(.16,1,.3,1) both}
html[data-mm-dir="atras"]::view-transition-old(mmj-panel), html[data-mm-dir="atras"]::view-transition-old(mmj-pregunta){animation-name:mmj-sale-atras}
html[data-mm-dir="atras"]::view-transition-new(mmj-panel), html[data-mm-dir="atras"]::view-transition-new(mmj-pregunta){animation-name:mmj-llega-atras}
::view-transition-group(mmj-elegida){animation-duration:.26s; animation-timing-function:cubic-bezier(.16,1,.3,1); z-index:30}
@keyframes mmj-sale{to{opacity:0; transform:translateX(-20px)}}
@keyframes mmj-llega{from{opacity:0; transform:translateX(20px)}}
@keyframes mmj-sale-atras{to{opacity:0; transform:translateX(20px)}}
@keyframes mmj-llega-atras{from{opacity:0; transform:translateX(-20px)}}
/* Sin View Transitions: un fundido de 150 ms. */
.mmj-cuerpo.is-entra, .mmj-pregunta.is-entra{animation:mmj-funde .15s ease-out}
@keyframes mmj-funde{from{opacity:0}}

/* ── 10. Adam escribe: tres puntitos antes de cada frase ── */
.mm-anf-burbuja.is-escribe{display:inline-flex; align-items:center; min-height:38px; padding:8px 16px; font-size:0; line-height:0; color:transparent}
.mm-anf-puntos{display:inline-flex; gap:5px}
/* La burbuja va en el flujo (debajo del 3D): guarda el alto de la frase, que ya va adentro
   invisible, y lo de abajo no salta al llegar. */
.mm .mmj-adam .mm-anf-burbuja.is-escribe{position:relative; display:block; font-size:15px; line-height:1.35}
.mm .mmj-adam .mm-anf-burbuja.is-escribe .mm-anf-puntos{position:absolute; left:14px; top:50%; transform:translateY(-50%)}
.mm-anf-puntos i{width:7px; height:7px; border-radius:50%; background:var(--belk-paper-muted,#414B5C); animation:mmj-tecla .3s ease-in-out infinite alternate}
.mm-anf-puntos i:nth-child(2){animation-delay:.1s}
.mm-anf-puntos i:nth-child(3){animation-delay:.2s}
@keyframes mmj-tecla{from{opacity:.35; transform:none} to{opacity:1; transform:translateY(-3px)}}

/* ── Teléfono: barra y 3D (46 % del alto, igual en todas las pantallas) quedan arriba ── */
@media (max-width:899px){
  .mmj-lienzo, .mm[data-pantalla="inicio"] .mmj-lienzo, .mm[data-pantalla="listo"] .mmj-lienzo{height:max(46svh, 280px); min-height:0}
  .mm[data-v2]:not([data-pantalla="inicio"]) .mmj-barra{
    position:sticky; top:0; z-index:8; margin-inline:-16px; padding-inline:16px;
    background:var(--belk-paper,#FFFFFF); color:var(--belk-paper-text,#0D2350);
  }
  .mm[data-v2]:not([data-pantalla="inicio"]):not([data-pantalla="listo"]):not([data-pantalla="aberturas"]):not([data-pantalla="tomas"]):not([data-pantalla="medidas"]) .mmj-escenario{
    position:sticky; top:48px; z-index:7; padding-bottom:4px;
    background:var(--belk-paper,#FFFFFF); color:var(--belk-paper-text,#0D2350);
  }
  /* con el teclado abierto el 3D se suelta */
  .mm[data-v2]:has(.mmj-cuerpo input:focus) .mmj-escenario{position:static}
  .mmj{touch-action:pan-y pinch-zoom}
}
/* PC: la cápsula y su aviso, bajo la columna de las opciones (400 px). */
@media (min-width:900px){
  .mmj-nav, .mmj-toast{left:max(16px, calc((100vw - 1280px) / 2 + 16px)); right:auto; width:400px}
  .mmj-nav{bottom:24px}
  .mmj-toast{bottom:calc(24px + 56px + 10px)}
  .mmj-carrusel{margin-inline:0}
  .mmj-parati{margin-inline:0; padding-inline:0}
}
/* PC (20-oct): en los estilos se ven tres tarjetas, la del centro entera y sus vecinas casi
   enteras (≈ 2,6), no una sola con los bordes cortados. En el teléfono, como siempre. */
@media (min-width:900px){
  .mmj-opciones--color .mmj-carrusel::before, .mmj-opciones--color .mmj-carrusel::after{flex-basis:calc(32cqi - 12px)}
  .mmj-opciones--color .mmj-carta{flex-basis:36cqi; min-height:0}
  .mmj-opciones--color .mmj-carta .mmj-estilo-foto{height:72px; border-radius:10px}
  .mmj-opciones--color .mmj-carta.mmj-tarjeta--estilo{font-size:14px; padding:6px 6px 8px; gap:4px}
}

@media (prefers-reduced-motion: reduce){
  .mmj-carta, .mmj-chip, .mmj-capsula-ir, .mmj-hoja, .mmj-hoja::backdrop, .mmj-reacciones, .mmj-reaccion, .mmj-toast, .mmj-toast.is-visible,
  .mmj-seg > i, .mmj-estilo-foto img{transition:none}
  .mmj-carta{transform:none}
  .mmj-seg.is-aqui > i::after, .mmj-sub.is-aqui > i::after, .mmj-sig-txt.is-cambia, .mmj-capsula-ir.is-pulso::after,
  .mmj-lienzo[data-carga]::before, .mmj-estilo-foto::before, .mm-anf-puntos i, .mmj-cuerpo.is-entra, .mmj-pregunta.is-entra{animation:none}
  .mmj-reaccion.is-encima, .mmj-reaccion:focus-visible{transform:none}
  .mmj-carrusel{scroll-behavior:auto}
}
/* Lo que recibe el foco (Tab o «ir a») nunca queda bajo la barra, el 3D y Adam de arriba (88 px: su frase de hasta dos líneas) ni bajo la cápsula. */
html:has(.mm[data-v2]){scroll-padding-bottom:calc(96px + env(safe-area-inset-bottom, 0px))}
@media (max-width:899px){
  html:has(.mm[data-v2]:not([data-pantalla="inicio"]):not([data-pantalla="listo"]):not([data-pantalla="aberturas"]):not([data-pantalla="tomas"]):not([data-pantalla="medidas"])){
    scroll-padding-top:calc(56px + max(46svh, 280px) + 88px)
  }
}
/* Sin 3D (el equipo no puede): el aviso en una franja corta, que no queda pegada arriba. */
.mm[data-v2] .mmj-lienzo:has(> #mmjVacio:not([hidden])){height:160px; min-height:0}
.mm[data-v2] .mmj-escenario:has(#mmjVacio:not([hidden])){position:relative; top:auto}
/* La bienvenida: «Empezar» con la misma forma de la cápsula (una sola acción, en píldora). */
.mm .mmj-empezar, .mm .mmj-memoria-botones .belk-btn{border-radius:999px; min-height:56px}
.mm .mmj-empezar{box-shadow:var(--belk-shadow-2,0 8px 24px rgba(13,35,80,.16))}

/* El botón de la voz dice con palabras si Adam habla (dueño, 20-oct): ícono + «Voz: sí / no».
   Píldora, mismo alto que antes (48 px en teléfono, 44 en PC). Solo Mi mueble: el taller no tiene voz. */
.mm .mmj-barra .mmj-sonido{width:auto; padding:0 14px 0 12px; gap:6px; border-radius:999px}
.mm .mmj-sonido .mmj-sonido-txt{font-size:.875rem; font-weight:600; white-space:nowrap}
.mm .mmj-sonido[aria-pressed="false"] .mmj-sonido-txt{color:var(--belk-paper-muted,#414B5C)}

/* La marca de Belk en la barra (22-oct, pedido del dueño): el logo chico arriba a la izquierda,
   antes del nombre del taller, en la portada y en todas las pantallas. Solo Mi mueble (el taller
   ya lo tiene en su encabezado). PC: logo + «Belk Solutions», como .phdr-brand, y una raya fina
   lo separa del taller. Teléfono (27-oct): logo + «Belk» — solo el ícono parecía el botón ☰ —;
   « Solutions» queda para el lector de pantalla. El nombre del taller cede ese ancho (con «…»),
   para que los puntos y «Voz: sí/no» no se achiquen. */
.mm .mmj-marca{
  flex:none; display:flex; align-items:center; gap:8px; white-space:nowrap;
  font-size:14px; font-weight:700; color:var(--belk-paper-text,#0D2350);
}
.mm .mmj-marca img{display:block; width:24px; height:24px}
.mm .mmj-marca + .mmj-para{padding-left:12px; border-left:1px solid var(--belk-paper-border,rgba(13,35,80,.10))}
@media (max-width:899px){
  .mm .mmj-marca-sol{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  /* 76 px = lo que ocupa la marca (logo 24 + 8 + «Belk» ≈ 32) + el espacio de 12 */
  .mm .mmj-marca + .mmj-para{max-width:calc(40% - 76px); padding-left:0; border-left:0}
  /* En la portada sobra ancho (los puntos todavía no se ven): ahí va con su nombre entero, salvo
     que llegue el del taller, que manda (en 320 px los dos no caben enteros). */
  .mm[data-pantalla="inicio"] .mmj-marca:has(+ .mmj-para[hidden]) .mmj-marca-sol{position:static; width:auto; height:auto; overflow:visible; clip:auto}
}