Escala del iPhone con la altura real de la barra de vista previa (sin recorte a 1440x900)

Co-Authored-By: Claude Opus 5.5 <[email protected]>

css/iphone.css

@@ -21,11 +21,11 @@
 
 @supports (scale: calc(1vh / 1px)) {
   :root {
-    /* 150 px = toolbar + barra-movil + aire; 352 px = editor mínimo + aire.
+    /* toolbar + barra-movil (alturas reales, js/ux.js) + aire; 352 px = editor mínimo + aire.
        px/px → número (requisito de scale()); min/max solo comparan números. */
     --wam-escala: max(.3, min(
       1,
-      (100vh - 150px) / 852px,
+      (100vh - var(--wam-toolbar-alto, 57px) - var(--wam-barra-alto, 48px) - 44px) / 852px,
       (100vw - 352px) / 393px
     ));
   }
@@ -100,7 +100,7 @@ body.presentacion #barra-movil { display: none; }
 #barra-movil {
   flex: none;
   width: 100%;
-  max-width: 560px;
+  max-width: 820px;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -125,6 +125,7 @@ body.presentacion #barra-movil { display: none; }
   font-weight: 700;
   letter-spacing: .12em;
   text-transform: uppercase;
+  white-space: nowrap;
   color: var(--wam-texto-suave);
 }
 #btn-reproducir {

js/ux.js

@@ -917,9 +917,18 @@
     var fijar = function () {
       document.documentElement.style.setProperty("--wam-toolbar-alto", Math.ceil(tb.getBoundingClientRect().height) + "px");
     };
+    var barra = porId("barra-movil");
+    var fijarBarra = function () {
+      if (!barra) return;
+      var r = barra.getBoundingClientRect();
+      if (r.height) document.documentElement.style.setProperty("--wam-barra-alto", Math.ceil(r.height + 14) + "px");
+    };
     fijar();
-    if (typeof ResizeObserver === "function") new ResizeObserver(fijar).observe(tb);
+    fijarBarra();
-    else window.addEventListener("resize", fijar);
+    if (typeof ResizeObserver === "function") {
+      new ResizeObserver(fijar).observe(tb);
+      if (barra) new ResizeObserver(fijarBarra).observe(barra);
+    } else window.addEventListener("resize", function () { fijar(); fijarBarra(); });
   }
 
   /* ------------------------------------------------------------------