/* ═══════════════════════════════════════════════════════════════════════════
   ONDAA UI — a régua do painel, aplicada aos outros dois sites
   ═══════════════════════════════════════════════════════════════════════════

   O painel (painel.ondaa.com.br) é a tela mãe: é o produto que a escola usa
   todo dia e onde a linguagem visual do Ondaa já está decidida. Este arquivo
   NÃO inventa uma linguagem — ele copia a de lá, token por token, para a
   ficha de matrícula e o Portal do Responsável, que são publicados como sites
   separados e por isso não conseguem importar o css/style.css do painel.

   Os valores abaixo vieram de css/style.css. Quando aquele arquivo mudar,
   este precisa mudar junto — é o preço de ter quatro sites saindo do mesmo
   repositório com publicações independentes.

   Carrega DEPOIS do <style> embutido de cada página: a tela é dona do layout,
   o sistema é dono da aparência.

   Três coisas que definem a identidade e que é fácil quebrar sem perceber:

   1. É FLAT. O painel não usa sombra em lugar nenhum — separação é feita com
      borda de 1px e fundo. Sombra suave "premium" é bonita isolada e denuncia
      na hora que a tela é de outro produto.
   2. Raio pequeno. Botão e campo são 8px; cartão é 12px. Cantos muito
      arredondados puxam a interface para o lado infantil, e o lugar do
      infantil aqui é a ilustração, não o formulário.
   3. Rótulo ACIMA do campo, sempre. O painel não usa placeholder como
      rótulo — placeholder some quando a pessoa digita, e aí ela não confere
      mais o que preencheu onde.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Cor — idêntica a css/style.css ─────────────────────────────────── */
  --on-primary:       #0B4F84;   /* --blue        */
  --on-primary-hover: #093f6a;   /* --blue-hover  */
  --on-primary-dark:  #062d4e;   /* --blue-dark   */
  --on-primary-mid:   #2e78a8;   /* --blue-mid    */
  --on-focus-ring:  #0284C7;   /* borda de foco dos campos de auth */
  --on-primary-subtle: #edf4f9;   /* --soft-blue   */

  --on-bg:         #F8FAFC;   /* --bg          */
  --on-card:       #FFFFFF;   /* --card        */
  --on-surface: #F1F5F9;   /* --surface     */
  --on-border:      #E2E8F0;   /* --border      */
  --on-border-strong:#CBD5E1;   /* --border-strong */

  --on-text:      #0F172A;   /* --text        */
  --on-text-muted:      #64748B;
  --on-placeholder:#94A3B8;   /* o painel usa #CBD5E1; aqui sobe para passar
                                 em AA — 4,5:1 sobre #F8FAFC. */

  --on-success:         #15803D;  --on-success-fundo:  #F0FDF4;  --on-success-borda:#BBF7D0;
  --on-danger:       #BE123C;  --on-danger-fundo:#FFF1F2;  --on-danger-borda:#FECDD3;

  /* ── Raio — a escala do painel ──────────────────────────────────────── */
  --on-r-xs:6px; --on-r-sm:8px; --on-r-md:12px;
  --on-r-lg:16px; --on-r-xl:24px; --on-r-pill:99px;

  --on-ease:  cubic-bezier(.22,1,.36,1);
  --on-trans: .2s;
}

/* ═══ PONTE COM AS TELAS ══════════════════════════════════════════════════
   As páginas já consomem os tokens abaixo em centenas de regras. Em vez de
   reescrever essas regras uma a uma, os tokens antigos passam a APONTAR para
   os do painel. Uma linha aqui move todas as regras lá. */
:root{
  --blue:var(--on-primary);       --blue-hover:var(--on-primary-hover);
  --blue-dark:var(--on-primary-dark);    --blue-mid:var(--on-primary-mid);
  --ciano:var(--on-primary);      --ciano-dark:var(--on-primary-hover);
  --ciano-light:var(--on-primary-subtle); --ciano-ring:rgba(2,132,199,.14);
  --card-bg:var(--on-card);    --surface:var(--on-bg);
  --border:var(--on-border);    --border-mid:var(--on-border-strong);
  --text-primary:var(--on-text);     --text-secondary:var(--on-text-muted);
  --text-muted:var(--on-text-muted);       --text-placeholder:var(--on-placeholder);
  --success:var(--on-success);      --success-bg:var(--on-success-fundo);
  --error:var(--on-danger);      --error-bg:var(--on-danger-fundo);
  --r-xs:var(--on-r-xs); --r-sm:var(--on-r-sm); --r-md:var(--on-r-md);
  --r-lg:var(--on-r-lg); --r-xl:var(--on-r-xl); --r-pill:var(--on-r-pill);
  /* FLAT: o painel define os três como `none`. Manter. */
  --shadow-xs:none; --shadow-sm:none; --shadow-card:none; --shadow-float:none;
  --ease:var(--on-ease);
  --texto:var(--on-text); --azul-noite:var(--on-primary-dark);
}

