/* =====================================================================
   CELULAR (pantalla parada) — html.vertical, lo pone lienzo.js
   Lienzo de 1080 de ancho x el alto de la pantalla (var --H).
   Inicio: sólo el logo al medio. Bajás: las 3 opciones. Bajás: clientes.
   ===================================================================== */
.vertical .stage{ width:var(--W); height:var(--H); }

/* inicio: sólo el logo (estudio/creativo quedan en la compu) */
.vertical .side{ display:none; }

/* la ventana de cine: desde abajo del logo hasta arriba de "our work / contact" */
.vertical .screen{ top:420px; height:calc(var(--H) - 840px); }   /* centrada: su medio = el medio de la pantalla */

/* servicios: grandes y al medio de la ventana */
.vertical .services__list{
  top:50%; transform:translate(-50%,-50%);
  font-size:150px; line-height:126px;
}

/* clientes: más grandes, bajando solos */
.vertical .proj{ font-size:112px; line-height:112px; }

/* nav de abajo */
.vertical .footnav{ top:calc(var(--H) - 170px); font-size:74px; }

/* contacto */
.vertical .contact{ width:920px; }
.vertical .contact__ig{ font-size:118px; margin-bottom:50px; }
.vertical .contact__form{ width:900px; gap:26px; }
.vertical .cf-input{ font-size:50px; padding:18px 6px; border-bottom-width:4px; }
.vertical .cf-send{ font-size:56px; padding:18px 70px; margin-top:22px; }
.vertical .cf-ok{ font-size:48px; }

/* popup del celular: chico y al medio, sólo cuando se toca un cliente (popupCel) */
.vertical .hoverclip{ display:none; }
.vertical .hoverclip.cel{ display:block; width:620px; height:349px; transform-origin:top center;
  transform:translateY(-24px); box-shadow:0 18px 50px rgba(0,0,0,.85); }
.vertical .hoverclip.cel.show{ transform:none; }   /* baja suave desde el logo */
.vertical .hoverclip.cel.show{ pointer-events:auto; cursor:pointer; }   /* tocarlo abre el proyecto */


/* ventana Windows 98: más grande y al medio */
.vertical .w98{ width:940px; font-size:30px; padding:6px; border-width:4px; }
.vertical .w98-bar{ height:56px; font-size:30px; gap:14px; padding:0 8px 0 12px; }
.vertical .w98-ico{ width:30px; height:30px; border-width:4px; }
.vertical .w98-x{ width:46px; height:40px; font-size:26px; line-height:30px; }
.vertical .w98-menu{ font-size:28px; padding:10px 14px 12px; }
.vertical .w98-list{ height:900px; border-width:4px; }
.vertical .w98-row{ font-size:70px; padding:14px 26px 10px; }
.vertical .w98-n{ font-size:24px; }
.vertical .w98-status{ font-size:24px; margin-top:6px; }
.vertical .w98-status span{ padding:6px 12px; }

/* detalle de proyecto (pantalla completa, fuera del lienzo) */
.vertical .detail__inner{ padding:90px 16px 60px; }
.vertical .detail__title{ font-size:44px; margin-bottom:24px; }
.vertical .detail__close{ top:22px; left:16px; font-size:24px; }
.vertical .detail__logo{ width:96px; height:96px; right:10px; top:-6px; }