/* =============================================================
   totem de foto — bode do nô / burguer do nô
   paleta oficial do manual de identidade visual v1.0
   ============================================================= */

:root {
  /* Primárias */
  --c-marrom-terra:    #3A1907;
  --c-marrom-cangaco:  #AB9580;
  --c-bege-palha:      #EBDDD9;
  --c-preto-sertao:    #160D09;

  /* Acentos */
  --c-vermelho-caju:   #BF341D;
  --c-bege-pitomba:    #D6A572;
  --c-amarelo-serig:   #E6A22E;
  --c-laranja-frevo:   #CF7834;

  /* Tipografia */
  --font-display: 'RumPlakat', 'Georgia', serif;
  --font-body:    'Brother1816', system-ui, sans-serif;

  /* Layout */
  --pad: clamp(20px, 2.6vw, 48px);
  /* === KNOBS DE ESCALA PRA TV (RETRATO 1080×1920) ===
     A TV é vertical: 1080 de largura, 1920 de altura.
     - Largura (1080) é o eixo escasso → limita a moldura DEITADA (16:9).
     - Altura (1920) é o eixo abundante → a moldura STORY (9:16) cresce nela.
     Ajuste na TV real:
     - tipografia: o font-size de html (logo abaixo) escala todo texto em rem.
     - moldura (foco): as variáveis abaixo. */
  --frame-16-9-w: min(99vw, 1400px);   /* preview deitado: cheio na TV 1080, maior em telas largas */
  --frame-9-16-h: min(76vh, 1520px);   /* preview story: aproveita a altura      */
  --frame-9-16-h-counting: min(88vh, 1740px); /* contagem: chrome some, moldura cresce */
  --radius-lg: 24px;
  --radius-md: 16px;
  --shadow-soft: 0 16px 48px rgba(0, 0, 0, 0.35);
  --shadow-cta:  0 12px 32px rgba(191, 52, 29, 0.45);
}

/* ---------- Reset enxuto ---------- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  /* KNOB DE TIPOGRAFIA: escala global do texto em rem. 100% = 16px (padrão).
     Sobe pra preencher a TV; desce se algum texto estourar a tela. */
  font-size: 112.5%;
}

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--c-marrom-terra);
  background: var(--c-bege-palha);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* === MODO QUIOSQUE — bloqueia gestos do navegador === */
  /* Desliga TODOS os gestos default: pinch-zoom, swipe, double-tap zoom,
     scroll. Click/tap continuam funcionando normal. */
  touch-action: none;
  /* Bloqueia pull-to-refresh (swipe pra baixo do topo) */
  overscroll-behavior: none;
  -webkit-overscroll-behavior: none;
  /* Long-press não abre o callout do iOS/Android (copiar, salvar imagem) */
  -webkit-touch-callout: none;
  /* Drag de elementos desativado (cliente não consegue arrastar logo, foto) */
  -webkit-user-drag: none;
  user-drag: none;
}

button {
  font-family: inherit;
  border: none;
  cursor: pointer;
  /* Tap rápido sem delay de 300ms; permite click normal */
  touch-action: manipulation;
}

img {
  display: block;
  max-width: 100%;
  /* Trava arrasto de imagem pelo touch */
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}

.star, .frame-arrow {
  touch-action: manipulation;
}

/* Totem — sem cursor, sem seleção */
#totem {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: var(--c-bege-palha) no-repeat center / cover;
  user-select: none;
  -webkit-user-select: none;
  cursor: none;
}

/* ---------- Telas ---------- */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--pad);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease;
  pointer-events: none;
}

#totem[data-screen="camera"]        .camera,
#totem[data-screen="processing"]    .processing,
#totem[data-screen="delivery"]      .delivery,
#totem[data-screen="phone-capture"] .phone-capture,
#totem[data-screen="rating"]        .rating {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Performance: as telas ficam todas no DOM (só opacity/visibility), e
   visibility:hidden NÃO pausa animação CSS. O spinner (spin infinito), as
   sparks, hearts etc. de telas escondidas seguem compositando a cada frame
   e roubam GPU do preview da câmera ao vivo (preview engasga). Pausa toda
   animação que não está na tela ativa. O cross-fade é transition, não é
   afetado. */
.screen,
.screen * { animation-play-state: paused; }

#totem[data-screen="camera"]        .camera,
#totem[data-screen="camera"]        .camera *,
#totem[data-screen="processing"]    .processing,
#totem[data-screen="processing"]    .processing *,
#totem[data-screen="delivery"]      .delivery,
#totem[data-screen="delivery"]      .delivery *,
#totem[data-screen="phone-capture"] .phone-capture,
#totem[data-screen="phone-capture"] .phone-capture *,
#totem[data-screen="rating"]        .rating,
#totem[data-screen="rating"]        .rating * { animation-play-state: running; }

.title-accent {
  color: var(--c-vermelho-caju);
}

/* ---------- Botões ---------- */
.btn {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  font-size: clamp(1.6rem, 2.4vw, 2.4rem);
  padding: clamp(22px, 2.8vh, 34px) clamp(44px, 5.5vw, 76px);
  border-radius: 999px;
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.3s ease,
              background 0.2s ease;
  cursor: none;
}