/* O atributo `hidden` do HTML vale menos que qualquer `display:` de classe —
   e é por ele que o JS esconde e revela a logo da escola e as iniciais. */
[hidden]{display:none !important}

/* ═══════════════════════════════════════════════════════════════════════════
   TELA DE ENTRADA — o esqueleto do painel
   ═══════════════════════════════════════════════════════════════════════════
   Divisão fixa: 52% de capa à esquerda, o resto em branco à direita, com o
   formulário centrado numa coluna de 380px. A capa muda de produto para
   produto (a água escura no painel, as baleias no portal, a piscina na
   matrícula) — o que não muda é a divisão, a coluna e os componentes.

   A borda entre os dois lados é RETA e nítida, de propósito. Já tentei o
   contrário: um degradê apagando a ilustração por baixo do formulário. Vira
   uma nuvem branca no meio da arte, e como a onda entra na diagonal a emenda
   aparece torta. Corte reto não tem esse problema.
   ═══════════════════════════════════════════════════════════════════════════ */
.on-auth{position:fixed;inset:0;z-index:20;display:flex;}
.on-auth-capa{
  width:52%;flex-shrink:0;position:relative;overflow:hidden;
  background:var(--on-primary-dark) center top / cover no-repeat;
}
.on-auth-lado{
  flex:1;background:#fff;position:relative;overflow-y:auto;
  display:flex;flex-direction:column;align-items:center;
  padding:48px 52px;
}
/* Ondas decorativas no pé do lado branco — as mesmas do painel. */
.on-auth-ondas{
  position:absolute;bottom:0;left:0;right:0;height:180px;
  pointer-events:none;z-index:0;
}
.on-auth-ondas svg{width:100%;height:100%;display:block;}

.on-auth-corpo{
  width:100%;max-width:380px;
  flex:1;display:flex;flex-direction:column;justify-content:center;
  position:relative;z-index:1;
}
.on-auth-rodape{
  width:100%;max-width:380px;padding-top:20px;
  position:relative;z-index:1;
  font-size:12px;color:#9CA3AF;
}

/* ── Título e apoio ─────────────────────────────────────────────────────── */
.on-auth-tit,.login-form-title{
  font-size:24px;font-weight:700;color:#0D1117;
  letter-spacing:-.01em;margin-bottom:6px;
}
.on-auth-sub,.login-form-sub{
  font-size:14px;color:#6B7280;margin-bottom:32px;line-height:1.5;
}

