/* =========================================================================
   ÁUREA 3D · PAINEL · APARÊNCIA

   Mesma marca do site, layout de ferramenta.

   O painel é a mesma empresa vista por dentro. Antes ele era cinza de
   sistema sobre bege: funcionava, mas parecia software genérico com o nome
   da Áurea escrito em cima. Agora ele usa a mesma tipografia, a mesma
   escala de cor e o mesmo logotipo do site.

   As duas telas não têm o mesmo trabalho, e por isso não têm o mesmo peso:

     A PORTA (entrar, criar senha) é a única tela que a cliente vê antes de
     ser cliente do sistema. É escura, é a marca inteira, e não tem mais
     nada dentro além do que ela precisa fazer.

     O DENTRO é lista, formulário e botão. Fundo claro, alvo grande, texto
     de apoio embaixo de cada campo. Ela vai usar isto no celular, com a
     peça na mão — tudo é uma coluna só até 800 px e nada depende de cursor.

   As fontes são servidas daqui mesmo, não do site. O painel não pede NADA
   para o domínio principal: uma rajada de requisições no aurea3d.com.br
   fazia a Hostinger responder 429 para o site inteiro. Ver foto.php.
   ========================================================================= */

@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fontes/cinzel-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fontes/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fontes/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* --- a paleta do site, sem inventar tom novo ---
     Os três escuros são matiz 282°, o mesmo da orquídea, e mais claros
     que na primeira versão. Se mudarem no site, mudam aqui junto: o
     painel abre ao lado do site e um roxo diferente entrega a emenda. */
  --tinta:     #2d1537;
  --noite:     #3e204b;
  --profundo:  #4f2c5d;

  --ouro:        #d6b678;
  --ouro-claro:  #f0d9a6;
  --ouro-palido: #fcefcf;
  --ouro-escuro: #ac8850;
  --ouro-texto:  #755727;

  --orquidea-clara: #f2defc;
  --orquidea:       #e1b6f7;
  --orquidea-media: #d59bf0;
  --orquidea-forte: #aa51d6;
  --orquidea-texto: #812bab;

  --marfim:  #f8f1f3;
  --cartao:  #fffcfd;
  --grafite: #2a2333;
  --cinza:   #5c5468;
  --linha:   #e7ded0;
  --lavanda-fraca: #c3b2d8;

  --erro: #a3251b;
  --bom:  #1f7a4d;

  /* --- ritmo Fibonacci, o mesmo do site --- */
  --e1: 8px;  --e2: 13px; --e3: 21px; --e4: 34px; --e5: 55px;

  --raio: 6px;
  --raio-g: 12px;
  --curva: cubic-bezier(0.2, 0, 0.2, 1);
  --transicao: 240ms var(--curva);

  --sombra: 0 1px 2px rgba(18,10,34,.06), 0 6px 20px rgba(18,10,34,.07);
  --sombra-alta: 0 24px 60px rgba(18,10,34,.38);
}

*, *::before, *::after { box-sizing: border-box; }

/* O ATRIBUTO hidden TEM DE GANHAR DE TUDO.

   O navegador aplica [hidden] { display: none } na folha padrão dele, que
   é a mais fraca de todas. Basta o componente dizer "display: flex" — e
   .item diz — para o hidden virar decoração: a busca marca o cartão como
   escondido, o cartão continua na tela, e a conta em cima diz "1
   resultado" enquanto aparecem dezesseis.

   O !important aqui é legítimo: não existe caso em que algo marcado como
   hidden deva aparecer. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--marfim);
  color: var(--grafite);
  font-family: Manrope, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  font-feature-settings: 'tnum' 1;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { margin: 0; letter-spacing: -0.015em; }
h1 { font-size: 26px; line-height: 1.18; font-weight: 700; }
h2 { font-size: 18px; line-height: 1.3; font-weight: 700; }
code { font-family: ui-monospace, Consolas, monospace; font-size: 0.86em; color: var(--cinza); }
a { color: var(--orquidea-texto); }
img { max-width: 100%; }

.pular { position: absolute; left: -9999px; }
.pular:focus {
  left: 8px; top: 8px; z-index: 20;
  background: var(--ouro); color: var(--tinta); padding: 10px 16px; border-radius: var(--raio);
}

:focus-visible { outline: 3px solid var(--orquidea-forte); outline-offset: 2px; border-radius: 3px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* =========================================================================
   A PORTA · entrar e criar senha
   ========================================================================= */

