/* ============================================================
   HOVER iT — ÁREA DE ACESSO
   Dark-first · Ciano elétrico (logo) sobre near-black
   ============================================================ */

:root {
  /* ---- Ink ramp ---- */
  --hv-black:     #050708;
  --hv-ink-1000:  #050708;
  --hv-ink-950:   #080A0C;
  --hv-ink-900:   #0C0F12;
  --hv-ink-850:   #101418;
  --hv-ink-800:   #14191E;
  --hv-ink-700:   #1B2229;
  --hv-ink-600:   #232C34;
  --hv-ink-500:   #2E3941;
  --hv-ink-400:   #3C4750;
  --hv-ink-300:   #59646D;
  --hv-ink-200:   #808B94;
  --hv-ink-100:   #AEB6BD;
  --hv-ink-050:   #D6DBDF;
  --hv-white:     #F2F5F7;

  /* ---- Ciano — accent da marca (logo) ---- */
  --hv-cyan-700:  #0E8C99;
  --hv-cyan-600:  #16AFBE;
  --hv-cyan-500:  #22D3EE;  /* BASE — cor do logo */
  --hv-cyan-400:  #5FE3F5;
  --hv-cyan-300:  #A2EFFA;
  --hv-cyan-a08:  rgba(34, 211, 238, 0.08);
  --hv-cyan-a16:  rgba(34, 211, 238, 0.16);
  --hv-cyan-a24:  rgba(34, 211, 238, 0.26);
  --hv-cyan-glow: rgba(34, 211, 238, 0.42);

  /* ---- Azul elétrico — usado nas pontas iluminadas das bordas ---- */
  --hv-blue-600:  #1D5FE0;
  --hv-blue-500:  #2F7BFF;
  --hv-blue-400:  #5B9BFF;
  --hv-blue-a20:  rgba(47, 123, 255, 0.20);
  --hv-blue-glow: rgba(47, 123, 255, 0.55);

  /* Hairline dos contornos retos */
  --edge-line:    rgba(76, 112, 150, 0.32);

  --hv-danger:    #FF4D5E;
  --hv-success:   #36D17A;
  --hv-warning:   #F5A623;

  /* ---- Semânticos ---- */
  --surface-page:   var(--hv-ink-1000);
  --surface-card:   var(--hv-ink-900);
  --surface-raised: var(--hv-ink-850);
  --surface-input:  #0B0E11;

  --text-strong:    var(--hv-white);
  --text-body:      var(--hv-ink-050);
  --text-secondary: var(--hv-ink-100);
  --text-muted:     var(--hv-ink-200);
  --text-faint:     var(--hv-ink-300);

  --border-subtle:  var(--hv-ink-700);
  --border-default: var(--hv-ink-600);
  --border-strong:  var(--hv-ink-500);

  --brand:       var(--hv-cyan-500);
  --brand-hover: var(--hv-cyan-400);
  --brand-press: var(--hv-cyan-600);

  /* ---- Tipografia ---- */
  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-sans:    'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Consolas', ui-monospace, monospace;

  /* ---- Motion ---- */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snap: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast:  120ms;
  --dur-base:  220ms;

  /* Tudo reto — a linguagem visual é de quadro técnico, sem arredondamento */
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-xl: 0;

  /* ---- Escala fluida por altura de viewport ----
     Todo o espaçamento vertical encolhe junto com a janela para que
     a tela caiba em 100dvh sem barra de rolagem. */
  /* Respiro entre o quadro e as bordas de cima e de baixo da janela.
     Só a margem cresce: o conteúdo do quadro não é esticado nem
     comprimido por isto. Em janela baixa ela volta a encolher, senão
     o quadro não caberia sem cortar nada. */
  --auth-pad-y:   clamp(12px, 5vh, 72px);
  --auth-pad-x:   clamp(14px, 2.2vw, 24px);
  /* Os espaçamentos verticais crescem com a janela, mas param mais
     cedo do que antes: em tela grande o quadro inflava sem que nada
     dentro dele ficasse melhor de ler. */
  --pane-pad-y:   clamp(18px, 2.6vh, 28px);
  --pane-pad-x:   clamp(22px, 2.9vw, 42px);
  --field-gap:    clamp(3px, 0.6vh, 5px);
  --steps-gap:    clamp(6px, 1vh, 9px);
  --form-gap:     clamp(10px, 1.6vh, 15px);
  --control-pad:  clamp(7px, 1.1vh, 9px);
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
/* Sem altura fixa em html/body: no desktop a tela cabe em 100dvh
   (overflow escondido) e no empilhado o documento cresce e rola normalmente. */
html, body { min-height: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
button, input, select { font: inherit; color: inherit; }
svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ============================================================
   LAYOUT — QUADRO À ESQUERDA, NOTEBOOK À DIREITA

   Desde 25/09/2026 o quadro tem uma coluna só: o formulário. O
   painel de comunicados saiu, e no lugar dele entrou o notebook,
   solto na página e saindo um pouco pela borda direita.

     1200px ou mais   quadro encostado à esquerda, notebook à direita
     981 a 1199px     quadro centrado, sem notebook (não cabe ao lado)
     até 980px        empilhado, a página rola
   ============================================================ */
:root {
  --quadro-w:      500px;                    /* largura do quadro */
  --quadro-x:      clamp(24px, 7vw, 150px);  /* distância da borda esquerda */
  --vitrine-gap:   clamp(16px, 3vw, 64px);   /* respiro entre quadro e notebook */
  --vitrine-sobra: clamp(40px, 7vw, 170px);  /* quanto sai pela borda direita */
}

.auth {
  position: relative;
  overflow: hidden;                          /* o notebook sai da tela sem criar rolagem */
  height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--auth-pad-y) var(--auth-pad-x);
  /* Camadas, de cima para baixo: os dois clarões de sempre, a malha
     hexagonal do site hover.com.br e a cor de fundo.
     A malha é um ladrilho de 114x65,818 (ver assets/fundo-hexagonal.svg)
     com os mesmos passos do site, para o desenho continuar igual. */
  background:
    radial-gradient(900px 520px at 78% 12%, rgba(34, 211, 238, 0.07), transparent 62%),
    radial-gradient(720px 460px at 6% 92%, rgba(34, 211, 238, 0.05), transparent 60%),
    url("assets/fundo-hexagonal.svg") 0 0 / 114px 65.818px repeat,
    var(--surface-page);
}

.auth__shell {
  position: relative;
  z-index: 2;                                /* acima das linhas de luz e do notebook */
  width: 100%;
  max-width: var(--quadro-w);
  max-height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--surface-card);
  border: 1px solid var(--edge-line);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9);
}

