/* ==========================================================================
   PALCO DE VÍDEOS — perguntas respondidas pelos advogados
   Um vídeo na frente roda a pergunta sem som, em loop; os outros esperam atrás,
   desfocados. O clique toca a resposta com som; no fim, o convite pro WhatsApp.
   Usado em: / (faixa #duvidas), /duvidas (Hero) e /caminhoneiros (FAQ).
   Lógica em /js/palco.js.
   ========================================================================== */

.palco {
  --reel-w: clamp(240px, 24vw, 320px);  /* largura do vídeo da frente */
  --lado: 112%;                          /* distância dos de trás (em % da largura) */
  --esc: .86;                            /* escala dos de trás */
  --raio: 22px;
  position: relative;
  color: var(--cream-1, #F8F4EC);
}

/* ── palco: os vídeos ficam empilhados no centro e o JS distribui ── */
.palco__stage {
  position: relative;
  height: calc(var(--reel-w) * 16 / 9);
  touch-action: pan-y;
}
.reel {
  position: absolute; top: 0; left: 50%;
  width: var(--reel-w); aspect-ratio: 9 / 16;
  margin: 0;
  border-radius: var(--raio);
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black); /* Safari: canto redondo no vídeo durante a transição */
  background: #1A1A1A;
  border: 1px solid rgba(253,250,245,.08);
  transform: translateX(-50%) scale(var(--esc));
  opacity: 0;
  transition:
    transform .7s var(--ease, cubic-bezier(.16,1,.3,1)),
    filter .7s var(--ease, cubic-bezier(.16,1,.3,1)),
    opacity .5s ease;
}
.reel.is-on {
  z-index: 3; opacity: 1;
  transform: translateX(-50%);
  box-shadow: 0 34px 90px -24px rgba(0,0,0,.85), 0 0 0 1px rgba(212,168,75,.18);
}
.reel.is-prev,
.reel.is-next {
  z-index: 2; opacity: .62;
  filter: blur(5px) brightness(.55) saturate(.6);
  cursor: pointer;
}
.reel.is-prev { transform: translateX(calc(-50% - var(--lado))) scale(var(--esc)); }
.reel.is-next { transform: translateX(calc(-50% + var(--lado))) scale(var(--esc)); }
.reel.is-prev:hover,
.reel.is-next:hover { opacity: .8; filter: blur(3px) brightness(.7) saturate(.7); }
.reel.is-off { z-index: 1; pointer-events: none; }

.reel__video {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  background: #1A1A1A;
}