/* ── Campo ──────────────────────────────────────────────────────────────── */
.auth-field{margin-bottom:14px;}
.auth-field-label{
  font-size:12px;font-weight:600;color:var(--on-text-muted);
  margin-bottom:7px;display:block;letter-spacing:0;
}
.auth-field-wrap{position:relative;display:flex;align-items:center;}
.auth-field-wrap>i{
  position:absolute;left:14px;font-size:16px;color:var(--on-text-muted);
  pointer-events:none;transition:color var(--on-trans);
}
.auth-field-wrap:focus-within>i{color:var(--on-focus-ring);}
.auth-field-input{
  width:100%;padding:13px 14px 13px 42px;
  background:var(--on-bg);
  border:1px solid var(--on-border);border-radius:var(--on-r-sm);
  font-size:14px;color:var(--on-text);font-family:inherit;
  outline:none;
  transition:border-color var(--on-trans),background var(--on-trans);
}
.auth-field-input::placeholder{color:var(--on-placeholder);}
.auth-field-input:hover{border-color:var(--on-border-strong);background:#fff;}
.auth-field-input:focus{border-color:var(--on-focus-ring);background:#fff;}
.auth-eye-btn{
  position:absolute;right:13px;
  background:none;border:none;cursor:pointer;
  color:var(--on-text-muted);padding:4px;font-size:16px;
  transition:color .15s;border-radius:var(--on-r-xs);
}
.auth-eye-btn:hover{color:#475569;}
.auth-eye-btn:focus-visible{outline:2px solid var(--on-focus-ring);outline-offset:1px;}

/* ── Mensagens ──────────────────────────────────────────────────────────── */
.auth-err,.auth-success-msg{
  font-size:13px;border-radius:var(--on-r-sm);padding:10px 14px;
  margin:14px 0;line-height:1.5;
}
.auth-err{color:var(--on-danger);background:var(--on-danger-fundo);border:1px solid var(--on-danger-borda);}
.auth-success-msg{color:var(--on-success);background:var(--on-success-fundo);border:1px solid var(--on-success-borda);}

/* ── Links e ações ──────────────────────────────────────────────────────── */
.auth-forgot-row{display:flex;justify-content:flex-end;margin:4px 0 22px;}
.auth-forgot,.auth-switch-link,.auth-back-btn{
  font-size:13px;color:var(--on-primary);font-weight:600;
  background:none;border:none;cursor:pointer;font-family:inherit;padding:0;
  transition:color .15s;
}
.auth-switch-link{color:var(--on-focus-ring);font-weight:700;margin-left:4px;}
.auth-forgot:hover,.auth-switch-link:hover,.auth-back-btn:hover{color:#0C4A8A;}
.auth-forgot:focus-visible,.auth-switch-link:focus-visible,
.auth-back-btn:focus-visible{outline:2px solid var(--on-focus-ring);outline-offset:2px;}
.auth-back-btn{display:inline-flex;align-items:center;gap:6px;}

.auth-submit-btn{
  width:100%;
  background:var(--on-primary);
  border:1px solid var(--on-primary);border-radius:var(--on-r-sm);
  padding:13px;
  font-size:14px;font-weight:700;color:#fff;
  cursor:pointer;font-family:inherit;letter-spacing:-.01em;
  transition:background var(--on-trans),transform .15s;
}
.auth-submit-btn:hover:not(:disabled){background:var(--on-primary-hover);}
.auth-submit-btn:active:not(:disabled){transform:translateY(1px);opacity:.95;}
.auth-submit-btn:disabled{opacity:.55;cursor:not-allowed;}
.auth-submit-btn:focus-visible{outline:2px solid var(--on-focus-ring);outline-offset:2px;}

.auth-switch{margin-top:18px;font-size:13px;color:var(--on-text-muted);text-align:center;}

/* ── Celular: a capa vira faixa no topo ─────────────────────────────────── */
@media(max-width:899px){
  .on-auth{flex-direction:column;}
  .on-auth-capa{width:100%;height:min(46vh,320px);}
  .on-auth-lado{padding:30px 22px 34px;flex:1 0 auto;}
  .on-auth-corpo,.on-auth-rodape{max-width:420px;}
  .on-auth-ondas{height:120px;}
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENTES DA FICHA DE MATRÍCULA
   Mesmos princípios: flat, borda de 1px, raio 8/12, azul só na ação e na
   seleção.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Superfície: borda, não sombra. */
.card{
  border:1px solid var(--on-border);
  border-radius:var(--on-r-md);
  background:#fff;box-shadow:none;overflow:visible;
}
.card::before{display:none}

/* Filete divisório — reto e discreto, como no painel. */
.group-sep,.sec-sep,.group-label-line{height:1px;border:0;background:var(--on-border);}

/* Título de etapa */
.step-panel>h2{
  font-size:22px;font-weight:700;color:#0D1117;
  letter-spacing:-.01em;line-height:1.25;margin-bottom:6px;
}
.step-panel>.desc{
  font-size:14px;color:#6B7280;line-height:1.5;margin-bottom:28px;max-width:46ch;
}
.section-title{font-size:22px;font-weight:700;letter-spacing:-.01em;color:#0D1117;}
.section-desc{font-size:14px;color:#6B7280;line-height:1.5;}
.section-head{border:0 !important;padding-bottom:0;margin-bottom:24px;}
.section-tag,.section-tag-bar{display:none}

/* Micro-rótulo de seção — sem a régua de 2px que atravessava o painel. */
.sec-lbl,.group-label{
  display:block;width:auto;border:0;padding:0;
  font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--on-text-muted);margin:0 0 12px;
}
.sec-lbl:not(:first-child),.group-label:not(:first-child){margin-top:28px}

/* Campos da ficha: mesmo desenho dos campos de auth. */
.form-group>label{
  font-size:12px;font-weight:600;color:var(--on-text-muted);letter-spacing:0;
}
.req{color:var(--on-focus-ring);font-weight:700}
.input-wrap input,.input-wrap select,.input-wrap-ta textarea,
input[type=text],input[type=email],input[type=tel],input[type=date],
input[type=number],input[type=password],input[type=search],select,textarea{
  background:var(--on-bg);
  border:1px solid var(--on-border);border-radius:var(--on-r-sm);
  color:var(--on-text);
  transition:border-color var(--on-trans),background var(--on-trans);
}
.input-wrap input:hover,.input-wrap select:hover,.input-wrap-ta textarea:hover{
  border-color:var(--on-border-strong);background:#fff;
}
.input-wrap input:focus,.input-wrap select:focus,.input-wrap-ta textarea:focus,
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--on-focus-ring);background:#fff;box-shadow:none;
}
::placeholder{color:var(--on-placeholder);opacity:1}
.field-icon{color:var(--on-text-muted);}
.input-wrap:focus-within .field-icon{color:var(--on-focus-ring);}

/* Mensagem de erro. O `display:none` de origem só valia dentro de .form-group,
   e quatro mensagens ficam FORA dele (bairro, UF, dias/horário e o aceite da
   LGPD) — essas apareciam já na abertura da etapa, como se a pessoa tivesse
   errado antes de digitar. O JS continua mandando: liga pela classe .show e,
   no caso do aceite, por style inline, que vence qualquer regra daqui. */
.errmsg{
  display:none;font-size:11.5px;color:var(--on-danger);
  margin-top:5px;font-weight:500;padding-left:2px;
}
.errmsg.show{display:block}

/* Assinatura. O HTML usa .sig-wrap/.sig-label; o CSS antigo estilizava
   .sig-wrap-outer, classe que não existe em lugar nenhum da página —
   resultado: a área de assinar era um vazio sem moldura. */
.sig-label{
  font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--on-text-muted);margin-bottom:8px;
}
.sig-wrap{
  background:var(--on-bg);border:1px solid var(--on-border);
  border-radius:var(--on-r-sm);overflow:hidden;
  transition:border-color var(--on-trans);
}
.sig-wrap:focus-within,.sig-wrap:active{border-color:var(--on-focus-ring);}
#sigCanvas{display:block;width:100%;height:150px;cursor:crosshair;touch-action:none;}
.sig-clear-wrap{display:flex;justify-content:flex-end;margin-top:6px;}

/* ── Botões da ficha ────────────────────────────────────────────────────── */
.form-nav{
  display:grid;grid-template-columns:auto 1fr;align-items:stretch;
  gap:12px;margin-top:30px;padding-top:24px;
  border-top:1px solid var(--on-border);
}
.form-nav.end{grid-template-columns:1fr}
.btn-submit,.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 24px;
  background:var(--on-primary);
  border:1px solid var(--on-primary);border-radius:var(--on-r-sm);
  color:#fff;font-size:14px;font-weight:700;letter-spacing:-.01em;
  font-family:inherit;cursor:pointer;box-shadow:none;
  transition:background var(--on-trans),transform .15s;
}
.btn-submit:hover:not(:disabled),.btn-primary:hover:not(:disabled){background:var(--on-primary-hover);}
.btn-submit:active:not(:disabled),.btn-primary:active:not(:disabled){transform:translateY(1px);opacity:.95;}
.btn-submit:disabled,.btn-primary:disabled{opacity:.55;cursor:not-allowed;}
.btn-back,.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:48px;padding:0 20px;
  border:1px solid var(--on-border);border-radius:var(--on-r-sm);
  background:#fff;color:var(--on-text-muted);
  font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;box-shadow:none;
  transition:background var(--on-trans),border-color var(--on-trans);
}
.btn-back:hover,.btn-ghost:hover{background:var(--on-bg);border-color:var(--on-border-strong);}
/* Terciário: sem caixa. "Limpar assinatura" é ação de desfazer — dar contorno
   a ela é anunciar como se fosse escolha de mesmo peso que "Confirmar". */
.btn-sig-clear{
  background:none;border:0;box-shadow:none;padding:6px 2px;
  color:var(--on-text-muted);font-weight:600;font-size:12px;
  transition:color .15s;
}
.btn-sig-clear:hover{color:var(--on-danger);background:none;}
.btn-submit:focus-visible,.btn-back:focus-visible,.btn-ghost:focus-visible{
  outline:2px solid var(--on-focus-ring);outline-offset:2px;
}

/* ── Escolha: frequência, plano, dia, horário, modalidade, aceite ────────
   Todos os seletores da casa com os mesmos quatro estados. Escolhido =
   fundo azul-suave + borda azul, sem preenchimento chapado: azul cheio num
   botão de opção rouba a atenção do botão de avançar, que é a única ação
   cheia da tela. */
.freq-btn,.plan-card,.dia-btn,.hora-btn,.mod-opt,.check-row{
  border:1px solid var(--on-border);border-radius:var(--on-r-sm);
  background:#fff;box-shadow:none;
  transition:border-color var(--on-trans),background var(--on-trans);
}
.freq-btn:hover,.plan-card:hover,.dia-btn:hover,.hora-btn:hover,.mod-opt:hover{
  border-color:var(--on-border-strong);background:var(--on-bg);
}
.freq-btn.active,.plan-card.sel,.dia-btn.on,.hora-btn.on,
.mod-opt[aria-pressed="true"],.check-row.on{
  border-color:var(--on-primary);background:var(--on-primary-subtle);box-shadow:none;
}
.freq-btn:focus-visible,.plan-card:focus-visible,.dia-btn:focus-visible,
.hora-btn:focus-visible,.mod-opt:focus-visible{
  outline:2px solid var(--on-focus-ring);outline-offset:1px;
}
.plan-card,.mod-opt{border-radius:var(--on-r-md);}
.dia-btn,.hora-btn{border-radius:var(--on-r-pill);}
.check-box{border-radius:var(--on-r-xs);border-color:var(--on-border-strong);}

/* As quatro opções de frequência têm a MESMA altura por construção: três
   delas têm o subtítulo vazio no HTML e só "Privativa" tem "Sob consulta".
   O subtítulo guarda a linha mesmo vazio, senão os nomes não param na mesma
   altura. */
.freq-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:0;}
.freq-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;min-height:60px;padding:10px 8px;text-align:center;cursor:pointer;
}
.freq-nome{font-size:13px;font-weight:600;color:var(--on-text-muted);margin:0}
.freq-sub{font-size:10.5px;color:var(--on-text-muted);font-weight:400;line-height:1.3;min-height:14px;}
.freq-btn.active .freq-nome{color:var(--on-primary)}
.freq-btn.active .freq-sub{color:var(--on-text-muted)}