/* -------- o notebook --------
   Âncora na borda direita, com uma parte para fora da tela
   (--vitrine-sobra). A largura é a menor de três medidas:
     - o espaço até o quadro, para nunca passar por baixo dele
     - 88% da altura da janela x 1,5 (a proporção da imagem),
       para nunca ser cortado em cima ou embaixo
     - 1500px, o tamanho da imagem, para não ficar borrado */
.vitrine { display: none; }

@media (min-width: 1200px) {
  .auth {
    justify-items: start;
    padding-left: var(--quadro-x);
  }

  .vitrine {
    display: block;
    position: absolute;
    z-index: 1;
    top: 50%;
    right: calc(-1 * var(--vitrine-sobra));
    width: min(
      calc(100vw - var(--quadro-x) - var(--quadro-w) - var(--vitrine-gap) + var(--vitrine-sobra)),
      calc(88dvh * 1.5),
      1500px
    );
    transform: translateY(-50%);
    pointer-events: none;
    /* deriva lenta, a camada de baixo do movimento (ver FLUTUAÇÃO) */
    will-change: translate;
    animation: vitrine-deriva 17.9s cubic-bezier(0.37, 0, 0.63, 1) infinite alternate;
  }
  .vitrine__img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    transform-origin: 50% 62%;             /* gira em torno do centro do teclado */
    /* sem filtro aqui de propósito: um drop-shadow numa imagem em
       movimento era refeito a cada quadro. A sombra agora é a
       elipse abaixo, desenhada uma vez. */
    will-change: translate, rotate;
    animation:
      vitrine-sobe 7.3s  cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate,
      vitrine-gira 11.7s cubic-bezier(0.5, 0, 0.5, 1)         infinite alternate;
  }

  /* A sombra no "chão", embaixo do notebook. Fica parada enquanto
     ele sobe e desce, e encolhe e clareia quando ele está no alto —
     no mesmo tempo e na mesma curva do vitrine-sobe. */
  .vitrine::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: 10%;
    right: 12%;
    bottom: 0;
    height: 14%;
    background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), transparent);
    will-change: scale, opacity;
    animation: vitrine-sombra 7.3s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
  }
}