/* ── botão "Ouvir a resposta" (pílula no pé do vídeo, longe da legenda) ── */
.reel__play {
  position: absolute; left: 50%; bottom: 16px;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 16px 7px 7px;
  border: 1px solid rgba(253,250,245,.26); border-radius: 999px;
  background: rgba(12,12,12,.58);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--cream-0, #FDFAF5);
  font-family: var(--f-body, 'Inter', sans-serif); font-size: 13px; font-weight: 600; letter-spacing: .01em;
  line-height: 1; white-space: nowrap;
  cursor: pointer;
  transition: opacity .3s, background .2s, border-color .2s;
}
.reel__play:hover { background: rgba(12,12,12,.78); border-color: rgba(212,168,75,.6); }
.reel__play:focus-visible,
.reel__pausa:focus-visible,
.reel__fim button:focus-visible,
.reel__fim a:focus-visible,
.palco__seta:focus-visible,
.palco__dots button:focus-visible { outline: 2px solid var(--gold-4, #DDB95A); outline-offset: 3px; }
.reel__play-ic {
  display: grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--gold-5, #D4A84B); color: #0C0C0C;
}
.reel__play-ic svg { width: 14px; height: 14px; margin-left: 2px; }
.reel__dur { font-weight: 500; opacity: .62; font-variant-numeric: tabular-nums; }

/* pausar (canto de cima, só enquanto toca) */
.reel__pausa {
  position: absolute; top: 12px; right: 12px;
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(253,250,245,.26);
  background: rgba(12,12,12,.55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--cream-0, #FDFAF5);
  cursor: pointer;
  opacity: 0; visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
.reel__pausa svg { width: 14px; height: 14px; }

/* barra de progresso */
.reel__bar {
  position: absolute; left: 14px; right: 14px; bottom: 10px;
  height: 3px; border-radius: 3px;
  background: rgba(253,250,245,.22);
  overflow: hidden;
  opacity: 0; transition: opacity .3s;
  pointer-events: none;
}
.reel__bar i {
  display: block; height: 100%;
  background: var(--gold-4, #DDB95A);
  transform-origin: left center; transform: scaleX(0);
}

/* cartão do fim: convite pro WhatsApp */
.reel__fim {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 14px;
  padding: 22px 18px 20px;
  background: linear-gradient(to top, rgba(12,12,12,.96) 0%, rgba(12,12,12,.86) 48%, rgba(12,12,12,.45) 100%);
  opacity: 0; visibility: hidden;
  transition: opacity .45s, visibility .45s;
}
.reel__fim-t {
  font-family: var(--f-display, 'Sora', sans-serif);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem); font-weight: 500; line-height: 1.25; letter-spacing: -.015em;
  color: var(--cream-0, #FDFAF5);
  text-wrap: balance;
}
.reel__fim-wa {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--wa, #25D366); color: #fff;
  font-family: var(--f-body, 'Inter', sans-serif); font-size: 13px; font-weight: 600; letter-spacing: .03em;
  padding: 14px 16px; border-radius: 10px;
  text-decoration: none;
  transition: background .15s, transform .15s;
}
.reel__fim-wa:hover { background: #1fbb58; transform: translateY(-1px); }
.reel__fim-wa svg { width: 18px; height: 18px; flex: none; }
.reel__fim-acoes { display: flex; justify-content: space-between; gap: 10px; }
.reel__fim-acoes button {
  background: none; border: 0; padding: 6px 2px;
  color: rgba(253,250,245,.72);
  font-family: var(--f-body, 'Inter', sans-serif); font-size: 12px; font-weight: 500;
  cursor: pointer;
  transition: color .15s;
}
.reel__fim-acoes button:hover { color: var(--gold-4, #DDB95A); }

/* ── estados (classe no .reel, posta pelo JS) ── */
.reel:not(.is-on) .reel__play,
.reel:not(.is-on) .reel__pausa,
.reel:not(.is-on) .reel__fim { opacity: 0; visibility: hidden; }
.reel.is-tocando .reel__play,
.reel.is-fim .reel__play { opacity: 0; visibility: hidden; }
.reel.is-on.is-tocando .reel__pausa { opacity: 1; visibility: visible; }
.reel.is-tocando .reel__bar,
.reel.is-pausado .reel__bar { opacity: 1; }
.reel.is-on.is-fim .reel__fim { opacity: 1; visibility: visible; }
.reel.is-on.is-tocando.is-carregando .reel__play { opacity: 1; visibility: visible; }
.reel.is-carregando .reel__play-ic { animation: reel-pulsa 1s ease-in-out infinite; }
@keyframes reel-pulsa { 50% { opacity: .45; } }

/* ── legenda embaixo: a pergunta e quem responde ── */
.palco__info { text-align: center; margin-top: 26px; padding-inline: 16px; }
.palco__q {
  max-width: 32ch; margin: 0 auto;
  font-family: var(--f-display, 'Sora', sans-serif);
  font-size: clamp(1rem, 1.35vw, 1.15rem); font-weight: 400; line-height: 1.45; letter-spacing: -.01em;
  color: var(--cream-0, #FDFAF5);
  text-wrap: balance;
  transition: opacity .25s;
}
.palco__quem {
  margin-top: 8px;
  font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-5, #D4A84B);
  transition: opacity .25s;
}
.palco.is-trocando .palco__q,
.palco.is-trocando .palco__quem { opacity: 0; }

.palco__nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 18px; }
.palco__seta {
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(253,250,245,.18);
  background: transparent; color: var(--cream-1, #F8F4EC);
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.palco__seta:hover { border-color: var(--gold-5, #D4A84B); color: var(--gold-4, #DDB95A); background: rgba(212,168,75,.06); }
.palco__seta svg { width: 16px; height: 16px; }
.palco__dots { display: flex; align-items: center; }
.palco__dots button {
  position: relative;
  width: 24px; height: 24px;
  background: none; border: 0; padding: 0;
  cursor: pointer;
}
.palco__dots button::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 7px; height: 7px; border-radius: 99px;
  background: rgba(253,250,245,.28);
  transform: translate(-50%, -50%);
  transition: width .35s, background .35s;
}
.palco__dots button.is-on::before { width: 20px; background: var(--gold-5, #D4A84B); }

/* um vídeo só: sem setas nem bolinhas */
.palco--solo .palco__nav { display: none; }

/* ── variações de lugar ── */

/* Hero (versão B): os de trás ficam encostados, saindo pelas laterais do da frente */
.palco--hero {
  --reel-w: min(calc(min(60svh, 560px) * 9 / 16), 300px);
  --lado: 50%;
  --esc: .8;
}
.palco--hero .palco__info { margin-top: 22px; }

/* fundo claro (FAQ da /caminhoneiros) */
.palco--claro .palco__q { color: #141414; }
.palco--claro .palco__quem { color: var(--gold-7, #A87A2A); }
.palco--claro .reel { border-color: rgba(0,0,0,.08); }
.palco--claro .reel.is-on { box-shadow: 0 30px 70px -26px rgba(40,28,10,.45), 0 0 0 1px rgba(168,122,42,.22); }

@media (max-width: 640px) {
  .palco { --reel-w: min(60vw, 260px); --lado: 74%; --esc: .82; --raio: 18px; }
  .palco--hero { --reel-w: min(56vw, 240px); }
  .reel__play { font-size: 12px; padding: 6px 13px 6px 6px; gap: 8px; bottom: 12px; }
  .reel__play-ic { width: 28px; height: 28px; }
  .reel__fim { padding: 16px 14px 16px; gap: 10px; }
  .reel__fim-wa { padding: 12px 10px; font-size: 12px; }
  .palco__info { margin-top: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .reel, .palco__q, .palco__quem { transition: none; }
}