.plan-list{display:flex;flex-direction:column;gap:10px;padding-top:8px;}
.plan-card{padding:14px 16px;gap:13px;overflow:visible}
.plan-radio{
  width:18px;height:18px;border:1.5px solid var(--on-border-strong);background:#fff;
  transition:border-color var(--on-trans),background var(--on-trans);
}
.plan-card.sel .plan-radio{border-color:var(--on-primary);background:var(--on-primary)}
.plan-name{font-size:14px;font-weight:600;color:var(--on-text)}
.plan-card.sel .plan-name{color:var(--on-primary)}
.plan-sub{font-size:11.5px;color:var(--on-text-muted);margin-top:2px}
.price-per{font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--on-text-muted);}
.price-val{font-size:15px;font-weight:700;color:var(--on-text);letter-spacing:-.01em;margin-top:1px;}
.plan-card.sel .price-val{color:var(--on-primary)}
/* "Recomendado" pousa sobre a borda de cima, como etiqueta costurada. Dentro
   do cartão ele disputaria espaço com o preço e obrigaria a engordar só esse
   cartão, deixando um dos três mais alto que os outros dois. */
.rec-badge{
  position:absolute;top:-9px;left:15px;right:auto;
  background:#fff;color:var(--on-primary);border:1px solid var(--on-primary);
  font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:2px 9px;border-radius:var(--on-r-pill);line-height:1.5;
}