.btn-primary {
  background: var(--c-vermelho-caju);
  color: var(--c-bege-palha);
  box-shadow: var(--shadow-cta);
}
.btn-primary:active { transform: scale(0.96); }

.btn-large {
  font-size: clamp(2.1rem, 3vw, 2.9rem);
  padding: clamp(28px, 3.4vh, 42px) clamp(56px, 7vw, 100px);
}

.cta-pulse { animation: pulse 2.6s ease-in-out infinite; }

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 12px 32px rgba(191, 52, 29, 0.45);
  }
  50% {
    transform: scale(1.04);
    box-shadow: 0 18px 56px rgba(191, 52, 29, 0.65);
  }
}

/* =============================================================
   TELA 1 — Câmera (tela inicial)
   ============================================================= */
.camera {
  justify-content: center;
  padding-top: clamp(24px, 3vh, 48px);
  gap: clamp(8px, 1.2vh, 16px);
}

.camera-logo {
  width: clamp(180px, 18vw, 320px);
  height: auto;
  filter: drop-shadow(0 0 20px rgba(58, 25, 7, 0.10));
}

.camera-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.2rem, 6.5vw, 5.5rem);
  line-height: 1.05;
  text-align: center;
  letter-spacing: -0.01em;
  color: var(--c-marrom-terra);
  margin: 0 0 clamp(4px, 0.8vh, 12px);
}

.camera-subtitle {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(1.2rem, 2.1vw, 1.9rem);
  text-align: center;
  color: var(--c-marrom-cangaco);
  margin: 0 0 clamp(4px, 0.8vh, 12px);
}

/* Mascote no canto da tela (não empurra o layout do flex) */
.camera-mascote {
  position: absolute;
  bottom: clamp(12px, 2.4vh, 36px);
  right: clamp(12px, 2.4vw, 44px);
  width: clamp(120px, 13vw, 230px);
  height: auto;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 8px 18px rgba(22, 13, 9, 0.18));
}

.camera-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 1vh, 12px);
  margin-top: clamp(4px, 0.8vh, 10px);
}

/* Toggle de formato (deitada / story) */
.format-toggle {
  display: flex;
  gap: 4px;
  background: rgba(22, 13, 9, 0.45);
  border-radius: 14px;
  padding: 4px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.format-toggle-btn {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.2rem, 1.8vw, 1.6rem);
  padding: clamp(10px, 1.4vh, 16px) clamp(20px, 2.5vw, 36px);
  border-radius: 10px;
  background: transparent;
  color: #FFFFFF;
  border: 1.5px solid transparent;
  cursor: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.format-toggle-btn.is-active {
  background: var(--c-vermelho-caju);
  color: var(--c-bege-palha);
  border-color: var(--c-vermelho-caju);
}

.format-toggle-btn .key-hint {
  font-size: 0.7em;
  background: var(--c-amarelo-serig);
  border-color: var(--c-amarelo-serig);
  color: var(--c-preto-sertao);
}
.format-toggle-btn.is-active .key-hint {
  background: var(--c-amarelo-serig);
  border-color: var(--c-amarelo-serig);
  color: var(--c-preto-sertao);
}

/* Burguer: CTA azul */
.theme-burguer .format-toggle-btn.is-active {
  background: var(--c-vermelho-caju);
  border-color: var(--c-vermelho-caju);
}

/* Burguer: título branco sobre fundo escuro */
.theme-burguer .camera-title {
  color: #FFFFFF;
}

/* ---------- Camera frame ---------- */
.camera-frame {
  position: relative;
  width: var(--frame-16-9-w);
  aspect-ratio: 16 / 9;
  background: var(--c-preto-sertao);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(255, 255, 255, 0.60);
  transition: width 0.3s ease, aspect-ratio 0.3s ease;
}

/* Moldura story: preview vira 9:16 vertical. Vídeo é posicionado no slot
   16:9 da moldura (300/1920 = 15.625% do topo, 607.5/1920 = 31.64% de altura)
   pra refletir exatamente como a foto vai sair. */
.camera-frame[data-aspect="9:16"] {
  width: auto;
  height: var(--frame-9-16-h);
  aspect-ratio: 9 / 16;
}

.camera-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1); /* selfie espelhada — natural */
  background: var(--c-preto-sertao);
}

/* Desliga mirror quando a webcam já pré-espelha o frame
   (config.json: "mirror_camera": false → app.js põe a classe). */
body.no-mirror .camera-frame video {
  transform: none;
}

/* Posição/tamanho do video no preview 9:16 e 16:9 vem das CSS vars
   --slot-top/left/width/height que app.js seta a cada applyFrame, baseado
   no slot da moldura ativa. Transition de 200ms suaviza a troca de moldura. */
