:root{
  --bg:#efe8f4;
  --paper:#ffffff;
  --purple:#351446;
  --purple-2:#5c2b76;
  --green:#65d887;
  --green-2:#4fcf76;
  --text:#27192e;
  --muted:#746a79;
  --line:#e7e0ea;
  --shadow:0 18px 60px rgba(52,20,70,.12);
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;min-height:100%;background:linear-gradient(180deg,#efe8f4 0%,#f7f3f9 56%,#eee6f3 100%);overflow-x:hidden}
body{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  -webkit-tap-highlight-color:transparent;
}
button{font:inherit}
.kiosk{width:100%;min-height:100dvh}
.screen{display:none;min-height:100dvh;width:100%}
.screen.active{display:block}

.screen-inner{
  width:min(100%,820px);
  min-height:100dvh;
  margin:0 auto;
  padding:max(26px,env(safe-area-inset-top)) 34px max(22px,env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  gap:22px;
}
.center{justify-content:center;align-items:center;text-align:center}
.logo{display:block;object-fit:contain}
.logo-lg{width:320px;max-width:62vw;filter:drop-shadow(0 3px 10px rgba(53,20,70,.18))}
.logo-sm{width:178px;height:94px;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(53,20,70,.18))}
.center-logo{margin:0 auto}

.hero-stack{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.eyebrow{
  font-size:17px;
  font-weight:900;
  letter-spacing:.14em;
  color:var(--purple-2);
  margin:0 0 10px;
}
h1,h2,p{margin-top:0}
h1{
  font-size:clamp(60px,7vw,92px);
  line-height:.98;
  letter-spacing:-.055em;
  margin-bottom:22px;
  color:var(--purple);
}
h1 span{color:var(--green-2)}
h2{
  font-size:clamp(43px,5vw,66px);
  line-height:1.03;
  letter-spacing:-.04em;
  color:var(--purple);
  margin:0;
}
.lead{
  font-size:clamp(22px,2.2vw,30px);
  line-height:1.48;
  color:var(--muted);
  max-width:680px;
}
.lead.small{font-size:clamp(18px,1.8vw,24px)}

.screen-header{
  display:flex;
  align-items:center;
  gap:22px;
  justify-content:space-between;
  min-height:90px;
}
.screen-header.compact{margin-bottom:0}
.progress-block{flex:1;max-width:540px}
.progress-meta{
  display:flex;
  justify-content:space-between;
  font-size:18px;
  font-weight:850;
  color:var(--muted);
  margin-bottom:9px;
}
.progress{height:10px;background:#e8e1eb;border-radius:999px;overflow:hidden}
.progress>div{height:100%;background:linear-gradient(90deg,var(--green),#a5efbb);width:25%;transition:.2s}

.quiz-stage{
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:34px;
  padding:5vh 0 4vh;
}
.question-zone{text-align:center}
.compact-zone{padding-top:0}
.answers{
  width:min(100%,640px);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
.answer{
  width:100%;
  min-height:92px;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--paper);
  color:var(--purple);
  font-size:clamp(26px,2.5vw,34px);
  font-weight:900;
  text-align:center;
  cursor:pointer;
  box-shadow:0 10px 28px rgba(52,20,70,.05);
  transition:.16s;
}
.answer:active{
  transform:scale(.987);
  background:#f3fff6;
  border-color:#9ae4b0
}

.btn{
  border:0;
  border-radius:18px;
  min-height:74px;
  padding:0 28px;
  font-size:clamp(21px,2vw,28px);
  font-weight:950;
  letter-spacing:.01em;
  cursor:pointer;
}
.btn.primary{background:var(--green);color:#17251b}
.btn.secondary{background:#fff;color:var(--purple);border:1px solid var(--line)}
.btn.wide{width:min(100%,620px)}

.action-group{
  width:100%;
  display:grid;
  gap:12px;
  justify-items:center;
  margin-top:8px;
}
.step-pill{
  font-size:16px;
  font-weight:900;
  letter-spacing:.12em;
  color:var(--purple-2);
  background:#ede6f0;
  border-radius:999px;
  padding:11px 16px;
}

.camera-card{width:100%;max-width:640px;margin:0 auto}
.camera-view{
  position:relative;
  width:100%;
  aspect-ratio:3/4;
  max-height:60dvh;
  border-radius:28px;
  overflow:hidden;
  background:#1d1521;
  box-shadow:var(--shadow)
}
.camera-view video,.camera-view>img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:center center;
  transform:scaleX(-1);background:#1d1521
}
.face-guide{
  position:absolute;left:50%;top:47%;
  transform:translate(-50%,-50%);
  width:74%;height:80%;
  border:3px dashed rgba(255,255,255,.9);
  border-radius:38% 38% 24% 24%/28% 28% 18% 18%;
  box-shadow:0 0 0 999px rgba(41,19,49,.07);
  pointer-events:none
}
.status{
  min-height:23px;
  text-align:center;
  color:var(--muted);
  font-size:18px;
  margin:10px 0 0
}

.poster-shell{
  width:min(100%,520px);
  margin:0 auto;
  border-radius:26px;
  overflow:hidden;
  box-shadow:var(--shadow);
  background:#221228
}
.poster-shell canvas{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:2/3
}
.result-mini{text-align:center;display:grid;gap:5px}
.result-mini strong{font-size:30px;color:var(--purple)}
.result-mini span{font-size:18px;color:var(--muted)}

.nps-stage,.delivery-stage{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px
}
#nps .screen-inner{
  position:relative;
  isolation:isolate;
  overflow:hidden
}
#nps .screen-inner::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:linear-gradient(rgba(248,245,250,.93),rgba(248,245,250,.96)),url("assets/official/layout-09.png") center/cover no-repeat;
  opacity:.34
}
#nps .screen-inner::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(circle at 50% 28%,rgba(87,224,130,.17),transparent 34%)
}
.nps-logo-halo{
  display:grid;place-items:center;padding:14px 26px;border-radius:999px;
  background:var(--purple);box-shadow:0 14px 38px rgba(58,12,83,.18)
}
.nps-logo-halo .logo{margin:0;filter:drop-shadow(0 3px 8px rgba(0,0,0,.16))}
.nps-scale-wrap{width:min(96vw,980px);margin-top:12px}
.nps-grid{
  width:100%;display:grid;grid-template-columns:repeat(11,minmax(52px,1fr));
  gap:10px
}
.nps-grid button{
  min-height:68px;border-radius:18px;border:2px solid rgba(58,12,83,.14);
  background:#fff;color:var(--purple);font-weight:950;font-size:27px;cursor:pointer;
  box-shadow:0 8px 20px rgba(58,12,83,.06);transition:.16s ease
}
.nps-grid button:active,.nps-grid button.selected{
  transform:translateY(-2px) scale(1.04);background:var(--green);border-color:var(--green);color:#16211a
}
.nps-labels{display:flex;justify-content:space-between;margin-top:10px;padding:0 3px;color:var(--muted);font-size:15px;font-weight:800}

.qr-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:26px;
  padding:24px;
  box-shadow:var(--shadow);
  width:min(100%,420px)
}
.qr-box{display:grid;place-items:center;min-height:290px}
.qr-box canvas{width:280px!important;height:280px!important}
.delivery-actions{
  width:100%;
  display:grid;
  gap:12px;
  justify-items:center
}

.brand-footer{
  margin-top:auto;
  width:100%;
  text-align:center;
  font-size:15px;
  font-weight:700;
  color:#958b9b;
  padding-top:12px
}

/* Totem alto: evita perguntas no topo e botões no chão */
@media (min-height:1000px){
  .quiz-stage{padding-top:9vh;padding-bottom:8vh}
  .question-zone{margin-bottom:10px}
  .answers{gap:16px}
  .answer{min-height:100px}
  .action-group{margin-top:18px}
}

/* Totem muito alto: amplia tudo sem criar vazio excessivo */
@media (min-height:1350px){
  .screen-inner{width:min(100%,900px);padding-left:42px;padding-right:42px}
  .quiz-stage{padding-top:11vh;padding-bottom:9vh;gap:45px}
  .logo-sm{width:178px;height:94px;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(53,20,70,.18))}
  h2{font-size:68px}
  .answer{min-height:112px;font-size:36px}
  .btn{min-height:82px;font-size:29px}
  .poster-shell{width:min(100%,570px)}
}

/* Mobile continua funcionando */
@media (max-width:640px){
  .screen-inner{padding:18px 16px 16px;gap:15px}
  .logo-lg{width:320px;max-width:62vw;filter:drop-shadow(0 3px 10px rgba(53,20,70,.18))}
  .logo-sm{width:178px;height:94px;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(53,20,70,.18))}
  .eyebrow{font-size:12px}
  h1{font-size:48px}
  h2{font-size:34px}
  .lead{font-size:17px}
  .lead.small{font-size:14px}
  .screen-header{min-height:58px;gap:14px}
  .progress-meta{font-size:12px}
  .progress{height:7px}
  .quiz-stage{padding:4vh 0 3vh;gap:24px}
  .answer{min-height:72px;font-size:19px}
  .btn{min-height:58px;font-size:16px}
  .camera-view{max-height:62dvh}
  .poster-shell{width:min(100%,420px)}
  .result-mini strong{font-size:20px}
  .result-mini span{font-size:13px}
  .nps-scale-wrap{width:100%;overflow-x:auto;padding-bottom:5px}
  .nps-grid{min-width:680px;gap:7px}
  .nps-grid button{min-height:58px;font-size:20px;border-radius:13px}
  .brand-footer{font-size:11px}
  .qr-box canvas{width:230px!important;height:230px!important}
}

/* ===== V6 — ajustes validados pelos prints reais do totem ===== */
html,body,.kiosk,.screen{height:100%;height:100dvh;overflow:hidden}
.screen.active{display:block;overflow:hidden}
.screen-inner{
  height:100dvh;min-height:0;
  padding:clamp(12px,2.1vh,26px) clamp(14px,4vw,34px) clamp(10px,1.8vh,20px);
  gap:clamp(8px,1.5vh,18px);
  overflow:hidden;
}
.brand-footer{margin-top:auto;padding-top:4px;flex:0 0 auto}

/* a arte de logo é branca: sempre recebe uma base de contraste */
.logo{filter:drop-shadow(0 2px 5px rgba(25,4,35,.24))}
.logo-lg{width:320px;max-width:62vw;filter:drop-shadow(0 3px 10px rgba(53,20,70,.18))}
.logo-sm{width:178px;height:94px;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(53,20,70,.18))}

