/* =========================================================
   Controle de Pedágio · Grupo Trevo — login
   Design system btime 1.0 (tokens, tipografia, motion).
   Sem dependências externas. Fontes servidas pelo próprio app.
   ========================================================= */

:root {
  /* marca */
  --noite: #060315;
  --violeta: #571EE6;
  --violeta-2: #4A16D0;
  --lavanda: #D5C5FF;
  --branco-frio: #F7F6FB;
  --rosa: #E61E6D;

  /* texto sobre a cena (noite) */
  --c-texto: #F7F6FB;
  --c-texto-2: rgba(247, 246, 251, .74);
  --c-texto-3: rgba(247, 246, 251, .64);
  --c-linha: rgba(213, 197, 255, .18);

  /* painel de acesso — claro */
  --p-fundo: #F7F6FB;
  --p-contorno: rgba(255, 255, 255, .7);
  --p-sombra: 0 40px 120px -40px rgba(0, 0, 0, .75), 0 0 0 1px rgba(6, 3, 21, .04);
  --p-texto: #060315;
  --p-muted: #62596F;
  --p-borda: #817990;
  --p-divisor: #E1DDEB;
  --p-campo: #FFFFFF;
  --p-campo-hover: #FFFFFF;
  --p-foco: #571EE6;
  --p-halo: rgba(87, 30, 230, .18);
  --p-luz: rgba(87, 30, 230, .14);
  --p-link: #571EE6;
  --p-erro: #B42343;
  --p-erro-fundo: #FDEEF2;
  --p-erro-borda: #B42343;
  --btn-contorno: transparent;

  /* forma e movimento (tokens btime) */
  --raio-controle: 8px;
  --raio-card: 12px;
  --raio-painel: 24px;
  --feedback: 160ms;
  --transicao: 320ms;
  --revela: 640ms;
  --ease-out: cubic-bezier(.2, 0, 0, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);

  --pw: clamp(400px, 34vw, 500px);
  --fonte: Branding, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --p-fundo: rgba(21, 16, 37, .82);
    --p-contorno: rgba(213, 197, 255, .16);
    --p-sombra: 0 40px 120px -40px rgba(0, 0, 0, .9);
    --p-texto: #F7F6FB;
    --p-muted: #B8B0C9;
    --p-borda: #80728F;
    --p-divisor: #352B4A;
    --p-campo: rgba(6, 3, 21, .55);
    --p-campo-hover: rgba(6, 3, 21, .7);
    --p-foco: #D5C5FF;
    --p-halo: rgba(213, 197, 255, .16);
    --p-luz: rgba(87, 30, 230, .32);
    --p-link: #D5C5FF;
    --p-erro-borda: #F08AA3;
    --btn-contorno: rgba(213, 197, 255, .7);
  }
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--noite); }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--fonte);
  font-weight: 350;
  font-synthesis: none;
  line-height: 1.5;
  color: var(--p-texto);
  background: var(--noite);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, strong, b { font-weight: 600; }
h1, h2 { margin: 0; }
button, input { font: inherit; }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- estrutura ---------- */

.pagina {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--pw);
  min-height: 100vh;
  min-height: 100dvh;
}

/* ---------- cena ---------- */

.cena {
  grid-column: 1 / -1;
  grid-row: 1;
  position: relative;
  display: flex;
  color: var(--c-texto);
  background: var(--noite);
  overflow: hidden;
  isolation: isolate;
}

