@font-face {
  font-family: 'Univers Next Pro Bold';
  src: url('assets/fonts/UniversNextPro-Bold.ttf') format('truetype');
  font-display: block;
}
@font-face {
  font-family: 'Montserrat Medium';
  src: url('assets/fonts/Montserrat-Medium.otf') format('opentype');
  font-display: block;
}

:root {
  --verde-900: #0B2E23;
  --verde-800: #1C3A2E;
  --verde-700: #0F3D2E;
  --ouro-1: #B89B5E;
  --ouro-2: #C9A24D;
  --ouro-3: #D4AF37;
  --ouro-grad: linear-gradient(135deg, #A8802A 0%, #C69D3F 50%, #EDC951 100%);
  --creme: #F5F1E4;
  --font-display: 'Univers Next Pro Bold', 'Arial Black', sans-serif;
  --font-body: 'Montserrat Medium', 'Montserrat', -apple-system, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; }
html, body { width: 100%; height: 100%; overflow: hidden; background: var(--verde-900); }
body { font-family: var(--font-body); color: var(--creme); }
button { font-family: inherit; cursor: pointer; }
input, select { font-family: inherit; }

/*
  A tela física do totem é quadrada ("dois por dois"). Pra testar/rodar em qualquer
  monitor (inclusive retangular, tipo notebook), tudo roda dentro de um palco quadrado
  centralizado — sobra uma faixa verde-escura (letterbox) nas laterais/topo se o
  monitor real não for quadrado.
*/
#app { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
.stage { position: relative; width: min(100vw, 100vh); height: min(100vw, 100vh); overflow: hidden; background: var(--verde-900); }

.screen {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
}
.screen.active { display: flex; }

.textura-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; z-index: 0;
}
.vinheta::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6,16,12,.5) 0%, rgba(6,16,12,.1) 20%, rgba(6,16,12,.1) 65%, rgba(6,16,12,.65) 100%),
    radial-gradient(ellipse at center, rgba(0,0,0,0) 45%, rgba(4,10,8,.5) 100%);
}

/* ============ BOAS-VINDAS ============ */
#screen-welcome { justify-content: center; }
.welcome-tint { position: absolute; inset: 0; z-index: 0; background: var(--verde-700); mix-blend-mode: color; }
#welcome-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.welcome-key {
  position: absolute; z-index: 2; pointer-events: none;
  height: 82%; width: auto; right: 3%; top: 2%;
  opacity: .10; mix-blend-mode: screen; filter: blur(1px);
  animation: keyFloat 18s ease-in-out infinite alternate;
}
@keyframes keyFloat {
  from { transform: rotate(-22deg) translateY(0); }
  to { transform: rotate(-20deg) translateY(-1.8%); }
}
.welcome-content {
  position: relative; z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: clamp(16px, 3.5vh, 40px);
  padding: 6% 8%; text-align: center;
}
.welcome-logo { width: clamp(240px, 46vw, 420px); height: auto; }
.welcome-cta {
  margin-top: clamp(10px, 2.6vh, 24px);
  font-family: var(--font-display);
  font-size: clamp(18px, 2.8vw, 28px);
  letter-spacing: .04em; text-transform: uppercase;
  padding: clamp(16px, 2.2vh, 24px) clamp(34px, 5vw, 56px);
  border: none; border-radius: 999px;
  background: var(--ouro-grad); color: var(--verde-900);
  box-shadow: 0 10px 40px rgba(212,175,55,.35);
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 10px 40px rgba(212,175,55,.35); }
  50% { transform: scale(1.035); box-shadow: 0 14px 52px rgba(212,175,55,.55); }
}
.gear-btn {
  position: absolute; right: 3%; bottom: 3%;
  z-index: 6; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.08); border: 1px solid rgba(212,175,55,.3);
  color: var(--ouro-2); font-size: 19px; opacity: .4;
  display: flex; align-items: center; justify-content: center;
}
.gear-btn:active { opacity: .9; }

/* ============ FORMULÁRIO ============ */
#screen-form { justify-content: center; gap: 2.5%; }
.form-logo { position: relative; z-index: 5; width: clamp(260px, 48%, 460px); height: auto; }
.form-panel {
  position: relative; z-index: 5;
  width: 88%; max-height: 86%;
  background: rgba(11, 46, 35, .74);
  border: 1px solid rgba(212,175,55,.28);
  border-radius: 24px;
  padding: 4% 5%;
  display: flex; flex-direction: column;
  gap: clamp(12px, 2.2vh, 22px);
  backdrop-filter: blur(6px);
}
.progress-dots { display: flex; justify-content: center; gap: 9px; }
.progress-dots .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(245,241,228,.22); transition: background .2s, transform .2s;
}
.progress-dots .dot.done { background: var(--ouro-2); }
.progress-dots .dot.current { background: var(--ouro-3); transform: scale(1.3); }