/* intro: usa a altura toda sem empurrar o botão para baixo */
#intro .screen-inner{justify-content:center}
#intro .hero-stack{gap:clamp(7px,1.2vh,13px)}
#intro h1{font-size:clamp(45px,6.5vh,82px);margin-bottom:clamp(7px,1.5vh,18px)}
#intro .lead{margin-bottom:clamp(8px,1.4vh,18px)}

/* quiz: cabeçalho + pergunta + 4 respostas + rodapé sempre dentro de 100dvh */
#quiz .screen-header{min-height:0;height:clamp(54px,8vh,88px);flex:0 0 auto}
#quiz .quiz-stage{
  flex:1;min-height:0;padding:0;
  display:grid;grid-template-rows:auto minmax(0,1fr);
  align-content:center;gap:clamp(14px,2.4vh,28px)
}
#quiz .question-zone{align-self:end;margin:0}
#quiz h2{font-size:clamp(31px,4.7vh,60px)}
#quiz .answers{
  align-self:start;width:min(100%,680px);gap:clamp(9px,1.4vh,15px)
}
#quiz .answer{
  min-height:0;height:clamp(58px,8.3vh,96px);
  font-size:clamp(19px,2.8vh,31px);border-radius:18px
}

/* câmera compacta: ações nunca ficam fora da tela */
#camera .screen-header{min-height:0;height:clamp(52px,7vh,78px)}
#camera .compact-zone{flex:0 0 auto}
#camera .compact-zone h2{font-size:clamp(29px,4.3vh,52px)}
#camera .compact-zone .lead{margin-bottom:0}
#camera .camera-card{flex:1;min-height:0;display:flex;flex-direction:column}
#camera .camera-view{flex:1;min-height:220px;max-height:none;aspect-ratio:auto;border-radius:22px}
#camera .action-group{flex:0 0 auto;margin:0;gap:8px}
#camera .btn{min-height:clamp(50px,6.5vh,68px)}

