<!doctype html><html><head><meta charset=utf8><meta name=viewport content="width=device-width,initial-scale=1,viewport-fit=cover"><style>:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}</style></head><body>
<title>Questionário de Higiene das Mãos</title>
<meta name="claude:viewport-fit-sides" content="cover">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700&family=Public+Sans:wght@400;500;600&display=swap">
<style>
/* Layout: coluna única de leitura; formulário por partes, depois quadro de resultados com a mesma estrutura do quadro de variáveis do projecto. */
:root{
--bg:#EEF4F5; --surface:#FFFFFF; --fg:#0F2A30; --muted:#4A6469; --line:#CBDADD;
--accent:#0A6B7C; --accent-ink:#FFFFFF; --accent-soft:#D8EEF1;
--low:#A8302A; --low-soft:#F8E0DE; --mid:#8A5A00; --mid-soft:#FBEBC8; --high:#17703F; --high-soft:#D9F0E2;
--font-display:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;
--font-body:'Public Sans','Segoe UI',system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
--bg:#0C181B; --surface:#132227; --fg:#E3EEF0; --muted:#9DB5BA; --line:#2A4147;
--accent:#55C3D6; --accent-ink:#06222A; --accent-soft:#16363E;
--low:#FF8F86; --low-soft:#3A1B19; --mid:#F0B94A; --mid-soft:#38290A; --high:#6FD49A; --high-soft:#12301F;
color-scheme:dark;
}
}
:root[data-theme="dark"]{
--bg:#0C181B; --surface:#132227; --fg:#E3EEF0; --muted:#9DB5BA; --line:#2A4147;
--accent:#55C3D6; --accent-ink:#06222A; --accent-soft:#16363E;
--low:#FF8F86; --low-soft:#3A1B19; --mid:#F0B94A; --mid-soft:#38290A; --high:#6FD49A; --high-soft:#12301F;
color-scheme:dark;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:16px;line-height:1.55;
padding-block:28px 56px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.wrap{max-width:780px;margin-inline:auto;display:flex;flex-direction:column;gap:24px}
h1,h2,h3{font-family:var(--font-display);line-height:1.15;text-wrap:balance;margin:0}
h1{font-size:clamp(1.9rem,6vw,2.7rem);font-weight:700;letter-spacing:-.01em}
h2{font-size:1.3rem;font-weight:700}
h3{font-size:1.05rem;font-weight:700}