/* ------------------------------------------------------------
   FLUTUAÇÃO DO NOTEBOOK

   São três movimentos independentes somados: subir e descer, um
   leve balanço de rotação e uma deriva lenta para os lados. Cada
   um tem seu tempo (7,3s, 11,7s e 17,9s — números que não se
   dividem entre si) e sua própria curva.

   Sozinho, cada movimento é um vaivém regular. Somados, eles
   quase nunca se alinham do mesmo jeito: a velocidade de subida
   muda de uma vez para outra, às vezes ele sobe inclinado, às
   vezes quase parado no ar — sem nunca repetir de forma
   perceptível e sem nenhum tranco, porque todas as curvas começam
   e terminam com velocidade zero.

   Cada um mexe numa propriedade própria (translate e rotate, que
   não brigam com o transform de centralização): por isso dá para
   empilhar três animações sem uma apagar a outra. Só movimento
   de camada, sem refazer a sombra a cada quadro.

   Quem pede menos animação no sistema recebe o notebook parado.
   ------------------------------------------------------------ */
@keyframes vitrine-sobe {
  from { translate: 0 -9px; }
  to   { translate: 0 10px; }
}
@keyframes vitrine-gira {
  from { rotate: -0.55deg; }
  to   { rotate: 0.45deg; }
}
@keyframes vitrine-deriva {
  from { translate: -4px -5px; }
  to   { translate: 5px 4px; }
}
/* notebook no alto (from do vitrine-sobe) = sombra menor e mais clara */
@keyframes vitrine-sombra {
  from { scale: 0.92; opacity: 0.65; }
  to   { scale: 1.03; opacity: 1; }
}

/* -------- direitos autorais, no pé da página -------- */
.direitos {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: clamp(10px, 1.8vh, 20px);
  margin: 0;
  text-align: center;
  font-size: clamp(9.5px, 1.15vh, 11px);
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--hv-ink-300);
}
/* com o quadro à esquerda, os direitos vão para debaixo dele — no
   meio da tela eles cairiam em cima do notebook */
@media (min-width: 1200px) {
  .direitos {
    left: var(--quadro-x);
    right: auto;
    width: var(--quadro-w);
  }
}

.pane {
  display: flex;
  flex-direction: column;
  padding: var(--pane-pad-y) var(--pane-pad-x);
  min-width: 0;
  min-height: 0;
}
/* Grade quadrada do lado do formulário — a mesma do hover.com.br
   (linhas de 1px em ciano a 5%, a cada 52px). A cor do cartão não
   muda: a grade é só um desenho por cima dela. */
.pane--form {
  background-image:
    linear-gradient(rgba(34, 211, 238, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, 0.045) 1px, transparent 1px);
  background-size: 52px 52px;
}

.pane__body { flex: 1; display: flex; flex-direction: column; }
/* O painel de credenciais é mais curto: centraliza verticalmente
   para acompanhar a altura do painel de contexto */
.pane--form .pane__body { justify-content: center; }

/* ============================================================
   MARCA
   ============================================================ */
/* margin-top desce a marca em relação ao topo do quadro */
.brand {
  margin-top: clamp(4px, 1.6vh, 18px);
  margin-bottom: clamp(12px, 2.2vh, 24px);
}
/* O slogan acompanha a largura do wordmark: o espaçamento entre
   letras é calculado em relação ao próprio tamanho da fonte, então
   os dois encolhem juntos em janela baixa. */
.brand__slogan {
  margin: clamp(6px, 1vh, 10px) 0 0;
  font-family: var(--font-mono);
  font-size: clamp(8.5px, 1.05vh, 10.5px);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hv-cyan-400);
  white-space: nowrap;
}

.brand__logo {
  width: clamp(132px, 13.5vh, 176px);
  height: auto;
  /* Tinge o wordmark branco com o ciano da marca */
  filter:
    brightness(0) saturate(100%)
    invert(72%) sepia(64%) saturate(2200%) hue-rotate(147deg) brightness(101%) contrast(96%)
    drop-shadow(0 0 18px var(--hv-cyan-glow));
}

/* ============================================================
   TEXTOS
   ============================================================ */
.eyebrow {
  margin: 0 0 clamp(5px, 1.1vh, 10px);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
}
.eyebrow--ctx { color: var(--hv-cyan-400); }