.cena-fundo { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.cena-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.aurora {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}
.aurora-1 {
  width: 70vmax; height: 70vmax;
  left: -18vmax; top: 18%;
  background: radial-gradient(closest-side, rgba(87, 30, 230, .5), rgba(87, 30, 230, .12) 55%, transparent 72%);
  animation: deriva-1 26s var(--ease-in-out) infinite alternate;
}
.aurora-2 {
  width: 56vmax; height: 56vmax;
  left: 34%; top: -26%;
  background: radial-gradient(closest-side, rgba(87, 30, 230, .32), rgba(213, 197, 255, .05) 60%, transparent 72%);
  animation: deriva-2 32s var(--ease-in-out) infinite alternate;
}
.malha {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(213, 197, 255, .12) 1px, transparent 1.3px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 35% 60%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 35% 60%, #000 0%, transparent 75%);
}

.cena-conteudo {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: calc(100% - var(--pw) - 32px);
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(28px, 4.4vh, 48px) clamp(24px, 4.4vw, 64px) clamp(20px, 3vh, 32px);
}

.logo { display: block; width: 148px; height: auto; }

.titulo { margin-top: clamp(16px, 6vh, 72px); }

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 30px;
  margin: 0;
  padding: 0 14px 0 12px;
  border: 1px solid rgba(213, 197, 255, .26);
  border-radius: 999px;
  background: rgba(213, 197, 255, .06);
  color: var(--lavanda);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.kicker-ponto { position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--rosa); }
.kicker-ponto::after {
  content: "";
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--rosa);
  animation: ping 2.4s var(--ease-out) infinite;
}

.titulo-h1 {
  margin: 22px 0 16px;
  font-size: clamp(40px, 4.6vw, 68px);
  line-height: 1.02;
  letter-spacing: -.025em;
}
.titulo-h1 .linha { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.titulo-h1 .palavra { display: inline-block; }
.titulo-h1 .destaque { color: var(--lavanda); }

.titulo-sub {
  margin: 0;
  max-width: 38ch;
  color: var(--c-texto-2);
  font-size: clamp(16px, 1.25vw, 18px);
}

.palco { flex: 1 1 0; min-height: 140px; }

/* ---------- HUD de leitura ---------- */

.hud {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 12px;
  width: 100%;
  max-width: 900px;
}
.hud-inner { display: contents; }

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 116px;
  padding: 14px 16px;
  border: 1px solid rgba(213, 197, 255, .16);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 24px 48px -28px rgba(0, 0, 0, .9);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  overflow: hidden;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
  transition: transform 900ms var(--ease-out), border-color var(--transicao) var(--ease-out);
}
.tile::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 0%, rgba(87, 30, 230, .45), transparent 70%);
  opacity: 0;
  transition: opacity var(--revela) var(--ease-out);
  pointer-events: none;
}
.tile.ativo { border-color: rgba(213, 197, 255, .42); }
.tile.ativo::before { opacity: 1; }
.tile > * { position: relative; }

.tile-cab { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tile-ico { width: 18px; height: 18px; flex: none; color: var(--lavanda); }
.tile-ico path { fill: none; stroke: currentColor; stroke-width: 5.34881; stroke-linecap: round; stroke-linejoin: round; }
.tile-rot {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-texto-3);
  white-space: nowrap;
}
.tile-estado {
  margin-left: auto;
  font-size: 12px;
  font-weight: 500;
  color: var(--lavanda);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity var(--transicao) var(--ease-out);
}

.slots { display: flex; gap: 6px; }
.slot {
  position: relative;
  flex: 1;
  max-width: 28px;
  height: 24px;
  border: 1px solid rgba(213, 197, 255, .28);
  border-radius: 6px;
  overflow: hidden;
  transition: border-color var(--transicao) var(--ease-out);
}
.slot::before {
  content: "";
  position: absolute; inset: 2px;
  border-radius: 4px;
  background: linear-gradient(180deg, #FFFFFF, var(--lavanda));
  box-shadow: 0 0 14px rgba(213, 197, 255, .9);
  opacity: 0;
  transform: scaleY(.15);
  transform-origin: bottom;
  transition: opacity var(--transicao) var(--ease-out), transform var(--transicao) var(--ease-out);
}
.slot::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 6px; height: 6px;
  border-left: 1.5px solid var(--lavanda);
  border-top: 1.5px solid var(--lavanda);
  opacity: 0;
  transform: translate(-50%, 10%) rotate(45deg);
  transition: opacity var(--transicao) var(--ease-out), transform var(--transicao) var(--ease-out);
}
.slot.lido { border-color: rgba(213, 197, 255, .7); }
.slot.lido::before { opacity: 1; transform: none; }
.slot.susp { border-style: dashed; border-color: rgba(213, 197, 255, .5); }
.slot.susp::after { opacity: 1; transform: translate(-50%, -20%) rotate(45deg); }