.camera-frame[data-aspect="9:16"] video {
  position: absolute;
  top:    var(--slot-top,    5.21%);
  left:   var(--slot-left,   0%);
  width:  var(--slot-width,  100%);
  height: var(--slot-height, 70.31%);
  transition: top 200ms ease, left 200ms ease, width 200ms ease, height 200ms ease;
}

.camera-frame[data-aspect="16:9"] video {
  position: absolute;
  top:    var(--slot-top,    0%);
  left:   var(--slot-left,   0%);
  width:  var(--slot-width,  100%);
  height: var(--slot-height, 100%);
  transition: top 200ms ease, left 200ms ease, width 200ms ease, height 200ms ease;
}

.camera-frame {
  transition: background-color 200ms ease, width 0.3s ease, height 0.3s ease, aspect-ratio 0.3s ease;
}

.moldura-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.55;
  mix-blend-mode: normal;
}


/* Story 9:16: moldura cobre tudo fora do slot (gradiente + tarjas com texto).
   Sem semi-transparência, senão o usuário não enxerga o layout final. */
.camera-frame[data-aspect="9:16"] .moldura-preview {
  opacity: 1;
}

/* ---------- Contagem sobre o preview ao vivo ----------
   O número conta no TOPO do preview (não no centro), pra não tapar os rostos
   — o cliente se vê normalmente enquanto a contagem corre. Badge translúcido
   garante legibilidade sobre qualquer fundo. Só aparece com .is-counting. */
.frame-countdown {
  position: absolute;
  inset: 0;
  display: none;
  align-items: flex-start;     /* topo */
  justify-content: center;
  padding-top: clamp(14px, 4%, 48px);
  z-index: 3;                  /* acima do vídeo (auto) e da moldura-preview */
  pointer-events: none;
}
.camera.is-counting .frame-countdown { display: flex; }