.title {
  margin: 0 0 clamp(7px, 1.3vh, 12px);
  font-family: var(--font-display);
  font-size: clamp(24px, 3.7vh, 33px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.005em;
  color: var(--text-strong);
  text-transform: none;
}
.title--ctx { font-size: clamp(20px, 3vh, 27px); }

.subtitle {
  margin: 0 0 clamp(12px, 2.4vh, 24px);
  max-width: 44ch;
  font-size: clamp(13px, 1.65vh, 14.5px);
  color: var(--text-muted);
}
.subtitle--ctx { margin-bottom: clamp(9px, 1.6vh, 14px); }

/* ============================================================
   FORMULÁRIO
   ============================================================ */
.form { display: flex; flex-direction: column; gap: var(--form-gap); }

.field { display: flex; flex-direction: column; gap: var(--field-gap); }

.field__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
}

.control {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--surface-input);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  transition:
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out);
}
.control:hover { border-color: var(--border-strong); }
.control:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--hv-cyan-a16), 0 0 22px -8px var(--hv-cyan-glow);
  background: #0D1216;
}

.control__icon {
  width: 18px; height: 18px;
  flex: 0 0 auto;
  margin-left: 14px;
  color: var(--text-faint);
  transition: color var(--dur-base) var(--ease-out);
}
.control:focus-within .control__icon { color: var(--brand); }

.control__input,
.control__select {
  flex: 1;
  min-width: 0;
  padding: var(--control-pad) 14px;
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 13.5px;
  color: var(--text-strong);
}
.control__input::placeholder { color: var(--hv-ink-400); }
.control__input:-webkit-autofill {
  -webkit-text-fill-color: var(--text-strong);
  -webkit-box-shadow: 0 0 0 60px var(--surface-input) inset;
  transition: background-color 9999s ease-out;
}

/* Toggle senha */
.control__toggle {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px; height: clamp(30px, 5vh, 40px);
  margin-right: 4px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-faint);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.control__toggle:hover { color: var(--brand); background: var(--hv-cyan-a08); }
.control__toggle svg { width: 18px; height: 18px; }
.control__toggle .icon-eye-off { display: none; }
.control__toggle[aria-pressed="true"] .icon-eye { display: none; }
.control__toggle[aria-pressed="true"] .icon-eye-off { display: block; }

/* Select */
.control--select { padding-right: 0; }
.control__select {
  appearance: none;
  -webkit-appearance: none;
  padding-left: 14px;
  padding-right: 40px;
  cursor: pointer;
}
.control__select:disabled { cursor: not-allowed; color: var(--hv-ink-400); }
.control:has(.control__select:disabled) { opacity: 0.55; background: #090C0F; }
.control__select option {
  background: var(--hv-ink-800);
  color: var(--text-body);
}
.control__caret {
  position: absolute;
  right: 14px;
  width: 16px; height: 16px;
  pointer-events: none;
  color: var(--text-faint);
  transition: color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.control:focus-within .control__caret { color: var(--brand); }

/* Estado carregando (skeleton shimmer na borda) */
.field--select.is-loading .control {
  border-color: var(--hv-cyan-a24);
  background-image: linear-gradient(90deg, transparent, var(--hv-cyan-a08), transparent);
  background-size: 240px 100%;
  background-repeat: no-repeat;
  animation: shimmer 1.1s linear infinite;
}
@keyframes shimmer {
  from { background-position: -240px 0; }
  to   { background-position: calc(100% + 240px) 0; }
}

/* Hint ancorado na linha do label — economiza altura vertical */
.field--select { position: relative; }
.field__hint {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  line-height: 1.6;
  color: var(--hv-ink-400);
  pointer-events: none;
}
.field__hint code {
  font-family: inherit;
  color: var(--hv-ink-300);
}

/* Linha "usar outro e-mail" / "esqueceu a senha" */
.form__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: -2px;
}
/* sem o "usar outro e-mail" na linha, o "esqueceu" continua à direita */
#link-esqueci { margin-left: auto; }

/* link de apoio, mais apagado que o principal */
.link--discreto { color: var(--text-muted); font-weight: 400; }
.link--discreto:hover { color: var(--text-secondary); }

.link {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--brand);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.link:hover { color: var(--brand-hover); text-decoration: underline; text-underline-offset: 3px; }

/* Alerta */
.alert {
  margin: 0;
  padding: 11px 14px;
  font-size: 13px;
  color: #FFB4BC;
  background: rgba(255, 77, 94, 0.09);
  border: 1px solid rgba(255, 77, 94, 0.30);
  border-radius: var(--radius-sm);
}
.alert[hidden] { display: none; }
.alert--ok {
  color: #A9F0C9;
  background: rgba(54, 209, 122, 0.09);
  border-color: rgba(54, 209, 122, 0.30);
}

/* ============================================================
   BOTÃO
   ============================================================ */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: clamp(9px, 1.6vh, 12px) 22px;
  border: 0;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-snap),
              box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