.tile-rodape { display: flex; align-items: baseline; gap: 8px; margin-top: auto; font-size: 12px; color: var(--c-texto-3); }
.tile-rodape strong { font-size: 22px; line-height: 1; color: var(--c-texto); }

.v-linha {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "rot tag" "val val";
  align-items: center;
  row-gap: 2px;
  transition: opacity var(--transicao) var(--ease-out);
}
.v-linha + .v-linha { padding-top: 10px; border-top: 1px solid var(--c-linha); }
.v-rot { grid-area: rot; font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--c-texto-3); }
.v-linha strong { grid-area: val; font-size: 20px; line-height: 1.2; color: var(--c-texto); }
.v-devido strong { color: var(--lavanda); }
.v-tag {
  grid-area: tag;
  padding: 1px 8px;
  border: 1px solid rgba(213, 197, 255, .3);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  color: var(--lavanda);
}

.tile-recuperar {
  border-color: rgba(213, 197, 255, .3);
  background: linear-gradient(155deg, rgba(87, 30, 230, .62), rgba(87, 30, 230, .2) 70%);
}
.tile-recuperar .tile-rot { color: rgba(247, 246, 251, .82); }
.grande { font-size: clamp(26px, 2.2vw, 32px); line-height: 1.05; letter-spacing: -.01em; color: #FFFFFF; }
.chip-ok {
  position: absolute;
  top: 12px; right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 6px;
  border: 1px solid rgba(213, 197, 255, .45);
  border-radius: 999px;
  background: rgba(247, 246, 251, .12);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 500;
  transition: opacity var(--transicao) var(--ease-out), transform var(--transicao) var(--ease-out);
}
.chip-ok svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.periodo { margin-top: auto; font-size: 12px; color: rgba(247, 246, 251, .8); }
.periodo b { color: #FFFFFF; }

.pulsa { animation: pulsa 520ms var(--ease-out); }

/* estados controlados pelo JS (sem JS: estado final visível) */
.hud.vivo .v-devido { opacity: .32; }
.hud.vivo.h-devido .v-devido { opacity: 1; }
.hud.vivo .v-linha:first-child { opacity: .32; }
.hud.vivo.h-fatura .v-linha:first-child { opacity: 1; }
.hud.vivo .chip-ok { opacity: 0; transform: scale(.85); }
.hud.vivo.h-ok .chip-ok { opacity: 1; transform: none; }

.cena-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--c-texto-3);
  font-size: 12px;
}
.pausa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px 0 12px;
  border: 1px solid rgba(213, 197, 255, .22);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  color: var(--c-texto);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--feedback) var(--ease-out), border-color var(--feedback) var(--ease-out);
}
.pausa:hover { background: rgba(255, 255, 255, .09); border-color: rgba(213, 197, 255, .45); }
.pausa:focus-visible { outline: 2px solid var(--lavanda); outline-offset: 4px; }
.pausa svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pausa .i-play { display: none; fill: currentColor; }
.pausa[aria-pressed="true"] .i-pausa { display: none; }
.pausa[aria-pressed="true"] .i-play { display: block; }
.pausa[aria-pressed="true"] { border-color: rgba(213, 197, 255, .55); }
.nota { margin-left: auto; }
.cena.pausado .aurora,
.cena.pausado .kicker-ponto::after { animation-play-state: paused; }

/* ---------- painel de acesso ---------- */

