*{box-sizing:border-box}body{margin:0;color:#172d3d;background:#edf1f4;font-family:Arial,Helvetica,sans-serif}header{height:94px;padding:20px 32px;display:flex;align-items:center;gap:16px;background:#fff;border-bottom:1px solid #d9e0e5}.mark{width:46px;height:46px;background:#193d50;color:white;display:grid;place-items:center;font-size:18px;font-weight:bold;border-radius:10px}h1{font-size:21px;margin:0 0 6px;font-weight:600}p{font-size:13px;letter-spacing:1px;margin:0;color:#536878}p span{margin:0 8px;color:#a7b4bd}.label{margin-left:auto;font-size:12px;letter-spacing:1.5px;color:#5e737f}main{position:relative;height:calc(100dvh - 94px);min-height:380px}canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}.hint{position:absolute;top:22px;width:100%;text-align:center;font-size:14px;color:#526776;pointer-events:none;padding:0 20px}nav{position:absolute;bottom:max(22px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;max-width:96%}.views,.actions{display:flex;gap:4px;padding:5px;border-radius:12px;background:#ffffffed;border:1px solid #d4dfe5;box-shadow:0 4px 20px #193d5010}button{border:0;background:transparent;color:#254357;padding:12px 16px;border-radius:8px;font-size:14px;white-space:nowrap;cursor:pointer;min-height:44px}button:hover{background:#eaf0f4}button.active,button[aria-pressed=true]{background:#193d50;color:white}button:focus-visible{outline:3px solid #008db1;outline-offset:2px}#status{position:absolute;z-index:2;top:45%;left:50%;transform:translate(-50%,-50%);padding:20px 28px;border-radius:12px;background:white;box-shadow:0 8px 35px #193d5020;text-align:center;width:max-content;max-width:85%;font-size:16px}#status[hidden]{display:none}@media(max-width:600px){header{height:80px;padding:16px;gap:12px}h1{font-size:18px}.label{display:none}main{height:calc(100dvh - 80px)}.hint{font-size:13px;top:18px}button{padding:11px 10px;font-size:13px}nav{bottom:max(16px,env(safe-area-inset-bottom))}.views{gap:0}p{font-size:12px}}

/* Tecnomaf header: logo centered independently of project text. */
header{position:relative;height:112px}.project{min-width:0}.customer{font-size:16px;font-weight:700;letter-spacing:.8px;color:#193d50;margin:0 0 6px}.brand-logo{position:absolute;width:clamp(210px,25vw,350px);height:auto;left:50%;top:50%;transform:translate(-50%,-50%);overflow:hidden}main{height:calc(100dvh - 112px)}
@media(max-width:1000px){header>.label,header>.mark{display:none}}
@media(max-width:760px){header{height:146px;padding:64px 18px 12px;gap:12px}.brand-logo{width:235px;top:12px;transform:translateX(-50%)}header .mark{display:none}h1{font-size:18px;margin-bottom:4px}.customer{font-size:15px;margin-bottom:4px}main{height:calc(100dvh - 146px)}}