.btn--primary {
  color: var(--hv-ink-1000);
  background: linear-gradient(180deg, var(--hv-cyan-400), var(--hv-cyan-500));
  box-shadow: 0 10px 30px -12px var(--hv-cyan-glow), inset 0 1px 0 rgba(255,255,255,0.35);
}
.btn--primary:hover {
  background: linear-gradient(180deg, var(--hv-cyan-300), var(--hv-cyan-400));
  box-shadow: 0 14px 38px -12px var(--hv-cyan-glow), inset 0 1px 0 rgba(255,255,255,0.4);
}
.btn--primary:active { transform: translateY(1px); }
.btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--surface-card), 0 0 0 5px var(--brand); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.btn__spinner {
  display: none;
  width: 16px; height: 16px;
  border: 2px solid rgba(5, 7, 8, 0.28);
  border-top-color: var(--hv-ink-1000);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.btn.is-loading .btn__spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   RODAPÉ DO PAINEL
   ============================================================ */
.pane__foot {
  margin-top: clamp(12px, 2.2vh, 26px);
  padding-top: clamp(11px, 2vh, 20px);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--text-faint);
}
.foot__brand { font-weight: 700; color: var(--brand); letter-spacing: 0.02em; }
.foot__dot { color: var(--hv-ink-500); }

/* ============================================================
   ETAPAS — o lado esquerdo troca de conteúdo, o direito não
   ============================================================ */
.etapa { animation: entrar var(--dur-slow, 380ms) var(--ease-out) both; }
.etapa[hidden] { display: none; }

@keyframes entrar {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: none; }
}

/* A altura fixa de 750px saiu em 23/09/2026: ela obrigava o quadro
   a ser mais alto que o conteúdo, e o espaço sobrando virava dois
   vãos enormes — um entre a marca e o título, outro antes do
   rodapé. Agora o quadro tem a altura do que está dentro dele.

   O efeito colateral aceito: ao passar para a escolha de ambiente,
   que tem cinco campos, o quadro cresce um pouco. Como ele é
   centrado, cresce para os dois lados. */

/* Campo-isca contra robôs — fora da tela, sem display:none
   (alguns robôs pulam campos com display:none). */
.isca {
  position: absolute !important;
  left: -10000px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ============================================================
   REDEFINIR SENHA (etapa 3)
   Reaproveita campos, botões e alertas da etapa 1; aqui só o
   que é novo.
   ============================================================ */

/* As telas desta etapa são .form com `hidden`. Sem isto, o
   `.form { display: flex }` vence o atributo e mostra todas juntas. */
.form[hidden] { display: none; }

/* "Alterar senha" é a tela mais alta do sistema (quatro campos).
   O rodapé é só decorativo — sai nesta etapa para o formulário
   caber no quadro sem rolagem. */
.auth__shell[data-etapa="senha"] .pane__foot { display: none; }

/* "Esqueceu a senha?" e as trocas de tela são <button>, não <a>:
   não navegam, só mudam de etapa. Tira o visual padrão de botão. */
button.link {
  padding: 0;
  font-family: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

/* Voltar para o login — discreto, acima do eyebrow */
.voltar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  margin: 0 0 clamp(10px, 2vh, 18px) -4px;
  padding: 4px 6px 4px 2px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.voltar svg { width: 16px; height: 16px; }
.voltar:hover { color: var(--text-strong); }
.voltar:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--hv-cyan-a16); }

/* Linha "Lembra da senha atual? Altere aqui" */
.troca {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}
.troca .link { font-size: 13px; }
.troca .link:disabled { color: var(--text-faint); cursor: default; text-decoration: none; }

/* O alerta desta etapa fica logo abaixo do subtítulo */
#alerta-senha { margin-bottom: var(--form-gap); }

/* Aviso informativo — neutro, não é erro */
.aviso {
  display: flex;
  gap: 11px;
  padding: 13px 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-body);
  background: var(--hv-cyan-a08);
  border: 1px solid var(--hv-cyan-a24);
}
.aviso p { margin: 0; }
.aviso__icone { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--brand); }

