/* LabPronto — landing em formato de quiz.
   Layout: uma tela só. Em cima, a impressão real do programa em movimento com a frase de venda;
   embaixo, a pergunta e as respostas. Em tela larga, tudo fica numa coluna de celular centralizada.
   A última tela (resultado) rola. */
:root {
  --ink: #0d1014;          /* fundo, o mesmo dos anúncios */
  --ink-2: #161c25;        /* cartões */
  --line: #2d3644;         /* bordas */
  --paper: #f4f1ea;        /* texto */
  --mute: #a4acb8;         /* texto de apoio */
  --sun: #ffd23f;          /* destaque da marca */
  --sun-ink: #14110a;      /* texto sobre o destaque */
  --go: #25d366;           /* botão do WhatsApp */
  --go-ink: #052b14;
  --bad: #ff8f80;          /* erro de preenchimento */
  --sheet: #ffffff;        /* papel fotográfico */
  --app-blue: #14427e;     /* botão selecionado do programa */
  --app-green: #1d5a2b;    /* START do programa */
  --app-grey: #c9c9c9;     /* painel do programa */
  --app-ink: #16181b;
  --app-c: #19a7c9; --app-m: #c81e8c; --app-y: #e0c21c; --app-d: #6d6d6d;
  --veil-top: rgba(13, 16, 20, .50);
  --veil-mid: rgba(13, 16, 20, .12);
  --veil-low: rgba(13, 16, 20, .88);
  --glow: rgba(46, 74, 110, .55);
  --shadow: rgba(0, 0, 0, .55);
  --display: "Archivo Black", "Arial Black", Impact, sans-serif;
  --text: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, Consolas, Menlo, monospace;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
html { padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--text); font-size: 15px; line-height: 1.4; overflow: hidden; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }

.app { position: relative; height: 100%; overflow: hidden; isolation: isolate;
       background: radial-gradient(120% 60% at 50% 0%, var(--glow) 0%, transparent 62%), var(--ink); }

/* ---------- cena de fundo ---------- */
.bg { position: absolute; inset: 0; z-index: 0; }
.scene { position: absolute; inset: 0 0 auto 0; height: 58%; max-width: 460px; margin: 0 auto; opacity: 0; transition: opacity .55s ease;
         transform-origin: 50% 0; scale: var(--k, 1); translate: 0 calc((1 - var(--k, 1)) * 46px); }
.scene.on { opacity: 1; }
.shade { --cut: 50%; position: absolute; inset: 0; z-index: 1; pointer-events: none; transition: opacity .4s;
         background: linear-gradient(180deg, var(--veil-top) 0, var(--veil-mid) 64px, var(--veil-mid) calc(var(--cut) - 120px), var(--veil-low) calc(var(--cut) - 4px), var(--ink) calc(var(--cut) + 72px)); }

/* peças que imitam o programa */
.appbtn { position: absolute; left: max(16px, 7%); top: 50px; padding: 6px 16px 7px; text-align: center; line-height: 1.15;
          background: var(--app-grey); color: var(--app-ink); border: 2px solid var(--app-ink); }
.appbtn b { display: block; font: 800 17px var(--text); }
.appbtn span { font: 600 10px var(--mono); }
.cursor { position: absolute; width: 26px; height: 26px; filter: drop-shadow(0 3px 4px var(--shadow)); }
.cursor path { fill: var(--sheet); stroke: var(--app-ink); }

/* cena 1: a folha de 3x4 sendo montada */
.sheet { position: absolute; left: 50%; top: 104px; width: min(80%, 360px); aspect-ratio: 3 / 2; translate: -50% 0; rotate: -5deg;
         background: var(--sheet); box-shadow: 0 26px 60px var(--shadow); }
.tile { position: absolute; width: 25%; height: 50%; background-image: url("img/cartela.jpg"); background-size: 400% 200%;
        animation: pop 6.4s cubic-bezier(.2, .9, .25, 1) infinite both; }
