/* ===========================================================================
   MURAL DE DEPOIMENTOS · Oráculo Vertical
   Componente ISOLADO. ⛔ Não depende de estilo.css e ⛔ não altera nada dele.
   Todos os tokens têm valor de reserva, então a folha funciona sozinha no
   mural-exemplo.html e herda a paleta da página quando encaixada.

   Faixa horizontal com scroll-snap NATIVO. ⛔ Sem biblioteca de carrossel.
   O dedo arrasta no celular porque é rolagem de verdade; o mouse arrasta
   porque o JS traduz o gesto em scrollLeft; o teclado anda porque as setas
   chamam o mesmo passo das setas da tela.
   =========================================================================== */

.mural{
  --m-obsidiana: var(--obsidiana, #0a0a0c);
  --m-obsidiana-2: var(--obsidiana-2, #101014);
  --m-obsidiana-3: var(--obsidiana-3, #17171c);
  --m-marfim: var(--marfim, #f2ece1);
  --m-cobre: var(--cobre, #b1703c);
  --m-cobre-claro: var(--cobre-claro, #cf8b52);
  --m-cinza: var(--cinza-claro, #a39c92);
  --m-linha: var(--linha-escura, rgba(242,236,225,.10));
  --m-serif: var(--serif, 'Newsreader', Georgia, serif);
  --m-display: var(--display, 'Marcellus', Georgia, serif);
  --m-sans: var(--sans, 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif);
  /* ⚠️ Card estreito DE PROPÓSITO. Com 264px e pôster 9:16 cabiam 4 cards e cada
     um tinha 470px de altura: a faixa virava "um vídeo de cada vez", que é o
     contrário de mural. Com 208px e 4:5 cabem 6 e a pessoa VÊ que é uma lista. */
  --m-card: 208px;
  --m-vao: 14px;
  color: var(--m-marfim);
  font-family: var(--m-sans);
}

/* ── Cabeçalho da faixa ─────────────────────────────────────────────────── */
.mural-topo{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; flex-wrap:wrap; margin-bottom:18px;
}
.mural-conta{
  font-family:var(--m-display); font-size:15px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--m-cinza); margin:0;
}
.mural-conta b{ color:var(--m-cobre-claro); font-weight:400; }

/* ── Setas ──────────────────────────────────────────────────────────────── */
.mural-setas{ display:flex; gap:10px; }
.mural-seta{
  width:44px; height:44px; flex:0 0 44px;
  border:1px solid var(--m-linha); background:transparent;
  color:var(--m-marfim); border-radius:50%; cursor:pointer;
  display:grid; place-items:center; font-size:19px; line-height:1;
  transition:border-color .2s, color .2s, opacity .2s;
}
.mural-seta:hover:not(:disabled){ border-color:var(--m-cobre); color:var(--m-cobre-claro); }
.mural-seta:disabled{ opacity:.28; cursor:default; }
.mural-seta:focus-visible{ outline:2px solid var(--m-cobre-claro); outline-offset:3px; }

/* ── A faixa ────────────────────────────────────────────────────────────── */
.mural-faixa{
  display:flex; gap:var(--m-vao);
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  /* ⚠️ TEM que ser igual ao padding-left de baixo. Sem isto o primeiro ponto de
     parada do snap fica em scrollLeft=4 (a largura do padding), a faixa nunca
     encosta no zero e a seta de voltar nasce acesa sem ter para onde voltar. */
  scroll-padding-left:4px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:var(--m-cobre) transparent;
  padding:4px 4px 18px;
  margin:0; list-style:none;
  /* ⚠️ SÓ no eixo x. `overscroll-behavior:contain` nos DOIS eixos cortaria o
     encadeamento vertical: o dedo chegaria no fim da faixa e a PÁGINA pararia
     de rolar junto. No x ele só evita que o gesto vire "voltar" do navegador. */
  overscroll-behavior-x:contain;
  /* 🔴 O DEDO TEM QUE CONSEGUIR ROLAR A PÁGINA POR CIMA DA FAIXA.
     `auto` é o padrão, e está escrito aqui como declaração de intenção:
     ⛔ NUNCA trocar por `none` (mata a rolagem da página em cima do mural) nem
     por `pan-x` sozinho (o arrasto vertical deixaria de rolar a página, que é
     exatamente a armadilha que esta seção existe para evitar).
     ⚠️ Medido em 16/09: `pan-x pan-y pinch-zoom`, que parece mais explícito, o
     Chrome computa como `manipulation` — equivalente para rolar e para o zoom
     de dois dedos, mas ele DESLIGA o zoom por toque duplo. `auto` mantém os
     dois caminhos de zoom de pé. */
  touch-action:auto;
}
.mural-faixa::-webkit-scrollbar{ height:6px; }
.mural-faixa::-webkit-scrollbar-track{ background:rgba(242,236,225,.06); border-radius:99px; }
.mural-faixa::-webkit-scrollbar-thumb{ background:var(--m-cobre); border-radius:99px; }
.mural-faixa:focus-visible{ outline:2px solid var(--m-cobre-claro); outline-offset:4px; }
/* enquanto o mouse arrasta, o texto não é selecionado e o clique não vira play */
.mural-faixa.arrastando{ cursor:grabbing; user-select:none; scroll-snap-type:none; }

/* ── O card ─────────────────────────────────────────────────────────────── */
.mural-card{
  flex:0 0 var(--m-card); width:var(--m-card);
  scroll-snap-align:start;
  background:var(--m-obsidiana-2);
  border:1px solid var(--m-linha);
  display:flex; flex-direction:column;
  margin:0;
}
.mural-card:focus-within{ border-color:var(--m-cobre); }

/* pôster + botão de play: o vídeo só nasce no clique */
.mural-capa{
  position:relative; display:block; width:100%; padding:0; border:0;
  background:var(--m-obsidiana-3); cursor:pointer;
  aspect-ratio:4 / 5; overflow:hidden;
}
.mural-capa img{
  width:100%; height:100%; object-fit:cover; display:block;
  /* ⚠️ 38% e não o centro: nestes vídeos o rosto fica acima da metade, e o corte
     centrado cortava a testa. O 4:5 também come a tarja preta dos depoimentos
     que foram gravados deitados e viraram Short com borda. */
  object-position:50% 38%;
  transition:transform .5s ease, filter .3s ease;
  filter:saturate(.92) contrast(1.02);
}
.mural-capa:hover img{ transform:scale(1.04); filter:saturate(1) contrast(1.04); }
.mural-capa::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(10,10,12,.72) 0%, rgba(10,10,12,0) 46%);
}
.mural-capa:focus-visible{ outline:2px solid var(--m-cobre-claro); outline-offset:-2px; }

.mural-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:54px; height:54px; border-radius:50%;
  background:rgba(10,10,12,.55); border:1px solid rgba(242,236,225,.55);
  display:grid; place-items:center; pointer-events:none;
  backdrop-filter:blur(2px);
  transition:background .25s, border-color .25s;
}
.mural-capa:hover .mural-play{ background:var(--m-cobre); border-color:var(--m-cobre-claro); }
.mural-play::before{
  content:''; width:0; height:0; margin-left:4px;
  border-left:15px solid var(--m-marfim);
  border-top:9px solid transparent; border-bottom:9px solid transparent;
}
.mural-dur{
  position:absolute; right:8px; bottom:8px; z-index:2;
  font-size:15px; letter-spacing:.02em; color:var(--m-marfim);
  background:rgba(10,10,12,.72); padding:2px 7px; border-radius:2px;
  font-variant-numeric:tabular-nums;
}

/* ⚠️ O vídeo entra em 9:16, ⛔ não em 4:5: o corte de 4:5 é da MINIATURA, para a
   faixa ficar escaneável. Cortar o vídeo cortaria a pessoa falando. */
.mural-card iframe{ width:100%; aspect-ratio:9 / 16; border:0; display:block; background:#000; }

/* pé do card: o rótulo de contexto é obrigatório e sempre visível */
.mural-pe{ padding:12px 14px 15px; display:flex; flex-direction:column; gap:6px; flex:1; }
.mural-ctx{
  font-family:var(--m-display); font-size:15px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--m-cobre-claro); margin:0; line-height:1.45;
  display:flex; align-items:baseline; gap:7px;
}
.mural-ctx::before{ content:''; width:13px; height:1px; background:var(--m-cobre);
  flex:0 0 13px; transform:translateY(-4px); }
.mural-quem{ font-family:var(--m-serif); font-size:19px; margin:0; color:var(--m-marfim); line-height:1.35; }
.mural-data{ font-size:15px; color:var(--m-cinza); margin:0; font-variant-numeric:tabular-nums; }
.mural-trecho{
  font-family:var(--m-serif); font-style:italic; font-size:16px; line-height:1.55;
  color:rgba(242,236,225,.82); margin:2px 0 0;
  border-left:1px solid var(--m-cobre-fraco, rgba(177,112,60,.24)); padding-left:11px;
}
.mural-selo{ font-size:15px; color:var(--m-cinza); margin:0; letter-spacing:.02em; opacity:.8; }

/* ── Sentinela do carregamento em blocos ────────────────────────────────── */
.mural-mais{
  flex:0 0 132px; width:132px; scroll-snap-align:start;
  display:grid; place-items:center; color:var(--m-cinza); font-size:15px;
  letter-spacing:.12em; text-transform:uppercase; font-family:var(--m-display);
  border:1px dashed var(--m-linha);
}
.mural-fim{
  flex:0 0 200px; width:200px; scroll-snap-align:start;
  display:grid; place-items:center; text-align:center; padding:20px;
  color:var(--m-cinza); font-size:15px; line-height:1.55;
  border:1px solid var(--m-linha); background:var(--m-obsidiana-3);
}

/* ── Aviso honesto acima da faixa ───────────────────────────────────────── */
.mural-aviso{
  border-left:2px solid var(--m-cobre); padding:2px 0 2px 16px; margin:0 0 22px;
  font-size:15.5px; line-height:1.62; color:var(--m-cinza); max-width:68ch;
}
.mural-aviso b{ color:var(--m-marfim); font-weight:500; }

.mural-vivo{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ── Celular ────────────────────────────────────────────────────────────── */
@media (max-width:640px){
  /* 64vw e não 78: o pedaço do próximo card aparecendo na borda é o que avisa
     a pessoa, sem texto nenhum, que dá para arrastar. */
  .mural{ --m-card:min(64vw, 240px); --m-vao:12px; }
  .mural-setas{ display:none; }   /* no celular o dedo já arrasta */
  .mural-topo{ margin-bottom:14px; }
}

/* ── Movimento reduzido ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .mural-faixa{ scroll-behavior:auto; }
  .mural-capa img{ transition:none; }
  .mural-capa:hover img{ transform:none; }
}