/* Código de 6 dígitos: grande, espaçado, centralizado */
.control__input--codigo {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.5em;
  text-align: center;
  padding-left: calc(14px + 0.5em);   /* compensa o espaço depois do último dígito */
}
.control__input--codigo::placeholder { color: var(--hv-ink-600); letter-spacing: 0.5em; }

/* O "Falar com o suporte" é <a> vestido de botão */
a.btn { text-decoration: none; }

/* ============================================================
   USUÁRIO AUTENTICADO (etapa 2)
   ============================================================ */
.usuario {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 clamp(14px, 2.4vh, 22px);
  padding: 7px 8px 7px 11px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--edge-line);
}

.usuario__nome {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-body);
}

.usuario__sair {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border-default);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
/* A seta anda um passo para trás no hover — o botão é "voltar" */
.usuario__seta {
  width: 14px; height: 14px;
  flex: none;
  stroke-width: 2;
  transition: transform var(--dur-fast) var(--ease-out);
}
.usuario__sair:hover { color: var(--brand); border-color: var(--hv-cyan-a24); }
.usuario__sair:hover .usuario__seta { transform: translateX(-2px); }
.usuario__sair:focus-visible {
  outline: 0;
  color: var(--brand);
  box-shadow: 0 0 0 2px var(--hv-cyan-a16);
}

.steps { display: flex; flex-direction: column; gap: var(--steps-gap); }
.form--contexto { gap: clamp(12px, 2vh, 18px); }

/* Nome da tabela ao lado do label — só com ?debug=1 na URL */
.field__src {
  display: none;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--hv-ink-400);
}
body.mostrar-origem .field__src { display: inline; }

/* ============================================================
   HEXÁGONOS QUE ACENDEM

   Canvas do hexagonos.js, por cima da malha parada e por baixo das
   linhas de luz, do quadro e do notebook. Sem mouse (celular e
   tablet) o script o esconde e nem começa.
   ============================================================ */