body.porta {
  background: var(--noite);
  color: var(--marfim);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* O fundo é o degradê da marca, muito aberto, mais o isotipo enorme e
   quase apagado atrás. Nada disso é imagem de banco: é o mesmo arquivo de
   logo que o site usa, em 6% de opacidade. */
body.porta::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(120% 90% at 12% -10%, rgba(170, 81, 214, .32) 0%, transparent 58%),
    radial-gradient(90% 70% at 92% 110%, rgba(214, 182, 120, .22) 0%, transparent 60%),
    var(--tinta);
  pointer-events: none;
}
body.porta::after {
  content: "";
  position: fixed;
  right: -8vw;
  bottom: -12vh;
  width: min(62vw, 560px);
  aspect-ratio: 1;
  background: url('marca/isotipo.svg') no-repeat center / contain;
  opacity: .06;
  pointer-events: none;
}

.porta__folha {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e4);
  padding: var(--e5) var(--e3);
}

.porta__marca { display: block; }
.porta__marca img { width: 232px; height: auto; display: block; }

.porta .caixa {
  width: 100%;
  max-width: 424px;
  background: rgba(255, 253, 248, 0.055);
  border: 1px solid rgba(242, 222, 252, 0.16);
  border-radius: var(--raio-g);
  padding: var(--e4);
  box-shadow: var(--sombra-alta);
  backdrop-filter: blur(6px);
  margin: 0;
}

.porta h1 {
  font-family: Cinzel, Georgia, serif;
  font-size: 27px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ouro-claro);
  margin-bottom: var(--e1);
}
.porta .apoio { color: var(--lavanda-fraca); font-size: 14.5px; margin: 0 0 var(--e3); }
.porta label { color: var(--orquidea-clara); }
.porta label .apoio { color: var(--lavanda-fraca); display: inline; margin: 0; font-weight: 400; }

.porta input[type=password],
.porta input[type=text] {
  background: rgba(18, 10, 34, .55);
  border-color: rgba(242, 222, 252, .22);
  color: var(--marfim);
}
.porta input::placeholder { color: var(--lavanda-fraca); }
.porta input:focus { border-color: var(--orquidea-forte); background: rgba(18, 10, 34, .78); }

.porta .botao { width: 100%; justify-content: center; margin-top: var(--e2); }

.porta .recado--ruim {
  background: rgba(163, 37, 27, .18);
  border-color: rgba(255, 155, 143, .5);
  color: #ffc7bf;
}
.porta .recado--bom {
  background: rgba(31, 122, 77, .18);
  border-color: rgba(95, 206, 155, .5);
  color: #9fe6c4;
}

.porta__pe {
  position: relative; z-index: 1;
  padding: 0 var(--e3) var(--e4);
  text-align: center;
  color: var(--lavanda-fraca);
  font-size: 12.5px;
}
.porta__pe a { color: var(--orquidea); }

/* =========================================================================
   O DENTRO · cabeçalho
   ========================================================================= */

.topo {
  background: var(--tinta);
  color: var(--orquidea-clara);
  box-shadow: inset 0 -1px 0 rgba(214, 182, 120, .28);
}
.faixa {
  max-width: 1100px; margin: 0 auto;
  padding: var(--e2) var(--e3);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--e2);
}

.marca { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.marca img { height: 34px; width: auto; display: block; }
.marca__papel {
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ouro); padding-left: 11px;
  border-left: 1px solid rgba(214, 182, 120, .35);
}

