/* O que é só das páginas do xuhlis.com e a prévia não tinha: a fileira de redes que
   sempre ocupa a largura dos links, a página vazia e o formulário travado.
   A folha de verdade é xuhlis.css, a da prévia aprovada, e ela não foi mexida. */

/* ── as redes da central: sempre da largura dos links de baixo ──
   Até nove, todas numa linha só, no telefone e no computador. Passou de nove, duas linhas:
   a de cima com a metade (arredondada para cima), e a de baixo com a metade ou uma a menos,
   centralizada. --colunas vem escrito na lista, pela quantidade de redes. */
.hub .icones { --vao: 8px; flex-wrap: wrap; justify-content: center; gap: var(--vao); width: 100%; }
.hub .icones li { flex: 0 0 calc((100% - (var(--colunas, 7) - 1) * var(--vao)) / var(--colunas, 7)); min-width: 0; }
.hub .icones a { width: 100%; height: auto; aspect-ratio: 1; }
.hub .icones a svg { width: 46%; height: 46%; max-width: 26px; max-height: 26px; }
@media (max-width: 430px) { .hub .icones { --vao: 6px; } }

/* no rodapé das outras páginas as redes quebram de linha, como no blog */
.rodape--casa .icones { --colunas: unset; }

/* ── página que ainda não tem conteúdo ── */
.casa-vazia { background: var(--cartao); box-shadow: 0 0 0 1px var(--tinta), var(--sombra) var(--violeta); padding: clamp(20px, 3vw, 30px); max-width: 620px; }
.casa-vazia p { margin: 0 0 18px; font-size: 18px; line-height: 1.55; }
.casa-vazia p:last-child { margin-bottom: 0; }

/* ── o formulário travado: os campos aparecem, e nenhum aceita texto ── */
.pedido .trava a { color: var(--noite); font-weight: 700; }
.pedido__campos[disabled] { opacity: .62; }
.pedido__campos[disabled] input, .pedido__campos[disabled] textarea, .pedido__campos[disabled] select, .pedido__campos[disabled] label { cursor: not-allowed; }

/* ── a onda do fundo da central acende em branco fraco, e não em roxo ──
   Roxo, ela disputava com os botões, que são roxos, e atrapalhava a leitura das letras claras
   por onde passava. Em branco e bem mais fraca, continua passando e não briga com nada. */
.onda i { background: radial-gradient(circle, var(--papel) 3.2px, transparent 3.8px) 0 0 / 20px 20px; opacity: .13; }

/* ── os títulos das partes da central ("o que eu tô lendo", "onde mais eu tô") em branco ──
   No roxo claro, miúdos e em cima das bolinhas do fundo, eles ficavam difíceis de ler. */
.hub h2 { color: var(--papel); }

/* ── a barrinha de rolagem é roxa do começo ao fim, também no telefone ──
   o toque não acende nada em cima dela, e a barra do aparelho, onde o navegador deixa
   esconder, não passa por cima */
.rolagem { -webkit-tap-highlight-color: transparent; }
html.js, html.js body { scrollbar-width: none !important; }
html.js body::-webkit-scrollbar { display: none; width: 0; height: 0; }
@media (hover: none) and (pointer: coarse) { html.js { scrollbar-color: transparent transparent; } }

/* ── o rodapé fica embaixo, mesmo quando a página é curta ── */
body:not(.noite) { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body:not(.noite) > main { flex: 1 0 auto; }