/* Paleta das flores de rosa do deserto e tipografia editorial. Detalhes em DESIGN.md. */
:root {
  color-scheme: light;
  --vinho: #7A1233;
  --vermelho: #D0142C;
  --magenta: #E0115F;
  --rosa: #E94E8B;
  --pessego: #F4A27F;
  --creme: #F6D77C;
  --ameixa: #6E0F24;
  --rosa-claro: #FCE4EE;
  --fundo: #FFF9FB;
  --texto: #2E1028;
  --suave: #6B5262;
  --borda: #E6CFDA;
  --foco: #C2185B;
  --erro: #B0122B;
  --ok: #2F5E1F;
  --ok-fundo: #E8F3E0;
  --fonte-titulo: "Safira March", "Bodoni Moda", Georgia, serif;
  --fonte-destaque: "Bodoni Moda", Georgia, serif;
  --fonte-texto: "Josefin Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 19px/1.55 var(--fonte-texto); font-variant-numeric: lining-nums; }
h1, .codigo, .cartao-codigo, .sem-foto, .nome, .sem-resultado { font-variant-numeric: lining-nums; }
body::before {
  content: ""; display: block; height: 3px;
  background: linear-gradient(90deg, var(--ameixa) 0 16.66%, var(--vermelho) 0 33.33%, var(--magenta) 0 50%, var(--rosa) 0 66.66%, var(--pessego) 0 83.33%, var(--creme) 0);
}
main { max-width: 560px; margin: 0 auto; padding: max(20px, env(safe-area-inset-top)) 20px max(36px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 16px; }
h1 { margin: 4px 0 0; font: 500 34px/1.1 var(--fonte-titulo); color: var(--vinho); letter-spacing: .01em; }
.topo { display: flex; align-items: center; gap: 14px; padding-bottom: 6px; border-bottom: 1px solid var(--borda); }
.topo h1 { margin: 0; font-size: 27px; white-space: nowrap; }
.marca { width: 58px; height: 58px; border-radius: 12px; }
.sobretitulo, .etiqueta, .rotulo { margin: 0; font: 600 13px/1.3 var(--fonte-texto); text-transform: uppercase; letter-spacing: .18em; color: var(--suave); }
.etiqueta { color: var(--vinho); }
.texto { margin: 0; color: var(--suave); }
.codigo { margin: -6px 0 0; font: 600 40px/1.1 var(--fonte-texto); letter-spacing: .02em; color: var(--vinho); overflow-wrap: anywhere; }
.nome { margin: 0; font: italic 500 26px/1.2 var(--fonte-destaque); color: var(--texto); }
.detalhe { margin: 0; }
.detalhe .rotulo { display: block; margin-bottom: 2px; }
.foto-grande { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 6px; background: var(--rosa-claro); }
.miniatura { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 4px; background: var(--rosa-claro); }
.sem-foto { display: flex; align-items: center; justify-content: center; padding: 8px; font: 600 22px/1.2 var(--fonte-texto); letter-spacing: .04em; text-align: center; overflow-wrap: anywhere; }
.botao { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; padding: 14px 16px 12px; border: 1.5px solid var(--vinho); border-radius: 4px; background: transparent; color: var(--vinho); font: 600 16px/1.2 var(--fonte-texto); text-transform: uppercase; letter-spacing: .14em; text-align: center; cursor: pointer; }
.botao.principal { background: var(--vinho); color: #fff; }
.botao.grande { min-height: 68px; font-size: 18px; }
.botao:disabled { opacity: .5; }
.botao:focus-visible, .campo:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.escondido { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.acoes { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.rotulo-campo { display: flex; flex-direction: column; gap: 8px; font: 600 13px/1.3 var(--fonte-texto); text-transform: uppercase; letter-spacing: .18em; color: var(--suave); }
.campo { width: 100%; min-height: 56px; padding: 14px 14px 12px; border: 1px solid var(--borda); border-bottom: 2px solid var(--vinho); border-radius: 4px; background: #fff; color: var(--texto); font: 400 20px/1.3 var(--fonte-texto); text-transform: none; letter-spacing: 0; }
.campo:focus { outline: none; border-color: var(--foco); }
.campo::placeholder { color: #B9A3AF; opacity: 1; }
textarea.campo { min-height: 120px; resize: vertical; }
.campo-busca { font-size: 21px; }
.contador, .aviso-discreto { margin: 0; font-size: 15px; color: var(--suave); }
.aviso-discreto:empty, .erro:empty { display: none; }
.grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
.cartao { display: flex; flex-direction: column; gap: 8px; color: var(--texto); text-decoration: none; }
.cartao-codigo { font: 600 18px/1.2 var(--fonte-texto); letter-spacing: .04em; color: var(--vinho); overflow-wrap: anywhere; }
.sem-resultado { grid-column: 1 / -1; margin: 8px 0; font: 400 20px/1.45 var(--fonte-texto); }
.erro { margin: 0; color: var(--erro); font-weight: 600; }
.aviso-ok { margin: 0; padding: 12px 14px; border-left: 3px solid var(--ok); background: var(--ok-fundo); color: var(--ok); font-weight: 600; }
.carregando { color: var(--suave); font-style: italic; }
.campo[readonly] { background: var(--rosa-claro); border-bottom-color: var(--borda); color: var(--vinho); font-weight: 600; }
.foto-campo { display: flex; align-items: center; gap: 14px; }
.previa { flex: none; width: 112px; height: 112px; object-fit: cover; border-radius: 4px; background: var(--rosa-claro); }
.acoes-foto { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.status { margin: 0; font-size: 20px; }
.status.ok { color: var(--ok); }
.status.erro { color: var(--erro); }