.menu { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.menu a {
  display: inline-flex; align-items: center;
  padding: 9px 13px; border-radius: var(--raio);
  color: #d9cbe8; text-decoration: none;
  font-size: 14.5px; font-weight: 600;
  transition: background var(--transicao), color var(--transicao);
}
.menu a:hover { background: rgba(242, 222, 252, .09); color: #fff; }
.menu a[aria-current] { color: var(--ouro-claro); background: rgba(214, 182, 120, .12); }
.menu .sair { color: var(--lavanda-fraca); }

.conta {
  display: inline-block; min-width: 20px; margin-left: 6px; padding: 0 6px;
  background: var(--ouro); color: var(--tinta);
  border-radius: 999px; font-size: 12px; font-weight: 800;
  line-height: 20px; text-align: center;
}

/* =========================================================================
   O DENTRO · folha
   ========================================================================= */

.folha { max-width: 1100px; margin: 0 auto; padding: var(--e4) var(--e3) var(--e5); }

.cabeca {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; gap: var(--e2); margin-bottom: var(--e3);
}
.cabeca h1 { font-family: Cinzel, Georgia, serif; font-weight: 600; letter-spacing: 0; }

.apoio { color: var(--cinza); font-size: 14px; margin: 5px 0 0; }
.dica { color: var(--cinza); font-size: 13.5px; margin: 5px 0 18px; line-height: 1.45; }
.dica b { color: var(--grafite); }

.recado {
  border: 1px solid; border-radius: var(--raio);
  padding: 12px 16px; margin: 0 0 18px; font-size: 15px; font-weight: 600;
}
.recado--bom  { background: #eaf6f0; border-color: var(--bom); color: #145636; }
.recado--ruim { background: #fdeeec; border-color: var(--erro); color: #7c1c14; }

.caixa {
  background: var(--cartao); border: 1px solid var(--linha);
  border-radius: var(--raio-g); padding: var(--e4); margin-bottom: var(--e3);
  box-shadow: var(--sombra);
}
.caixa--estreita { max-width: 424px; margin: var(--e5) auto; }
.caixa--perigo { border-color: #e8c4c0; background: #fefaf9; }
.caixa--perigo h2 { color: var(--erro); }
.caixa--aviso { border-color: #e4d2a8; background: #fdf8ec; }
.caixa--aviso h2 { color: var(--ouro-texto); margin-bottom: 6px; }
.caixa--aviso .botao { margin-top: 12px; }

/* ---------- formulário ---------- */
label { display: block; font-weight: 700; font-size: 14.5px; margin: 0 0 6px; }
/* Nota entre parênteses no rótulo: acompanha a linha, não vira parágrafo
   solto por baixo do campo. */
label .apoio { display: inline; margin: 0; font-weight: 400; }
input[type=text], input[type=password], input[type=file], select, textarea {
  width: 100%; padding: 12px 13px; min-height: 48px;
  border: 1px solid var(--linha); border-radius: var(--raio);
  background-color: #fff; color: var(--grafite); font: inherit;
  transition: border-color var(--transicao);
}
textarea { min-height: 130px; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { border-color: var(--orquidea-forte); }
input[type=file] { padding: 10px; background-color: var(--marfim); }
input + label, textarea + label, select + label, .grupo + label { margin-top: var(--e3); }

.grupo {
  border: 1px solid var(--linha); border-radius: var(--raio);
  padding: var(--e2) var(--e3) var(--e3); margin: var(--e3) 0 0;
}
.grupo legend { font-weight: 700; font-size: 14.5px; padding: 0 6px; }

.marcar {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 0; font-weight: 600; font-size: 15.5px; cursor: pointer;
}
.marcar input { width: 22px; height: 22px; min-height: 0; flex: 0 0 auto; accent-color: var(--orquidea-forte); }

.acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--e3); }

/* ---------- botões ---------- */
.botao {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 24px; min-height: 48px;
  border: 1px solid transparent; border-radius: var(--raio);
  background: linear-gradient(135deg, var(--ouro-claro) 0%, var(--ouro) 58%, var(--ouro-escuro) 100%);
  color: var(--tinta);
  font: inherit; font-weight: 700; font-size: 15px;
  text-decoration: none; cursor: pointer;
  transition: filter var(--transicao), transform 90ms var(--curva);
}
.botao:hover { filter: brightness(1.06); }
.botao:active { transform: translateY(1px); }
.botao[disabled] { opacity: .5; cursor: not-allowed; filter: none; }
.botao--fino { padding: 9px 16px; min-height: 44px; font-size: 14px; }
.botao--calmo {
  background: none; border-color: var(--linha); color: var(--grafite); font-weight: 600;
}
.botao--calmo:hover { border-color: var(--orquidea-forte); color: var(--orquidea-texto); filter: none; }
.botao--perigo { background: var(--erro); color: #fff; }

/* ---------- abas ---------- */
/* Texto que só o leitor de tela recebe. Usado no rótulo da busca: na tela
   o ícone de lupa e o texto de exemplo já dizem o que é, mas quem navega
   por voz precisa do rótulo de verdade. */
.so-leitor {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- busca instantânea ----------
   Vem entre as abas e a lista: primeiro "que fatia eu quero ver", depois
   "procuro este nome dentro dela". Sem JavaScript o campo some — ver o
   <noscript> em nucleo/pagina.php. */
.busca { margin: 0 0 var(--e2); }
.busca__campo { position: relative; display: flex; align-items: center; max-width: 380px; }
.busca__lupa {
  position: absolute; left: 12px;
  width: 18px; height: 18px;
  color: var(--cinza); pointer-events: none;
}
.busca__campo input {
  width: 100%;
  padding: 10px 44px 10px 40px;
  min-height: 44px;
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-radius: 999px;
  color: var(--grafite);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.busca__campo input::placeholder { color: var(--cinza); opacity: 1; }
.busca__campo input:focus {
  outline: none;
  border-color: var(--orquidea-forte);
  box-shadow: 0 0 0 3px rgba(170, 81, 214, .16);
}
/* O X nativo do type=search sai: já existe o nosso, e o do navegador muda
   de desenho em cada um deles. */
.busca__campo input::-webkit-search-cancel-button,
.busca__campo input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

.busca__limpar {
  position: absolute; right: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--cinza); cursor: pointer;
  transition: background var(--transicao), color var(--transicao);
}
.busca__limpar:hover { background: rgba(170, 81, 214, .1); color: var(--grafite); }
.busca__limpar svg { width: 16px; height: 16px; }
.busca__limpar[hidden] { display: none; }

.busca__total { font-size: 14px; color: var(--cinza); margin: 6px 0 0; min-height: 1em; }

.busca-vazio {
  padding: var(--e4);
  border: 1px dashed var(--linha);
  border-radius: var(--raio-g);
  color: var(--cinza);
  text-align: center;
}
.busca-vazio[hidden] { display: none; }

.abas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--e3); }
.abas a {
  padding: 8px 15px; border-radius: 999px;
  border: 1px solid var(--linha); background: var(--cartao);
  color: var(--cinza); text-decoration: none; font-size: 14px; font-weight: 700;
  transition: border-color var(--transicao), color var(--transicao);
}
.abas a:hover { border-color: var(--orquidea-media); color: var(--orquidea-texto); }
.abas a[aria-current] {
  background: var(--noite); border-color: var(--noite); color: var(--orquidea-clara);
}

/* ---------- a lista de peças ---------- */
.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e1); }
.item {
  display: flex; align-items: center; gap: var(--e2);
  background: var(--cartao); border: 1px solid var(--linha);
  border-radius: var(--raio-g); padding: 11px 14px 11px 11px;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.item:hover { border-color: var(--ouro); box-shadow: var(--sombra); }
.item__foto {
  flex: 0 0 auto; width: 78px; height: 78px;
  border-radius: var(--raio); overflow: hidden;
  background: var(--marfim); display: grid; place-items: center;
}
.item__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.item__semfoto {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--lavanda-fraca); text-align: center; line-height: 1.25;
}
.item__texto { flex: 1; min-width: 0; }
.item__texto h2 { font-size: 17px; }
.item__acoes { flex: 0 0 auto; }

.selos { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 0; }
.selo {
  font-size: 11px; font-weight: 800; letter-spacing: .06em;
  padding: 3px 9px; border-radius: 999px; text-transform: uppercase;
}
.selo--cat  { background: #ede3fa; color: var(--orquidea-texto); }
.selo--gal  { background: #e7eefb; color: #23477f; }
.selo--dest { background: #f7ecd5; color: var(--ouro-texto); }
.selo--n    { background: #eeece9; color: var(--cinza); }

/* ---------- fotos no formulário ---------- */
.fotos { display: grid; gap: var(--e2); margin: var(--e2) 0 0; }

/* Grade em vez de flex: o painel de enquadrar entra como uma terceira
   célula ocupando a linha inteira, embaixo da miniatura e do texto. Com
   flex ele teria de virar irmão do cartão, e a caixa não abraçaria os dois. */
.foto {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e2);
  align-items: start;
  position: relative;
  background: var(--marfim); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 11px;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.foto:hover { border-color: rgba(170, 81, 214, .38); box-shadow: var(--sombra); }
.foto:focus-within { border-color: var(--orquidea-forte); }

.foto__mini {
  width: 84px; height: 84px; object-fit: cover;
  border-radius: 4px; display: block;
}

/* O selo de capa fica sobre a miniatura, não na coluna de texto: assim
   ele acompanha a foto quando a ordem muda, e não empurra o campo de
   descrição para baixo ao aparecer. */
.foto__capa {
  position: absolute;
  left: 5px; top: 5px;
  z-index: 1;
  padding: 3px 7px;
  border-radius: 4px;
  background: var(--ouro);
  color: var(--tinta);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 1px 4px rgba(18, 10, 34, .4);
}
.foto__capa[hidden] { display: none !important; }

.foto__lado { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.foto__lado label { font-weight: 400; margin: 0; }
.foto__lado input { min-height: 42px; padding: 8px 10px; font-size: 14px; }
.foto__botoes { display: flex; gap: 6px; }
.foto__botoes button {
  min-width: 40px; min-height: 40px; padding: 0 11px;
  border: 1px solid var(--linha); border-radius: var(--raio);
  background: var(--cartao); color: var(--grafite); font: inherit; cursor: pointer;
}
.foto__botoes button:hover { border-color: var(--orquidea-forte); }
.foto__botoes .perigo { color: var(--erro); border-color: #e8c4c0; }

/* ---------- destaques ---------- */
.contador { font-size: 15px; margin: 0 0 var(--e2); color: var(--cinza); }
.contador b { color: var(--grafite); font-size: 18px; }

.grade {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--e2);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
}
.grade > * { min-width: 0; }
.cartao { display: block; cursor: pointer; position: relative; }
.cartao input { position: absolute; opacity: 0; width: 0; height: 0; }
.cartao__foto {
  position: relative; display: block; aspect-ratio: 1;
  border: 2px solid var(--linha); border-radius: var(--raio-g);
  overflow: hidden; background: var(--marfim);
  transition: border-color var(--transicao);
}
.cartao__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cartao__marca {
  position: absolute; right: 8px; top: 8px;
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid #fff; background: rgba(18,10,34,.35);
  display: grid; place-items: center;
}
.cartao input:checked + .cartao__foto { border-color: var(--orquidea-forte); }
.cartao input:checked + .cartao__foto .cartao__marca {
  background: var(--orquidea-forte); border-color: #fff;
}
.cartao input:checked + .cartao__foto .cartao__marca::after {
  content: "✓"; color: #fff; font-size: 15px; font-weight: 700; line-height: 1;
}
.cartao input:focus-visible + .cartao__foto { outline: 3px solid var(--orquidea-forte); outline-offset: 2px; }
.cartao input:disabled + .cartao__foto { opacity: .42; }
.cartao__nome { display: block; font-size: 14px; font-weight: 700; margin-top: 7px; }

/* Cartão que NÃO pode ser marcado nesta vitrine — a peça não tem foto em
   pé, então não serve para a sanfona. Fica visível de propósito: some da
   escolha, mas continua na lista para ela entender POR QUE não está lá,
   e o motivo vem escrito embaixo. Esconder criaria a pergunta "cadê o
   Gengar?" sem resposta na tela. */
.cartao--travado { cursor: default; }
.cartao--travado .cartao__nome { color: var(--cinza); }
.cartao__motivo {
  display: block;
  font-size: 12px;
  line-height: 1.35;
  color: var(--cinza);
  margin-top: 2px;
}

/* ---------- as duas vitrines da página inicial ----------
   Separadas por uma linha e um respiro grande: são duas decisões
   diferentes, e emendar as grades faria parecer uma lista só de cima. */
.vitrine + .vitrine {
  margin-top: var(--e5);
  padding-top: var(--e4);
  border-top: 1px solid var(--linha);
}
.vitrine__cabeca { margin-bottom: var(--e2); }
.vitrine__cabeca h2 { font-size: 20px; margin: 0 0 4px; }
.vitrine__cabeca .apoio { margin: 0; max-width: 62ch; }

.contador--falta b { color: var(--erro); }

/* O código de referência da peça. É o que vai na mensagem do WhatsApp e o
   que a cliente digita na busca para achar a peça de um pedido. */
.codigo {
  display: inline-block;
  margin-left: 7px;
  padding: 2px 6px;
  border: 1px solid var(--linha);
  border-radius: 4px;
  background: var(--marfim);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ouro-texto);
  vertical-align: middle;
}

/* ---------- botões pequenos do cartão de foto ----------
   Um só desenho para setas, "Enquadrar" e "Tirar". Antes cada um herdava
   o botão do navegador e a fileira ficava desalinhada. */
.botao-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--cartao);
  color: var(--grafite);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--transicao), background var(--transicao),
              color var(--transicao), transform var(--transicao);
}
.botao-icone:hover:not(:disabled) {
  border-color: var(--orquidea-forte);
  color: var(--orquidea-texto);
  transform: translateY(-1px);
}
.botao-icone:active:not(:disabled) { transform: translateY(0); }
.botao-icone--largo { padding: 0 var(--e2); font-size: 14px; }
.botao-icone--perigo:hover:not(:disabled) { border-color: var(--erro); color: var(--erro); }
.botao-icone--ligado {
  background: var(--orquidea-forte);
  border-color: var(--orquidea-forte);
  color: #fff;
}
.botao-icone--ligado:hover { color: #fff; }

/* Seta sem para onde ir. Fica visível e apagada, com cursor de "não dá" —
   sumir com ela mudaria a largura da fileira a cada reordenação. */
.botao-icone:disabled {
  opacity: .35;
  cursor: not-allowed;
  transform: none;
}

/* ---------- enquadrar a foto ----------
   O palco mostra a foto INTEIRA e uma mira no ponto escolhido: é o mapa.
   As duas provas ao lado mostram o recorte de verdade, do jeito que vai
   sair no site. Ver o comentário do recortarPara() em nucleo/imagens.php:
   a conta do CSS aqui e a do PHP lá são a mesma. */
.enq {
  grid-column: 1 / -1;
  margin-top: var(--e2);
  padding: var(--e3);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  background: linear-gradient(180deg, var(--marfim), var(--cartao));
  animation: enq-abre 260ms var(--curva);
}
@keyframes enq-abre {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .enq { animation: none; } }

.enq__palco {
  display: grid;
  gap: var(--e3);
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .enq__palco { grid-template-columns: 1.618fr 1fr; } }

.enq__arrasta {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--raio);
  background-color: var(--noite);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;         /* aqui a foto aparece INTEIRA */
  cursor: grab;
  touch-action: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
  transition: box-shadow var(--transicao);
}
.enq__arrasta:hover { box-shadow: inset 0 0 0 1px var(--orquidea-forte); }
.enq__arrasta:focus-visible { outline: 3px solid var(--orquidea-forte); outline-offset: 2px; }
.enq__arrasta.arrastando { cursor: grabbing; box-shadow: inset 0 0 0 2px var(--ouro); }

/* A mira. O translate(-50%,-50%) põe o centro dela exatamente sobre o
   ponto, e não o canto superior esquerdo. */
.enq__mira {
  position: absolute;
  width: 26px; height: 26px;
  margin: 0;
  transform: translate(-50%, -50%);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(18, 10, 34, .55), 0 2px 8px rgba(18, 10, 34, .5);
  pointer-events: none;
}
.enq__mira::before,
.enq__mira::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
}
.enq__mira::before { width: 2px; height: 10px; }
.enq__mira::after { width: 10px; height: 2px; }

.enq__provas { display: flex; gap: var(--e2); align-items: flex-start; }
.enq__provas figure { margin: 0; flex: 1; }
.enq__provas figcaption {
  margin-top: 5px;
  font-size: 12px;
  color: var(--cinza);
  text-align: center;
}
.enq__prova {
  display: block;
  width: 100%;
  border-radius: var(--raio);
  background-color: var(--noite);
  background-repeat: no-repeat;
  background-size: 100%;            /* o JavaScript troca por 100×zoom */
  box-shadow: 0 2px 10px rgba(18, 10, 34, .18);
}
.enq__prova--quadrado { aspect-ratio: 1; }
.enq__prova--alto { aspect-ratio: 3 / 4; }

.enq__controles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
  margin-top: var(--e3);
}
.enq__zoom {
  display: flex;
  align-items: center;
  gap: var(--e1);
  flex: 1;
  min-width: 240px;
  font-size: 14px;
  color: var(--cinza);
}
.enq__zoom input[type='range'] { flex: 1; accent-color: var(--orquidea-forte); }
.enq__zoom b {
  font-variant-numeric: tabular-nums;
  color: var(--grafite);
  min-width: 4.5ch;
  text-align: right;
}

/* ---------- pedidos de orçamento ----------
   O cartão de pedido é lido no celular, quase sempre com pressa: primeiro
   o nome, depois há quanto tempo chegou, e o botão do WhatsApp grande.
   O quadro é Kanban, mas as mudanças de coluna são botões: funciona no
   teclado e no telefone, sem depender de arrastar com o mouse. */
.kanban {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--e2); align-items: start;
}
.kanban__coluna {
  min-width: 0; padding: var(--e2); border: 1px solid var(--linha);
  border-top: 4px solid var(--lavanda-fraca); border-radius: var(--raio-g);
  background: rgba(255, 252, 253, .62);
}
.kanban__coluna--novo { border-top-color: var(--ouro); }
.kanban__coluna--atendido { border-top-color: var(--orquidea-forte); }
.kanban__coluna--finalizado { border-top-color: var(--bom); }
.kanban__coluna--cancelado { border-top-color: var(--erro); }
.kanban__cabeca {
  display: flex; gap: var(--e1); align-items: flex-start;
  justify-content: space-between; margin: 0 0 var(--e2);
}
.kanban__cabeca h2 { font-size: 16px; }
.kanban__cabeca p { margin: 3px 0 0; color: var(--cinza); font-size: 12px; line-height: 1.4; }
.kanban__conta {
  flex: 0 0 auto; min-width: 26px; height: 26px; padding: 2px 7px;
  border-radius: 999px; background: var(--marfim); color: var(--cinza);
  font-size: 13px; font-weight: 800; text-align: center;
}
.kanban__lista { display: grid; gap: var(--e2); }
.kanban__vazio { margin: 0; color: var(--cinza); font-size: 13px; line-height: 1.45; }
.pedido {
  background: var(--cartao); border: 1px solid var(--linha);
  border-left: 4px solid var(--linha);
  border-radius: var(--raio-g); padding: var(--e3); margin: 0;
  box-shadow: var(--sombra);
}
.pedido--novo { border-left-color: var(--ouro); }
.pedido--atendido { border-left-color: var(--orquidea-forte); }
.pedido--finalizado { border-left-color: var(--bom); }
.pedido--cancelado { border-left-color: var(--erro); }
.pedido__topo {
  display: flex; gap: var(--e2); align-items: flex-start;
  justify-content: space-between; margin-bottom: var(--e2);
}
.pedido__topo h2 { font-size: 19px; }

.pedido__dados {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 14px;
  margin: 0 0 var(--e2); font-size: 15px;
}
.pedido__dados dt {
  color: var(--cinza); font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em; padding-top: 3px;
}
.pedido__dados dd { margin: 0; }

.pedido__mensagem {
  background: var(--marfim); border-radius: var(--raio);
  padding: 14px 16px; margin-bottom: var(--e2);
  font-size: 15.5px; line-height: 1.55;
}
.pedido__acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pedido__acoes form { margin: 0; }
.pedido__acoes .perigo { color: var(--erro); border-color: #e8c4c0; }
.selo--novo { background: #f7ecd5; color: var(--ouro-texto); }
.selo--atendido { background: #ede3fa; color: var(--orquidea-texto); }
.selo--finalizado { background: #dff3e8; color: var(--bom); }
.selo--cancelado { background: #f9e4e1; color: var(--erro); }

/* ---------- pé ---------- */
.pe {
  max-width: 1100px; margin: 0 auto; padding: var(--e3);
  border-top: 1px solid var(--linha); color: var(--cinza); font-size: 13px;
}
.pe p { margin: 0; }

/* ---------- telefone ---------- */
@media (max-width: 700px) {
  .faixa { padding: var(--e2); }
  .marca img { height: 30px; }
  .marca__papel { display: none; }
  .menu { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .menu a { white-space: nowrap; }
  .folha { padding: var(--e3) var(--e2) var(--e4); }
  .caixa { padding: var(--e3); }
  .porta__folha { gap: var(--e3); padding: var(--e4) var(--e2); }
  .porta__marca img { width: 186px; }
  .porta .caixa { padding: var(--e3); }
}

@media (max-width: 980px) {
  .kanban { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .kanban { grid-template-columns: 1fr; }
  .item { flex-wrap: wrap; }
  .item__acoes { width: 100%; }
  .item__acoes .botao { width: 100%; justify-content: center; }
  .cabeca .botao { width: 100%; justify-content: center; }
  .pedido__dados { grid-template-columns: 1fr; gap: 0 0; }
  .pedido__dados dt { padding-top: 9px; }
  .pedido__acoes .botao { width: 100%; justify-content: center; }
  .pedido__acoes form { width: 100%; }
}