.tile:nth-child(1) { left: 0;   top: 0;   background-position: 0% 0%;        animation-delay: -3.2s; }
.tile:nth-child(2) { left: 25%; top: 0;   background-position: 33.333% 0%;   animation-delay: -3.04s; }
.tile:nth-child(3) { left: 50%; top: 0;   background-position: 66.666% 0%;   animation-delay: -2.88s; }
.tile:nth-child(4) { left: 75%; top: 0;   background-position: 100% 0%;      animation-delay: -2.72s; }
.tile:nth-child(5) { left: 0;   top: 50%; background-position: 0% 100%;      animation-delay: -2.56s; }
.tile:nth-child(6) { left: 25%; top: 50%; background-position: 33.333% 100%; animation-delay: -2.4s; }
.tile:nth-child(7) { left: 50%; top: 50%; background-position: 66.666% 100%; animation-delay: -2.24s; }
.tile:nth-child(8) { left: 75%; top: 50%; background-position: 100% 100%;    animation-delay: -2.08s; }
@keyframes pop {
  0%   { opacity: 0; scale: .55; }
  7%   { opacity: 1; scale: 1; }
  80%  { opacity: 1; scale: 1; }
  88%  { opacity: 0; scale: 1; }
  100% { opacity: 0; scale: .55; }
}
#scene-1 .appbtn { animation: press 6.4s steps(1, end) infinite both; animation-delay: -3.2s; }
@keyframes press {
  0%  { background: var(--app-grey); color: var(--app-ink); }
  3%  { background: var(--app-blue); color: var(--sheet); }
  86% { background: var(--app-grey); color: var(--app-ink); }
}
#scene-1 .cursor { left: max(16px, 7%); top: 50px; translate: 86px 34px; animation: click 6.4s ease-in-out infinite both; animation-delay: -3.2s; }
@keyframes click {
  0%   { translate: 150px 96px; }
  3%   { translate: 86px 34px; scale: .82; }
  6%   { translate: 86px 34px; scale: 1; }
  80%  { translate: 86px 34px; }
  100% { translate: 150px 96px; }
}

/* cena 2: as impressões saindo, uma sobre a outra */
.print { position: absolute; background-color: var(--sheet); background-size: cover; background-position: center;
         box-shadow: 0 22px 50px var(--shadow); animation: out 7s cubic-bezier(.2, .85, .25, 1) infinite both; }
.print.p1 { left: 5%;  top: 104px; width: 37%; aspect-ratio: 882 / 1200; rotate: -9deg; background-image: url("img/pol1.jpg");  animation-delay: -3.6s; }
.print.p2 { left: 31%; top: 70px;  width: 39%; aspect-ratio: 2 / 3;      rotate: 3deg;  background-image: url("img/f1015.jpg"); animation-delay: -3.2s; }
.print.p3 { left: 59%; top: 112px; width: 36%; aspect-ratio: 882 / 1200; rotate: 10deg; background-image: url("img/pol2.jpg");  animation-delay: -2.8s; }
@keyframes out {
  0%   { translate: 0 130%; opacity: 0; }
  3%   { opacity: 1; }
  13%  { translate: 0 0; opacity: 1; }
  82%  { translate: 0 0; opacity: 1; }
  92%  { translate: 0 -14%; opacity: 0; }
  100% { translate: 0 130%; opacity: 0; }
}

/* cena 3: correção da foto, antes e depois */
.knobs { position: absolute; left: max(16px, 7%); top: 50px; display: flex; gap: 4px; }
.knob { width: 50px; padding: 4px 0 0; text-align: center; background: var(--app-grey); color: var(--app-ink); border: 1px solid var(--app-ink);
        font: 600 9px var(--text); letter-spacing: .04em; }
.knob b { display: block; font: 800 15px var(--text); letter-spacing: 0; padding-bottom: 3px; }
.knob::after { content: ""; display: block; height: 5px; background: var(--app-d); }
.knob.c::after { background: var(--app-c); }
.knob.m::after { background: var(--app-m); }
.knob.y::after { background: var(--app-y); }
.knob.hot b { animation: bump 6.5s ease-in-out infinite both; animation-delay: -1.4s; }
@keyframes bump { 0%, 12%, 100% { scale: 1; } 5% { scale: 1.35; } }
.ed { position: absolute; left: 50%; top: 116px; width: min(50%, 210px); aspect-ratio: 3 / 4; translate: -50% 0; rotate: 3deg;
      border: 8px solid var(--sheet); background: var(--sheet); box-shadow: 0 26px 60px var(--shadow); overflow: hidden; }