.frame-countdown-num {
  font-family: var(--font-display);
  font-size: clamp(4rem, 12vh, 8.5rem);
  line-height: 1;
  color: #FFFFFF;
  min-width: 1.5em;
  text-align: center;
  padding: 0.08em 0.28em 0.16em;
  border-radius: 0.28em;
  /* Fundo translúcido SEM backdrop-filter: blur sobre o <video> em reprodução
     congela o preview num snapshot no Chrome (mesmo motivo do comentário na
     tela de processing). Sem blur, o cliente se vê em tempo real até a foto. */
  background: rgba(22, 13, 9, 0.55);
  /* Sombra: vazado escuro (legível sobre foto clara) + glow caju. */
  text-shadow:
    0 4px 18px rgba(22, 13, 9, 0.6),
    0 0 44px rgba(191, 52, 29, 0.5);
  animation: countPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Durante a contagem: esconde o chrome (logo/título/controles/botão) pra a
   moldura virar o foco e ter espaço pra crescer (a moldura recentraliza no
   flex e o height anima via transition). display:none evita que o espaço
   reservado empurre a moldura maior pra fora da tela. */
.camera.is-counting .camera-logo,
.camera.is-counting .camera-title,
.camera.is-counting .camera-subtitle,
.camera.is-counting .camera-mascote,
.camera.is-counting .camera-controls,
.camera.is-counting .btn-large {
  display: none;
}
.camera.is-counting .camera-frame[data-aspect="9:16"] {
  height: var(--frame-9-16-h-counting);
}

/* ---------- Seletor de molduras (tela camera) ---------- */
.frame-selector {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: clamp(16px, 2.2vh, 28px);
  background: rgba(22, 13, 9, 0.55);
  border: 1px solid rgba(58, 25, 7, 0.08);
  border-radius: 16px;
  padding: 4px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.frame-arrow {
  display: flex;
  align-items: center;
  gap: clamp(4px, 0.6vw, 8px);
  padding: clamp(12px, 1.6vh, 20px) clamp(16px, 2vw, 28px);
  border-radius: 12px;
  background: transparent;
  border: 1.5px solid transparent;
  color: var(--c-marrom-cangaco);
  cursor: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.frame-arrow:hover {
  background: rgba(214, 165, 114, 0.1);
  color: var(--c-bege-pitomba);
  border-color: rgba(214, 165, 114, 0.2);
}
.frame-arrow:active {
  transform: scale(0.95);
  background: rgba(214, 165, 114, 0.18);
}

.frame-arrow-num {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1;
  color: var(--c-bege-pitomba);
  opacity: 0.8;
  transition: opacity 0.2s ease;
}
.frame-arrow:hover .frame-arrow-num { opacity: 1; }

.frame-arrow-chevron {
  width: clamp(8px, 1vw, 12px);
  height: auto;
  opacity: 0.45;
  transition: opacity 0.2s ease, transform 0.2s ease;
  flex-shrink: 0;
}
.frame-arrow:hover .frame-arrow-chevron { opacity: 0.8; }
.frame-arrow--prev:hover .frame-arrow-chevron { transform: translateX(-2px); }
.frame-arrow--next:hover .frame-arrow-chevron { transform: translateX(2px); }

.frame-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: clamp(180px, 16vw, 280px);
  padding: 0 clamp(8px, 1.2vw, 20px);
}
.frame-label {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.2vw, 2.2rem);
  color: var(--c-bege-pitomba);
  line-height: 1;
}
.frame-count {
  font-family: var(--font-body);
  font-size: clamp(0.75rem, 1vw, 0.9rem);
  color: var(--c-marrom-cangaco);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.actions {
  display: flex;
  gap: clamp(16px, 2vw, 24px);
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

/* =============================================================
   Contagem regressiva — animação (o estilo vive em .frame-countdown,
   na seção "Camera frame", pois a contagem corre sobre o preview ao vivo).
   ============================================================= */
@keyframes countPop {
  0%   { transform: scale(0.4);  opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}

/* =============================================================
   TELA 3.5 — Processando (upload em andamento)
   ============================================================= */
/* Fundo opaco (sem backdrop-filter): o spinner anima sobre o vídeo ao vivo;
   re-borrar cada frame no GPU fraco do Mini PC trava a animação. */
.processing {
  background: var(--c-bege-palha);
  gap: 36px;
}
.processing-spinner {
  width: clamp(112px, 12vh, 152px);
  height: clamp(112px, 12vh, 152px);
  border-radius: 50%;
  border: 5px solid rgba(191, 52, 29, 0.18);
  border-top-color: var(--c-vermelho-caju);
  animation: spin 0.9s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.processing-text {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4.4vw, 4rem);
  color: var(--c-marrom-terra);
  letter-spacing: 0.01em;
}

/* =============================================================
   TELA 3.6 — Entrega: foto + escolha (WhatsApp herói x QR x tirar outra)
   ============================================================= */
.delivery {
  flex-direction: column;
  gap: clamp(16px, 2.5vh, 32px);
  padding: clamp(16px, 2.5vh, 32px);
  justify-content: center;
}
.delivery-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.delivery-photo canvas {
  max-width: 60vw;
  max-height: 50vh;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  background: var(--c-preto-sertao);
  display: block;
}
.delivery-card {
  background: rgba(255, 255, 255, 0.92);
  border: 2px solid rgba(58, 25, 7, 0.15);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 3vh, 40px);
  max-width: 900px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.5vh, 32px);
  align-items: center;
  box-shadow: var(--shadow-soft);
  text-align: center;
}
.delivery-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 6vw, 5.2rem);
  line-height: 0.98;
  color: var(--c-marrom-terra);
  letter-spacing: -0.01em;
}
.delivery-options {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.4vh, 28px);
  width: 100%;
}
.delivery-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: clamp(16px, 2.4vh, 32px) clamp(24px, 3vw, 48px);
  border-radius: var(--radius-md);
  background: var(--c-bege-palha);
  border: 2px solid var(--c-marrom-cangaco);
  color: var(--c-marrom-terra);
  cursor: none;
  transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
}
.delivery-option:active { transform: scale(0.97); }
.delivery-option .key-hint {
  position: absolute;
  top: clamp(10px, 1.4vh, 16px);
  left: clamp(12px, 1.6vw, 20px);
  background: var(--c-marrom-terra);
  color: var(--c-bege-palha);
  font-size: clamp(1.4rem, 2.4vw, 2.2rem);
  border-radius: 10px;
}
.delivery-option-label {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 1;
  color: var(--c-marrom-terra);
}
.delivery-option-sub {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.5vw, 1.35rem);
  color: var(--c-marrom-terra);
  opacity: 0.8;
}
/* ---- Kill switch ------------------------------------------------------
   "ativo": false em brands/totens.json apaga o totem no próximo probe. Cobre
   a tela inteira porque a máquina roda em kiosk: não existe "sair". */
#totem[data-off]::after {
  content: "totem em manutenção";
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-preto-sertao);
  color: var(--c-bege-palha);
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 4rem);
  text-align: center;
}

/* ---- Overlay de operador ---------------------------------------------
   Diagnóstico de campo sem teclado: [/] três vezes. Deliberadamente feio e
   monoespaçado — é ferramenta de manutenção, não parte da peça. */
.ops-overlay { display: none; }
.ops-overlay.is-visible {
  display: block;
  position: fixed;
  top: 2vh;
  left: 2vw;
  z-index: 9999;
  max-width: 42ch;
  padding: 1.5rem 2rem;
  background: rgba(0, 0, 0, 0.92);
  color: #7CFC9B;
  font-family: ui-monospace, "Consolas", monospace;
  font-size: 1.15rem;
  line-height: 1.6;
  border: 2px solid #7CFC9B;
  border-radius: 8px;
}
.ops-overlay h2 { margin: 0 0 0.75rem; font-size: 1.3rem; letter-spacing: 0.1em; }
.ops-overlay dl { display: grid; grid-template-columns: auto 1fr; gap: 0.1rem 1.5rem; margin: 0; }
.ops-overlay dt { opacity: 0.65; }
.ops-overlay dd { margin: 0; word-break: break-all; }
.ops-overlay p { margin: 1rem 0 0; opacity: 0.5; }

