/* ============================================================
   Garage Store — cromo da PÁGINA pública (topo, hero, rodapé).
   Os tokens, o grid e o card estão em `vitrine.css`, compartilhado com a aba de
   Prévia do app de gestão. Nada aqui é usado pela prévia — só esta página tem
   cabeçalho, hero e rodapé.
   ============================================================ */

/* ---------- topo ---------- */
.topo{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:16px clamp(14px,4vw,36px);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;background:rgba(10,10,11,.9);backdrop-filter:blur(8px)}
.brand{font-family:var(--font-cond);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--txt);text-decoration:none}
.brand b{color:var(--accent)}
.brand small{display:block;font-size:.66rem;color:var(--mut-2);letter-spacing:.12em}
.topo-nav{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.topo-nav a{font-family:var(--font-cond);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:.78rem;
  color:var(--mut);text-decoration:none;border:1px solid var(--line-2);padding:.5em .9em;transition:.15s}
.topo-nav a:hover{color:var(--accent);border-color:var(--accent)}
/* Voltar é a ação principal do aluno aqui — destaque maior que o link do site. */
.topo-nav a.voltar{color:var(--accent);border-color:rgba(245,197,24,.45)}
.topo-nav a.voltar:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}

.wrap{max-width:1100px;margin:0 auto;padding:clamp(20px,4vw,38px) clamp(14px,4vw,36px)}

/* ---------- hero ---------- */
.hero h1{font-family:var(--font-display);font-weight:400;text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(2rem,7vw,3.2rem);margin:0 0 10px;line-height:1}
.hero p{margin:0 0 8px;color:var(--mut);max-width:62ch}
.hero .aviso{font-size:.85rem;color:var(--mut-2);border-left:2px solid var(--line-2);padding-left:12px;margin-top:14px}

/* ---------- rodapé ---------- */
.rodape{border-top:1px solid var(--line);padding:26px clamp(14px,4vw,36px);text-align:center;color:var(--mut);font-size:.85rem}
.rodape p{margin:0 0 4px}
.rodape .mut{color:var(--mut-2);font-size:.78rem}

@media (max-width:420px){
  .topo-nav{width:100%;margin-left:0}
}