/* resultado: poster e os DOIS botões visíveis sem rolagem */
#result .screen-header{min-height:0;height:clamp(48px,6.4vh,70px);flex:0 0 auto}
#result .poster-shell{
  flex:1;min-height:0;width:auto;max-width:100%;margin:0 auto;
  aspect-ratio:2/3;display:flex;align-items:center;justify-content:center
}
#result .poster-shell canvas{height:100%;width:auto;max-width:100%;object-fit:contain}
#result .result-mini{flex:0 0 auto;margin:0;gap:2px}
#result .result-mini strong{font-size:clamp(17px,2.4vh,24px)}
#result .result-mini span{font-size:clamp(10px,1.5vh,14px)}
#result .action-group{flex:0 0 auto;margin:0;gap:7px}
#result .btn{min-height:clamp(46px,6vh,62px);font-size:clamp(14px,2vh,20px)}

/* NPS: 11 notas SEM scroll lateral */
#nps .screen-inner{justify-content:center}
#nps .nps-stage{width:100%;max-width:780px;gap:clamp(8px,1.5vh,18px)}
#nps .nps-logo-halo{margin:0 auto 4px;background:transparent;padding:0}
#nps h2{font-size:clamp(30px,4.5vh,54px)}
#nps .nps-scale-wrap{width:100%;overflow:visible;padding:0}
#nps .nps-grid{
  width:100%;min-width:0!important;
  display:grid;grid-template-columns:repeat(11,minmax(0,1fr));
  gap:clamp(3px,.75vw,9px)
}
#nps .nps-grid button{
  width:100%;min-width:0;aspect-ratio:1/1;min-height:0!important;
  padding:0;border-radius:50%;font-size:clamp(14px,2.4vw,25px);font-weight:950
}
#nps .nps-labels{font-size:clamp(10px,1.5vh,15px);margin-top:7px}

