/* A página do podcast (criativos-sa.com.br). Carrega depois de /convite/convite.css e usa a mesma língua:
   o painel de cor em faixas, as fotos recortadas no palco da família de cada pessoa, os cartões e a entrada na rolagem.
   Aqui só o que é da página: a capa com o logo grande e o elenco em mosaico, os nomes passando, os vídeos e os canais. */

/* ---------- capa ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; color: #FFFFFF; }
.hero p { color: #FFFFFF; }
.hero-grade { padding: 28px 20px 28px; display: grid; gap: 36px; max-width: 1280px; margin: 0 auto; }
.hero .rotulo { color: #FFFFFF; opacity: 0.92; margin-bottom: 28px; }
.hero-logo { margin: 0; line-height: 0; }
.logo-hero { width: min(100%, 520px); }
.hero .tema { margin-top: 22px; font-size: clamp(20px, 5vw, 28px); }
.hero-lead { margin: 14px 0 28px; max-width: 540px; font-size: 18px; line-height: 1.5; opacity: 0.94; }
.hero .acoes { margin-top: 0; }
.hero .botao { border-color: transparent; }

/* o elenco: um bloco por pessoa, no palco da família dela; a sobra da última linha vira cor com as barras */
.elenco { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rosto { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 14px;
  outline: 1px solid rgba(255, 255, 255, 0.3); outline-offset: -1px; box-shadow: 0 18px 36px -22px rgba(23, 22, 28, 0.55); }
.rosto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom center; }
.rosto.palco::before { width: 92%; top: 10%; }
.rosto.vago { display: grid; place-items: center; background: rgba(255, 255, 255, 0.14); color: #FFFFFF; font-size: 28px; }
.rosto.vago .barras { margin: 0; }
.rosto { animation: sobe 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(0.35s + var(--i) * 0.09s); }

/* os nomes da temporada passando na base da capa */
.nomes { position: relative; overflow: hidden; border-top: 1px solid rgba(255, 255, 255, 0.28); padding: 16px 0 18px; }
.trilho { display: flex; width: max-content; align-items: center; animation: desliza 38s linear infinite; }
.trilho span { font-size: 18px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.trilho .barras { margin: 0 22px; opacity: 0.8; }
@keyframes desliza { to { transform: translateX(-50%); } }

/* a entrada da capa: as barras do tema uma a uma, o texto subindo */
.hero .barras b { animation: aparece 0.01s both; }
.hero .tema .barras b:nth-child(1) { animation-delay: 0.7s; }
.hero .tema .barras b:nth-child(2) { animation-delay: 0.82s; }
.hero .tema .barras b:nth-child(3) { animation-delay: 0.94s; }
.hero .trilho .barras b, .rosto.vago .barras b { animation: none; }
.hero .tema, .hero-lead, .hero .acoes { animation: sobe 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hero .tema { animation-delay: 0.55s; }
.hero-lead { animation-delay: 0.7s; }
.hero .acoes { animation-delay: 0.85s; }
.hero .circulo { animation: flutua 16s ease-in-out infinite alternate; }
.hero .luz { animation: deriva 21s ease-in-out infinite alternate; }
.hero .coluna { animation: respira 9s ease-in-out infinite alternate; }

/* ---------- corpo ---------- */
.corpo > .bloco-sec:first-child { border-top: 0; }
.assistir { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 14px; font-weight: 700; color: var(--tinta); text-decoration: none; }
.assistir svg { width: 16px; height: 16px; }

/* vídeos: a capa do YouTube com o play; o player entra no lugar dela no toque */
.videos { display: grid; gap: 24px; margin-top: 28px; }
.video { margin: 28px 0 0; }
.videos .video { margin: 0; }
.video-capa { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: var(--raio); overflow: hidden; cursor: pointer; background: var(--tinta); }
.video-capa img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.video-capa:hover img { transform: scale(1.03); }
.play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center;
  background: #FFFFFF; color: var(--tinta); box-shadow: 0 14px 36px -12px rgba(23, 22, 28, 0.55); transition: transform 0.2s ease; }
.play svg { width: 30px; height: 30px; margin-left: 4px; }
.video-capa:hover .play { transform: scale(1.06); }
.video-player { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--raio); background: var(--tinta); }
.video figcaption { margin-top: 12px; font-size: 15px; color: var(--suave); }
.video figcaption b { color: var(--tinta); font-weight: 700; }

/* ---------- rodapé com os canais ---------- */
.canais-pe { justify-content: center; margin: 0 0 40px; }
.rodape .botao { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.22); color: #FFFFFF; }
.rodape .botao.forte { background: #FFFFFF; border-color: #FFFFFF; color: var(--tinta); }

/* ---------- telas maiores: texto à esquerda, elenco à direita ---------- */
@media (min-width: 760px) {
  .videos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .hero { min-height: min(92vh, 860px); display: flex; flex-direction: column; }
  .hero-grade { flex: 1; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; gap: 64px; padding: 48px 56px 56px; }
  .hero .rotulo { margin-bottom: 40px; }
  .hero-lead { font-size: 20px; }
  .elenco { gap: 12px; }
  .rosto { border-radius: 18px; }
  .nomes { padding: 20px 0 22px; }
  .trilho span { font-size: 22px; }
}

/* ---------- cartão da prévia (?og=1): 1200 x 630 ---------- */
.og-podcast { grid-template-columns: 660px 540px; }
.og-podcast .og-texto { top: 64px; bottom: auto; left: 64px; right: 48px; }
.og-podcast .og-rotulo { font-size: 26px; margin-bottom: 150px; }
.og-logo-grande { width: 520px; height: auto; }
.og-podcast .tema { font-size: 34px; margin-top: 34px; }
.og-elenco { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 0; background: var(--tinta); }
.og-elenco .rosto { aspect-ratio: auto; border-radius: 0; animation: none; }
.og-elenco .rosto.vago { background: var(--e); font-size: 44px; }