/* Montadores da Chapada Hostess: a página em volta da peça. As cores são as da marca,
   mas aqui é só interface: nada disto entra na imagem que sai. */
@font-face { font-family: 'Italiana'; font-weight: 400; src: url('fontes/Italiana-Regular.ttf') format('truetype'); font-display: block; }
@font-face { font-family: 'Jost'; font-weight: 300; src: url('fontes/Jost-Light.ttf') format('truetype'); font-display: block; }
@font-face { font-family: 'Jost'; font-weight: 400; src: url('fontes/Jost-Regular.ttf') format('truetype'); font-display: block; }
@font-face { font-family: 'Jost'; font-weight: 500; src: url('fontes/Jost-Medium.ttf') format('truetype'); font-display: block; }
@font-face { font-family: 'Cormorant Garamond'; font-weight: 400; font-style: italic; src: url('fontes/CormorantGaramond-Italic.ttf') format('truetype'); font-display: block; }

:root {
  --bege: #E8DFCF; --creme: #F4EEE4; --caramelo: #BD8A5B; --taupe: #846B5F;
  --mata: #2F4536; --tinta: #1F261E; --cobre: #B07F5F; --claro: #F3ECE0;
  --borda: rgba(31,38,30,0.14);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--creme); color: var(--tinta); font-family: 'Jost', system-ui, sans-serif; font-weight: 300; -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; padding: calc(20px + env(safe-area-inset-top)) 16px calc(48px + env(safe-area-inset-bottom)); }

.topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; max-width: 1040px; margin-left: auto; margin-right: auto; }
.topo img { height: 40px; width: auto; display: block; }
.pecas { display: flex; gap: 6px; }
.pecas a { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--taupe); text-decoration: none; padding: 8px 12px; border-radius: 20px; border: 1px solid var(--borda); font-weight: 400; }
.pecas a.atual { color: var(--claro); background: var(--mata); border-color: var(--mata); }

.app { display: grid; gap: 22px; max-width: 1040px; margin: 0 auto; }
@media (min-width: 820px) { .app { grid-template-columns: 380px 1fr; align-items: start; } }

form { display: grid; gap: 14px; }
label { display: grid; gap: 6px; font-size: 12px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--taupe); font-weight: 500; }
label i { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 300; }
input, select, textarea, button { font: inherit; color: var(--tinta); }
input, select, textarea { width: 100%; background: #fff; border: 1px solid var(--borda); border-radius: 8px; padding: 12px 12px; font-size: 16px; font-weight: 400; letter-spacing: 0; text-transform: none; outline: none; -webkit-appearance: none; appearance: none; }
textarea { min-height: 120px; line-height: 1.5; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--caramelo); }
select { background-image: linear-gradient(45deg, transparent 50%, var(--taupe) 50%), linear-gradient(135deg, var(--taupe) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
.linha2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
input[type="file"] { padding: 10px; font-size: 14px; }
input[type="file"]::file-selector-button { font: inherit; background: var(--bege); color: var(--tinta); border: 0; border-radius: 6px; padding: 8px 12px; margin-right: 10px; }
.ajuda { font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--taupe); line-height: 1.45; font-weight: 300; }
input[type="range"] { padding: 0; height: 32px; background: transparent; border: 0; -webkit-appearance: auto; appearance: auto; accent-color: var(--caramelo); }
.botaozinho { justify-self: start; background: transparent; border: 1px solid var(--borda); border-radius: 20px; padding: 8px 14px; font-size: 13px; color: var(--taupe); cursor: pointer; }

.previa-caixa { display: grid; gap: 12px; justify-items: center; }
.previa { width: 100%; max-width: 405px; aspect-ratio: 4 / 5; background: var(--bege); border-radius: 12px; overflow: hidden; touch-action: none; cursor: grab; position: relative; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.previa.story { aspect-ratio: 9 / 16; }
.previa canvas { width: 100%; height: 100%; display: block; }
.previa.arrastando { cursor: grabbing; }
.previa .dica { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px; text-align: center; font-size: 12px; color: var(--claro); background: linear-gradient(to top, rgba(31,38,30,0.6), transparent); pointer-events: none; }
.previa.sem-foto .dica { top: 0; display: grid; place-items: center; background: rgba(31,38,30,0.35); font-size: 14px; }

.baixar { width: 100%; max-width: 405px; background: var(--mata); color: var(--claro); border: 0; border-radius: 8px; padding: 16px; font-size: 14px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; cursor: pointer; }
.baixar:disabled { opacity: 0.35; cursor: default; }
.baixar.secundario { background: var(--bege); color: var(--tinta); text-align: center; text-decoration: none; }
.aviso { font-size: 13px; color: var(--taupe); text-align: center; line-height: 1.5; max-width: 405px; }
.aviso b { color: var(--tinta); font-weight: 500; }
.status { font-size: 13px; color: var(--cobre); text-align: center; line-height: 1.5; max-width: 405px; min-height: 1em; }
.acoes { display: grid; gap: 10px; width: 100%; max-width: 405px; }
.resultado { display: none; width: 100%; max-width: 405px; border-radius: 12px; -webkit-touch-callout: default; }
.resultado-dica { display: none; }
.versao { text-align: center; font-size: 11px; color: var(--taupe); margin-top: 28px; letter-spacing: 1px; }