/* ---- Degradação offline ----------------------------------------------
   Sem internet o totem continua tirando foto e mandando no zap (a fila
   segura tudo), mas o QR não tem como funcionar: não existe URL pública de
   uma foto que ainda não subiu. Em vez de gerar um QR quebrado, a opção
   apaga e diz o porquê. O estado vem do probe real ao servidor (js/pwa.js),
   não do navigator.onLine. */
.delivery-option-sub--offline { display: none; }
#totem[data-net="off"] .delivery-option--qr {
  opacity: 0.35;
  filter: grayscale(1);
  pointer-events: none;
}
#totem[data-net="off"] .delivery-option--qr .delivery-option-sub { display: none; }
#totem[data-net="off"] .delivery-option--qr .delivery-option-sub--offline {
  display: block;
}

/* WhatsApp = herói: usa o CTA primário, que já vira verde (copa) / vermelho
   (namorados) / azul (burguer) via --c-vermelho-caju sobrescrito por tema. */
.delivery-option--whatsapp {
  background: var(--c-vermelho-caju);
  border-color: var(--c-vermelho-caju);
  box-shadow: var(--shadow-cta);
}
.delivery-option--whatsapp .delivery-option-label {
  color: #FFFFFF;
}
.delivery-option--whatsapp .delivery-option-sub {
  color: rgba(255, 255, 255, 0.9);
  opacity: 1;
}
.delivery-option--whatsapp .key-hint {
  background: rgba(255, 255, 255, 0.95);
  color: var(--c-marrom-terra);
}
/* "tirar outra" = ação secundária: borda tracejada, mas texto legível. */
.delivery-option--retake {
  background: transparent;
  border-style: dashed;
  border-color: var(--c-marrom-cangaco);
}
.delivery-option--retake .delivery-option-label {
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  opacity: 0.85;
}

/* =============================================================
   TELA 3.7 — Captura de telefone (numpad)
   ============================================================= */
.phone-card {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(58, 25, 7, 0.10);
  border-radius: var(--radius-lg);
  padding: clamp(40px, 5.5vh, 80px);
  max-width: 900px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3.5vh, 40px);
  align-items: center;
  box-shadow: var(--shadow-soft);
  text-align: center;
}

.phone-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.2rem, 6.5vw, 5.6rem);
  line-height: 0.95;
  color: var(--c-bege-pitomba);
  letter-spacing: -0.01em;
}

.phone-cta-alert {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.1;
  color: var(--c-vermelho-caju);
  letter-spacing: 0.01em;
  margin: -8px 0 0;
}

.phone-subtitle {
  font-family: var(--font-body);
  font-size: clamp(1.15rem, 1.7vw, 1.6rem);
  line-height: 1.55;
  color: var(--c-marrom-terra);
}

.phone-display {
  font-family: var(--font-body);
  font-size: clamp(3rem, 5.5vw, 5rem);
  font-weight: 700;
  color: var(--c-marrom-terra);
  background: rgba(255, 255, 255, 0.60);
  border: 3px solid rgba(58, 25, 7, 0.15);
  border-radius: var(--radius-md);
  padding: clamp(20px, 2.8vh, 36px) clamp(32px, 4vw, 56px);
  letter-spacing: 0.04em;
  min-width: 10ch;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.phone-display.is-placeholder {
  color: rgba(58, 25, 7, 0.20);
}

.phone-error {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  color: var(--c-vermelho-caju);
  background: rgba(191, 52, 29, 0.08);
  border: 2px solid var(--c-vermelho-caju);
  border-radius: var(--radius-md);
  padding: clamp(10px, 1.4vh, 16px) clamp(16px, 2vw, 24px);
  margin: 0;
  text-align: center;
  font-weight: 600;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.2s ease, max-height 0.25s ease, padding 0.2s ease;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
}

.phone-error.is-visible {
  opacity: 1;
  max-height: 100px;
  padding-top: clamp(10px, 1.4vh, 16px);
  padding-bottom: clamp(10px, 1.4vh, 16px);
  border-width: 2px;
}

.phone-keys-hint,
.rating-keys-hint {
  display: flex;
  gap: clamp(20px, 3vw, 40px);
  justify-content: center;
  flex-wrap: wrap;
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.5vw, 1.35rem);
  color: rgba(58, 25, 7, 0.50);
}

.phone-capture .actions {
  margin-top: 8px;
  justify-content: center;
}

/* ---------- Key hints (badges de tecla do numpad) ---------- */
.key-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.8em;
  height: 1.8em;
  padding: 0 0.35em;
  background: rgba(58, 25, 7, 0.10);
  border: 2px solid rgba(58, 25, 7, 0.20);
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 0.7em;
  font-weight: 700;
  color: var(--c-marrom-terra);
  vertical-align: middle;
  line-height: 1;
  letter-spacing: 0;
}

.btn-primary .key-hint {
  background: rgba(255, 255, 255, 0.20);
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--c-bege-palha);
}

/* =============================================================
   Título/subtítulo herdados da antiga tela result — usados na rating
   (.rating-qr-title / .rating-qr-subtitle compõem com eles).
   ============================================================= */
