/* Menú de móvil: la hamburguesa se alarga en una escalera hasta abajo; al tocar una opción, el muñeco baja hasta su peldaño y se abre la página */
.nav .menu-movil { width:58px !important; height:40px !important; border-radius:999px !important; border:0; padding:0; background:#0f0f0f; color:#fff; cursor:pointer; position:relative; }
.menu-movil .barras { display:flex; flex-direction:column; gap:6px; width:30px; margin:0 auto; }
.menu-movil .barras i { display:block; height:3px; border-radius:1px; background:currentColor; }
body.menu-abierto .nav .menu-movil { background:transparent; color:#0f0f0f; }
body.menu-abierto .nav .menu-movil::before { content:'CERRAR'; position:absolute; right:calc(100% + 6px); top:50%; transform:translateY(-50%); font:600 11px ui-monospace, monospace; letter-spacing:.12em; color:#0f0f0f; }

.panel-movil { position:fixed; inset:0; z-index:46; background:#f7f7f7; display:none; font-family:Inter, system-ui, sans-serif; overflow:hidden; }
body.menu-abierto .panel-movil { display:block; }
body.menu-abierto { overflow:hidden; }
body.menu-abierto .nav { z-index:47; }
body.menu-abierto .tubo { visibility:hidden; }

/* la escalera: mismos peldaños que las barras, mismo ancho, hasta abajo */
.escalera { position:absolute; top:0; pointer-events:none; }
.escalera i { position:absolute; left:0; right:0; height:3px; border-radius:1px; background:#0f0f0f; transform:scaleX(0); transition:transform .12s ease; }
.panel-movil.lista .escalera i { transform:scaleX(1); }
.escalera b { position:absolute; top:0; bottom:0; width:1.5px; background:#0f0f0f; transform-origin:top; transform:scaleY(0); transition:transform .45s ease; }
.panel-movil.lista .escalera b { transform:scaleY(1); }

/* opciones, cada una a la altura de un peldaño, con una línea de puntos hasta la escalera */
.panel-movil .opcion-m { position:absolute; left:clamp(16px,4vw,56px); display:flex; align-items:center; gap:10px; font-size:30px; font-weight:500; letter-spacing:-.03em; color:#0f0f0f; text-decoration:none; transform:translateY(-50%); white-space:nowrap; }
.panel-movil .opcion-m.act { color:#d6106f; }
.panel-movil .opcion-m .puntos { position:absolute; top:50%; height:0; border-top:2px dotted rgba(15,15,15,.25); }
.panel-movil .opcion-m.cta-m { font-size:17px; padding:11px 18px; border-radius:999px; background:#d6106f; color:#fff; }
.panel-movil .opcion-m.cta-m .puntos { border-color:rgba(214,16,111,.35); }

/* el muñeco que baja */
.escalador { position:absolute; left:0; top:0; z-index:2; image-rendering:pixelated; pointer-events:none; display:none; }