/* Página de login com o hero do trio. Portado do protótipo aprovado (kit login-hero, 19/09/2026).
   Só esta página carrega este arquivo, então os tokens do DS v3 podem ser redefinidos aqui sem tocar no resto do portal.
   O palco do trio é sempre papel cru: o fundo está assado nos frames. */
.login-hero .app-header, .login-hero .app-footer { display: none; }
.login-hero main { display: block; }
  /* =========================================================
     Placey DS v3 "Azulejo" (docs/placey-design-system.html)
     Tokens copiados do DS. Modo produto: corpo 16px, mono 12px, titulo de painel 28px.
     ========================================================= */
  :root {
    --fundo: #F4EFE3; --fundo-alt: #EDE6D6; --superficie: #FBF8F0; --superficie-alta: #FFFFFF;
    --texto: #16131C; --texto-2: #3B3644; --texto-3: #6B6376; --texto-4: #B9B2C4;
    --acao: #2430F0; --acao-tinta: #FFFFFF; --tangerina: #FF5A1F;
    --linha: rgba(22, 19, 28, .10); --linha-forte: rgba(22, 19, 28, .22);
    --erro: #D9482B; --erro-bg: rgba(217, 72, 43, .11);
    --info-bg: rgba(36, 48, 240, .09);
    --s1: 0 2px 10px rgba(22, 19, 28, .06);
    --halo: 0 8px 26px rgba(36, 48, 240, .28);
    --r1: 12px; --r2: 18px; --r3: 26px; --rp: 999px;
    --d1: .18s; --d2: .45s; --ease: cubic-bezier(.22, 1, .36, 1); --mola: cubic-bezier(.34, 1.56, .64, 1);
    /* O palco do trio e sempre papel cru: o fundo esta assado nos frames do video.
       No tema escuro ele vira um azulejo claro sobre a tinta. Por isso estes quatro nao trocam. */
    --palco: #F4EFE3; --palco-texto: #16131C; --palco-meta: #6B6376;
    --of-traco: #FF5A1F; --of-casa: #2430F0; --of-zelo: #E8A817;
    --display: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
    --corpo: "Schibsted Grotesk", "Segoe UI", system-ui, sans-serif;
    --mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not(.light) {
      --fundo: #0E0C12; --fundo-alt: #17141D; --superficie: #1C1822; --superficie-alta: #25202D;
      --texto: #F4EFE3; --texto-2: #D3CCD9; --texto-3: #9A92A8; --texto-4: #5A5266;
      --acao: #8288FF; --acao-tinta: #0E0C12; --tangerina: #FF7A48;
      --linha: rgba(244, 239, 227, .10); --linha-forte: rgba(244, 239, 227, .22);
      --erro: #FF7A5C; --erro-bg: rgba(255, 122, 92, .13); --info-bg: rgba(130, 136, 255, .13);
      --s1: 0 2px 10px rgba(0, 0, 0, .35); --halo: 0 8px 26px rgba(130, 136, 255, .30);
    }
  }
  :root[data-theme="dark"], html.dark {
    --fundo: #0E0C12; --fundo-alt: #17141D; --superficie: #1C1822; --superficie-alta: #25202D;
    --texto: #F4EFE3; --texto-2: #D3CCD9; --texto-3: #9A92A8; --texto-4: #5A5266;
    --acao: #8288FF; --acao-tinta: #0E0C12; --tangerina: #FF7A48;
    --linha: rgba(244, 239, 227, .10); --linha-forte: rgba(244, 239, 227, .22);
    --erro: #FF7A5C; --erro-bg: rgba(255, 122, 92, .13); --info-bg: rgba(130, 136, 255, .13);
    --s1: 0 2px 10px rgba(0, 0, 0, .35); --halo: 0 8px 26px rgba(130, 136, 255, .30);
  }

  *, *::before, *::after { box-sizing: border-box; }
  html, body { height: 100%; }
  body {
    margin: 0;
    background: var(--fundo);
    color: var(--texto);
    font: 400 16px/1.6 var(--corpo);
    -webkit-font-smoothing: antialiased;
  }
  ::selection { background: var(--tangerina); color: #FFF8EF; }
  a:focus-visible, button:focus-visible, input:focus-visible { outline: 4px solid var(--acao); outline-offset: 3px; }

  /* ---------- Estrutura: trio a esquerda, login a direita ---------- */
  .pagina {
    min-height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  }
  .palco-col { padding: 16px; display: flex; min-width: 0; }
  .palco {
    flex: 1;
    min-width: 0;
    position: relative;
    background: var(--palco);
    color: var(--palco-texto);
    border-radius: var(--r3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 88px clamp(8px, 3vw, 48px) 56px;
  }
  .marca {
    position: absolute;
    top: 24px; left: 28px;
    font: 800 30px/1 var(--display);
    letter-spacing: -.032em;
    color: var(--palco-texto);
    text-decoration: none;
    display: inline-flex;
    align-items: baseline;
    padding-block: 7px; /* alvo de toque de 44px */
    border-radius: 6px;
  }
  .marca i {
    display: inline-block;
    width: .44em; height: .86em;
    margin-left: .05em;
    background: #FF5A1F; /* o cursor nunca muda de cor sozinho: sobre papel e sempre tangerina */
    border-radius: 4px;
    animation: pisca 1.1s steps(1) infinite;
  }
  @keyframes pisca { 50% { opacity: 0; } }

  .trio { width: min(640px, 100%); }
  .hero {
    position: relative; width: 100%; max-width: 100%; aspect-ratio: 540 / 304;
    /* dissolve so a borda do quadro (fora da area dos personagens) para o grao do video nao desenhar uma caixa no papel */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 2%, #000 98%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 8%, #000 93%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0, #000 2%, #000 98%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 8%, #000 93%, transparent 100%);
    mask-composite: intersect;
  }
  .hero canvas {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    display: block;
    background: var(--palco) center / 100% 100% no-repeat;
    background-image: url("hero/hero-poster.f1f29bc8b162.jpg");
  }
  /* cada nome fica sob o seu personagem (centros medidos no frame 0: 19.5% / 50% / 81%) */
  .oficios {
    list-style: none;
    margin: -2% 0 0;
    padding: 0;
    position: relative;
    height: 40px;
  }
  .oficios li {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font: 400 12px/1.5 var(--mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--palco-meta);
    text-align: center;
    white-space: nowrap;
  }
  .oficios b { display: block; font-weight: 700; color: var(--palco-texto); }
  .oficios b::before { content: ""; display: inline-block; width: .5em; height: .82em; border-radius: 2px; margin-right: .55em; vertical-align: -.08em; background: var(--of); }
  .oficios li:nth-child(1) { left: 19.5%; --of: var(--of-traco); }
  .oficios li:nth-child(2) { left: 50%; --of: var(--of-casa); }
  .oficios li:nth-child(3) { left: 81%; --of: var(--of-zelo); }

  /* ---------- Painel de login ---------- */
  .painel {
    background: var(--fundo); /* a tela inteira em papel cru: trio e formulario no mesmo chao */
    display: grid;
    place-items: center;
    padding-inline: clamp(20px, 5vw, 72px);
    padding-block: 48px;
    min-width: 0;
  }
  .acesso { width: min(400px, 100%); display: flex; flex-direction: column; gap: 28px; }
  .cabeca { display: flex; flex-direction: column; gap: 10px; }
  .tag { margin: 0; font: 400 12px/1.4 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--acao); }
  .tag::before { content: "\25AE\00A0"; color: var(--tangerina); letter-spacing: 0; }
  h1 { margin: 0; font: 800 28px/1.06 var(--display); letter-spacing: -.02em; text-wrap: balance; }
  .sub { margin: 0; color: var(--texto-2); max-width: 38ch; }

  form { display: flex; flex-direction: column; gap: 20px; }
  .campo-grupo { display: flex; flex-direction: column; }
  .rot-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
  .rot { font: 400 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3); }
  .entrada { position: relative; display: flex; }
  .login-hero .campo {
    width: 100%;
    height: 56px;
    font: 400 16px/1.2 var(--corpo);
    color: var(--texto);
    background: var(--superficie-alta);
    border: 1px solid var(--linha-forte);
    border-radius: var(--r1);
    padding: 0 16px;
    transition: border-color var(--d1), box-shadow var(--d1);
  }
  .login-hero .campo::placeholder { color: var(--texto-3); opacity: 1; }
  .login-hero .campo:hover { border-color: var(--texto-3); }
  .login-hero .campo:focus { border-color: var(--acao); box-shadow: 0 0 0 4px var(--info-bg); }
  .login-hero .campo[aria-invalid="true"] { border-color: var(--erro); box-shadow: 0 0 0 4px var(--erro-bg); }
  .login-hero .campo.com-acao { padding-right: 96px; }
  .mostrar {
    position: absolute;
    right: 6px; top: 6px;
    min-width: 44px; height: 44px;
    padding: 0 12px;
    font: 700 12px/1 var(--mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--acao);
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background var(--d1);
  }
  .mostrar:hover { background: var(--info-bg); }
  /* linha de apoio: altura reservada, nada pula quando o texto troca */
  .apoio { margin: 8px 0 0; min-height: 1.5em; font-size: 14px; line-height: 1.5; color: var(--texto-3); transition: opacity var(--d1) var(--ease); }
  .apoio.trocando { opacity: 0; }
  .erro:not([hidden]) + .apoio { display: none; }
  /* --erro sobre --superficie da 4,03:1, abaixo do AA para 14px. O texto vai em --texto e a cor de erro fica no marcador e na borda. */
  .erro { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--texto); }
  .erro::before { content: ""; display: inline-block; width: .5em; height: .82em; border-radius: 2px; margin-right: .55em; vertical-align: -.08em; background: var(--erro); }

  .btn {
    position: relative;
    overflow: hidden;
    height: 56px;
    padding: 0 26px;
    font: 600 16px/1 var(--display);
    white-space: nowrap;
    border: none;
    border-radius: var(--rp);
    cursor: pointer;
    transition: transform var(--d2) var(--mola), box-shadow var(--d2), background var(--d1);
  }
  .btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%); transform: translateX(-110%); transition: transform .7s var(--ease); }
  .btn:hover::after { transform: translateX(110%); }
  .btn-acao { background: var(--acao); color: var(--acao-tinta); }
  .btn-acao:hover { transform: translateY(-3px); box-shadow: var(--halo); }
  .btn-acao:active { transform: translateY(0); box-shadow: none; transition-duration: var(--d1); }
  .btn[aria-busy="true"] { cursor: progress; transform: none; box-shadow: none; opacity: .8; }

  .ou { display: flex; align-items: center; gap: 14px; margin: 0; font: 400 12px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--texto-3); }
  .ou::before, .ou::after { content: ""; flex: 1; height: 1px; background: var(--linha-forte); }
  /* Botão do Google: HTML próprio no DS + branding da Google.
     Pilula, 56px (mesma altura do campo), Schibsted 600 16px, "G" oficial intacto sobre tile branco com respiro. */
  .btn-google {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    height: 56px; padding: 0 26px 0 12px;
    font: 600 16px/1 var(--corpo);
    color: var(--texto); text-decoration: none; white-space: nowrap;
    background: var(--superficie-alta);
    border: 1px solid var(--linha-forte);
    border-radius: var(--rp);
    transition: transform var(--d2) var(--mola), border-color var(--d1), box-shadow var(--d2);
  }
  .btn-google:hover { transform: translateY(-3px); border-color: var(--acao); box-shadow: var(--s1); }
  .btn-google:active { transform: translateY(0); transition-duration: var(--d1); }
  .g-tile { flex: none; width: 36px; height: 36px; border-radius: 50%; background: #FFFFFF; display: grid; place-items: center; }
  .g-tile img { width: 20px; height: 20px; display: block; }

  .link { color: var(--acao); text-decoration: underline; text-underline-offset: 3px; border-radius: 6px; font-size: 14px; }
  .link:hover { text-decoration-thickness: 2px; }
  .status { margin: 0; padding: 14px 16px; border-radius: var(--r1); background: var(--info-bg); color: var(--texto-2); font-size: 14px; line-height: 1.5; }
  .rodape { margin: 0; font-size: 14px; color: var(--texto-3); }
  .rodape .link { padding-block: 12px; }

  /* ---------- Responsivo: empilha, trio primeiro ---------- */
  @media (max-width: 920px) {
    .pagina { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
    .palco-col { padding: 16px 16px 0; }
    .palco { padding: 72px 8px 28px; }
    .marca { top: 16px; left: 20px; font-size: 26px; }
    .painel { padding-block: 32px 40px; place-items: start center; }
    .oficios li { font-size: 12px; letter-spacing: .06em; }
  }
  @media (max-width: 420px) {
    .oficios li span { display: none; } /* so os nomes: os verbos nao cabem lado a lado */
    .oficios { height: 24px; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
  }

  /* Porte para o site real: o botão do Google é submit de um form POST (a rota /entrar/google é @require_POST),
     e a marca é o ativo oficial da Google, que já vem com o seu próprio tile branco e a sua área de respiro. */
  .forma-google { margin: 0; }
  .btn-google { width: 100%; padding: 0 26px 0 8px; cursor: pointer; }
  .btn-google img { width: 40px; height: 40px; flex-shrink: 0; display: block; }
  .btn-google:disabled { cursor: not-allowed; opacity: .6; transform: none; box-shadow: none; }
  .btn-google:disabled:hover { border-color: var(--linha-forte); }
  /* Aceite do kit: alvo de toque de 44 px. O protótipo deixava «Esqueci minha senha» com 22 px e «Criar conta» com 42. */
  .link { display: inline-flex; align-items: center; min-height: 44px; }
  .rot-linha:has(.link) { min-height: 44px; }  /* só a linha que tem link precisa do alvo de 44 px */
  .marca { min-height: 44px; align-items: center; }
  .login-hero [aria-invalid="true"] { border-color: var(--erro) !important; }
  .login-hero .btn-acao[aria-busy="true"], .login-hero .btn-acao.is-pending { opacity: 1; color: var(--acao-tinta); background: var(--acao); }