.result-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.8rem, 7vw, 6.4rem);
  line-height: 0.95;
  color: var(--c-marrom-terra);
}

.result-subtitle {
  font-family: var(--font-body);
  font-size: clamp(1.3rem, 1.8vw, 1.65rem);
  line-height: 1.35;
  color: var(--c-marrom-terra);
  font-weight: 500;
}

/* QR grande, é o protagonista da tela */
.qr-big {
  width: clamp(300px, 32vw, 400px);
  height: clamp(300px, 32vw, 400px);
  background: var(--c-bege-palha);
  padding: 22px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}
.qr-big img,
.qr-big canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.rating-timer {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 4.5vw, 3.8rem);
  color: #FFFFFF;
  margin-top: clamp(4px, 0.8vh, 12px);
  letter-spacing: 0.04em;
}

/* =============================================================
   TELA 5 — Avaliação (estrelas)
   ============================================================= */
.rating-card {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(58, 25, 7, 0.10);
  border-radius: var(--radius-lg);
  padding: clamp(40px, 5.5vh, 80px);
  max-width: 920px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: var(--shadow-soft);
  position: relative;
}

.rating-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 2.8vh, 36px);
  width: 100%;
}

.rating-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.2rem, 6.5vw, 5.6rem);
  line-height: 0.95;
  color: var(--c-bege-pitomba);
  letter-spacing: -0.01em;
  margin: 0;
}

.rating-subtitle {
  font-family: var(--font-body);
  font-size: clamp(1.15rem, 1.7vw, 1.6rem);
  line-height: 1.5;
  color: var(--c-marrom-terra);
  max-width: 640px;
  margin: 0;
  opacity: 0.92;
}

.stars {
  display: flex;
  gap: clamp(6px, 0.8vw, 14px);
  justify-content: center;
  align-items: center;
  margin: clamp(6px, 1vh, 12px) 0;
}

.star {
  font-size: clamp(72px, 9vw, 132px);
  line-height: 1;
  background: transparent;
  color: rgba(58, 25, 7, 0.18);
  border: none;
  padding: clamp(6px, 0.8vw, 14px);
  cursor: pointer;
  transition: color 0.18s ease, transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
              text-shadow 0.2s ease;
  font-family: 'Georgia', serif;
}

.star:active { transform: scale(0.92); }

.star.is-active {
  color: var(--c-amarelo-serig);
  text-shadow: 0 0 24px rgba(230, 162, 46, 0.55);
  transform: scale(1.06);
}

.rating-label {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 3.4vw, 3rem);
  color: var(--c-marrom-terra);
  min-height: 1.2em;
  line-height: 1.1;
  margin: 0;
  transition: opacity 0.2s ease;
}


.rating .actions {
  margin-top: clamp(8px, 1.5vh, 18px);
  justify-content: center;
}

.rating .btn-primary[disabled] {
  opacity: 0.42;
  pointer-events: none;
  box-shadow: none;
}


/* ---------- Rating layout: QR à esquerda + card à direita ---------- */
.rating-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(32px, 4vw, 64px);
  width: 100%;
  max-width: 1400px;
  position: relative;
  z-index: 1;
}

.rating-qr-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 1.5vh, 20px);
  text-align: center;
}

.rating-qr-title {
  margin: 0;
}
.rating-qr-subtitle {
  margin: 0;
}

/* Entrega por WhatsApp: a foto já chega no zap → o QR fica redundante.
   Esconde o lado do QR e mostra a confirmação no lugar. */
.rating-whatsapp-note { display: none; }
#totem[data-delivery="whatsapp"] .rating-qr-side       { display: none; }
#totem[data-delivery="whatsapp"] .rating-whatsapp-note { display: flex; }

.rating-whatsapp-note {
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 1.6vh, 22px);
  text-align: center;
}
.rating-wa-icon {
  width: clamp(64px, 8vw, 110px);
  height: clamp(64px, 8vw, 110px);
  color: var(--c-amarelo-serig);
}

/* Em telas pequenas/portrait, empilha vertical */
@media (max-width: 1100px), (orientation: portrait) {
  .rating-layout {
    flex-direction: column;
    gap: clamp(16px, 2vh, 28px);
  }
  .rating-qr-side .qr-big {
    width: clamp(180px, 22vw, 260px);
    height: clamp(180px, 22vw, 260px);
  }
}

/* Estado pós-envio: esconde formulário, mostra agradecimento. */
.rating-thanks {
  display: none;
  flex-direction: column;
  gap: clamp(14px, 2vh, 24px);
  align-items: center;
  padding: clamp(20px, 3vh, 40px) 0;
}

.rating-card.is-submitted .rating-form  { display: none; }
.rating-card.is-submitted .rating-thanks { display: flex; }

.rating-thanks-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(4rem, 8vw, 7rem);
  line-height: 1;
  color: var(--c-bege-pitomba);
  margin: 0;
}

.rating-thanks-text {
  font-family: var(--font-body);
  font-size: clamp(1.3rem, 1.8vw, 1.7rem);
  line-height: 1.4;
  color: var(--c-marrom-terra);
  max-width: 540px;
  margin: 0;
}