.painel {
  grid-column: 2;
  grid-row: 1;
  position: sticky;
  top: 16px;
  z-index: 2;
  align-self: start;
  height: calc(100vh - 32px);
  height: calc(100dvh - 32px);
  min-height: 560px;
  margin: 16px 16px 16px 0;
  border: 1px solid var(--p-contorno);
  border-radius: var(--raio-painel);
  background: var(--p-fundo);
  box-shadow: var(--p-sombra);
  color: var(--p-texto);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  backdrop-filter: blur(28px) saturate(150%);
  overflow: hidden;
  animation: painel-entra 900ms var(--ease-out) both;
}

.painel-luz {
  position: absolute;
  left: 0; top: 0;
  width: 560px; height: 560px;
  margin: -280px 0 0 -280px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--p-luz), transparent);
  opacity: 0;
  transform: translate3d(var(--lx, 240px), var(--ly, 200px), 0);
  transition: opacity 600ms var(--ease-out);
  pointer-events: none;
}
.painel.iluminado .painel-luz { opacity: 1; }
.painel::before {
  content: "";
  position: absolute;
  right: -30%; top: -30%;
  width: 90%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--p-luz), transparent);
  pointer-events: none;
}

.painel-corpo {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 28px clamp(28px, 3.2vw, 48px) 20px;
}

.painel-cab {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--p-muted);
  font-size: 14px;
  font-weight: 500;
}
.simbolo { display: block; width: auto; height: 24px; }

.acesso {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  padding: 24px 0;
}
.acesso h2 {
  margin-bottom: 28px;
  font-size: clamp(32px, 2.8vw, 40px);
  line-height: 1.1;
  letter-spacing: -.02em;
}

.erro {
  margin: -8px 0 20px;
  padding: 12px 14px;
  border: 1px solid var(--p-erro-borda);
  border-radius: var(--raio-controle);
  background: var(--p-erro-fundo);
  color: var(--p-erro);
  font-size: 14px;
  font-weight: 500;
  animation: erro-entra var(--transicao) var(--ease-out) both;
}
.erro:empty { display: none; }

.form-login { display: flex; flex-direction: column; gap: 20px; }

.campo label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
}

.campo-caixa { position: relative; border-radius: var(--raio-controle); }
.campo-caixa::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: calc(var(--raio-controle) + 1px);
  box-shadow: 0 0 0 4px var(--p-halo), 0 8px 28px -6px var(--p-halo);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transicao) var(--ease-out);
}
.campo-caixa:focus-within::after { opacity: 1; }

.campo-ico {
  position: absolute;
  left: 14px; top: 50%;
  width: 20px; height: 20px;
  margin-top: -10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--p-muted);
  pointer-events: none;
  transition: color var(--feedback) var(--ease-out);
}
.campo-caixa:focus-within .campo-ico { color: var(--p-foco); }

.campo input {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 16px 0 46px;
  border: 1px solid var(--p-borda);
  border-radius: var(--raio-controle);
  background: var(--p-campo);
  color: var(--p-texto);
  font-size: 16px;
  font-weight: 350;
  transition: border-color var(--feedback) var(--ease-out), background-color var(--feedback) var(--ease-out);
}
.campo-caixa.com-acao input { padding-right: 52px; }
.campo input:hover { background: var(--p-campo-hover); border-color: var(--p-texto); }
.campo input:focus { outline: none; border-color: var(--p-foco); box-shadow: inset 0 0 0 1px var(--p-foco); }
.campo input[aria-invalid="true"] { border-color: var(--p-erro-borda); }
.campo input[aria-invalid="true"]:focus { box-shadow: inset 0 0 0 1px var(--p-erro-borda); }

.campo-feixe {
  position: absolute;
  left: 10px; right: 10px; bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--p-foco) 30%, var(--lavanda) 50%, var(--p-foco) 70%, transparent);
  opacity: 0;
  transform: scaleX(0);
  transition: transform var(--revela) var(--ease-out), opacity var(--transicao) var(--ease-out);
  pointer-events: none;
}
.campo-caixa:focus-within .campo-feixe { opacity: 1; transform: scaleX(1); }