/* ── Aviso e resumo de valor ────────────────────────────────────────────── */
.aviso,.sum-box{
  border:1px solid var(--on-border);border-left:3px solid var(--on-primary);
  border-radius:var(--on-r-sm);background:var(--on-primary-subtle);
  box-shadow:none;color:var(--on-text-muted);
  padding:12px 15px;font-size:12.5px;line-height:1.5;
}
.aviso strong{color:var(--on-text);font-weight:700}
.sum-sec{border-color:var(--on-border)}
/* Variante para dinheiro: é o fecho do bloco de plano, então perde a marca
   lateral e ganha a estrutura rótulo → valor → observação. */
.aviso.resumo{
  border-left-width:1px;background:var(--on-bg);
  padding:14px 16px;margin:6px 0 0;
}
.resumo-topo{display:flex;align-items:baseline;justify-content:space-between;gap:16px;}
.resumo-lbl{font-size:12.5px;font-weight:600;color:var(--on-text-muted)}
.resumo-val{font-size:16px;font-weight:700;color:var(--on-text);letter-spacing:-.01em;white-space:nowrap;}
.resumo-nota{display:block;margin-top:4px;font-size:11.5px;line-height:1.5;color:var(--on-text-muted);}

/* ═══ MARCA DA ESCOLA ════════════════════════════════════════════════════
   Componente, não enfeite: a logo é enviada pela própria escola no cadastro
   do Ondaa, então chega em qualquer proporção — horizontal comprida, quadrada
   ou vertical — e em qualquer fundo (PNG transparente, JPG branco).

   O que garante que nenhuma delas quebre o topo: altura FIXA (é a altura que
   o olho usa para comparar duas marcas) com largura livre até um teto;
   object-fit:contain, que jamais estica — sobra vira respiro; e uma bandeja
   clara por baixo, para a logo transparente escura e a logo em JPG branco
   pousarem no mesmo lugar sem uma delas sumir. O mesmo desenho vale para o
   fallback em iniciais, então escola sem logo não deixa buraco. */
