/* Fontes servidas pelo próprio site (variáveis, subconjunto latino; licença OFL em /assets/fonts).
   Antes vinham do Google Fonts e bloqueavam a primeira pintura em ~0,9 s no celular. */
@font-face { font-family: 'Inter'; src: url('/assets/fonts/inter.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/assets/fonts/jetbrains-mono.woff2') format('woff2'); font-weight: 100 800; font-style: normal; font-display: swap; }
/* ============================================================================
   Wintech 3D — identidades e componentes de aplicação

   Duas caras propositalmente diferentes:
   .t-pessoal    creme, terracota, âmbar  → cliente final, miniaturas
   .t-industrial azul, branco, prata      → engenharia, metrologia
   .t-admin      grafite                  → painel interno
   ========================================================================== */

:root {
  --r-sm: 8px; --r: 14px; --r-lg: 22px; --r-xl: 30px;
  --ease: cubic-bezier(.22,1,.36,1);
  --maxw: 1180px;
  --s-1: 0 1px 2px rgba(10,22,40,.06),0 2px 8px rgba(10,22,40,.05);
  --s-2: 0 2px 4px rgba(10,22,40,.05),0 12px 32px -8px rgba(10,22,40,.14);
  --s-3: 0 4px 8px rgba(10,22,40,.05),0 32px 64px -16px rgba(10,22,40,.22);
}

/* ---------------------------------------------------------- lado pessoal --
   AZUL · BRANCO · PRATA — a paleta do protótipo, que é a que foi pedida:
   "engenharia de qualidade e precisão, tons azuis brancos e prateados".

   Isto já esteve creme/terracota, numa tentativa de separar os dois públicos
   por matiz. Estava errado: a separação entre o lado das miniaturas e o
   industrial é de CONTEÚDO, LAYOUT e TOM, não de cor. A marca é uma só.

   O que distingue os dois lados dentro da mesma família:
     · pessoal    → destaque em ciano (#5FE0FF), mais respiro, foto grande
     · industrial → destaque em azul médio, mais denso, tabela e número
   ------------------------------------------------------------------------ */
.t-pessoal {
  --fundo:    #F7FAFD;   /* silver-50  */
  --papel:    #FFFFFF;
  --suave:    #F0F5FA;   /* silver-100 */
  --borda:    #E2EAF4;   /* silver-200 */
  --tinta:    #0A1628;   /* ink        */
  --muted:    #56687F;
  --acao:     #1557C7;   /* blue-600   */
  --acao-2:   #0F3C86;   /* blue-700   */
  --acento:   #5FE0FF;   /* cyan — o brilho do protótipo */
  --ok:       #10714A;
  --erro:     #B3261E;
}
/* ------------------------------------------------------- lado industrial -- */
.t-industrial {
  --fundo:    #F7FAFD;
  --papel:    #FFFFFF;
  --suave:    #F0F5FA;
  --borda:    #E2EAF4;
  --tinta:    #0A1628;
  --muted:    #56687F;
  --acao:     #1557C7;
  --acao-2:   #0F3C86;
  --acento:   #2E7BF6;
  --ok:       #10714A;
  --erro:     #B3261E;
}
/* --------------------------------------------------------------- admin ---- */
.t-admin {
  --fundo:    #10141C;
  --papel:    #171D28;
  --suave:    #1E2634;
  --borda:    #2A3444;
  --tinta:    #EAF0F8;
  --muted:    #94A3B8;
  --acao:     #2E7BF6;
  --acao-2:   #1557C7;
  --acento:   #5FE0FF;
  --ok:       #34D399;
  --erro:     #F87171;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fundo); color: var(--tinta);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.08; letter-spacing: -.03em; font-weight: 700; }
p { margin: 0; }
.mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.sec { padding: clamp(48px, 7vw, 96px) 0; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 0; top: 0; z-index: 99; background: var(--acao); color: #fff; padding: 12px 20px; }
:focus-visible { outline: 3px solid var(--acao); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--acao); color: #fff; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--acao);
}
.eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; opacity: .5; }