.revelar {
  position: absolute;
  top: 4px; right: 4px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--p-muted);
  cursor: pointer;
  transition: color var(--feedback) var(--ease-out), background-color var(--feedback) var(--ease-out);
}
.revelar:hover { color: var(--p-texto); background: var(--p-halo); }
.revelar:focus-visible { outline: 2px solid var(--p-foco); outline-offset: -2px; }
.revelar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.revelar .olho-fechado { display: none; }
.revelar[aria-pressed="true"] .olho-aberto { display: none; }
.revelar[aria-pressed="true"] .olho-fechado { display: block; }

.aviso-caps {
  display: inline-block;
  margin: 8px 0 0;
  padding: 2px 10px;
  border-radius: 999px;
  background: #FFF4DC;
  color: #7A4D00;
  font-size: 12px;
  font-weight: 500;
}
.aviso-caps:empty { padding: 0; margin: 0; }

/* botão primário com feixe na borda */
.btn-entrar {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 48px;
  margin-top: 8px;
  padding: 0 24px;
  border: 1px solid var(--btn-contorno);
  border-radius: var(--raio-controle);
  background: var(--violeta);
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--feedback) var(--ease-out), box-shadow var(--transicao) var(--ease-out);
  box-shadow: 0 10px 30px -12px rgba(87, 30, 230, .7);
}
.btn-entrar::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 600px; height: 600px;
  margin: -300px 0 0 -300px;
  z-index: -2;
  background: conic-gradient(from 0deg, transparent 0 62%, rgba(213, 197, 255, .95) 74%, #FFFFFF 76%, transparent 86%);
  opacity: 0;
  animation: gira 3.2s linear infinite;
  transition: opacity var(--transicao) var(--ease-out);
}
.btn-entrar::after {
  content: "";
  position: absolute;
  inset: 1.5px;
  z-index: -1;
  border-radius: calc(var(--raio-controle) - 1.5px);
  background: linear-gradient(180deg, #6129F0, var(--violeta) 55%, var(--violeta-2));
}
.btn-entrar:hover::before,
.btn-entrar:focus-visible::before,
.btn-entrar.is-loading::before { opacity: 1; }
.btn-entrar:hover { box-shadow: 0 16px 40px -12px rgba(87, 30, 230, .9); }
.btn-entrar:active { transform: scale(.98); }
.btn-entrar:focus-visible { outline: 2px solid var(--p-foco); outline-offset: 4px; }

.btn-seta { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--transicao) var(--ease-out); }
.btn-entrar:hover .btn-seta { transform: translateX(4px); }

.btn-spinner {
  display: none;
  width: 16px; height: 16px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #FFFFFF;
  border-radius: 50%;
}
.btn-entrar.is-loading { cursor: progress; }
.btn-entrar.is-loading .btn-spinner { display: block; animation: gira .7s linear infinite; }
.btn-entrar.is-loading .btn-seta { display: none; }