.marca{display:flex;align-items:center;gap:12px;min-width:0;}
.marca-escola,.marca-iniciais{
  height:48px;border-radius:var(--on-r-sm);
  background:#fff;border:1px solid var(--on-border);flex-shrink:0;
}
.marca-escola{width:auto;max-width:150px;min-width:48px;object-fit:contain;padding:7px 10px;}
/* Com logo, quem cede espaço é a LOGO, nunca o texto nem o atalho do portal.
   A bandeja tinha flex-shrink:0: uma logo comprida (4:1) espremia a coluna do
   nome — "Escola de…" cortado, cidade em duas linhas, topo mais alto no
   celular — e, no desktop largo, jogava "Já tem cadastro?" para outra linha.
   Agora o texto fica com a largura que teria ao lado das iniciais (limitado
   a 100% menos a bandeja mínima + o gap) e a logo pega só o que sobrar, até o
   teto, nunca menos que o tamanho das iniciais. object-fit:contain continua
   mostrando a imagem inteira. Tudo restrito a "logo visível": sem logo, a
   composição das iniciais não muda em nada. O bloco do portal também não
   encolhe (senão "Já tem cadastro?" quebrava em duas linhas). */
.marca > .marca-escola{flex-shrink:1;}
.marca:has(> .marca-escola:not([hidden])) > .marca-txt{flex-shrink:0;max-width:calc(100% - 60px);}
.topo:has(.marca-escola:not([hidden])){flex-wrap:nowrap;}
.topo:has(.marca-escola:not([hidden])) > .marca{flex:1 1 auto;min-width:0;}
.topo:has(.marca-escola:not([hidden])) > .topo-portal{flex:0 0 auto;}
.marca-iniciais{
  width:48px;display:grid;place-items:center;
  background:var(--on-primary-subtle);border-color:var(--on-border);
  color:var(--on-primary);font-weight:700;font-size:15px;
}
.marca-divisor{width:1px;height:26px;flex-shrink:0;background:var(--on-border);}
.marca-ondaa{height:28px;width:auto;flex-shrink:0}
.marca-txt{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.marca-nome{
  font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--on-text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.marca-cidade{font-size:12.5px;color:var(--on-text-muted);}

/* ═══ PASSOS ═════════════════════════════════════════════════════════════
   Uma TRILHA, não uma barra com uma fileira de bolinhas embaixo: a barra fica
   ATRÁS dos números, ligando o centro do primeiro ao centro do último. E a
   conta que o matricula.js já fazia — largura = (passo-1)/5 — passa a ser
   exatamente a certa, porque de centro a centro há justamente cinco
   intervalos. Nenhuma linha de script mudou. */
.progress-wrap{position:relative}
.prog-track{
  position:relative;z-index:0;
  /* `width:auto` explícito: a página declara `width:100%` e, sem isto, a
     trilha ignora as margens e passa das bolinhas das pontas. */
  height:3px;width:auto;margin:0 calc(100%/12);  /* meia coluna = centro das pontas */
  border-radius:var(--on-r-pill);background:var(--on-surface);overflow:hidden;
}
.prog-fill{height:100%;border-radius:var(--on-r-pill);background:var(--on-primary);transition:width .45s var(--on-ease);}
.prog-label{color:var(--on-text-muted);font-weight:700;letter-spacing:.05em;}
.prog-counter{color:var(--on-text-muted);font-weight:500;font-size:11.5px;}
.prog-counter .pc{color:var(--on-primary);font-weight:700}

/* -15,5px = metade da bolinha (14) + a espessura da trilha (1,5). */
.steps-row{position:relative;z-index:1;margin-top:-15.5px;align-items:flex-start}
.step-item{gap:9px}
/* Todas do MESMO diâmetro: com tamanhos diferentes elas deixam de
   compartilhar uma linha de centro e a trilha passa raspando em cinco e
   cortando uma. O destaque da atual vem da cor. */
.step-dot{
  width:28px;height:28px;border:1px solid var(--on-border);font-size:11.5px;font-weight:700;
  background:#fff;color:var(--on-text-muted);
  box-shadow:0 0 0 4px #fff;
  transition:background var(--on-trans),color var(--on-trans),border-color var(--on-trans);
}
.step-dot.done{
  background:var(--on-primary-subtle);border-color:var(--on-primary-subtle);
  color:var(--on-primary);font-size:0;box-shadow:0 0 0 4px #fff;
}
.step-dot.done::after{content:'✓';font-size:12px;font-weight:700;color:var(--on-primary)}
.step-dot.active{
  background:var(--on-primary);border-color:var(--on-primary);color:#fff;
  box-shadow:0 0 0 4px #fff;
}
.step-lbl{
  text-transform:none;letter-spacing:0;font-size:11px;font-weight:500;
  color:var(--on-text-muted);transition:color var(--on-trans);
}
.step-lbl.done{color:var(--on-text-muted)}
.step-lbl.active{color:var(--on-primary);font-weight:700}

/* ═══ MODAL / RODAPÉ ═════════════════════════════════════════════════════ */
.modal-content{border:1px solid var(--on-border);border-radius:var(--on-r-lg);box-shadow:none;}
.modal-icon{border-radius:var(--on-r-pill)}
.modal-icon.sucesso{background:var(--on-success-fundo);color:var(--on-success)}
.modal-icon.erro{background:var(--on-danger-fundo);color:var(--on-danger)}
footer{color:#9CA3AF;letter-spacing:0;}
footer::before,footer::after{display:none}

/* ═══════════════════════════════════════════════════════════════════════════
   MOVIMENTO
   ═══════════════════════════════════════════════════════════════════════════
   Uma curva só em todo o produto — cubic-bezier(.22,1,.36,1), a mesma do
   painel: sai rápido e freia devagar, que é o que faz o movimento parecer
   água e não elástico.

   Duas regras que valem para tudo aqui:

   1. Nada anima mais que 400ms. Acima disso a pessoa espera a interface em
      vez de usá-la — e numa tela de login ela quer entrar, não assistir.
   2. Nada muda de TAMANHO. Só opacidade, deslocamento e cor. Escala e altura
      obrigam o navegador a refazer o layout a cada quadro e, num campo de
      texto, fazem o cursor tremer enquanto a pessoa digita.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{ --on-passo:.045s; }   /* intervalo do escalonamento em cascata */

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

/* ── Entrada em cascata ──────────────────────────────────────────────────
   Os três cartões da entrada são trocados por `style.display`, e uma
   animação CSS RECOMEÇA sozinha quando o elemento volta a ser exibido. Por
   isso a cascata toca de novo a cada troca (login → esqueci → criar senha)
   sem precisar de uma linha de JavaScript para reiniciá-la. */
.auth-card{animation:onSobe .38s var(--on-ease) both}
/* O <form> fica de fora: ele já é animado pelos filhos, e animar os dois
   sobrepõe dois deslocamentos no mesmo pixel — o texto "escorrega" duas
   vezes e o resultado parece defeito, não capricho. */
.auth-card > *:not(form),
.auth-card form > *{animation:onSobe .34s var(--on-ease) both}
.auth-card .on-auth-sub{animation-delay:calc(var(--on-passo) * 1)}
.auth-card form > *:nth-child(1){animation-delay:calc(var(--on-passo) * 2)}
.auth-card form > *:nth-child(2){animation-delay:calc(var(--on-passo) * 3)}
.auth-card form > *:nth-child(3){animation-delay:calc(var(--on-passo) * 4)}
.auth-card form > *:nth-child(4){animation-delay:calc(var(--on-passo) * 5)}
.auth-card form > *:nth-child(5){animation-delay:calc(var(--on-passo) * 6)}
.auth-card form ~ *{animation-delay:calc(var(--on-passo) * 7)}

/* ── Campo ───────────────────────────────────────────────────────────────
   No foco, além da borda azul entra um halo largo e translúcido que cresce
   em 220ms. É ele que dá a sensação de "acendeu" — a troca seca de cor da
   borda, sozinha, é informação sem gentileza. O halo é sombra, não borda:
   não ocupa espaço, então nada ao redor se desloca quando ele aparece. */
.auth-field-input,
.input-wrap input,.input-wrap select,.input-wrap-ta textarea{
  transition:border-color .22s var(--on-ease),
             background   .22s var(--on-ease),
             box-shadow   .22s var(--on-ease);
}
.auth-field-input:focus,
.input-wrap input:focus,.input-wrap select:focus,.input-wrap-ta textarea:focus{
  box-shadow:0 0 0 4px rgba(2,132,199,.12);
}
/* O rótulo acompanha o foco do próprio campo. */
.auth-field-label{transition:color .22s var(--on-ease)}
.auth-field:focus-within .auth-field-label{color:var(--on-primary)}
/* O ícone da esquerda já troca de cor; ganha o mesmo tempo dos demais. */
.auth-field-wrap>i,.field-icon{transition:color .22s var(--on-ease)}

/* Campo já preenchido: a borda escurece um tom. Serve para a pessoa
   distinguir de relance o que ela já respondeu do que falta — e sai de graça,
   sem JavaScript, porque `:placeholder-shown` é o próprio navegador dizendo
   se o campo está vazio. (Por isso todo campo aqui tem placeholder.) */
.auth-field-input:not(:placeholder-shown):not(:focus){
  border-color:var(--on-border-strong);background:#fff;
}

/* ── Aviso de campo ──────────────────────────────────────────────────────
   Substitui a bolha nativa do navegador, que vem em inglês e não aceita
   estilo. Aparece só quando as TRÊS condições valem ao mesmo tempo:

   · `:invalid`      — o que está escrito não passa no type/pattern do campo;
   · `:not(:placeholder-shown)` — a pessoa escreveu alguma coisa (campo vazio
                       é "ainda não preenchido", não "preenchido errado");
   · `:not(:focus)`  — ela já saiu do campo. Acusar erro no meio da digitação
                       é o que faz "gab" virar erro antes de virar
                       "gabriel@…", e ninguém merece ser corrigido no meio da
                       palavra.

   Tudo em CSS: `:invalid` continua valendo com `novalidate` no form — o que
   o atributo desliga é só a interface nativa, não a validação. */
.auth-field-erro{
  display:none;
  margin-top:6px;padding-left:2px;
  font-size:11.5px;font-weight:500;color:var(--on-danger);
  animation:onSobe .22s var(--on-ease) both;
}
.auth-field:has(.auth-field-input:invalid:not(:placeholder-shown):not(:focus)) .auth-field-erro{
  display:block;
}
.auth-field-input:invalid:not(:placeholder-shown):not(:focus){
  border-color:var(--on-danger);
}
/* Sem :has() (Safari < 15.4) o aviso simplesmente não aparece e o formulário
   segue funcionando — o portal.js continua respondendo em português. */

/* ── Botão ───────────────────────────────────────────────────────────────
   O primário escurece no hover e afunda 1px no clique. O afundar é o que
   responde ao dedo; sem ele o botão parece uma figura, não um controle. */
.auth-submit-btn,.btn-submit,.btn-primary{
  transition:background .22s var(--on-ease),transform .12s var(--on-ease);
}
.auth-eye-btn i{display:block;transition:opacity .18s var(--on-ease)}
.auth-eye-btn:hover i{opacity:.7}

/* ── Links ───────────────────────────────────────────────────────────────
   Sublinhado que cresce da esquerda em vez de aparecer inteiro de uma vez. */
.auth-forgot,.auth-switch-link,.auth-back-btn,.auth-link{
  position:relative;text-decoration:none;
}
.auth-forgot::after,.auth-switch-link::after,.auth-link::after{
  content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:currentColor;
  transform:scaleX(0);transform-origin:left;
  transition:transform .22s var(--on-ease);
}
.auth-forgot:hover::after,.auth-switch-link:hover::after,.auth-link:hover::after{
  transform:scaleX(1);
}
.auth-forgot:hover,.auth-link:hover{text-decoration:none}

/* Quem pediu menos movimento no sistema recebe menos movimento. Não é
   detalhe de acessibilidade opcional: para quem tem sensibilidade
   vestibular, animação de entrada em cascata provoca enjoo de verdade. */
@media(prefers-reduced-motion:reduce){
  .auth-card,.auth-card > *,.auth-card form > *{animation:none !important}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
}

/* ═══ TELA ESTREITA ══════════════════════════════════════════════════════
   O que encolhe é o respiro, nunca a área de toque: os alvos ficam acima de
   44px — abaixo disso o dedo erra, e errar num seletor de plano é a pessoa
   achar que contratou o que não queria. */
@media(max-width:640px){
  .step-panel>h2{font-size:19px}
  .step-panel>.desc{font-size:13.5px;margin-bottom:22px}
  .sec-lbl:not(:first-child),.group-label:not(:first-child){margin-top:24px}
  /* Quatro opções em 360px dariam 78px cada, e "1x semana" quebraria dentro
     do botão. */
  .freq-row{grid-template-columns:repeat(2,1fr);gap:9px}
  .freq-btn{min-height:58px}
  .plan-card{padding:13px 14px;gap:11px}
  .rec-badge{left:13px}
  .resumo-val{font-size:15px}
  /* Empilhar seria pior: "Voltar" ganharia a largura inteira e o mesmo peso
     visual do "Próximo". Ficam lado a lado, o primário tomando o resto. */
  .form-nav{gap:10px;margin-top:26px;padding-top:20px}
  .btn-submit,.btn-primary,.btn-back,.btn-ghost{min-height:48px}
  .step-dot,.step-dot.done{width:25px;height:25px;box-shadow:0 0 0 3px #fff}
  .steps-row{margin-top:-14px}
  .marca{gap:10px}
  .marca-escola,.marca-iniciais{height:42px}
  .marca-escola{max-width:120px;min-width:42px;padding:6px 8px}
  .marca:has(> .marca-escola:not([hidden])) > .marca-txt{max-width:calc(100% - 52px)}
  .marca-iniciais{width:42px;font-size:13px}
  .marca-nome{font-size:15px;white-space:normal;line-height:1.22;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;}
  .marca-cidade{font-size:12px}
}