/* --------------------------------------------------------------- botões --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 22px; border-radius: 100px; font-size: 15px; font-weight: 600;
  transition: all .3s var(--ease); white-space: nowrap; border: 1px solid transparent;
}
.btn-lg { padding: 16px 32px; font-size: 16px; }
.btn-sm { padding: 8px 15px; font-size: 13.5px; }
.btn-primary { background: var(--acao); color: #fff; box-shadow: 0 14px 34px -12px color-mix(in srgb, var(--acao) 70%, transparent); }
.btn-primary:hover:not(:disabled) { background: var(--acao-2); transform: translateY(-2px); }
.btn-outline { border-color: var(--borda); color: var(--tinta); background: var(--papel); }
.btn-outline:hover:not(:disabled) { border-color: var(--acao); color: var(--acao); transform: translateY(-2px); }
.btn-ghost { color: var(--muted); }
.btn-ghost:hover { color: var(--tinta); background: var(--suave); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }
.btn-bloco { width: 100%; }

/* --------------------------------------------------------------- campos --- */
.campo { margin-bottom: 16px; }
.campo label {
  display: block; font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px;
}
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 13px 15px; border: 1px solid var(--borda); border-radius: 11px;
  font-family: inherit; font-size: 15.5px; color: var(--tinta); background: var(--papel);
  transition: border-color .2s, box-shadow .2s; outline: none;
}
.campo textarea { resize: vertical; min-height: 96px; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--acao); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acao) 15%, transparent);
}
.campo .dica { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.campo.erro input, .campo.erro select { border-color: var(--erro); }
.linha-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.linha-3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 14px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--muted); margin: 12px 0; cursor: pointer; }
.check input { margin-top: 3px; accent-color: var(--acao); width: 17px; height: 17px; flex: none; }

/* --------------------------------------------------------------- avisos --- */
.aviso { border-radius: var(--r); padding: 15px 18px; font-size: 14.5px; line-height: 1.55; margin: 14px 0; }
.aviso b { display: block; margin-bottom: 3px; }
.aviso.erro { background: color-mix(in srgb, var(--erro) 10%, var(--papel)); border: 1px solid color-mix(in srgb, var(--erro) 34%, transparent); color: var(--erro); }
.aviso.ok   { background: color-mix(in srgb, var(--ok)  10%, var(--papel)); border: 1px solid color-mix(in srgb, var(--ok)  34%, transparent); color: var(--ok); }
.aviso.info { background: var(--suave); border: 1px solid var(--borda); color: var(--muted); }

/* ============================================================================
   Cabeçalho e rodapé do lado pessoal
   ========================================================================== */