/* entrega também cabe inteira */
#qr .delivery-stage{width:100%;max-width:620px;gap:clamp(7px,1.3vh,15px)}
#qr .qr-card{padding:clamp(8px,1.2vh,14px)}
#qr .qr-box canvas{width:min(27vh,260px)!important;height:min(27vh,260px)!important}
#qr .delivery-actions{gap:7px}
#qr .btn{min-height:clamp(48px,6.2vh,64px)}

@media (max-width:640px){
  .screen-inner{padding:10px 10px 9px;gap:8px}
  .logo-lg{width:320px;max-width:62vw;filter:drop-shadow(0 3px 10px rgba(53,20,70,.18))}
  .logo-sm{width:178px;height:94px;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(53,20,70,.18))}
  .eyebrow{font-size:10px;margin-bottom:5px}
  #quiz .quiz-stage{gap:12px}
  #quiz .answers{gap:9px}
  #quiz .answer{height:clamp(54px,8.1vh,72px);min-height:0;font-size:18px}
  #result .poster-shell{width:auto;max-height:none}
  #result .action-group{gap:6px}
  #nps .nps-grid{gap:3px}
  #nps .nps-grid button{font-size:13px;border-radius:50%}
  #nps .nps-scale-wrap{overflow:visible!important}
  .brand-footer{font-size:9px}
}

.screen-header{
  background:rgba(91,43,118,.06);
  border-radius:22px;
  padding:8px 14px;
}
@media(max-width:640px){
  .logo-lg{width:220px;max-width:68vw}
  .logo-sm{width:120px;height:66px}
}