/* Tela de entrada. Paleta tirada da logo (vinho e creme); a obra animada à esquerda é a peça de destaque. */
:root {
  --vinho-900: #1c0d10;
  --vinho-800: #2b1115;
  --vinho-600: #5a1820;
  --vinho-500: #6e1b24;
  --papel: #f3eee7;
  --papel-2: #e7dfd4;
  --tinta: #261719;
  --suave: #75665f;
  --ambar: #e3a23a;
  --erro: #a3201a;
  --fonte-titulo: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --fonte-texto: 'Instrument Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--fonte-texto);
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
}

.tela {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(380px, 1fr);
}

/* ---- painel da obra (cena animada, veja obra.js) ---- */
.obra {
  position: relative;
  overflow: hidden;
  background: linear-gradient(#3f9fe6, #cfeaff 85%);
}
.obra svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.etapa {
  position: absolute;
  left: 22px;
  bottom: 22px;
  min-width: 210px;
  padding: 10px 14px 12px;
  border-radius: 10px;
  background: rgba(28, 13, 16, .74);
  color: var(--papel);
  font: 600 .875rem var(--fonte-texto);
  backdrop-filter: blur(4px);
}
.etapa i { display: block; height: 5px; margin-top: 8px; border-radius: 3px; background: rgba(243, 238, 231, .22); overflow: hidden; }
.etapa b { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--ambar); transition: width .6s linear; }

/* ---- painel do formulário ---- */
.entrada {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
}

.cartao {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
}

.marca {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--papel-2), 0 10px 24px -12px rgba(110, 27, 36, .55);
  margin-bottom: 22px;
}

h1 {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--vinho-500);
}

.empresa {
  margin: 6px 0 28px;
  font-family: var(--fonte-titulo);
  font-weight: 500;
  font-size: 1.15rem;
  letter-spacing: .01em;
  color: var(--suave);
  display: flex;
  align-items: center;
  gap: 12px;
}
.empresa::after {
  content: '';
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, var(--ambar) 0 36px, var(--papel-2) 36px);
}

label {
  font-size: .875rem;
  font-weight: 600;
  margin: 0 0 6px;
}

input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  font: 400 1rem var(--fonte-texto);
  color: var(--tinta);
  background: #fffdfa;
  border: 1px solid #cfc4b6;
  border-radius: 6px;
  margin-bottom: 18px;
  transition: border-color .15s, box-shadow .15s;
}

input:hover { border-color: #a99b8b; }

input:focus-visible {
  outline: none;
  border-color: var(--vinho-500);
  box-shadow: 0 0 0 3px rgba(110, 27, 36, .18);
}

.campo-senha { position: relative; }
.campo-senha input { padding-right: 84px; }

#ver {
  position: absolute;
  right: 6px;
  top: 6px;
  height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--vinho-500);
  font: 600 .8125rem var(--fonte-texto);
  cursor: pointer;
}
#ver:hover { background: rgba(110, 27, 36, .08); }
#ver:focus-visible { outline: 2px solid var(--vinho-500); outline-offset: 1px; }

.entrar {
  height: 50px;
  margin-top: 4px;
  border: 0;
  border-radius: 6px;
  background: var(--vinho-500);
  color: var(--papel);
  font: 600 1rem var(--fonte-texto);
  letter-spacing: .01em;
  cursor: pointer;
  transition: background .15s, transform .05s;
}
.entrar:hover { background: var(--vinho-600); }
.entrar:active { transform: translateY(1px); }
.entrar:focus-visible { outline: 3px solid rgba(110, 27, 36, .35); outline-offset: 2px; }
.entrar[disabled] { opacity: .7; cursor: progress; }

.aviso {
  margin: 0 0 18px;
  padding: 11px 14px;
  border-left: 3px solid var(--erro);
  background: #f8e7e4;
  color: #6f1511;
  font-size: .9rem;
  line-height: 1.4;
  border-radius: 0 6px 6px 0;
}
.aviso[hidden] { display: none; }
.aviso.info { border-color: var(--ambar); background: #fbf0dc; color: #5b3d08; }

.rodape {
  margin: 22px 0 0;
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--suave);
}

/* ---- celular e telas estreitas: o desenho vira uma faixa no topo ---- */
@media (max-width: 860px) {
  .tela { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .obra {
    height: 34vh;
    min-height: 220px;
    background:
      linear-gradient(to top, #4f4f57 0 9.2%, #c9a06a 9.2% 14.5%, transparent 14.5%),
      linear-gradient(#3f9fe6, #cfeaff 85%);
  }
  .etapa { left: 12px; bottom: auto; top: 12px; min-width: 0; padding: 7px 11px 9px; font-size: .78rem; }
  .entrada { align-items: flex-start; padding: 28px 22px 36px; }
  .marca { width: 60px; height: 60px; margin-bottom: 16px; }
}