.cab-pessoal {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--fundo) 86%, transparent);
  backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid var(--borda);
}
.cab-pessoal .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 20px; }
.marca { display: flex; align-items: center; gap: 11px; color: var(--acao); }
.marca svg { width: 34px; height: 34px; flex: none; }
.marca b { display: block; font-size: 18px; font-weight: 800; letter-spacing: -.045em; color: var(--tinta); }
.marca b i { font-style: normal; color: var(--acao); }
.marca small { display: block; font-family: 'JetBrains Mono', monospace; font-size: 8.5px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.cab-pessoal nav { display: flex; gap: 4px; }
.cab-pessoal nav a { padding: 9px 14px; font-size: 14.5px; font-weight: 500; color: var(--muted); border-radius: 8px; }
.cab-pessoal nav a:hover { color: var(--tinta); background: var(--suave); }

.rod-pessoal { background: #08172E; color: #CBD7E6; padding: 56px 0 0; margin-top: 60px; }
.rod-pessoal .wrap { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; padding-bottom: 40px; }
.rod-pessoal b { font-size: 19px; font-weight: 800; letter-spacing: -.045em; color: #fff; }
.rod-pessoal b i { font-style: normal; color: var(--acento); }
.rod-pessoal p { font-size: 14.5px; line-height: 1.65; margin-top: 14px; color: #A9B8CC; max-width: 34ch; }
.rod-pessoal h5, .rod-pessoal .rod-h { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: #fff; margin: 0 0 16px; font-weight: 500; }
.rod-pessoal a { display: block; font-size: 14.3px; padding: 5px 0; color: #A9B8CC; }
.rod-pessoal a:hover { color: var(--acento); }
.rod-pessoal .end { font-size: 13.5px; }
/* Barra final do rodapé. O seletor leva .rod-pessoal .wrap porque a regra da
   grade de 3 colunas (.rod-pessoal .wrap) é mais específica que .rod-fim sozinho
   e engolia o flex: os links legais quebravam linha e nada alinhava. */
.rod-pessoal .wrap.rod-fim { display: flex; justify-content: space-between; align-items: center;
  gap: 10px 24px; flex-wrap: wrap; padding-top: 20px; padding-bottom: 24px;
  border-top: 1px solid rgba(255,255,255,.1); font-size: 12.5px; color: #A9B8CC; }
/* os links legais não herdam o display:block com padding dos links de coluna */
.rod-pessoal .rod-legal { gap: 6px 20px; }
.rod-pessoal .rod-legal a { display: inline; padding: 0; font-size: 12.5px; white-space: nowrap; }
@media (max-width: 720px) {
  .rod-pessoal .wrap.rod-fim { flex-direction: column; align-items: flex-start; }
}

/* ============================================================================
   Estúdio
   ========================================================================== */
.estudio { padding: clamp(28px, 4vw, 48px) 0 90px; }
.passos { display: flex; gap: 6px; margin-bottom: clamp(26px, 4vw, 42px); flex-wrap: wrap; }
.passo-chip {
  display: flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border-radius: 100px;
  background: var(--papel); border: 1px solid var(--borda); font-size: 13px; color: var(--muted);
  transition: all .3s var(--ease);
}
.passo-chip i { width: 22px; height: 22px; border-radius: 50%; background: var(--suave);
  display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 700; }
.passo-chip.feito { border-color: color-mix(in srgb, var(--ok) 40%, transparent); color: var(--ok); }
.passo-chip.feito i { background: var(--ok); color: #fff; }
.passo-chip.atual { border-color: var(--acao); color: var(--acao); background: color-mix(in srgb, var(--acao) 7%, var(--papel)); font-weight: 600; }
.passo-chip.atual i { background: var(--acao); color: #fff; }

.painel {
  background: var(--papel); border: 1px solid var(--borda); border-radius: var(--r-lg);
  padding: clamp(22px, 3vw, 34px); margin-bottom: 20px;
}
.painel > h2 { font-size: 21px; margin-bottom: 6px; }
.painel > .sub { color: var(--muted); font-size: 15px; line-height: 1.6; margin-bottom: 20px; }
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grade-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

/* escolha de tipo */
.opcoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.opcao {
  border: 2px solid var(--borda); border-radius: var(--r); padding: 20px; text-align: left;
  background: var(--papel); transition: all .3s var(--ease); position: relative;
}
.opcao:hover { border-color: color-mix(in srgb, var(--acao) 50%, transparent); transform: translateY(-3px); }
.opcao[aria-pressed="true"] { border-color: var(--acao); background: color-mix(in srgb, var(--acao) 6%, var(--papel)); }
.opcao[aria-pressed="true"]::after { content: "✓"; position: absolute; top: 14px; right: 14px;
  width: 22px; height: 22px; border-radius: 50%; background: var(--acao); color: #fff;
  display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.opcao b { display: block; font-size: 17px; letter-spacing: -.025em; }
.opcao span { display: block; font-size: 13.6px; color: var(--muted); margin-top: 6px; line-height: 1.5; }
.opcao .preco { display: block; margin-top: 12px; font-family: 'JetBrains Mono', monospace;
  font-size: 13px; color: var(--acao); font-weight: 600; }

/* upload */
.fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.foto-slot {
  position: relative; aspect-ratio: 3/4; border: 2px dashed var(--borda); border-radius: var(--r);
  background: var(--suave); display: grid; place-items: center; text-align: center; padding: 14px;
  cursor: pointer; transition: all .3s var(--ease); overflow: hidden;
}
.foto-slot:hover { border-color: var(--acao); background: color-mix(in srgb, var(--acao) 5%, var(--suave)); }
.foto-slot.tem { border-style: solid; border-color: var(--acao); padding: 0; }
.foto-slot.obrigatorio::before { content: "obrigatória"; position: absolute; top: 8px; left: 8px; z-index: 3;
  font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  background: var(--acao); color: #fff; padding: 3px 7px; border-radius: 5px; }
.foto-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.foto-slot .rot { font-size: 13.5px; font-weight: 600; }
.foto-slot .ico { font-size: 26px; margin-bottom: 6px; opacity: .5; }
.foto-slot input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.foto-slot .trocar { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; padding: 8px;
  background: linear-gradient(transparent, rgba(0,0,0,.75)); color: #fff; font-size: 12px; text-align: center; }
.foto-slot-caixa { display: flex; flex-direction: column; gap: 7px; }
.foto-slot-caixa .foto-slot { flex: 1 1 auto; }
.btn-camera {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--borda); background: var(--fundo); color: var(--tinta);
  border-radius: 9px; padding: 8px 6px; font: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer; transition: all .2s var(--ease);
}
.btn-camera:hover { border-color: var(--acao); color: var(--acao); }
.btn-camera svg { flex: none; }

/* resultado */
.resultado { display: grid; grid-template-columns: 1.1fr .9fr; gap: 26px; align-items: start; }
.tela-arte {
  position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--suave);
  border: 1px solid var(--borda); aspect-ratio: 3/4; display: grid; place-items: center;
}
.tela-arte img { width: 100%; height: 100%; object-fit: contain; }
.tela-arte.carregando::after {
  content: ""; position: absolute; inset: 0; background: var(--suave);
  background-image: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--acao) 14%, transparent) 50%, transparent 80%);
  background-size: 220% 100%; animation: brilho 1.6s infinite;
}
@keyframes brilho { to { background-position: -220% 0; } }
.carregando-txt { position: absolute; inset: auto 18px 22px; text-align: center; z-index: 2; }
.barra-prog { height: 5px; border-radius: 99px; overflow: hidden; margin-bottom: 12px;
  background: color-mix(in srgb, var(--tinta) 12%, transparent); }
.barra-prog i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--acao);
  transition: width .9s linear; }
.passo-ia { font-size: 14.5px; font-weight: 600; color: var(--tinta); margin: 0;
  min-height: 1.4em; transition: opacity .25s var(--ease); }
.passo-ia.trocando { opacity: 0; }
.conta-ia { font-size: 12px; color: var(--muted); margin: 5px 0 0;
  font-family: 'JetBrains Mono', monospace; letter-spacing: .02em; }
.versoes-tira { display: flex; gap: 8px; margin-top: 14px; overflow-x: auto; padding-bottom: 4px; }
.versoes-tira button { flex: none; width: 62px; aspect-ratio: 3/4; border-radius: 9px; overflow: hidden;
  border: 2px solid var(--borda); background: var(--suave); position: relative; }
.versoes-tira button[aria-pressed="true"] { border-color: var(--acao); }
.versoes-tira img { width: 100%; height: 100%; object-fit: cover; }
.versoes-tira span { position: absolute; bottom: 0; left: 0; right: 0; font-size: 9px; font-weight: 700;
  background: rgba(0,0,0,.6); color: #fff; padding: 1px; }

.contador-ajustes { display: flex; gap: 5px; margin: 4px 0 14px; }
.contador-ajustes i { width: 26px; height: 5px; border-radius: 3px; background: var(--borda); }
.contador-ajustes i.gasto { background: var(--acao); }

/* resumo de preço */
.resumo { position: sticky; top: 92px; }
.resumo-linha { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; font-size: 14.6px; color: var(--muted); }
.resumo-linha b { color: var(--tinta); font-weight: 600; }
.resumo-total { display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  border-top: 2px solid var(--tinta); margin-top: 10px; padding-top: 14px; }
.resumo-total span { font-size: 15px; font-weight: 600; }
.resumo-total strong { font-family: 'JetBrains Mono', monospace; font-size: 30px; letter-spacing: -.04em; }
.resumo-prazo { margin-top: 14px; font-size: 13.5px; color: var(--muted); line-height: 1.55; }

/* seleção de acabamento */
.escolha-lista { display: flex; flex-direction: column; gap: 10px; }
.escolha {
  display: flex; gap: 14px; align-items: flex-start; padding: 15px 17px; border-radius: var(--r);
  border: 2px solid var(--borda); background: var(--papel); cursor: pointer; transition: all .25s var(--ease);
}
.escolha:hover { border-color: color-mix(in srgb, var(--acao) 45%, transparent); }
.escolha input { margin-top: 3px; accent-color: var(--acao); width: 18px; height: 18px; flex: none; }
.escolha:has(input:checked) { border-color: var(--acao); background: color-mix(in srgb, var(--acao) 6%, var(--papel)); }
.escolha b { display: block; font-size: 15.5px; }
.escolha small { display: block; font-size: 13.3px; color: var(--muted); margin-top: 3px; line-height: 1.5; }
.escolha .val { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 13.5px;
  color: var(--acao); font-weight: 600; white-space: nowrap; }
.alturas { display: flex; gap: 8px; flex-wrap: wrap; }
.altura-btn { padding: 11px 18px; border-radius: 100px; border: 2px solid var(--borda);
  background: var(--papel); font-weight: 600; font-size: 15px; transition: all .25s var(--ease); }
.altura-btn:hover { border-color: color-mix(in srgb, var(--acao) 45%, transparent); }
.altura-btn[aria-pressed="true"] { border-color: var(--acao); background: var(--acao); color: #fff; }

/* ============================================================================
   Rastreamento
   ========================================================================== */
.etapas { list-style: none; margin: 34px 0 0; padding: 0; }
.etapa { display: flex; gap: 18px; padding-bottom: 28px; position: relative; }
.etapa:not(:last-child)::before { content: ""; position: absolute; left: 17px; top: 36px; bottom: 0;
  width: 2px; background: var(--borda); }
.etapa.feita:not(:last-child)::before { background: var(--ok); }
.etapa-bolha { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--suave); border: 2px solid var(--borda); font-weight: 700; font-size: 14px; color: var(--muted); z-index: 1; }
.etapa.feita .etapa-bolha { background: var(--ok); border-color: var(--ok); color: #fff; }
.etapa.atual .etapa-bolha { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ok) 18%, transparent); }
.etapa b { font-size: 16.5px; }
.etapa p { font-size: 14.6px; color: var(--muted); margin-top: 3px; line-height: 1.55; }
.etapa time { display: block; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--muted); margin-top: 6px; }
.etapa:not(.feita) b { color: var(--muted); }

.cartao-rastreio { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  background: var(--papel); border: 1px solid var(--borda); border-radius: var(--r); padding: 18px 22px; margin-top: 26px; }
.cartao-rastreio .rot { display: block; font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }
.cartao-rastreio strong { display: block; font-size: 20px; letter-spacing: 1px; margin-top: 4px; }

.tab { width: 100%; border-collapse: collapse; }
.tab td { padding: 8px 0; font-size: 14.6px; color: var(--muted); }
.tab td:last-child { text-align: right; font-weight: 600; color: var(--tinta); }
.tab tr.total td { border-top: 2px solid var(--tinta); padding-top: 12px; font-size: 16.5px; color: var(--tinta); font-weight: 700; }
.painel h2 { font-size: 15px; font-family: 'JetBrains Mono', monospace; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); font-weight: 500; margin-bottom: 14px; }
.painel p { font-size: 15px; line-height: 1.65; }

.tela-ok { max-width: 560px; text-align: center; }
.tela-ok h1 { font-size: clamp(30px, 5vw, 42px); margin: 18px 0 14px; }
.tela-ok .lead { color: var(--muted); font-size: 17px; line-height: 1.65; margin-bottom: 26px; }
.tela-ok .nota { color: var(--muted); font-size: 14px; margin-top: 18px; }
.ok-selo { width: 72px; height: 72px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); font-size: 34px; }
.ok-selo.pendente { background: color-mix(in srgb, var(--acento) 18%, transparent); color: var(--acao); }
.cartao-codigo { background: var(--papel); border: 1px solid var(--borda); border-radius: var(--r);
  padding: 18px; margin: 0 0 26px; }
.cartao-codigo span { display: block; font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.cartao-codigo strong { display: block; font-size: 26px; letter-spacing: 3px; margin-top: 6px; }

/* ============================================================================
   Painel administrativo
   ========================================================================== */
.corpo-admin { background: var(--fundo); }
.login-caixa { max-width: 400px; margin: 8vh auto; background: var(--papel); border: 1px solid var(--borda);
  border-radius: var(--r-lg); padding: 34px; box-shadow: var(--s-3); }
.login-marca { font-size: 21px; font-weight: 800; letter-spacing: -.045em; margin-bottom: 26px; }
.login-marca i { font-style: normal; color: var(--acento); }
.login-marca small { display: block; font-family: 'JetBrains Mono', monospace; font-size: 9.5px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-top: 5px; font-weight: 400; }
.login-nota { font-size: 12.5px; color: var(--muted); margin-top: 18px; line-height: 1.55; }

.adm-topo { background: var(--papel); border-bottom: 1px solid var(--borda); position: sticky; top: 0; z-index: 30; }
.adm-topo .wrap { display: flex; align-items: center; gap: 22px; height: 60px; max-width: 1400px; }
.adm-marca { font-weight: 800; letter-spacing: -.04em; font-size: 16px; }
.adm-marca i { font-style: normal; color: var(--acento); }
.adm-marca span { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted); font-weight: 400; margin-left: 6px; }
.adm-topo nav { display: flex; gap: 4px; margin-left: 10px; }
.adm-topo nav a { padding: 7px 13px; border-radius: 8px; font-size: 14px; color: var(--muted); }
.adm-topo nav a:hover { background: var(--suave); color: var(--tinta); }
.adm-topo form { margin-left: auto; }
.adm-topo .btn { border: 1px solid var(--borda); color: var(--muted); }
.adm-corpo { padding: 30px 0 80px; }
.adm-corpo .wrap { max-width: 1400px; }
.adm-corpo h1 { font-size: 27px; margin-bottom: 18px; }

.chips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 20px; }
.chip { padding: 7px 14px; border-radius: 100px; border: 1px solid var(--borda); background: var(--papel);
  font-size: 13.5px; color: var(--muted); }
.chip b { color: var(--tinta); margin-left: 5px; }
.chip.on { border-color: var(--acao); background: color-mix(in srgb, var(--acao) 14%, var(--papel)); color: var(--tinta); }

.tabela { width: 100%; border-collapse: collapse; background: var(--papel);
  border: 1px solid var(--borda); border-radius: var(--r); overflow: hidden; }
.tabela th { text-align: left; padding: 12px 14px; font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  background: var(--suave); border-bottom: 1px solid var(--borda); font-weight: 500; }
.tabela td { padding: 13px 14px; border-bottom: 1px solid var(--borda); font-size: 14.5px; vertical-align: top; }
.tabela tbody tr { cursor: pointer; transition: background .18s; }
.tabela tbody tr:hover { background: var(--suave); }
.tabela small { color: var(--muted); font-size: 12.5px; }
.tabela .num { font-family: 'JetBrains Mono', monospace; font-weight: 700; }
.tabela .vazio { text-align: center; color: var(--muted); padding: 40px; cursor: default; }

.badge { display: inline-block; padding: 4px 11px; border-radius: 100px; font-size: 12px; font-weight: 600; }
.badge.grande { padding: 8px 18px; font-size: 14px; }
.b-pago       { background: #1E3A5F; color: #93C5FD; }
.b-producao   { background: #4A3410; color: #FCD34D; }
.b-acabamento { background: #3B2A5A; color: #C4B5FD; }
.b-enviado    { background: #0C3D3A; color: #5EEAD4; }
.b-entregue   { background: #14392A; color: #6EE7B7; }
.b-cancelado  { background: #4A1D1D; color: #FCA5A5; }
.alerta { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--erro); color: #fff; font-weight: 800; font-size: 13px; }

.voltar { display: inline-block; color: var(--muted); font-size: 14px; margin-bottom: 14px; }
.voltar:hover { color: var(--tinta); }
.det-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; }
.det-topo .sub { color: var(--muted); font-size: 14.5px; margin-top: 6px; }
.rot { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--muted); }
.grande { font-size: 22px; letter-spacing: 2px; font-weight: 700; margin: 4px 0 12px; }

.miniaturas { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-bottom: 16px; }
.miniatura { display: block; border: 1px solid var(--borda); border-radius: var(--r-sm); overflow: hidden;
  background: var(--suave); transition: all .25s var(--ease); }
.miniatura:hover { border-color: var(--acao); transform: translateY(-3px); }
.miniatura.escolhida { border-color: var(--ok); border-width: 2px; }
.miniatura img { aspect-ratio: 3/4; object-fit: cover; width: 100%; }
.miniatura span { display: block; padding: 9px 10px; font-size: 12.5px; line-height: 1.4; }
.miniatura small { color: var(--muted); font-size: 11px; }
.tag-ok { background: var(--ok); color: #061; color: #052e1c; padding: 1px 6px; border-radius: 4px; font-size: 9px; letter-spacing: .08em; }

.hist { list-style: none; margin: 0; padding: 0; }
.hist li { display: grid; grid-template-columns: 130px 150px 1fr auto; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--borda); font-size: 14px; align-items: baseline; }
.hist time { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--muted); }
.hist span { color: var(--muted); }
.hist small { color: var(--muted); font-size: 12px; }

/* ============================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 900px) {
  .resultado, .grade-2, .linha-2, .linha-3 { grid-template-columns: 1fr; }
  .opcoes, .grade-3 { grid-template-columns: 1fr; }
  .resumo { position: static; }
  .cab-pessoal nav { display: none; }
  .rod-pessoal .wrap { grid-template-columns: 1fr; gap: 30px; }
  .hist li { grid-template-columns: 1fr; gap: 3px; }
  /* O painel é usado do celular, na oficina. Esconder a navegação sem colocar
     nada no lugar deixava Leads, Cobranças órfãs e Consumo inacessíveis — e
     "cobranças órfãs" é dinheiro recebido sem pedido, a tela que MAIS precisa
     ser vista. Agora a navegação quebra em duas linhas e rola na horizontal. */
  .adm-topo .wrap { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 10px; gap: 10px; }
  .adm-topo nav {
    order: 3; width: 100%; margin-left: 0; overflow-x: auto; padding-bottom: 2px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .adm-topo nav::-webkit-scrollbar { display: none; }
  .adm-topo nav a { white-space: nowrap; font-size: 13.5px; padding: 6px 10px; }
  .adm-busca { order: 2; margin-left: auto; }
  .adm-busca input { width: 130px; }
  .adm-sair { order: 2; }
  .so-largo { display: none; }        /* "Sair (usuario)" vira só "Sair" */
  .adm-marca span { display: none; }
  .tabela thead { display: none; }
  .tabela tbody tr { display: grid; grid-template-columns: 1fr 1fr; padding: 10px 0; }
  .tabela td { border: 0; padding: 5px 14px; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .wrap { padding: 0 18px; }
  .passos { gap: 4px; }
  .passo-chip { font-size: 11.5px; padding: 5px 10px 5px 5px; }
  .passo-chip i { width: 19px; height: 19px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* correções de escopo: títulos do estúdio são títulos de verdade */
.estudio .painel h2 {
  font-size: 21px; font-family: inherit; text-transform: none;
  letter-spacing: -.03em; color: var(--tinta); font-weight: 700; margin-bottom: 6px;
}
.estudio .painel .resumo-linha { font-family: inherit; }
.foto-slot .ico { display: block; }
.foto-slot .conteudo { display: block; }
.foto-slot .rot { display: block; font-size: 13.5px; }

/* --------------------------------------------------- consumo de IA ------- */
.cartao-ia { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 26px; align-items: center;
  background: var(--papel); border: 1px solid var(--borda); border-radius: var(--r);
  padding: 18px 22px; margin-bottom: 20px; transition: border-color .25s; }
.cartao-ia:hover { border-color: var(--acao); }
.cartao-ia.alerta { border-color: #F59E0B; background: color-mix(in srgb, #F59E0B 8%, var(--papel)); }
.cartao-ia .rot { display: block; }
.cartao-ia strong { display: block; font-family: 'JetBrains Mono', monospace; font-size: 26px;
  letter-spacing: -.03em; margin-top: 4px; }
.cartao-ia strong small { font-size: .5em; color: var(--muted); font-weight: 400; }
.cartao-ia .ir { color: var(--acao); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.barra { height: 5px; border-radius: 3px; background: var(--suave); margin-top: 9px; overflow: hidden; }
.barra i { display: block; height: 100%; background: var(--acao); border-radius: 3px; }
.barra.larga { width: 100%; min-width: 120px; margin: 0; }
.cartao-ia.alerta .barra i { background: #F59E0B; }
.em-linha { display: inline; }
.em-linha .btn { border: 1px solid var(--borda); color: var(--muted); }
.em-linha .btn:hover { border-color: var(--acao); color: var(--acao); }
@media (max-width: 900px) { .cartao-ia { grid-template-columns: 1fr 1fr; gap: 16px; } .cartao-ia .ir { display: none; } }
.nota-adm { font-size: 13.2px; line-height: 1.6; color: var(--muted); }
.nota-adm code { font-family: 'JetBrains Mono', monospace; font-size: 12px;
  background: var(--suave); padding: 1px 6px; border-radius: 4px; }

/* ------------------------------------------- ajuste pós-pagamento --------- */
.caixa-ajuste { margin-top: 26px; padding: 22px 24px; border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--acao) 6%, var(--papel));
  border: 1px solid color-mix(in srgb, var(--acao) 32%, transparent);
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; }
.caixa-ajuste b { display: block; font-size: 17px; letter-spacing: -.025em; }
.caixa-ajuste p { font-size: 14.6px; line-height: 1.6; color: var(--muted); margin-top: 6px; }
.caixa-ajuste strong { color: var(--acao); }
.form-ajuste label { display: block; font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.linha-conf { display: flex; gap: 8px; }
.linha-conf input { flex: 1; padding: 12px 14px; border: 1px solid var(--borda);
  border-radius: 11px; font-family: inherit; font-size: 15px; background: var(--papel); color: var(--tinta); }
.linha-conf input:focus { outline: none; border-color: var(--acao);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--acao) 15%, transparent); }
@media (max-width: 760px) { .caixa-ajuste { grid-template-columns: 1fr; } .linha-conf { flex-direction: column; } }

/* faixa de aviso no painel quando a arte mudou depois de pago */
.faixa-alterada { background: color-mix(in srgb, #F59E0B 14%, var(--papel));
  border: 1px solid #F59E0B; border-radius: var(--r); padding: 14px 18px; margin-bottom: 18px;
  font-size: 14.5px; display: flex; gap: 12px; align-items: flex-start; }
.faixa-alterada b { color: #F59E0B; }

/* recuperação de código no /rastrear */
.recuperar { margin-top: 26px; border-top: 1px solid var(--borda); padding-top: 18px; }
.recuperar summary { cursor: pointer; font-size: 14.5px; font-weight: 600; color: var(--acao); }
.recuperar summary::marker { color: var(--muted); }
.recuperar > p { font-size: 14.2px; color: var(--muted); line-height: 1.6; margin: 12px 0 16px; }

/* ============================================================================
   Painel: busca, pinos de pendência, ações destrutivas
   ========================================================================== */
.adm-busca { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.adm-busca input {
  width: 260px; max-width: 34vw; padding: 7px 12px; border-radius: 8px;
  border: 1px solid var(--borda); background: var(--suave); color: var(--tinta);
  font: inherit; font-size: 13.5px; outline: none;
}
.adm-busca input:focus { border-color: var(--acao); }
.adm-topo form:last-child { margin-left: 0; }
.adm-topo nav a.perigo { color: #FCA5A5; }
.pino {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 99px; background: var(--erro); color: #fff; font-size: 11px; font-weight: 800;
  margin-left: 5px; vertical-align: 1px;
}
.adm-topo nav a.perigo .pino { background: #F87171; }
.alerta.ok { background: var(--ok); color: #06251A; }
.urgente { color: var(--erro); font-weight: 700; }
.btn-perigo { background: var(--erro); color: #fff; }
.btn-perigo:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-2px); }
.sep { border: 0; border-top: 1px solid var(--borda); margin: 18px 0; }
.painel .sub { font-size: 13.8px; color: var(--muted); line-height: 1.55; margin-bottom: 14px; }
.tabela form { display: flex; gap: 6px; align-items: center; }
.tabela form input {
  padding: 6px 10px; border-radius: 7px; border: 1px solid var(--borda);
  background: var(--suave); color: var(--tinta); font: inherit; font-size: 13px; min-width: 190px;
}
@media (max-width: 900px) { .adm-busca input { width: 150px; } }

/* páginas legais */
.doc-legal { max-width: 760px; }
.doc-legal h1 { font-size: clamp(30px, 5vw, 42px); letter-spacing: -.04em; margin: 16px 0 6px; }
.doc-legal .atualizado { font-family: 'JetBrains Mono', monospace; font-size: 12px;
  color: var(--muted); margin-bottom: 30px; }
.doc-legal .lead { font-size: 17.5px; line-height: 1.65; color: var(--tinta); margin-bottom: 8px; }
.doc-legal h2 { font-size: 19px; margin: 34px 0 10px; letter-spacing: -.02em; }
.doc-legal p, .doc-legal li { font-size: 16px; line-height: 1.7; color: var(--muted); }
.doc-legal p + p { margin-top: 12px; }
.doc-legal ul { margin: 10px 0; padding-left: 22px; }
.doc-legal li { margin-bottom: 7px; }
.doc-legal strong { color: var(--tinta); }
.doc-legal a { color: var(--acao); font-weight: 600; }
.doc-legal hr { border: 0; border-top: 1px solid var(--borda); margin: 44px 0 22px; }
.doc-legal .quem { font-size: 14px; line-height: 1.7; }
.doc-legal .voltar-doc { margin-top: 20px; }
.rod-legal { display: flex; gap: 16px; flex-wrap: wrap; }
/* Cor fixa em vez de `inherit` com opacity .85: aquela combinação dava 3,44:1 no
   tema creme e 3,68:1 no azul, abaixo do mínimo 4,5:1 da WCAG AA para texto
   pequeno. Justamente nos links de Privacidade, Termos e Trocas — que precisam
   ser legíveis por obrigação, não por estética. Agora 8,7:1 e 9,6:1. */
.rod-legal a { color: #CBD7E6; text-decoration: underline; text-underline-offset: 3px; }
.rod-legal a:hover, .rod-legal a:focus-visible { color: #FFFFFF; }

/* botões dentro do alerta do estúdio (WhatsApp, recomeçar) */
.aviso-acao { margin-top: 12px; margin-right: 8px; }
.aviso > span { display: block; }

/* aviso de cookies do medicao.js (LGPD) — só aparece com tag de medição configurada */
.wt-consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90; max-width: 560px; margin: 0 auto;
  background: var(--papel, #fff); color: var(--tinta, #0A1628); border: 1px solid var(--borda, #E2EAF4); border-radius: 16px;
  box-shadow: 0 24px 60px -18px rgba(10,22,40,.4); padding: 16px 18px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.wt-consent p { flex: 1 1 260px; font-size: 14px; line-height: 1.5; color: var(--muted, #56687F); }
.wt-consent a { color: var(--acao, #1557C7); text-decoration: underline; }
.wt-consent div { display: flex; gap: 8px; }

/* Leitores de tela e buscadores: título que não aparece na tela */
.so-leitor { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Celular: a tagline do logo quebrava em três linhas e espremia o botão */
@media (max-width: 480px) { .cab-pessoal .marca small { display: none; } }
/* Estúdio: nome do plano embaixo da altura (pet) */
.altura-btn small { display: block; font-size: 10.5px; font-weight: 600; opacity: .75; margin-top: 1px; letter-spacing: 0; }

/* Base paramétrica do pet: cores da base e das letras (estúdio, passo do pedido) */
.cores-base{display:flex;align-items:center;gap:10px}
.cores-base input[type=color]{width:44px;height:38px;padding:2px;border:1px solid #cfd8e3;border-radius:8px;background:#fff;cursor:pointer}
.amostra-base{flex:1;min-width:0;padding:8px 12px;border-radius:8px;border:1px solid #cfd8e3;font-weight:800;letter-spacing:.06em;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

/* hidden vence display de classe (linha-2 é grid) */
#campos-base[hidden], #campo-formato[hidden] { display: none; }