/* =============================================================
   ILUSTRAÇÕES — elementos da marca aplicados nas telas
   PNG transparente em assets/ilustracoes/. pointer-events:none
   pra nunca atrapalhar toques. Esmaecidas com opacity pra não
   roubar foco do conteúdo.
   ============================================================= */

/* ---------- Ilustração genérica de canto (delivery) ---------- */
.screen-illustration {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.25));
}

.result-illustration {
  bottom: 4%;
  right: 4%;
  width: clamp(80px, 10vw, 150px);
  opacity: 0.85;
}

/* Garante card/conteúdo acima da ilustração de canto */
.delivery-photo,
.delivery-card {
  position: relative;
  z-index: 1;
}

/* ---------- Costureira na processing (no flow, junto com spinner) ---------- */
.processing-illustration {
  width: clamp(140px, 16vw, 220px);
  height: auto;
  margin-bottom: clamp(8px, 1.5vh, 16px);
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.3));
}

/* Em portrait/telas pequenas, encolhe pra não atrapalhar */
@media (orientation: portrait), (max-height: 800px) {
  .result-illustration  { width: clamp(60px,  8vw, 110px); opacity: 0.65; }
  .processing-illustration { width: clamp(110px, 14vw, 170px); }
}

/* =============================================================
   DECORAÇÕES POR TELA — estilo cordel/xilogravura
   Estrelas 8 pontas, corações, flores sertanejas.
   Posicionados absolute fora do flow, pointer-events: none.
   ============================================================= */
.screen-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.screen-deco svg {
  position: absolute;
  fill: currentColor;
  display: block;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.18));
}

/* Estrelas */
.deco-star          { color: var(--c-amarelo-serig); opacity: 0.95; }
.deco-star--tl      { width: clamp(48px, 6vw, 88px); top: clamp(24px, 3vh, 48px);  left: clamp(24px, 3vw, 48px);  transform: rotate(-12deg); }
.deco-star--tr      { width: clamp(48px, 6vw, 88px); top: clamp(24px, 3vh, 48px);  right: clamp(24px, 3vw, 48px); transform: rotate(15deg); }
.deco-star--tl-sm   { width: clamp(32px, 4vw, 56px); top: clamp(20px, 2.5vh, 36px);  left: clamp(20px, 2.5vw, 36px);  transform: rotate(-10deg); opacity: 0.85; }
.deco-star--tr-sm   { width: clamp(32px, 4vw, 56px); top: clamp(20px, 2.5vh, 36px);  right: clamp(20px, 2.5vw, 36px); transform: rotate(8deg);   opacity: 0.85; }
.deco-star--br-sm   { width: clamp(28px, 3.5vw, 48px); bottom: clamp(80px, 10vh, 140px); right: clamp(28px, 3vw, 48px); transform: rotate(-8deg); opacity: 0.7; }

/* Corações */
.deco-heart         { color: var(--c-vermelho-caju); opacity: 0.92; }
.deco-heart--ml-sm  { width: clamp(20px, 2.4vw, 32px); top: 38%;  left: clamp(16px, 2vw, 32px); transform: rotate(-15deg); opacity: 0.6; }

/* Flores sertanejas (rosáceas tipo cordel) */
.deco-flower            { color: var(--c-laranja-frevo); opacity: 0.85; }
.deco-flower--bl-sm     { width: clamp(40px, 4.5vw, 70px); bottom: clamp(40px, 5vh, 80px); left:  clamp(20px, 2.5vw, 40px); transform: rotate(12deg); opacity: 0.7; }
.deco-flower--br-sm     { width: clamp(40px, 4.5vw, 70px); bottom: clamp(40px, 5vh, 80px); right: clamp(20px, 2.5vw, 40px); transform: rotate(-10deg); opacity: 0.7; }

/* Corações que sobem na tela processing */
.deco-heart--float-1 {
  width: 36px; color: var(--c-vermelho-caju); opacity: 0.65;
  bottom: 30%; left: 20%; animation: heart-float 3s ease-in-out infinite;
}
.deco-heart--float-2 {
  width: 28px; color: var(--c-laranja-frevo); opacity: 0.55;
  bottom: 40%; right: 22%; animation: heart-float 3s ease-in-out infinite 1s;
}
.deco-heart--float-3 {
  width: 24px; color: var(--c-amarelo-serig); opacity: 0.5;
  bottom: 35%; left: 60%; animation: heart-float 3s ease-in-out infinite 2s;
}
@keyframes heart-float {
  0%   { transform: translateY(0)     rotate(-8deg); opacity: 0; }
  20%  { opacity: 0.65; }
  100% { transform: translateY(-180px) rotate(12deg); opacity: 0; }
}

/* Garante que cards/forms fiquem ACIMA das decorações */
.phone-card, .rating-card,
.camera-frame, .frame-selector, .actions,
.delivery-photo, .delivery-card,
.processing-illustration, .processing-spinner, .processing-text {
  position: relative;
  z-index: 1;
}

