/* Etapa 9A: páginas públicas (sem login) — /materiais e o checkout curto. */

body.publico { min-height: 100vh; background: var(--navy-950); }

/* ---------- Topo ---------- */
.pub-topo {
  display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-6);
  border-bottom: 1px solid var(--hairline-ouro); background: var(--glass-topbar, var(--navy-900));
}
.pub-topo .topbar__spacer { flex: 1; }
.pub-conteudo { max-width: 1100px; margin: 0 auto; padding: var(--sp-6); }

/* ---------- /materiais ---------- */
.mat-hero { text-align: center; max-width: 640px; margin: 0 auto var(--sp-6); }
.mat-hero h1 { margin-top: var(--sp-2); font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem); }
.mat-hero .lead { margin-top: var(--sp-3); font-size: 1.08rem; color: var(--ink-300); }

.mat-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-5); }
.mat-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: radial-gradient(60% 40% at 15% 0%, var(--glow-gold), transparent 70%), linear-gradient(180deg, var(--navy-800), var(--navy-950));
  border: 1px solid var(--border-gold); border-radius: 22px; box-shadow: var(--shadow-2), var(--brilho-borda);
}
.mat-card__capa { position: relative; }
.mat-card__capa img { display: block; width: 100%; aspect-ratio: 320 / 452; object-fit: cover; }
.mat-card__selo { position: absolute; top: var(--sp-3); left: var(--sp-3); background: var(--navy-950); }
.mat-card__corpo { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); }
.mat-card__corpo h2 { font-size: 1.2rem; }
.mat-card__preco { font-family: var(--font-display); font-size: 1.3rem; color: var(--gold-300); }
.mat-card__preco small { display: block; margin-top: 2px; font-family: var(--font-body); font-size: 0.72rem; font-weight: 500; color: var(--ink-500); text-transform: none; letter-spacing: normal; }

/* ---------- Checkout ---------- */
.chk-resumo { display: flex; align-items: center; gap: var(--sp-4); max-width: 520px; margin: 0 auto var(--sp-6); padding: var(--sp-4); background: var(--scrim); border: 1px solid var(--border-gold); border-radius: var(--radius-md); }
.chk-resumo img { flex: none; width: 72px; height: 102px; object-fit: cover; border-radius: 10px; box-shadow: var(--shadow-1); }
.chk-resumo h1 { margin-top: 2px; font-size: 1.3rem; }
.chk-resumo__preco { margin-top: var(--sp-1); font-family: var(--font-display); font-size: 1.15rem; color: var(--gold-300); }
.chk-resumo__preco small { margin-left: var(--sp-1); font-family: var(--font-body); font-size: 0.72rem; font-weight: 500; color: var(--ink-500); }

form.checkout { max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-5); }
.aviso--menor { text-align: center; }

/* ---------- Confirmação ---------- */
.chk-confirma { max-width: 480px; margin: var(--sp-6) auto 0; padding: var(--sp-6); text-align: center; background: var(--scrim); border: 1px solid var(--border-gold); border-radius: var(--radius-md); }
.chk-confirma__selo { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto var(--sp-4); color: var(--navy-950); background: var(--grad-gold); border-radius: 50%; box-shadow: 0 0 22px var(--glow-gold); }
.chk-confirma__selo .icon { width: 28px; height: 28px; }
.chk-confirma__status { margin-top: var(--sp-3); font-size: 1rem; }
.chk-confirma .cadastro__nota { margin-top: var(--sp-4); }
.chk-confirma .btn { margin-top: var(--sp-5); }

.chk-confirma__pix { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--border); text-align: center; }
.chk-confirma__pix-selo { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-300); }
.chk-confirma__pix-titulo { font-weight: 700; font-size: 1.05rem; }
.chk-confirma__pix-qrbox { display: inline-flex; margin-top: var(--sp-2); padding: var(--sp-3); background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-1); }
.chk-confirma__pix-qr { display: block; width: 220px; height: 220px; }
.chk-confirma__pix-label { align-self: flex-start; width: 100%; margin-top: var(--sp-3); font-size: 0.85rem; font-weight: 600; color: var(--ink-300); text-align: left; }
.chk-confirma__pix-copiaecola {
  width: 100%; min-height: 96px; margin-top: var(--sp-1); padding: var(--sp-3);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 0.82rem; line-height: 1.45;
  color: var(--ink-100); background: var(--surface-strong); border: 1px solid var(--border); border-radius: var(--radius-sm);
  resize: vertical; word-break: break-all;
}
.chk-confirma__pix-copiar { width: 100%; margin-top: var(--sp-2); }
.chk-confirma__pix-copiar .icon { width: 18px; height: 18px; }
.chk-confirma__pix-instrucao { margin-top: var(--sp-1); font-size: 0.85rem; color: var(--ink-300); }

@media (max-width: 699.98px),
       (max-height: 500px) and (pointer: coarse),
       (min-width: 700px) and (max-width: 1099.98px) and (orientation: portrait) and (pointer: coarse) {
  .pub-topo { padding: var(--sp-3) var(--sp-4); flex-wrap: wrap; gap: var(--sp-2); }
  .pub-topo .btn { min-height: 40px; padding: 0 var(--sp-3); font-size: 0.85rem; }
  .pub-conteudo { padding: var(--sp-4); }
  .mat-grade { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-4); }
  .mat-card__corpo { padding: var(--sp-4); gap: var(--sp-2); }
  .chk-resumo { flex-direction: column; text-align: center; }
}

/* ---------- Apresentação pública (QR Code das salas) ----------
   A página do QR reaproveita os blocos de demonstracao.css. Aqui ficam só o cabeçalho centrado e
   a chamada final — a de "fale com a unidade", que substitui o preço enquanto não há valor oficial. */
.dm-cab--centro { max-width: 46rem; margin-left: auto; margin-right: auto; text-align: center; }
.pub-cta {
  margin-top: var(--sp-7); padding: var(--sp-6) var(--sp-5); text-align: center;
  border: 1px solid var(--border-gold); border-radius: var(--radius-lg);
  background: linear-gradient(150deg, var(--glow-gold), transparent 60%), var(--surface);
}
.pub-cta h2 { margin: 0; font-family: var(--font-display); font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.9rem); }
.pub-cta p { margin: var(--sp-3) 0 0; color: var(--ink-300); }
.pub-cta__acoes { margin-top: var(--sp-5) !important; }

/* Mesmo corte do resto do portal: largura de celular, OU celular deitado (pouca altura + toque),
   OU tablet em pé. Largura sozinha não serve — celular deitado tem largura de desktop. */
@media (max-width: 699.98px),
       (max-height: 500px) and (pointer: coarse),
       (min-width: 700px) and (max-width: 1099.98px) and (orientation: portrait) and (pointer: coarse) {
  .pub-topo { padding: var(--sp-3) var(--sp-4); gap: var(--sp-3); }
  .pub-conteudo { padding: var(--sp-5) var(--sp-4) var(--sp-7); }
}

/* Loja: as duas portas lado a lado (entrar / criar cadastro). Empilha no celular, onde botão
   lado a lado fica estreito demais para o polegar. */
.pub-cta__acoes--duplo { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; }
@media (max-width: 599.98px) {
  .pub-cta__acoes--duplo { flex-direction: column; align-items: stretch; }
}