/* AUT-01 · Login em tela dividida — reescrito do original do 21st.dev sem React, sem zod e sem
   react-hook-form. ENTREGA O INVÓLUCRO E O PAINEL DE MÍDIA, não o formulário: o formulário é o do
   hospedeiro (no caso que originou isto, o do Odoo). Os campos do exemplo não validam nada.

   Abaixo de 1024 px o painel de mídia não aparece e sobra o formulário, centrado.
   Os filhos do formulário entram escalonados, como no original. */
.c-login {
  --c-aut-fundo: #000;
  --c-aut-tinta: #ebebeb;
  --c-aut-tinta-2: #a8a8a8;
  --c-aut-linha: rgba(235, 235, 235, .14);
  --c-aut-midia-fundo: #0a0a0a;
  --c-aut-veu: linear-gradient(to top, rgba(0, 0, 0, .28), transparent 45%);
  --c-aut-corte: 1024px;            /* documental: o media query abaixo não lê variável */
  --c-aut-destaque: #e8ad32;

  background: var(--c-aut-fundo);
  color: var(--c-aut-tinta);
}
.c-login__cabeca { margin: 0 auto 24px; max-width: 300px; }
.c-login__cabeca h1 { font-size: clamp(2rem, 7vw, 2.6rem); margin: 0 0 8px; line-height: 1.15; letter-spacing: -.01em; }
.c-login__cabeca p { margin: 0; color: var(--c-aut-tinta-2); font-size: .95rem; }
.c-login__form { padding: 32px 24px; }
.c-login__midia { display: none; }

/* a entrada escalonada dos campos: 80 ms entre os filhos do form, teto no sétimo */
@media (prefers-reduced-motion: no-preference) {
  .c-login__cabeca, .c-login__form form > * { animation: c-login-entra .5s cubic-bezier(.16, 1, .3, 1) both; }
  .c-login__form form > :nth-child(3) { animation-delay: .08s; }
  .c-login__form form > :nth-child(4) { animation-delay: .16s; }
  .c-login__form form > :nth-child(5) { animation-delay: .24s; }
  .c-login__form form > :nth-child(6) { animation-delay: .32s; }
  .c-login__form form > :nth-child(n+7) { animation-delay: .4s; }
}
@keyframes c-login-entra { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* no desktop: formulário à esquerda, mídia à direita */
@media (min-width: 1024px) {
  .c-login { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; }
  .c-login__form { display: flex; align-items: center; justify-content: center; padding: 64px 48px; }
  .c-login__form > * { width: 100%; max-width: 420px; }
  .c-login__cabeca { max-width: none; margin: 0 0 32px; }
  .c-login__cabeca h1 { font-size: clamp(2.4rem, 3.2vw, 3rem); }
  .c-login__midia { display: block; position: relative; overflow: hidden; background: var(--c-aut-midia-fundo); border-left: 1px solid var(--c-aut-linha); }
  .c-login__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% 50%; }
  .c-login__veu { position: absolute; inset: 0; background: var(--c-aut-veu); }
}

/* campos de exemplo — troque pelos do seu hospedeiro */
.c-login__campo { display: grid; gap: 6px; margin-bottom: 16px; }
.c-login__campo label { font-size: .85rem; color: var(--c-aut-tinta-2); }
.c-login__campo input {
  height: 44px; padding: 0 12px;
  border: 1px solid var(--c-aut-linha); border-radius: 10px;
  background: transparent; color: var(--c-aut-tinta); font: inherit;
}
.c-login__campo input:focus-visible { outline: 2px solid var(--c-aut-destaque); outline-offset: 2px; }
.c-login__linha { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; font-size: .85rem; color: var(--c-aut-tinta-2); }
.c-login__linha a { color: var(--c-aut-destaque); }
.c-login__rodape { margin-top: 20px; font-size: .85rem; color: var(--c-aut-tinta-2); text-align: center; }