/* Mural de agradecimentos: a mesma casa da abertura (preto, mono, âmbar só no que importa), com texto pra ler. */

/* o topo aqui tem fundo, porque a página rola por baixo dele */
.topo-solido { position: sticky; background: rgb(5 5 5 / .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--fio); pointer-events: auto; }

.mural { width: min(100% - 2 * var(--borda), 760px); margin-inline: auto; padding-block: clamp(44px, 8vw, 96px) 80px; display: grid; gap: clamp(40px, 6vw, 64px); }
.mural-cabeca { display: grid; gap: 16px; }
/* o título em mono, com o cursor âmbar da marca piscando no fim */
.mural-titulo { display: inline-flex; align-items: center; font: 400 clamp(28px, 7.4vw, 84px)/1.05 var(--mono); letter-spacing: -.01em; }
.mural-titulo::after { content: ''; flex: none; width: .42em; height: .9em; margin-left: .18em; background: var(--ambar); animation: pisca 1.3s steps(1) infinite; }
.mural-lide { max-width: 34em; font-size: clamp(17px, 1.5vw, 20px); color: var(--suave); text-wrap: pretty; }

/* ---------- deixar o seu ---------- */
.recado-caixa { display: grid; gap: 18px; padding: clamp(22px, 3.6vw, 34px); border: 1px solid var(--fio-forte); border-radius: 12px; background: var(--painel); }
.recado-codigo, .recado { display: grid; gap: 16px; }
.recado-codigo[hidden], .recado[hidden] { display: none; }
.recado-explica { color: var(--suave); }
.recado-codigo .botao, .recado .botao { justify-self: start; }
.campo { display: grid; gap: 8px; }
.campo-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.campo-conta { font: 400 12px/1 var(--mono); color: var(--apagado); }
.campo input, .campo textarea { width: 100%; padding: 14px 16px; border: 1px solid var(--fio-forte); border-radius: 10px; background: var(--fundo); color: var(--texto); font: 400 18px/1.5 var(--letra); outline: 0; caret-color: var(--ambar); transition: border-color .2s; }
.campo textarea { resize: vertical; min-height: 120px; }
.campo input:focus, .campo textarea:focus { border-color: var(--ambar); }
.recado-aviso { min-height: 1.4em; margin-top: -4px; font: 400 14.5px/1.4 var(--mono); color: var(--erro); }
.recado-aviso.ok { color: var(--ambar); }
.recado.treme, .recado-codigo.treme { animation: treme .38s; }

/* ---------- o mural ---------- */
.recados-caixa { display: grid; gap: 6px; }
.recados { display: grid; }
.recado-item { display: grid; gap: 10px; padding: 24px 0; border-top: 1px solid var(--fio); }
.recado-texto { font-size: clamp(19px, 2vw, 22px); line-height: 1.5; color: var(--texto); overflow-wrap: anywhere; text-wrap: pretty; }
.recado-quem { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font: 400 12.5px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--apagado); }
.recado-nome { color: var(--suave); overflow-wrap: anywhere; }
.recado-nome::before { content: '— '; }
/* o recado que acabou de entrar chega com o âmbar do lado e esfria */
.recado-item.novo { animation: recado-entra .6s var(--curva); box-shadow: inset 3px 0 0 var(--ambar); padding-left: 18px; transition: box-shadow 2.4s 1.2s, padding-left .5s 3.2s var(--curva); }
@keyframes recado-entra { from { opacity: 0; translate: 0 -10px; } }
.recados-vazio { padding: 24px 0; border-top: 1px solid var(--fio); color: var(--suave); }

.pe-mural { width: min(100% - 2 * var(--borda), 760px); margin-inline: auto; padding: 26px 0 34px; border-top: 1px solid var(--fio); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font: 400 14px/1 var(--mono); }
.pe-mural .marca { font-size: 13px; color: var(--suave); }
.pe-mural .marca::after { animation: none; }
.pe-mural .pe-founder { color: var(--texto); letter-spacing: .03em; }
.pe-mural .pe-founder .rotulo { margin-right: .7em; }