/* Entrada do sistema (login, 2FA, bloqueio) — servida pelo Django (docs/MIGRACAO_REACT_DJANGO_VPS2.md §1.9), com os
   MESMOS tokens do React (tokens_app.css, gerado de design/tokens.json), sempre no tema escuro: a página inteira é a
   foto do estúdio, bem escurecida, com aproximação lenta e camadas sutis (véu, vinheta, luz quente, grão de filme).
   Redesenho de 14/10/2026, 2ª versão (pedido do dono): foto cobrindo tudo, formulário transparente sem divisão
   lateral, título curto e fino, selos discretos. O escurecimento é preto sobre a foto e o texto da cena é branco —
   as duas únicas cores fora dos tokens (a foto é sempre escura). */

@font-face { font-family: "Inter Variable"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2-variations");
  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; }
@font-face { font-family: "Inter Variable"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("../fonts/inter-latin.woff2") format("woff2-variations");
  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; }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: color-mix(in srgb, black 94%, white); color: var(--color-ink-body); font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.45; }
a { color: inherit; }

/* ── a página: grade sobre a foto (marca em cima, palco no meio, rodapé embaixo) ── */
.entrada { position: relative; isolation: isolate; min-height: 100dvh; overflow: hidden; color: #fff;
  display: grid; grid-template-rows: auto 1fr auto; padding: clamp(28px, 3.6vw, 56px) clamp(28px, 4.6vw, 72px); }

/* fundo: foto + véu + vinheta + luz + grão (tudo fixo atrás) */
.fundo { position: fixed; inset: 0; z-index: -1; overflow: hidden;
  background: color-mix(in srgb, black 92%, transparent) url("../img/entrada-fundo-mini.jpg") center / cover no-repeat; }
.fundo picture, .fundo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fundo img { transform-origin: 62% 46%; animation: aproxima 38s cubic-bezier(.45, 0, .55, 1) infinite alternate; will-change: transform; }
.fundo .veu { position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 0%, color-mix(in srgb, black 55%, transparent) 70%, color-mix(in srgb, black 85%, transparent) 100%),
    linear-gradient(90deg, color-mix(in srgb, black 84%, transparent) 0%, color-mix(in srgb, black 66%, transparent) 50%, color-mix(in srgb, black 78%, transparent) 100%),
    linear-gradient(0deg, color-mix(in srgb, black 70%, transparent) 0%, transparent 38%); }
.fundo .luz { position: absolute; width: 70vmax; height: 70vmax; left: 38%; top: -18%; border-radius: 50%; mix-blend-mode: screen; opacity: .16;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-chart-4) 70%, transparent) 0%, transparent 62%);
  animation: luz 26s ease-in-out infinite alternate; }
.fundo .grao { position: absolute; inset: -50%; opacity: .07; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grao 1.2s steps(6) infinite; }

/* visor de câmera: cantoneiras + REC + timecode */
.visor { position: fixed; inset: clamp(14px, 1.6vw, 24px); pointer-events: none; z-index: 1; }
.visor i { position: absolute; width: 24px; height: 24px; border: 0 solid color-mix(in srgb, white 45%, transparent); }
.visor i:nth-child(1) { top: 0; left: 0; border-top-width: 1.5px; border-left-width: 1.5px; }
.visor i:nth-child(2) { top: 0; right: 0; border-top-width: 1.5px; border-right-width: 1.5px; }
.visor i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.visor i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.rec { position: fixed; z-index: 1; top: clamp(30px, 3.2vw, 48px); right: clamp(36px, 3.8vw, 58px); display: flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 500; letter-spacing: .1em; font-variant-numeric: tabular-nums; color: color-mix(in srgb, white 80%, transparent); }
.rec b { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: 600; }
.rec b::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--color-brand);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-brand) 22%, transparent); animation: pisca 1.2s steps(2, jump-none) infinite; }

/* marca (em cima, à esquerda) */
.marca { display: flex; align-items: center; gap: 16px; animation: aparece 700ms var(--mov-ease) both; }
.marca img { height: 38px; width: auto; display: block; }
.marca span { border-left: 1px solid color-mix(in srgb, white 20%, transparent); padding-left: 16px; line-height: 1.35; }
.marca strong { display: block; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.marca small { display: block; font-size: 11px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; color: color-mix(in srgb, white 58%, transparent); }

/* palco: a chamada à esquerda (um pouco acima do meio) e o formulário transparente à direita, sem divisão */
.palco { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); gap: clamp(32px, 6vw, 120px); align-items: center;
  max-width: 1320px; width: 100%; margin: 0 auto; padding: clamp(24px, 4vh, 48px) 0; }
