/* Fatto Produtora — base compartilhada */
:root {
  --bg: #0a0a0a;
  --bg-2: #121212;
  --bg-3: #1a1a1a;
  --fg: #f3f1ed;
  --fg-2: #c9c6c0;
  --muted: #8b8882;
  --line: rgba(255, 255, 255, .09);
  --line-2: rgba(255, 255, 255, .16);
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Instrument Serif", "Times New Roman", Georgia, serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --gutter: clamp(16px, 4vw, 56px);
  --radius: 14px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, iframe { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
[hidden] { display: none !important; }
::selection { background: var(--fg); color: var(--bg); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }

.serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.sq { display: inline-block; width: .5em; height: .5em; background: currentColor; vertical-align: .12em; }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  height: 44px; padding: 0 20px; border-radius: 999px;
  font-size: 14px; font-weight: 500; letter-spacing: .01em; white-space: nowrap;
  border: 1px solid var(--line-2);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .2s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.97); }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn-solid { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn-ghost:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.3); }
@media (hover: hover) { .btn-solid:hover { background: #fff; } }
.btn-sm { height: 36px; padding: 0 14px; font-size: 13px; }
.btn-icon { width: 44px; padding: 0; }

/* ---------- lightbox ---------- */
.lb {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(8, 8, 8, .97);
  display: grid; grid-template-rows: auto 1fr auto;
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), visibility 0s linear .3s;
  color: #f3f1ed;
  touch-action: pan-y;
}
.lb.aberto { opacity: 1; visibility: visible; transition: opacity .3s var(--ease); }
.lb-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) var(--gutter) 14px;
}
.lb-cont { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: #a19e98; }
.lb-acoes { display: flex; gap: 8px; }
.lb-acoes .btn { border-color: rgba(255,255,255,.14); }
.lb-palco { position: relative; display: grid; place-items: center; min-height: 0; padding: 0 var(--gutter); overflow: hidden; }
.lb-palco img {
  position: absolute; inset: 0; margin: auto;
  max-width: calc(100% - 2 * var(--gutter)); max-height: 100%; width: auto; height: auto; object-fit: contain;
  user-select: none; -webkit-user-drag: none;
  transition: opacity .25s var(--ease), transform .35s var(--ease-out);
}
.lb-palco img.carregando { opacity: .35; }
.lb-nav {
  position: absolute; top: 50%; translate: 0 -50%;
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(20,20,20,.6); border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
  transition: background .2s var(--ease);
}
.lb-nav:hover { background: rgba(40,40,40,.85); }
.lb-nav svg { width: 20px; height: 20px; }
.lb-ant { left: var(--gutter); }
.lb-prox { right: var(--gutter); }
.lb-rodape { height: calc(env(safe-area-inset-bottom, 0px) + 20px); }
@media (max-width: 700px) {
  .lb-nav { display: none; }
  .lb-palco { padding: 0; }
  .lb-palco img { max-width: 100%; }
  .lb-acoes .rotulo { display: none; }
  .lb-acoes .btn { width: 40px; height: 40px; padding: 0; }
}

/* ---------- modal de vídeo ---------- */
.vm {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(5,5,5,.94);
  display: grid; place-items: center; padding: var(--gutter);
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), visibility 0s linear .3s;
}
.vm.aberto { opacity: 1; visibility: visible; transition: opacity .3s var(--ease); }
.vm-quadro { width: min(1280px, 100%); aspect-ratio: 16 / 9; max-height: 82vh; background: #000; border-radius: 10px; overflow: hidden; }
.vm-quadro iframe, .vm-quadro video { width: 100%; height: 100%; border: 0; }
.vm-fechar { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 16px); right: var(--gutter); color: #f3f1ed; }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); z-index: 200;
  translate: -50% 16px; opacity: 0;
  background: #f3f1ed; color: #0a0a0a;
  padding: 12px 18px; border-radius: 999px; font-size: 14px; font-weight: 500;
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
  transition: opacity .25s var(--ease), translate .35s var(--ease-out);
  pointer-events: none; max-width: calc(100vw - 32px); text-align: center;
}
.toast.vis { opacity: 1; translate: -50% 0; }

/* ---------- grade justificada ---------- */
.jg { display: flex; flex-direction: column; gap: var(--jg-gap, 8px); }
.jg-linha { display: flex; gap: var(--jg-gap, 8px); }
.jg-item {
  position: relative; flex: none; overflow: hidden; cursor: zoom-in;
  background: var(--jg-ph, #1a1a1a);
}
.jg-item img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .6s var(--ease), transform .8s var(--ease-out);
}
.jg-item img.ok { opacity: 1; }
@media (hover: hover) { .jg-item:hover img { transform: scale(1.025); } }

/* ---------- painel "enviar ao cliente" ---------- */
.envio {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: end center;
  background: rgba(0,0,0,.6); backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), visibility 0s linear .25s;
}
.envio.aberto { opacity: 1; visibility: visible; transition: opacity .25s var(--ease); }
.envio-caixa {
  width: min(520px, 100%);
  margin: 0 0 max(16px, env(safe-area-inset-bottom, 0px));
  background: #151515; border: 1px solid var(--line-2); border-radius: 20px;
  padding: 24px; color: #f3f1ed;
  translate: 0 24px; transition: translate .4s var(--ease-out);
}
.envio.aberto .envio-caixa { translate: 0 0; }
@media (min-width: 700px) { .envio { place-items: center; } .envio-caixa { margin: 0; } }
.envio h3 { margin: 4px 0 4px; font-size: 22px; font-weight: 500; letter-spacing: -.01em; }
.envio p { margin: 0 0 18px; color: #8b8882; font-size: 14px; }
.envio-link {
  display: flex; align-items: center; gap: 8px;
  background: #0c0c0c; border: 1px solid var(--line); border-radius: 12px; padding: 6px 6px 6px 14px;
}
.envio-link input {
  flex: 1; min-width: 0; background: none; border: 0; color: #c9c6c0;
  font: 13px var(--mono); outline: none;
}
.envio-botoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-top: 12px; }
.envio-msg {
  width: 100%; margin-top: 12px; min-height: 124px; resize: vertical;
  background: #0c0c0c; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  color: #c9c6c0; font: 14px/1.5 var(--sans);
}
.envio-fechar { position: absolute; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
.vm-quadro.vertical { aspect-ratio: 9 / 16; width: min(calc(86svh * 9 / 16), 100%); max-height: 86svh; }