.hexas {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.hexas[hidden] { display: none; }

/* ============================================================
   LUZES DO FUNDO

   As linhas de luz cobrem a página inteira, por cima da malha
   hexagonal e por baixo do quadro e do notebook.

   Refeitas em 25/09/2026 para a página ficar fluida: o desenho é
   uma imagem parada (assets/linhas-fundo.svg), com o desfoque
   calculado uma vez só, ao carregar. Tudo o que se move aqui é
   translate e opacity — a placa de vídeo desliza camadas prontas e
   nada é pintado de novo.

   ONDAS
   A imagem é fatiada em dez faixas verticais, cada uma com a sua
   parte do desenho. Todas sobem e descem 5px, mas cada faixa começa
   1,3s depois da vizinha: o sobe-e-desce vai passando da esquerda
   para a direita, e a linha que atravessa as faixas ondula como uma
   corda. Um ciclo completo (13s) cobre a largura da tela: uma onda
   só, longa e lenta.

   Nas emendas as faixas se sobrepõem 48px e se esfumam uma na outra
   (mask-image fixa, desenhada uma vez), para a linha não "quebrar"
   entre uma faixa e a próxima.

   Por cima, o conjunto inteiro deriva devagar e acende e apaga.
   Quem pede menos animação no sistema recebe tudo parado.
   ============================================================ */
.luzes {
  /* a camada é 106% da janela (inset -3%): a deriva e a onda nunca
     mostram a borda. Largura de cada uma das 10 faixas: */
  --faixa: 10.6vw;
  --pluma: 24px;                             /* esfumado de cada lado da faixa */

  position: fixed;
  inset: -3%;
  z-index: 0;
  pointer-events: none;
  will-change: translate, opacity;
  animation:
    luzes-deriva 38s  cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate,
    luzes-brilho 9.7s ease-in-out infinite alternate;
}

/* Com o notebook na tela, as linhas ficam só do lado do quadro:
   inteiras em volta dele e apagadas logo depois da borda direita —
   no vão entre o quadro e o notebook e atrás do notebook não
   aparecem. Ali quem brilha são os hexágonos.

   A borda é calculada da posição real do quadro (--quadro-x +
   --quadro-w), então acompanha qualquer largura de tela. Os 3vw
   somados são porque a camada começa 3% antes da janela. O esfumado
   de 40px para cada lado cobre também a deriva da camada (±16px).

   A máscara é desenhada uma vez e só acompanha a camada quando ela
   desliza; nada é redesenhado. */
@media (min-width: 1200px) {
  .luzes {
    --borda-quadro: calc(3vw + var(--quadro-x) + var(--quadro-w));
    -webkit-mask-image: linear-gradient(to right, #000 calc(var(--borda-quadro) - 40px), transparent calc(var(--borda-quadro) + 40px));
            mask-image: linear-gradient(to right, #000 calc(var(--borda-quadro) - 40px), transparent calc(var(--borda-quadro) + 40px));
  }
}

.luzes > span {
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(var(--faixa) + 2 * var(--pluma));
  /* cada faixa mostra o seu pedaço da imagem inteira */
  background: url("assets/linhas-fundo.svg") no-repeat;
  background-size: 106vw 106vh;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--pluma), #000 calc(100% - var(--pluma)), transparent);
          mask-image: linear-gradient(to right, transparent, #000 var(--pluma), #000 calc(100% - var(--pluma)), transparent);
  will-change: translate;
  animation: luzes-onda 6.5s cubic-bezier(0.37, 0, 0.63, 1) infinite alternate;
}

.luzes > span:nth-child(1) {
  left: calc(0 * var(--faixa) - var(--pluma));
  background-position: calc(var(--pluma) - 0 * var(--faixa)) 0;
  animation-delay: 0.0s;
}
.luzes > span:nth-child(2) {
  left: calc(1 * var(--faixa) - var(--pluma));
  background-position: calc(var(--pluma) - 1 * var(--faixa)) 0;
  animation-delay: -1.3s;
}
.luzes > span:nth-child(3) {
  left: calc(2 * var(--faixa) - var(--pluma));
  background-position: calc(var(--pluma) - 2 * var(--faixa)) 0;
  animation-delay: -2.6s;
}
.luzes > span:nth-child(4) {
  left: calc(3 * var(--faixa) - var(--pluma));
  background-position: calc(var(--pluma) - 3 * var(--faixa)) 0;
  animation-delay: -3.9s;
}
.luzes > span:nth-child(5) {
  left: calc(4 * var(--faixa) - var(--pluma));
  background-position: calc(var(--pluma) - 4 * var(--faixa)) 0;
  animation-delay: -5.2s;
}
.luzes > span:nth-child(6) {
  left: calc(5 * var(--faixa) - var(--pluma));
  background-position: calc(var(--pluma) - 5 * var(--faixa)) 0;
  animation-delay: -6.5s;
}
.luzes > span:nth-child(7) {
  left: calc(6 * var(--faixa) - var(--pluma));
  background-position: calc(var(--pluma) - 6 * var(--faixa)) 0;
  animation-delay: -7.8s;
}
.luzes > span:nth-child(8) {
  left: calc(7 * var(--faixa) - var(--pluma));
  background-position: calc(var(--pluma) - 7 * var(--faixa)) 0;
  animation-delay: -9.1s;
}
.luzes > span:nth-child(9) {
  left: calc(8 * var(--faixa) - var(--pluma));
  background-position: calc(var(--pluma) - 8 * var(--faixa)) 0;
  animation-delay: -10.4s;
}
.luzes > span:nth-child(10) {
  left: calc(9 * var(--faixa) - var(--pluma));
  background-position: calc(var(--pluma) - 9 * var(--faixa)) 0;
  animation-delay: -11.7s;
}

@keyframes luzes-onda {
  from { translate: 0 -5px; }
  to   { translate: 0 5px; }
}
@keyframes luzes-deriva {
  from { translate: -14px 8px; }
  to   { translate: 16px -10px; }
}
@keyframes luzes-brilho {
  from { opacity: 0.6; }
  to   { opacity: 0.95; }
}

/* ============================================================
   BOTÃO DE SUPORTE — WhatsApp
   ------------------------------------------------------------
   Tratado como CTA secundário: mesmo ciano sólido do "Entrar",
   texto e ícone em near-black. Retângulo largo e reto — o
   destaque aqui vem da cor, não da moldura.

   No computador flutua no canto inferior direito; no celular
   entra no fluxo do cartão, logo abaixo do "Entrar".

   O número fica no href do link, em index.html.
   ============================================================ */
:root {
  /* Distância até as bordas da janela quando ele flutua */
  --suporte-margem: clamp(16px, 2.6vh, 30px);
}

.suporte {
  /* Padrão: flutuando no canto da janela */
  position: fixed;
  z-index: 60;
  right:  clamp(16px, 2.2vw, 30px);
  bottom: var(--suporte-margem);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 13px 34px;

  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;

  color: var(--hv-ink-1000);
  background: linear-gradient(180deg, var(--hv-cyan-400), var(--hv-cyan-500));
  border: 0;
  border-radius: var(--radius-md);
  box-shadow:
    0 10px 30px -12px var(--hv-cyan-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);

  --desliza-x: 0px;
  --desliza-y: 0px;
  transform: translate(var(--desliza-x), var(--desliza-y));
  transition:
    background var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    transform  var(--dur-base) var(--ease-out);

}

/* Respiro do brilho — amplitude curta, ciclo longo.
   O brilho extra mora numa camada à parte que só acende e apaga
   (opacity). Antes a animação mexia na própria sombra do botão, e
   sombra animada é redesenhada a cada quadro. */
.suporte::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  box-shadow: 0 12px 40px -10px var(--hv-cyan-glow);
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
  animation: suporte-brilho 4.8s ease-in-out infinite;
}

@keyframes suporte-brilho {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}

.suporte__icone {
  width: 19px; height: 19px;
  flex: none;
  fill: var(--hv-ink-1000);
  stroke: none;
}

.suporte:hover,
.suporte:focus-visible {
  --desliza-y: -2px;
  background: linear-gradient(180deg, var(--hv-cyan-300), var(--hv-cyan-400));
}
.suporte:hover::after { animation-play-state: paused; }
/* No foco o brilho sai de cena, para não disputar com o anel de foco */
.suporte:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--surface-page), 0 0 0 5px var(--brand);
}
.suporte:focus-visible::after { animation: none; opacity: 0; }
.suporte:active { --desliza-y: 1px; }