.chamada { align-self: center; transform: translateY(-6vh); animation: aparece 900ms 120ms var(--mov-ease) both; }
.chamada h1 { margin: 0 0 26px; font-size: clamp(34px, 3.4vw, 54px); line-height: 1.12; font-weight: 250; letter-spacing: -.03em; color: #fff;
}
/* cada linha inteira, sem quebra no meio (pedido do dono: o título "ficou muito quebrado") */
.chamada h1 span, .chamada h1 em { display: block; white-space: nowrap; }
.chamada h1 em { font-style: normal; font-weight: 400; color: var(--color-brand); }
.pilulas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.pilulas li { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 400; letter-spacing: .04em;
  color: color-mix(in srgb, white 58%, transparent); }
.pilulas svg { width: 13px; height: 13px; color: color-mix(in srgb, white 50%, transparent); }

/* o formulário: vidro escuro e transparente, sem borda lateral */
.caixa { width: 100%; padding: clamp(26px, 2.6vw, 38px); border-radius: 20px;
  background: color-mix(in srgb, black 34%, transparent); border: 1px solid color-mix(in srgb, white 8%, transparent);
  backdrop-filter: blur(18px) saturate(120%); -webkit-backdrop-filter: blur(18px) saturate(120%);
  box-shadow: 0 30px 80px color-mix(in srgb, black 45%, transparent);
  animation: aparece 900ms 240ms var(--mov-ease) both; }
.caixa h2 { margin: 0; font-size: 26px; font-weight: 400; letter-spacing: -.02em; color: #fff; }
.caixa .sub { margin: 6px 0 26px; color: color-mix(in srgb, white 62%, transparent); font-size: 14px; font-weight: 300; }
.campo { margin-bottom: 16px; }
.campo label { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 500; letter-spacing: .02em; color: color-mix(in srgb, white 74%, transparent); }
.entrada-campo { position: relative; }
.entrada-campo > svg { position: absolute; left: 15px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); color: color-mix(in srgb, white 45%, transparent); pointer-events: none; }
.entrada-campo input { width: 100%; height: 48px; padding: 0 46px; border-radius: 12px; font: inherit; font-size: 15px; font-weight: 400;
  color: #fff; background: color-mix(in srgb, white 6%, transparent); border: 1px solid color-mix(in srgb, white 12%, transparent); outline: none;
  transition: border-color var(--mov-duration) var(--mov-ease), background var(--mov-duration) var(--mov-ease), box-shadow var(--mov-duration) var(--mov-ease); }
.entrada-campo input::placeholder { color: color-mix(in srgb, white 38%, transparent); font-weight: 300; }
.entrada-campo input:hover { border-color: color-mix(in srgb, white 20%, transparent); }
.entrada-campo input:focus { border-color: var(--color-brand-border); background: color-mix(in srgb, white 9%, transparent); box-shadow: 0 0 0 3px var(--color-brand-soft); }
.entrada-campo input:-webkit-autofill { -webkit-text-fill-color: #fff; caret-color: #fff;
  box-shadow: 0 0 0 100px color-mix(in srgb, black 70%, var(--color-bg-raised)) inset; transition: background-color 9999s; }
.entrada-campo input.codigo { padding: 0 16px; text-align: center; font-size: 24px; font-weight: 400; letter-spacing: .4em; font-variant-numeric: tabular-nums; }
.olho { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; border-radius: 10px;
  background: transparent; color: color-mix(in srgb, white 45%, transparent); cursor: pointer; display: grid; place-items: center; }
