/* ─────────────────────────────────────────────────────────────────────────────
   AX Control — telas de conta (cadastro, login).

   [09/09/2026] Antes: card centralizado com blur sobre fundo escuro — o layout
   genérico que qualquer gerador entrega, e que não dizia nada sobre o produto.
   Agora: duas colunas. A esquerda é o formulário; a direita mostra o APP REAL
   controlando a mesa. Isso é o que um template não consegue imitar, porque
   ninguém mais tem esse produto — e é a diferença entre "mais um SaaS" e algo
   que um operador de som reconhece na hora.

   Cobre só o que o home.css não tem: campos de formulário e o layout de duas
   colunas. Botões, tipografia e cores vêm de lá — mudou o token, mudou aqui.

   Depende de: tokens.css + home.css (nessa ordem).
   ───────────────────────────────────────────────────────────────────────────── */

.a-split{min-height:100dvh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}

/* ── coluna do formulário ─────────────────────────────────────────────────── */
.a-form{display:flex;flex-direction:column;justify-content:center;padding:48px 6vw;position:relative;z-index:2}
.a-form__in{width:100%;max-width:452px;margin:0 auto}
.a-logo{display:block;height:25px;margin-bottom:44px}

.a-kicker{font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--cy,#35c3df);margin:0 0 12px}
.a-title{font-size:clamp(28px,3.4vw,36px);line-height:1.08;font-weight:800;letter-spacing:-.025em;
  margin:0 0 10px;color:#eaf2f8}
.a-sub{font-size:14px;line-height:1.55;color:var(--mut,#8095ab);margin:0 0 30px}

/* ── campos ───────────────────────────────────────────────────────────────── */
.a-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.a-field{display:grid;gap:7px;margin-bottom:16px}
.a-field--full{grid-column:1/-1}
.a-label{font-size:11.5px;font-weight:700;color:#a8bccf;letter-spacing:.02em}
.a-label span{color:#5f7488;font-weight:500}
.a-opt{color:#5f7488;font-weight:500}

.a-input{width:100%;box-sizing:border-box;padding:13px 15px;font:inherit;font-size:14.5px;
  color:#eaf2f8;background:rgba(6,15,26,.6);border:1px solid #16304a;border-radius:10px;
  transition:border-color .16s,background .16s,box-shadow .16s}
.a-input::placeholder{color:#43596e}
.a-input:hover{border-color:#1e3f5e}
.a-input:focus{outline:none;border-color:var(--cy,#35c3df);background:rgba(6,15,26,.9);
  box-shadow:0 0 0 3px rgba(53,195,223,.14)}
.a-input:user-invalid{border-color:rgba(239,68,68,.5)}

select.a-input{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%235f7488' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:40px}

.a-check{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:#a8bccf;cursor:pointer;
  line-height:1.5;margin:4px 0 22px}
.a-check input{margin-top:2px;accent-color:var(--cy,#35c3df);width:16px;height:16px;flex-shrink:0}
.a-check a{color:var(--cy,#35c3df);text-decoration:none;font-weight:600}
.a-check a:hover{text-decoration:underline}

/* Linha de "manter conectado" + "esqueci a senha": os dois na mesma altura, nas pontas.
   Evita empilhar dois controles pequenos e faz a linha ocupar a largura do campo. */
.a-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:2px 0 22px}
.a-check--inline{margin:0}
.a-link{font-size:13px;color:var(--cy,#35c3df);text-decoration:none;font-weight:600;white-space:nowrap}
.a-link:hover{text-decoration:underline}

.a-form .btn{width:100%;justify-content:center;padding:15px;font-size:15px}
.a-foot{font-size:13.5px;color:var(--mut,#8095ab);margin:22px 0 0}
.a-foot a{color:var(--cy,#35c3df);text-decoration:none;font-weight:600}
.a-foot a:hover{text-decoration:underline}
.a-back{display:inline-flex;align-items:center;gap:6px;margin-top:26px;font-size:13px;
  color:#5f7488;text-decoration:none}
.a-back:hover{color:var(--cy,#35c3df)}

.a-alert{padding:12px 15px;border-radius:10px;font-size:13.5px;line-height:1.45;margin-bottom:20px}
.a-alert--err{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);color:#fca5a5}
.a-alert--ok{background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.3);color:#86efac}

/* Selo do plano: quem clicou em "Assinar" vê que a escolha veio junto — sem isso
   a pessoa perde a referência do que estava comprando ao trocar de tela. */
.a-plan{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 16px;
  margin-bottom:26px;border:1px solid rgba(53,195,223,.26);border-radius:10px;
  background:rgba(53,195,223,.08)}
.a-plan__l{font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--cy,#35c3df);display:block;margin-bottom:3px}
.a-plan__n{font-size:13.5px;font-weight:700;color:#eaf2f8}
.a-plan__v{font-size:17px;font-weight:800;color:#eaf2f8;white-space:nowrap;letter-spacing:-.01em}

/* ── coluna do produto ────────────────────────────────────────────────────── */
/* A imagem sangra pela direita DE PROPÓSITO (a mesa continua além da tela), mas
   ancorada: antes ela vazava sem controle e sobrava um vão morto até o texto.
   Agora o painel é um grid de 2 linhas — imagem ocupa o que sobra, texto fica
   colado embaixo — e uma máscara dissolve a base da imagem no texto. */
/* ── coluna do produto ────────────────────────────────────────────────────── */
/* A imagem é widescreen (1600x852, ratio 1.88) e a coluna é alta — encaixar uma na
   outra sempre dá vazio ou zoom. Por isso imagem e texto formam UM bloco em fluxo
   normal, centrado na vertical: o espaço sobra igualmente em cima e embaixo em vez
   de virar um buraco no meio, e a imagem mantém escala legível. */
.a-show{position:relative;overflow:hidden;background:#060f1a;border-left:1px solid #12283e;
  display:flex;flex-direction:column;justify-content:center;gap:40px;padding:0}
.a-show::before{content:'';position:absolute;inset:0;z-index:1;
  background:radial-gradient(100% 62% at 60% 20%,rgba(53,195,223,.13),transparent 64%)}

/* Imagem INTEIRA, sem corte e sem distorcer: largura 100% do espaço útil e altura
   automática, então a proporção original (1600x852) é preservada e nenhum canto do
   app fica de fora — antes ela sangrava pela direita e comia o painel de Mute Groups. */
/* flex-shrink:0 — sem isto a imagem é ESMAGADA quando o texto cresce: num flex column
   os itens encolhem por padrão, e a copy longa comprimia o print numa faixa fina. */
.a-show__wrap{position:relative;z-index:2;padding:0 48px;flex-shrink:0}
.a-show__img{width:100%;height:auto;display:block;border-radius:12px;border:1px solid #1a3550;
  box-shadow:0 34px 80px -32px rgba(0,0,0,.92)}

.a-show__c{position:relative;z-index:3;padding:0 48px;max-width:560px}
.a-show__q{font-size:21px;line-height:1.32;font-weight:700;letter-spacing:-.018em;color:#eaf2f8;margin:0 0 12px}
.a-show__s{font-size:13.5px;line-height:1.62;color:#7b90a6;margin:0}
.a-show__m{display:flex;gap:30px;margin-top:26px;padding-top:20px;border-top:1px solid #12283e}
.a-show__k{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#5f7488;display:block}
.a-show__v{font-size:15px;font-weight:800;color:#eaf2f8;margin-top:3px;display:block;letter-spacing:-.01em}
@media (max-width:960px){
  .a-split{grid-template-columns:1fr}
  .a-show{display:none}
  .a-form{padding:40px 24px}
  .a-logo{margin-bottom:32px}
}
@media (max-width:560px){
  .a-grid{grid-template-columns:1fr}
  .a-form{padding:32px 20px}
}


@media (min-width:1280px){
  .a-form{padding:48px 5vw}
  .a-show__c{padding:0 56px 56px}
}

@media (min-width:1680px){
  .a-show__wrap{padding:0 64px}
  .a-show{gap:46px}
}

/* ── estados de erro e carregando (ver assets/js/ax-form.js) ───────────────── */
/* O erro fica NO CAMPO: antes só existia um alerta no topo, e a pessoa tinha que
   adivinhar qual campo estava errado — pior ainda porque a página recarregava e
   apagava tudo que ela havia digitado. */
.a-field--err .a-input{border-color:rgba(239,68,68,.62);background:rgba(40,10,12,.5)}
.a-field--err .a-input:focus{border-color:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.16)}
.a-field--err .a-label{color:#fca5a5}
.a-field__err{font-size:12px;line-height:1.4;color:#fca5a5;margin-top:1px}

/* Feedback imediato no clique. Sem isto o botão não mudava, a página ficava
   "parada", e a pessoa clicava de novo — gerando cadastro/e-mail duplicado. */
.btn[aria-busy="true"]{opacity:.72;cursor:progress}
.btn:disabled{opacity:.6;cursor:not-allowed}
.a-spin{display:inline-block;width:14px;height:14px;margin-right:9px;vertical-align:-2px;
  border:2px solid rgba(255,255,255,.34);border-top-color:#fff;border-radius:50%;
  animation:a-spin .62s linear infinite}
@keyframes a-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.a-spin{animation-duration:2s}}