/* Desde 25/09/2026 ele flutua no canto inferior direito em toda
   tela de computador. A calha ao lado do quadro, onde ele ficava
   em tela larga, agora é do notebook; e com o quadro encostado à
   esquerda o canto direito nunca cobre o formulário. */


/* ============================================================
   RESPONSIVO
   ============================================================ */
/* ---- Split ativo: a tela ocupa exatamente 100dvh, sem rolagem ---- */
@media (min-width: 981px) {
  html, body { overflow: hidden; }
}

/* ---- Janelas baixas: enxuga o que é acessório para continuar cabendo ---- */
@media (min-width: 981px) and (max-height: 660px) {
  .subtitle   { display: none; }
  .field__src { display: none !important; }
  .pane__foot { display: none; }
  .auth__shell { min-height: 0; }
}

/* ---- Empilhado: aqui a rolagem é natural ---- */
@media (max-width: 980px) {
  html, body { overflow: auto; }
  .auth { height: auto; min-height: 100dvh; padding: 0; align-items: stretch; }
  .auth__shell {
    grid-template-columns: 1fr;
    max-width: 620px;
    max-height: none;
    min-height: 0;
    margin: 0 auto;
    border-left: 0; border-right: 0;
  }
  .pane { padding: 36px 28px; }
  .pane--form .pane__foot { display: none; }

  /* -------- O suporte entra no fluxo --------
     Flutuando, ele cobria o cartão: aqui a página rola, e um
     elemento fixo no canto passa por cima de tudo o que sobe.
     Empilhado ele vira mais uma linha do próprio cartão, logo
     abaixo do formulário. */
  .suporte {
    position: relative;             /* no fluxo; relative só para ancorar o brilho */
    justify-self: center;
    /* sem isto ele esticava na vertical: o cartão ocupa a altura da
       tela e a sobra ia para a linha do botão */
    align-self: start;
    margin: 0 0 30px;
  }
  .suporte::after { display: none; } /* sem brilho pulsando dentro do cartão */

  /* os direitos descem para depois do cartão, no fluxo da página */
  .direitos { position: static; padding: 18px 20px 24px; }
}

@media (max-width: 460px) {
  .pane { padding: 28px 20px; }
  .brand__logo { width: 172px; }
  /* dois links curtos cabem lado a lado; se não couberem, quebram */
  .form__row { flex-wrap: wrap; gap: 10px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* O botão só encolhia para ícone em tela estreita porque flutuava
   sobre o formulário. Agora, nessas larguras, ele está dentro do
   cartão e no fluxo — cabe inteiro, com a palavra legível. */