.step-title {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(17px, 2.6vw, 25px); letter-spacing: .02em;
  text-align: center; color: var(--creme);
}
.step-body { display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }

.field-label {
  font-size: clamp(12px, 1.4vw, 15px); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ouro-2); margin-bottom: 6px; display: block;
}
.field-input {
  width: 100%; padding: clamp(12px, 1.8vh, 18px) 16px;
  font-size: clamp(16px, 2vw, 21px);
  border-radius: 12px; border: 1px solid rgba(212,175,55,.35);
  background: rgba(245,241,228,.08); color: var(--creme);
}
.field-input::placeholder { color: rgba(245,241,228,.4); }
select.field-input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ouro-2) 50%), linear-gradient(135deg, var(--ouro-2) 50%, transparent 50%); background-position: calc(100% - 22px) calc(50% - 3px), calc(100% - 16px) calc(50% - 3px); background-size: 6px 6px; background-repeat: no-repeat; }
select.field-input option { background: var(--verde-900); color: var(--creme); }

.option-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.option-grid.compact { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.option-card {
  border: 1px solid rgba(212,175,55,.35); border-radius: 14px;
  background: rgba(245,241,228,.05); color: var(--creme);
  font-family: var(--font-body); font-weight: 600;
  font-size: clamp(14px, 1.6vw, 18px);
  padding: clamp(13px, 1.9vh, 18px) 12px; text-align: center;
  transition: background .15s, color .15s, transform .1s;
}
.option-card:active { transform: scale(.97); }
.option-card.selected { background: var(--ouro-grad); color: var(--verde-900); border-color: transparent; }

/* card com o logo real do programa — só o logo, sem texto embaixo. Chip escuro
   atrás da imagem garante contraste mesmo quando o card fica dourado (.selected),
   já que o logo também é dourado. */
.option-card-logo { display: flex; align-items: center; justify-content: center; padding: 22px 12px; }
.option-logo {
  max-width: 100%; max-height: 64px; width: auto; object-fit: contain;
  background: rgba(4,12,9,.55); border-radius: 10px; padding: 10px 20px;
}

.frase-grid { display: flex; flex-direction: column; gap: 12px; }
.frase-card {
  border: 1px solid rgba(212,175,55,.35); border-radius: 16px;
  background: rgba(245,241,228,.05); padding: clamp(16px, 2.6vh, 24px) 18px;
  text-align: center;
}
.frase-card .frase-texto {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(19px, 3.2vw, 32px); line-height: 1.22;
  background: var(--ouro-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.frase-card:active { transform: scale(.98); }

/* passo "Escolha seu fundo" — grade com prévias animadas ao vivo */
.fundo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.fundo-card {
  border: 1px solid rgba(212,175,55,.35); border-radius: 16px;
  background: rgba(245,241,228,.05); padding: 10px;
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .1s;
}
.fundo-card:active { transform: scale(.97); }
.fundo-prev {
  container-type: size; position: relative;
  aspect-ratio: 1; border-radius: 10px; overflow: hidden;
  background: var(--verde-900);
}
.fundo-nome {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(12px, 1.5vw, 16px); letter-spacing: .06em;
  color: var(--ouro-2); text-align: center;
}

.form-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.btn {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .03em;
  border: none; border-radius: 999px; padding: clamp(12px, 1.8vh, 16px) clamp(22px, 3.2vw, 36px);
  font-size: clamp(14px, 1.5vw, 18px);
}
.btn-primary { background: var(--ouro-grad); color: var(--verde-900); }
.btn-primary:disabled { opacity: .35; }
.btn-ghost { background: transparent; color: var(--ouro-2); border: 1px solid rgba(212,175,55,.4); }
.btn-spacer { flex: 1; }

/* ============ FUNDO GERADO (temas em themes.js) ============
   O tema é montado dentro de #backdrop-root. Tamanhos em cqw/cqh (container query)
   pra mesma arte escalar 1:1 nas prévias pequenas do passo "Escolha seu fundo".
   Disposição FIXA (16/07, decisão do cliente — não é mais escolha do congressista):
   pessoa sempre em pé à DIREITA da tela, insígnias sempre à ESQUERDA. O fundo de
   cada tema é espelhado (scaleX -1) porque foi desenhado originalmente pro outro
   lado — mais simples que redesenhar cada composição do zero.
*/
#backdrop-root { position: absolute; inset: 0; container-type: size; }

.theme { position: absolute; inset: 0; overflow: hidden; background: var(--verde-900); }
.th-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  animation: thZoom 26s ease-in-out infinite alternate;
}
@keyframes thZoom { from { transform: scaleX(-1) scale(1); } to { transform: scaleX(-1) scale(1.09); } }
.th-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
.th-grain {
  position: absolute; inset: 0; mix-blend-mode: overlay; opacity: .14; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* logo sempre no mesmo lugar em todo tema — "a logo sempre tem que destacar" */
.th-logo { position: absolute; top: 5cqw; left: 50%; margin-left: -21cqw; width: 42cqw; height: auto; z-index: 6; -webkit-user-drag: none; user-select: none; }

/* ── CAMADA DE INSÍGNIAS (compartilhada pelos 3 temas) ──
   Selos redondos (referência do cliente: "insígnia"/"selo"/"bola"), escala
   fatura→meta com seta de alta, nome grande embaixo. A frase fica pequena,
   num canto — as insígnias é que tomam conta da composição. */
.ins-layer {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column;
  width: 56cqw; padding: 25cqh 4cqw 11cqh 6cqw;
}
.ins-frase-mini {
  width: fit-content; /* o tracejado do modo de ajuste acompanha só o texto, não a coluna inteira */
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 3cqw; line-height: 1.5; color: var(--creme);
  text-shadow: 0 .3cqw 2cqw rgba(0,0,0,.6);
}
.ins-frase-mini .hi {
  display: inline-block; line-height: 1.5;
  background: var(--ouro-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ins-badges { display: flex; flex-direction: column; gap: 3cqh; margin-top: 3cqh; }
.ins-row { display: flex; align-items: center; gap: 4.5cqw; }
.ins-scale { display: flex; align-items: center; gap: 4cqw; }

.ins-seal {
  width: 16cqw; height: 16cqw; border-radius: 50%; flex: 0 0 auto;
  border: .35cqw solid var(--ouro-2); background: rgba(4,12,9,.62);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; overflow: hidden; padding: .8cqw;
  box-shadow: 0 .8cqw 2.4cqw rgba(0,0,0,.4), inset 0 0 0 .1cqw rgba(237,201,81,.3);
}
.ins-seal-label {
  font-family: var(--font-body); text-transform: uppercase;
  font-size: .95cqw; letter-spacing: .13em; color: var(--ouro-2); margin-bottom: .3cqw;
}
.ins-seal-val {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 1.6cqw; line-height: 1.3; color: var(--creme);
}
.ins-seal-val span { display: block; }
.ins-flag { padding: 0; }
.ins-flag img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.ins-programa .ins-seal-val { font-size: 1.3cqw; }
/* logos reais (PNG transparente) da Linda são lockups largos — a caixa não é
   quadrada, deixa o retângulo inscrito no círculo usar o máximo de largura */
.ins-programa img { width: 92%; height: 60%; object-fit: contain; }
.ins-meta {
  border-color: var(--ouro-3); position: relative;
  box-shadow: 0 .8cqw 2.4cqw rgba(0,0,0,.4), inset 0 0 0 .1cqw rgba(237,201,81,.3), 0 0 1.2cqw rgba(237,201,81,.5);
}
.ins-scale-solo .ins-meta { width: auto; height: auto; border-radius: 2cqw; padding: 1.4cqw 3cqw; flex-direction: row; gap: 1cqw; }

/* valor em selo (Fatura/Meta): número gigante + "mil" pequeno embaixo — pedido
   da Edlyn pra dar mais peso visual (era uma linha só, "R$15 MIL" em 1.6cqw) */
.ins-valor { display: flex; flex-direction: column; align-items: center; line-height: .9; }
.ins-valor-num {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 4.4cqw; line-height: 1; color: var(--creme);
}
.ins-valor-sfx {
  font-family: var(--font-body); text-transform: uppercase;
  font-size: .95cqw; letter-spacing: .15em; color: var(--ouro-2); margin-top: .25cqw;
}
.ins-meta .ins-valor-num { color: #F5E7B8; }
.ins-scale-solo .ins-valor-num { font-size: 3.6cqw; }
.ins-scale-solo .ins-seal-label { margin-bottom: 0; }

/* brilho deslizando na diagonal, contido pelo overflow:hidden do selo (círculo ou pílula) —
   referência: card "Meta do mês" do financeiro Sirius (brilho passando na superfície) */
.ins-meta::after {
  content: ''; position: absolute; top: -60%; left: -70%;
  width: 40%; height: 240%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.25), rgba(237,201,81,.65), rgba(255,255,255,.25), transparent);
  animation: ins-meta-shimmer 1.1s linear infinite;
  pointer-events: none;
}
@keyframes ins-meta-shimmer {
  from { left: -70%; }
  to { left: 150%; }
}

.ins-nome {
  width: fit-content; /* idem — tracejado só no tamanho do nome, não da coluna */
  margin-top: 3cqh;
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 4.8cqw; line-height: 1.25; color: var(--creme);
  text-shadow: 0 .4cqw 3cqw rgba(0,0,0,.55);
}

/* silhueta-guia: tamanho médio, indica onde a pessoa fica em pé (o corpo dela cobre
   a silhueta na hora da foto — é só um guia de enquadramento, não aparece "limpo"). */
.ins-silhueta {
  position: absolute; z-index: 3; pointer-events: none;
  right: 9cqw; bottom: 3cqh; height: 64cqh; width: auto;
  color: rgba(245,241,228,.14);
}
.ins-silhueta * { fill: currentColor; }

/* — A Chave — */
.t-chave .th-bg { object-position: 62% 42%; }
.t-chave .th-tint { position: absolute; inset: 0; background: var(--verde-700); mix-blend-mode: color; }
.t-chave .th-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(270deg, rgba(4,12,9,.82) 0%, rgba(4,12,9,.5) 34%, rgba(4,12,9,.08) 60%, rgba(4,12,9,.2) 100%),
    linear-gradient(0deg, rgba(4,12,9,.78) 0%, rgba(4,12,9,0) 38%),
    linear-gradient(180deg, rgba(4,12,9,.5) 0%, rgba(4,12,9,0) 26%);
}

/* — Onda de Ouro — */
.t-onda .th-bg { object-position: center 60%; }
.t-onda .th-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(270deg, rgba(4,12,9,.72) 0%, rgba(4,12,9,.28) 42%, rgba(4,12,9,0) 62%),
    linear-gradient(0deg, rgba(4,12,9,.6) 0%, rgba(4,12,9,0) 42%),
    linear-gradient(180deg, rgba(4,12,9,.55) 0%, rgba(4,12,9,0) 24%);
}

/* — Dois Mundos — */
.t-mundos .th-split {
  position: absolute; inset: 0;
  background:
    linear-gradient(270deg, rgba(3,10,7,.8) 0%, rgba(3,10,7,.55) 52%, rgba(3,10,7,.28) 61%, rgba(24,74,56,.18) 63%, rgba(30,86,64,.30) 100%),
    linear-gradient(0deg, rgba(3,10,7,.6) 0%, rgba(3,10,7,0) 34%);
}
.tx-kicker-mundos {
  position: absolute; z-index: 5; top: 21cqh; left: 6cqw;
  font-family: var(--font-body); text-transform: uppercase;
  font-size: 1.3cqw; letter-spacing: .28em; color: var(--ouro-2);
}

/* botão discreto de reset por cima do tema — sempre no lado das insígnias
   (a pessoa fica à direita, então nunca aparece atrás dela na foto) */
.backdrop-reset-btn {
  position: absolute; left: 3%; bottom: 3%; z-index: 6; opacity: .4;
}
.backdrop-reset-btn:active { opacity: .9; }

/* ============ MODO DE AJUSTE (arrastar frase/nome/insígnias) ============ */
.backdrop-edit-hint {
  position: absolute; top: 3%; left: 50%; transform: translateX(-50%); z-index: 20;
  background: rgba(4,10,8,.7); border: 1px solid rgba(212,175,55,.4); border-radius: 999px;
  padding: 10px 22px; text-align: center;
  font-family: var(--font-body); font-size: clamp(12px, 1.4vw, 15px); color: var(--ouro-2);
}
.backdrop-pronto-btn { position: absolute; right: 3%; bottom: 3%; z-index: 20; }

/* os 3 blocos arrastáveis ganham contorno tracejado só durante o ajuste —
   transform (usado pelo drag) não mexe no layout flex por baixo, só desenha
   deslocado, então arrastar nunca quebra o resto da composição */
.backdrop-editing .ins-frase-mini,
.backdrop-editing .ins-nome,
.backdrop-editing .ins-badges,
.backdrop-editing .th-logo {
  cursor: grab; touch-action: none;
  outline: 2px dashed rgba(212,175,55,.55); outline-offset: 4px; border-radius: 10px;
}
.backdrop-editing .ins-frase-mini.dragging,
.backdrop-editing .ins-nome.dragging,
.backdrop-editing .ins-badges.dragging,
.backdrop-editing .th-logo.dragging {
  cursor: grabbing; outline-color: var(--ouro-3);
}


/* ============ OVERLAY EXPORTAÇÃO ============ */
#overlay-export {
  position: absolute; inset: 0; z-index: 20; display: none;
  align-items: center; justify-content: center;
  background: rgba(4, 10, 8, .85);
}
#overlay-export.open { display: flex; }
.export-panel {
  width: 84%; max-width: 460px;
  background: var(--verde-800); border: 1px solid rgba(212,175,55,.35); border-radius: 20px;
  padding: 7%; text-align: center;
  display: flex; flex-direction: column; gap: 16px;
}
.export-panel h2 { font-family: var(--font-display); text-transform: uppercase; font-size: 20px; }
.export-count { font-size: 15px; color: var(--ouro-2); }
.export-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.btn-danger { background: transparent; color: #E08A7D; border: 1px solid rgba(224,138,125,.5); }