.ed-a, .ed-b { position: absolute; inset: 0; background: url("img/ed.jpg") center / cover; }
.ed-a { filter: saturate(.45) brightness(.7) contrast(.9) sepia(.35); }
.ed-b { animation: wipe 6.5s ease-in-out infinite both; animation-delay: -1.4s; }
.ed-line { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: var(--sheet); box-shadow: 0 0 10px var(--shadow);
           animation: wipeline 6.5s ease-in-out infinite both; animation-delay: -1.4s; }
@keyframes wipe {
  0%   { clip-path: inset(0 0 0 100%); }
  45%  { clip-path: inset(0 0 0 0%); }
  82%  { clip-path: inset(0 0 0 0%); }
  100% { clip-path: inset(0 0 0 100%); }
}
@keyframes wipeline {
  0%   { left: 100%; opacity: 1; }
  45%  { left: 0%; opacity: 1; }
  50%  { left: 0%; opacity: 0; }
  82%  { left: 0%; opacity: 0; }
  86%  { left: 0%; opacity: 1; }
  100% { left: 100%; opacity: 1; }
}

/* cena 4: START e a foto saindo da impressora */
.startbtn { position: absolute; right: max(16px, 7%); top: 50px; padding: 9px 24px; background: var(--app-green); color: var(--sheet);
            border: 2px solid var(--app-ink); font: 800 18px var(--text); letter-spacing: .14em;
            animation: go 6.5s ease-out infinite both; animation-delay: -3.4s; }
@keyframes go { 0%, 9%, 100% { scale: 1; filter: brightness(1); } 4% { scale: .93; filter: brightness(1.5); } }
#scene-4 .cursor { right: max(16px, 7%); top: 50px; translate: -18px 28px; animation: click4 6.5s ease-in-out infinite both; animation-delay: -3.4s; }
@keyframes click4 {
  0%   { translate: -120px 110px; }
  4%   { translate: -18px 28px; scale: .82; }
  7%   { translate: -18px 28px; scale: 1; }
  82%  { translate: -18px 28px; }
  100% { translate: -120px 110px; }
}
.slot { position: absolute; left: 50%; top: 112px; width: min(60%, 260px); height: 16px; translate: -50% 0; border-radius: 9px;
        background: linear-gradient(180deg, var(--app-ink), var(--line)); border: 1px solid var(--line); box-shadow: 0 6px 18px var(--shadow); }
.feed { position: absolute; left: 50%; top: 120px; width: min(42%, 180px); aspect-ratio: 2 / 3; translate: -50% 0; overflow: hidden; }
.outprint { position: absolute; inset: 0; border: 6px solid var(--sheet); background: var(--sheet) url("img/out.jpg") center / cover;
            animation: feed 6.5s linear infinite both; animation-delay: -3.4s; }
@keyframes feed {
  0%   { translate: 0 -102%; opacity: 1; }
  8%   { translate: 0 -102%; opacity: 1; }
  44%  { translate: 0 0; opacity: 1; }
  86%  { translate: 0 0; opacity: 1; }
  94%  { translate: 0 0; opacity: 0; }
  100% { translate: 0 -102%; opacity: 0; }
}