.olho:hover { color: #fff; background: color-mix(in srgb, white 8%, transparent); }
.olho svg { width: 17px; height: 17px; }
.botao { width: 100%; height: 48px; margin-top: 10px; border: 0; border-radius: 12px; cursor: pointer; display: inline-flex; align-items: center;
  justify-content: center; gap: 10px; font: inherit; font-size: 15px; font-weight: 500; text-decoration: none;
  color: var(--color-ink-on-brand); background: var(--color-brand); transition: background var(--mov-duration) var(--mov-ease), transform 120ms; }
.botao:hover { background: var(--color-brand-strong); }
.botao:active { transform: translateY(1px); }
.botao svg { width: 17px; height: 17px; transition: transform var(--mov-duration) var(--mov-ease); }
.botao:hover svg { transform: translateX(3px); }
.botao[aria-busy="true"] { opacity: .75; pointer-events: none; }
:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
.aviso { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 18px; padding: 11px 13px; border-radius: 12px; font-size: 13px;
  color: #fff; background: color-mix(in srgb, var(--color-danger) 14%, transparent); border: 1px solid color-mix(in srgb, var(--color-danger) 38%, transparent); }
.aviso svg { flex: none; width: 17px; height: 17px; color: var(--color-danger); margin-top: 1px; }
.aviso.ok { background: color-mix(in srgb, var(--color-ok) 14%, transparent); border-color: color-mix(in srgb, var(--color-ok) 38%, transparent); }
.aviso.ok svg { color: var(--color-ok); }
.dica { font-size: 13px; font-weight: 300; color: color-mix(in srgb, white 60%, transparent); }
.divisor { height: 1px; background: color-mix(in srgb, white 10%, transparent); margin: 24px 0 16px; }
.rodape-painel { display: grid; gap: 10px; justify-items: center; text-align: center; font-size: 12px; font-weight: 300; color: color-mix(in srgb, white 58%, transparent); }
.rodape-painel a { color: #fff; font-weight: 500; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--color-brand) 70%, transparent); padding-bottom: 1px; }
.rodape-painel a:hover { border-bottom-color: var(--color-brand); }
.seguro { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: color-mix(in srgb, white 45%, transparent); }
.seguro svg { width: 13px; height: 13px; color: var(--color-ok); }
.qr { display: block; width: 188px; height: 188px; margin: 6px auto 14px; padding: 10px; background: #fff; border-radius: 12px; }
.chave { display: block; margin: 0 0 20px; padding: 10px 12px; border-radius: 12px; font: 500 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .06em; word-break: break-all; text-align: center; color: #fff; background: color-mix(in srgb, white 6%, transparent);
  border: 1px dashed color-mix(in srgb, white 18%, transparent); }
.passo { margin: 0 0 8px; font-size: 13px; font-weight: 300; color: color-mix(in srgb, white 74%, transparent); }
.passo strong { font-weight: 600; color: #fff; }
.reservas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 20px; padding: 14px; border-radius: 12px;
  font: 500 14px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; color: #fff;
  background: color-mix(in srgb, white 6%, transparent); border: 1px dashed color-mix(in srgb, white 18%, transparent); }
.icone-grande { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 18px;
  color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 14%, transparent); }
.icone-grande svg { width: 22px; height: 22px; }

/* rodapé (embaixo, discreto) */
.rodape { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 11px; font-weight: 400; letter-spacing: .04em; color: color-mix(in srgb, white 44%, transparent); }
.rodape .hud { margin-left: auto; letter-spacing: .14em; text-transform: uppercase; }

@keyframes aproxima { from { transform: scale(1.02); } to { transform: scale(1.14) translate(-1.2%, -.6%); } }
@keyframes luz { from { transform: translate(0, 0); opacity: .10; } to { transform: translate(-18vw, 22vh); opacity: .2; } }
@keyframes grao { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }
@keyframes aparece { from { opacity: 0; transform: translateY(12px); } }
@keyframes pisca { 50% { opacity: .15; } }
.chamada { animation-name: aparece-chamada; }
@keyframes aparece-chamada { from { opacity: 0; transform: translateY(calc(-6vh + 12px)); } to { opacity: 1; transform: translateY(-6vh); } }
@media (prefers-reduced-motion: reduce) {
  .fundo img, .fundo .luz, .fundo .grao, .rec b::before, .marca, .chamada, .caixa { animation: none; }
}

/* celular e janelas estreitas: tudo numa coluna (marca, título, formulário) */
@media (max-width: 960px) {
  .entrada { padding: 24px 20px 22px; }
  .palco { grid-template-columns: 1fr; gap: 26px; padding: 34px 0 22px; align-items: start; }
  .chamada { transform: none; animation-name: aparece; }
  .chamada h1 { font-size: clamp(22px, 6.6vw, 30px); margin-bottom: 14px; }
  .rec { top: 24px; right: 26px; }
  .marca img { height: 30px; }
  .marca small { display: none; }
  .caixa { padding: 24px 20px; }
  .rodape .hud { display: none; }
}