.entrar { max-width: 440px; margin: 0 auto; padding: 24px 16px 40px; }
.entrar-topo { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.entrar-topo img.pistom { width: 64px; height: 64px; }
.entrar-topo img.logo { height: 28px; }
.entrar-topo h1 { font-size: 1.45rem; margin: 6px 0 0; }
.abas { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: var(--linha); padding: 4px; border-radius: var(--raio); margin-bottom: 8px; }
.abas button { min-height: 44px; border: 0; border-radius: 2px; background: transparent; font-weight: 600; cursor: pointer; }
.abas button[aria-selected="true"] { background: var(--cartao); box-shadow: var(--sombra); }
.unidades { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border: 0; padding: 0; margin: 0; }
.unidades legend { font-weight: 600; margin: 1em 0 .35em; padding: 0; }
.chip { display: flex; align-items: center; gap: 6px; min-height: 48px; padding: .4em .8em; border: 1.5px solid var(--linha); border-radius: var(--raio);
  background: var(--cartao); cursor: pointer; font-weight: 500; position: relative; margin: 0; }
.chip:has(input:checked) { border-color: var(--acao); box-shadow: inset 0 0 0 1.5px var(--acao); }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; margin: 0; }
.chip.largo { grid-column: 1 / -1; }
form .botao { margin-top: 1.2em; }
.rodape { margin-top: 1.4em; color: var(--texto-2); font-size: .92em; }
.chip small { color: var(--texto-2); font-size: .82rem; }
.campo-senha { position: relative; }
.campo-senha input { padding-right: 6.2em; }
.mostrar { position: absolute; top: 4px; right: 4px; bottom: 4px; min-width: 5.4em; border: 0; border-radius: 2px; background: var(--suave);
  font-weight: 600; font-size: .9em; cursor: pointer; }
.mostrar:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 2px; }
.vitrine { display: none; }

/* Celular (toque): botão de entrar sempre ao alcance do dedão. */
@media (pointer: coarse) {
  form .botao { position: sticky; bottom: calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 6px 18px rgba(0, 37, 70, .25); }
}

/* Computador (tela larga, sem toque): apresentação à esquerda, login à direita. */
@media (min-width: 960px) and (not (pointer: coarse)) {
  .entrar-tela { display: grid; grid-template-columns: minmax(440px, 46%) 1fr; min-height: 100vh; }
  .vitrine { display: flex; flex-direction: column; gap: 40px; position: relative; overflow: hidden; padding: 48px clamp(40px, 5vw, 80px);
    color: #fff; background: radial-gradient(120% 90% at 0% 0%, #0a3a66 0%, var(--marinho) 55%, #001629 100%); }
  .vitrine::before { content: ''; position: absolute; top: -140px; right: -160px; width: 420px; height: 420px; border-radius: 50%;
    border: 56px solid var(--amarelo); opacity: .14; }
  .vitrine::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--amarelo); }
  .vitrine > * { position: relative; }
  .vitrine-logo { height: 34px; width: auto; align-self: flex-start; }
  .vitrine-meio { margin: auto 0; max-width: 520px; }
  .vitrine-selo { display: inline-block; margin: 0 0 18px; padding: 4px 10px; border-radius: 2px; background: var(--amarelo); color: #0b1a2a;
    font: 700 .78rem/1.3 Saira, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
  .vitrine h2 { font-size: clamp(2.2rem, 3.4vw, 3.2rem); font-weight: 700; letter-spacing: -.01em; margin-bottom: .35em; text-wrap: balance; }
  .vitrine-sub { font-size: 1.15rem; color: #c9d7e6; margin: 0 0 28px; max-width: 30em; }
  .vitrine-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .vitrine-lista li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--raio);
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); font-weight: 600; }
  .vitrine-lista .icone { color: var(--amarelo); width: 24px; height: 24px; }
  .vitrine-qr { display: flex; align-items: center; gap: 20px; padding: 16px; border-radius: var(--raio); background: #fff; color: #0d1b2a;
    max-width: 460px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
  .vitrine-qr .qr { flex: none; width: 112px; height: 112px; }
  .vitrine-qr .qr svg { display: block; width: 100%; height: 100%; }
  .vitrine-qr p { margin: 0; color: #46566a; font-size: .95rem; }
  .vitrine-qr .vitrine-qr-titulo { font: 700 1.1rem/1.2 Saira, sans-serif; color: #002546; margin-bottom: 4px; }
  .vitrine-qr .vitrine-endereco { margin-top: 6px; font-weight: 700; color: #002546; }

  .entrar { align-self: center; width: 100%; max-width: 480px; padding: 48px 32px; }
  .entrar-topo picture { display: none; }
  .entrar-topo h1 { font-size: 2rem; margin: 0; }
  .entrar-topo h1::before { content: 'Entre na'; display: block; font: 500 1rem Barlow, sans-serif; color: var(--texto-2); margin-bottom: 4px; }
  .entrar .cartao { padding: 1.6em 1.8em 1.8em; }
}
@media (min-width: 960px) and (not (pointer: coarse)) and (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .vitrine { background: radial-gradient(120% 90% at 0% 0%, #0f3e6b 0%, #06213b 55%, #030d18 100%); }
}
@media (min-width: 960px) and (not (pointer: coarse)) {
  :root[data-tema="escuro"] .vitrine { background: radial-gradient(120% 90% at 0% 0%, #0f3e6b 0%, #06213b 55%, #030d18 100%); }
}