/* =============================================================
   FLASH (efeito de captura)
   ============================================================= */
.flash {
  position: fixed;
  inset: 0;
  background: var(--c-bege-palha);
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition: opacity 0.4s ease;
}
.flash.fire {
  opacity: 1;
  transition: opacity 0.05s ease-in;
}

/* =============================================================
   Responsividade leve (telas menores que 1080p)
   ============================================================= */
@media (max-height: 800px) {
  .delivery-photo canvas { max-height: 42vh; }
}

@media (orientation: portrait) {
  .camera-frame { width: var(--frame-16-9-w); }

  /* Story (9:16) — foto vertical aproveita a altura, mas deixa espaço pras
     3 opções de entrega logo abaixo. */
  .delivery-photo[data-aspect="9:16"] canvas {
    max-height: 44vh;
    max-width: 70vw;
  }

  /* Horizontal (16:9) — foto "deitada" ocupa mais largura e pouca altura,
     sobrando espaço pras opções. */
  .delivery-photo[data-aspect="16:9"] canvas {
    max-height: 30vh;
    max-width: 92vw;
    width: 92vw;
    height: auto;
  }

  /* Fallback caso data-aspect não esteja setado ainda */
  .delivery-photo:not([data-aspect]) canvas {
    max-height: 44vh;
    max-width: 70vw;
  }

  .qr-big {
    width:  clamp(200px, 38vw, 300px);
    height: clamp(200px, 38vw, 300px);
    padding: 16px;
  }
}

/* =============================================================
   TEMA BURGUER — overrides de cor e contraste
   Fundo azul: textos em branco; cards: textos em azul escuro
   ============================================================= */

/* Textos diretamente no fundo azul → branco */
.theme-burguer .processing-text {
  color: #FFFFFF;
}
.theme-burguer .title-accent {
  /* --c-title-accent: sobreponível pelo bloco "cores" do config da peça */
  color: var(--c-title-accent, #326EB8);
  text-shadow: 0 2px 16px rgba(50, 110, 184, 0.4);
}

/* Decorações SVG (estrelas, flores, corações) → branco/azul claro */
.theme-burguer .deco-star   { fill: #FFFFFF; opacity: 0.5; }
.theme-burguer .deco-heart  { fill: #E8567A; }
.theme-burguer .deco-flower { fill: var(--c-vermelho-caju); opacity: 0.4; }

/* --- Cards (phone, rating) --- */
/* Card background mais escuro pra dar contraste ao texto */
.theme-burguer .phone-card,
.theme-burguer .rating-card {
  background: rgba(255, 255, 255, 0.88);
}

/* Títulos dentro dos cards → azul da marca */
.theme-burguer .phone-title,
.theme-burguer .rating-title {
  color: #326EB8;
}

/* Texto corpo dentro dos cards → azul escuro legível */
.theme-burguer .phone-subtitle,
.theme-burguer .rating-subtitle {
  color: #1E3A5F;
}

/* CTA pulse → sombra azul */
.theme-burguer .cta-pulse {
  box-shadow: 0 12px 32px rgba(50, 110, 184, 0.45);
}

/* Key hints dentro de cards → azul */
.theme-burguer .phone-card .key-hint,
.theme-burguer .rating-card .key-hint {
  background: #326EB8;
  color: #FFFFFF;
}

/* --- Telefone --- */
.theme-burguer .phone-display {
  color: #326EB8;
  border-color: rgba(50, 110, 184, 0.3);
}
.theme-burguer .phone-display.is-placeholder {
  color: rgba(50, 110, 184, 0.35);
}
.theme-burguer .phone-keys-hint {
  color: #1E3A5F;
}

/* --- Rating (lado do QR / nota do zap) --- */
.theme-burguer .result-title,
.theme-burguer .result-subtitle {
  color: #FFFFFF;
}

/* --- Rating --- */
.theme-burguer .rating-label {
  color: #326EB8;
}
.theme-burguer .star {
  color: rgba(50, 110, 184, 0.25);
}
.theme-burguer .star.is-active {
  color: #326EB8;
}
.theme-burguer .rating-thanks-title {
  color: #326EB8;
}
.theme-burguer .rating-thanks-text {
  color: #1E3A5F;
}

/* --- Delivery → título e opções em azul da marca, alto contraste --- */
.theme-burguer .delivery-title {
  color: #326EB8;
}
.theme-burguer .delivery-option--qr,
.theme-burguer .delivery-option--retake {
  border-color: #326EB8;
}
.theme-burguer .delivery-option--qr .delivery-option-label,
.theme-burguer .delivery-option--retake .delivery-option-label {
  color: #326EB8;
}
.theme-burguer .delivery-option--qr .delivery-option-sub,
.theme-burguer .delivery-option--retake .delivery-option-sub {
  color: #1E3A5F;
}
.theme-burguer .delivery-option .key-hint {
  background: #326EB8;
  color: #FFFFFF;
}
.theme-burguer .delivery-option--whatsapp .key-hint {
  background: #FFFFFF;
  color: #326EB8;
}