.esqueci {
  align-self: center;
  padding: 6px 8px;
  border-radius: 4px;
  color: var(--p-link);
  font-size: 14px;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.esqueci:hover { text-decoration-thickness: 2px; }
.esqueci:focus-visible { outline: 2px solid var(--p-foco); outline-offset: 4px; }

.rodape {
  padding-top: 16px;
  border-top: 1px solid var(--p-divisor);
  color: var(--p-muted);
  font-size: 12px;
  text-align: center;
}

.acesso.treme { animation: treme 420ms cubic-bezier(.36, .07, .19, .97) both; }

/* ---------- entrada escalonada ---------- */

.revela { animation: revela var(--revela) var(--ease-out) both; }
.titulo-h1 .palavra.revela { animation-name: mascara; animation-duration: 820ms; }
.r1 { animation-delay: 60ms; }
.r2 { animation-delay: 140ms; }
.r3 { animation-delay: 220ms; }
.r4 { animation-delay: 300ms; }
.r5 { animation-delay: 380ms; }
.r6 { animation-delay: 460ms; }
.r7 { animation-delay: 540ms; }

/* ---------- keyframes ---------- */

@keyframes revela { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes mascara { from { transform: translateY(110%); } to { transform: none; } }
@keyframes painel-entra { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } }
@keyframes erro-entra { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes treme {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(2px); }
}
@keyframes gira { to { transform: rotate(360deg); } }
@keyframes ping { 0% { opacity: .9; transform: scale(.6); } 80%, 100% { opacity: 0; transform: scale(2.2); } }
@keyframes pulsa { 0% { transform: scale(1); } 35% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes deriva-1 { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(8vmax, -6vmax, 0) scale(1.12); } }
@keyframes deriva-2 { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-10vmax, 8vmax, 0) scale(.9); } }

/* ---------- responsivo ---------- */

@media (min-width: 960px) and (max-width: 1199px) {
  .hud { grid-template-columns: 1.25fr 1fr; }
  .tile-valores { display: none; }
}

@media (min-width: 960px) and (max-height: 820px) {
  .cena-conteudo { gap: 14px; }
  .logo { width: 132px; }
  .titulo { margin-top: 8px; }
  .titulo-h1 { margin: 16px 0 10px; font-size: clamp(36px, 3.8vw, 52px); }
  .tile { min-height: 104px; padding: 12px 14px; gap: 8px; }
  .slot { height: 20px; }
  .pausa { min-height: 40px; }
  .acesso h2 { margin-bottom: 20px; }
  .form-login { gap: 16px; }
}

@media (max-width: 959px) {
  .pagina { display: block; }
  .cena { min-height: 0; }
  .cena-conteudo { width: 100%; min-height: 0; gap: 14px; padding: 20px 20px 44px; }
  .logo { width: 124px; }
  .titulo { margin-top: 12px; }
  .titulo-h1 { margin: 16px 0 10px; font-size: clamp(34px, 9vw, 44px); }
  .palco { flex: none; height: clamp(150px, 42vw, 240px); min-height: 0; }
  .hud { grid-template-columns: minmax(0, 1fr); max-width: 440px; }
  .tile-eixos, .tile-valores { display: none; }
  .tile { min-height: 0; }
  .tile-recuperar { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 12px; }
  .tile-recuperar .tile-rot { flex-basis: 100%; }
  .grande { font-size: 26px; }
  .periodo { margin-top: 0; }
  .painel {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
    margin: -24px 0 0;
    border-radius: var(--raio-painel) var(--raio-painel) 0 0;
    border-bottom: 0;
    animation-name: revela;
  }
  .painel-corpo { padding: 24px 20px 20px; }
  .acesso { max-width: 440px; padding: 28px 0 32px; }
}

@media (max-width: 380px) {
  .cena-rodape .nota { display: none; }
}

/* ---------- movimento reduzido ---------- */

@media (prefers-reduced-motion: reduce) {
  .revela, .titulo-h1 .palavra.revela, .painel, .erro,
  .aurora, .kicker-ponto::after, .acesso.treme,
  .btn-entrar::before, .pulsa { animation: none !important; }
  .btn-entrar.is-loading .btn-spinner { animation: none; }
  .tile, .slot::before, .slot::after, .campo-feixe, .btn-seta, .painel-luz { transition: none; }
  .tile { transform: none; }
  .painel-luz { display: none; }
}

/* Avisos do servidor (ex.: acesso criado) */
.aviso-login {
  margin: 0 0 16px; padding: 10px 14px; border-radius: var(--raio-controle);
  background: var(--p-luz); color: var(--p-texto); border-left: 3px solid var(--p-foco); font-size: .9375rem;
}