/* ---------- coluna do quiz ---------- */
.col { position: relative; z-index: 2; height: 100%; max-width: 460px; margin: 0 auto; display: flex; flex-direction: column; overflow-y: auto;
       padding-block: 12px 16px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.top { display: flex; align-items: center; gap: 12px; flex: none; }
.back { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--ink-2); font-size: 18px; line-height: 1; }
.bar { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.bar i { height: 4px; border-radius: 2px; background: var(--line); transition: background .3s; }
.bar i.on { background: var(--sun); }
/* logo: três fotos formando o L e a quarta, a que ficou pronta, em amarelo */
.brand { flex: none; display: flex; align-items: center; gap: 7px; font: 400 15px var(--display); letter-spacing: -.01em; color: var(--paper); }
.mark { width: 20px; height: 20px; flex: none; }
.mark .t { fill: var(--paper); }
.mark .y { fill: var(--sun); }

.stage { flex: 1 1 auto; min-height: 150px; display: flex; align-items: flex-end; }
.pitch { margin: 0 0 14px; font: 400 clamp(25px, 7.4vw, 33px)/1.04 var(--display); letter-spacing: -.01em; text-wrap: balance; text-shadow: 0 2px 18px var(--ink); }
.pitch em, .win em { font-style: normal; color: var(--sun); }

.ask { flex: none; display: flex; flex-direction: column; gap: 12px; }
.q { margin: 0; font: 800 20px/1.2 var(--text); text-wrap: balance; }
.hint { margin: -6px 0 0; color: var(--mute); font-size: 13px; }
.hint.err { color: var(--bad); margin: 0; }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.opt { min-width: 0; min-height: 48px; padding: 6px 12px; text-align: left; border: 1px solid var(--line); border-radius: 12px; background: var(--ink-2);
       display: flex; flex-direction: column; justify-content: center; gap: 1px; transition: border-color .15s, background .15s, color .15s; }
.opt strong { font: 700 14.5px/1.2 var(--text); }
.opt small { font-size: 11.5px; line-height: 1.25; color: var(--mute); }
.opt:hover { border-color: var(--sun); }
.opt.wide { grid-column: 1 / -1; min-height: 42px; background: transparent; border-style: dashed; align-items: center; }
.opt.pick { align-items: center; text-align: center; min-height: 50px; }
.opt.pick strong { font-size: 16px; }
.opt.pick.wide { background: var(--ink-2); border-style: solid; }
.opt[aria-pressed="true"], .opt.pick.wide[aria-pressed="true"] { background: var(--sun); border-color: var(--sun); color: var(--sun-ink); }
.opt[aria-pressed="true"] small { color: var(--sun-ink); }

.fl { display: grid; gap: 4px; }
.fl span { font-size: 12.5px; font-weight: 600; color: var(--mute); }
.field { width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--ink-2); font-size: 16px; }
.field::placeholder { color: var(--mute); opacity: .7; }
.field[aria-invalid="true"] { border-color: var(--bad); }
.hp { position: absolute; left: -5000px; width: 1px; height: 1px; opacity: 0; }

.go { display: grid; place-items: center; height: 52px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--sun); color: var(--sun-ink);
      font: 800 16px var(--text); text-decoration: none; text-align: center; }
.go:disabled { background: var(--line); color: var(--mute); cursor: not-allowed; }
.go.ghost { background: transparent; border: 1px solid var(--line); color: var(--paper); }
.go.wa { background: var(--go); color: var(--go-ink); height: 56px; font-size: 17px; }
.link { align-self: center; padding: 8px 12px; border: 0; background: none; color: var(--mute); font-size: 13.5px; text-decoration: underline; }

/* ---------- resultado ---------- */
.col.result .stage { display: none; }
.col.result .ask { padding-top: 26px; gap: 14px; }
.tag { align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: var(--sun); color: var(--sun-ink); font: 800 11px var(--text); letter-spacing: .12em; }
.tag.quiet { background: transparent; color: var(--mute); border: 1px solid var(--line); }
.win { margin: 0; font: 400 clamp(30px, 9vw, 40px)/1.02 var(--display); letter-spacing: -.01em; text-wrap: balance; overflow-wrap: anywhere; }
.lead { margin: 0; font-size: 16.5px; line-height: 1.45; max-width: 34em; }
.h { margin: 14px 0 0; font: 800 12px var(--text); letter-spacing: .14em; color: var(--mute); }
.steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; counter-reset: n; }
.steps li { counter-increment: n; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; padding: 11px 12px;
            border: 1px solid var(--line); border-radius: 12px; background: var(--ink-2); }
.steps li::before { content: counter(n); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--line); font: 800 13px var(--text); }
.steps b { font-weight: 700; }
.steps span { color: var(--mute); font-size: 13.5px; }
.addr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.addr code { font: 700 14px var(--mono); color: var(--sun); user-select: all; overflow-wrap: anywhere; }
.copy { height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line); background: transparent; font-size: 12.5px; font-weight: 700; }
.shot { margin: 0; display: grid; gap: 6px; }
.shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--app-grey); }
.shot figcaption { color: var(--mute); font-size: 13px; }
.facts { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.facts li { padding-left: 18px; position: relative; font-weight: 600; }
.facts li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; background: var(--sun); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips span { padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; }

.swap { animation: rise .35s ease both; }
@keyframes rise { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }

@media (max-height: 600px) {
  .stage { min-height: 110px; }
  .pitch { font-size: 23px; margin-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .tile, .appbtn, .cursor, .print, .swap, .knob b, .ed-b, .ed-line, .startbtn, .outprint { animation: none !important; }
  .ed-line { left: 50%; }
  .ed-b { clip-path: inset(0 0 0 50%); }
  .scene { transition: none; }
}