/* =====================================================================
   MUNDO PLAY — FILMES, SÉRIES E DORAMAS  (Fase 6)

   Carregado SÓ nas páginas do módulo (ver `$cssExtra` no header). A loja,
   o checkout e o suporte não pagam por isto.

   Usa os tokens da marca definidos em mundoplay.css (`--violeta`,
   `--ciano`, `--surface`, `--r`, …). Nenhuma cor nova é inventada aqui:
   identidade é uma decisão que já foi tomada, e repetir hexadecimal em
   duas folhas é como o roxo do site vira dois roxos diferentes.

   Nada aqui imita a interface de outro serviço de streaming. O que se
   repete são padrões de uso — prateleira que rola na horizontal, banner
   no topo, barra de progresso no card — porque é o que as pessoas já
   sabem usar.
   ===================================================================== */

/* ---------------------------------------------------------------------
   BANNER
   --------------------------------------------------------------------- */
.mp-banner {
  position: relative;
  min-height: min(76vh, 620px);
  display: flex;
  align-items: flex-end;
  padding: 90px 0 46px;
  overflow: hidden;
  isolation: isolate;
}

.mp-banner-arte {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 22%;
  z-index: -1;
}

/* Dois véus, não um: o vertical dá contraste ao texto embaixo, o
   horizontal impede que a arte "acabe" num corte reto à esquerda. */
.mp-banner-arte::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(13,13,19,.72) 0%, rgba(13,13,19,.25) 38%, var(--bg) 96%),
    linear-gradient(90deg, rgba(13,13,19,.92) 0%, rgba(13,13,19,.35) 55%, rgba(13,13,19,.15) 100%);
}

.mp-banner-corpo { max-width: 640px; }

.mp-banner-selo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ciano);
  margin-bottom: 14px;
}

.mp-banner h1 {
  font-size: clamp(30px, 5.2vw, 54px);
  line-height: 1.06;
  margin-bottom: 14px;
  text-wrap: balance;
}

.mp-banner-meta,
.titulo-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  font-size: 13px;
  color: var(--txt-2, #c9c9d6);
  margin-bottom: 16px;
}

.mp-banner-meta span,
.titulo-meta > span { display: inline-flex; align-items: center; gap: 5px; }

.mp-banner-sinopse {
  font-size: 15px;
  line-height: 1.6;
  color: var(--txt-2, #c9c9d6);
  margin-bottom: 24px;
  max-width: 58ch;
}

.mp-banner-botoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.mp-banner-lista, .mp-inline { display: inline; margin: 0; }

.mp-idade, .mp-nota, .mp-selo-tipo {
  padding: 3px 9px;
  border-radius: 6px;
  border: 1px solid var(--linha-forte);
  font-size: 11.5px;
  font-weight: 700;
}
.mp-selo-tipo { border-color: rgba(157,0,255,.55); color: #d9b3ff; }
.mp-nota      { border-color: rgba(0,255,163,.4); color: var(--verde); }
.cls-l  { border-color: rgba(0,255,163,.5);  color: var(--verde); }
.cls-10, .cls-12 { border-color: rgba(0,212,255,.5); color: var(--ciano); }
.cls-14, .cls-16 { border-color: rgba(255,183,0,.55); color: #ffc93c; }
.cls-18 { border-color: rgba(255,64,64,.55); color: #ff7a7a; }

/* ---------------------------------------------------------------------
   AVISO (sem acesso, sessão, erro)
   --------------------------------------------------------------------- */
.mp-aviso {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 26px 0 0;
  padding: 15px 18px;
  border: 1px solid var(--linha-forte);
  border-left: 3px solid var(--violeta);
  border-radius: var(--r);
  background: var(--surface);
}
.mp-aviso svg { flex: none; color: var(--ciano); }
.mp-aviso div { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; }
.mp-aviso b { font-size: 14px; }
.mp-aviso span { font-size: 13px; color: var(--txt-2, #c9c9d6); }
.mp-aviso-erro { border-left-color: #ff7a7a; }
.mp-aviso-erro svg { color: #ff7a7a; }

/* ---------------------------------------------------------------------
   PRATELEIRA (carrossel)

   Rolagem nativa com `scroll-snap`: nada de JS calculando posição a cada
   quadro. O script só liga as setas e some com elas quando não há
   transbordo — uma faixa com três itens numa tela larga não precisa de
   seta, e seta que não faz nada é pior que seta nenhuma.
   --------------------------------------------------------------------- */
.mp-faixa { padding: 34px 0 6px; }

.mp-faixa-topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.mp-faixa-topo h2 { font-size: clamp(17px, 2.2vw, 22px); }
.mp-faixa-topo p  { font-size: 13px; color: var(--txt-3, #8d8da3); margin-top: 3px; }

.mp-faixa-acoes { display: flex; align-items: center; gap: 8px; flex: none; }

.mp-seta {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--linha-forte);
  background: var(--surface);
  color: var(--txt);
  cursor: pointer;
  transition: border-color .18s, color .18s, transform .18s;
}
.mp-seta:hover:not(:disabled) { border-color: var(--ciano); color: var(--ciano); }
.mp-seta:disabled { opacity: .35; cursor: default; }
/* Mesma armadilha do player: `display: grid` acima vence o `[hidden]` da
   folha do navegador, e a seta apareceria mesmo em faixa que não rola. */
.mp-seta[hidden] { display: none; }

.mp-trilho {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x proximate;
  scroll-behavior: smooth;
  padding: 4px 2px 18px;
  /* A barra some, mas a rolagem continua: dedo, roda do mouse, trackpad e
     teclado (o trilho tem tabindex) seguem funcionando. */
  scrollbar-width: none;
}
.mp-trilho::-webkit-scrollbar { display: none; }
.mp-trilho:focus-visible { outline: 2px solid var(--ciano); outline-offset: 4px; border-radius: var(--r); }

.mp-trilho-item {
  flex: 0 0 auto;
  width: 172px;
  scroll-snap-align: start;
}

/* ---------------------------------------------------------------------
   CARD
   --------------------------------------------------------------------- */
.mp-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 20px 16px;
}

.mp-card { position: relative; }

.mp-card-capa {
  position: relative;
  display: block;
  aspect-ratio: 2 / 3;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--linha);
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.mp-card-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mp-card-vazio { position: absolute; inset: 0; display: grid; place-items: center; color: var(--txt-3, #8d8da3); }

.mp-card-capa:hover,
.mp-card-capa:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(0,212,255,.55);
  box-shadow: var(--glow-ciano);
}

.mp-card-veu {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(13,13,19,0) 45%, rgba(13,13,19,.75) 100%);
  opacity: 0;
  transition: opacity .2s;
}
.mp-card-capa:hover .mp-card-veu,
.mp-card-capa:focus-visible .mp-card-veu { opacity: 1; }

.mp-card-play {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--grad-marca);
  color: #fff;
  box-shadow: var(--glow-violeta);
}

.mp-card-tipo, .mp-card-idade {
  position: absolute;
  top: 8px;
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 6px;
  backdrop-filter: blur(6px);
  background: rgba(13,13,19,.72);
  border: 1px solid var(--linha-forte);
}
.mp-card-tipo  { left: 8px; color: var(--ciano); }
.mp-card-idade { right: 8px; }

/* "Em breve": ficha já no catálogo, vídeo ainda não liberado.
   Fica embaixo, sozinho, e sem o véu de play em cima da capa — a capa
   inteira precisa dizer "ainda não dá pra assistir" antes do clique. */
.mp-card-breve {
  position: absolute;
  left: 8px; bottom: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
  color: #0d0d13;
  background: #f5a524;
  box-shadow: 0 2px 10px rgba(0,0,0,.45);
}

.mp-card-progresso, .mp-ep-barra {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: rgba(255,255,255,.18);
}
.mp-card-progresso i, .mp-ep-barra i {
  display: block;
  height: 100%;
  background: var(--grad-play);
}

.mp-card-corpo { margin-top: 9px; }
.mp-card-nome {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  /* Duas linhas no máximo: título longo empurrando o card seguinte
     desalinha a prateleira inteira. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mp-card-meta { font-size: 11.5px; color: var(--txt-3, #8d8da3); margin-top: 2px; }

.mp-card-lista { position: absolute; top: 6px; right: 6px; margin: 0; opacity: 0; transition: opacity .18s; }
.mp-card:hover .mp-card-lista,
.mp-card-lista:focus-within { opacity: 1; }

.mp-bt-lista {
  display: inline-grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--linha-forte);
  background: rgba(13,13,19,.8);
  color: var(--txt);
  cursor: pointer;
  transition: border-color .18s, color .18s;
}
.mp-bt-lista:hover { border-color: var(--ciano); color: var(--ciano); }
.mp-bt-lista.ativo { border-color: var(--verde); color: var(--verde); }
/* No banner e na ficha o botão é largo, com texto — a regra de 30px
   acima vale só para o card. */
.btn.mp-bt-lista { width: auto; height: auto; border-radius: var(--r-sm); }

/* Quando há pôster, o card não precisa de contorno duplo. */
.mp-card-idade.cls-l { color: var(--verde); }

/* ---------------------------------------------------------------------
   FILTROS
   --------------------------------------------------------------------- */
.mp-filtros { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 20px; }

.mp-filtro-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.mp-filtro-rotulo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--txt-3, #8d8da3);
  min-width: 86px;
}
.chip.ativo {
  border-color: var(--violeta);
  background: rgba(106,0,255,.16);
  color: #fff;
}
.chip small { opacity: .55; margin-left: 4px; font-size: 11px; }

.mp-contagem { font-size: 12.5px; color: var(--txt-3, #8d8da3); margin-bottom: 16px; }

.mp-criterios {
  border: 1px solid var(--linha);
  border-radius: var(--r);
  background: var(--surface);
  padding: 12px 16px;
  margin-bottom: 18px;
  font-size: 13px;
}
.mp-criterios summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.mp-criterios ul { margin: 12px 0 4px 18px; display: flex; flex-direction: column; gap: 7px; color: var(--txt-2, #c9c9d6); }

.mp-paginacao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 30px;
  font-size: 13px;
  color: var(--txt-3, #8d8da3);
}

/* ---------------------------------------------------------------------
   FICHA DO TÍTULO
   --------------------------------------------------------------------- */
.mp-ficha { position: relative; padding: 90px 0 40px; overflow: hidden; isolation: isolate; }

.mp-ficha-arte {
  position: absolute;
  inset: 0 0 auto;
  height: 62%;
  background-size: cover;
  background-position: center 20%;
  z-index: -1;
  opacity: .5;
}
.mp-ficha-arte::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,13,19,.55) 0%, var(--bg) 92%);
}

.mp-ficha-grade {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}

.mp-ficha-poster img,
.mp-ficha-poster .poster-vazio {
  width: 100%;
  aspect-ratio: 2/3;
  object-fit: cover;
  border-radius: var(--r-lg);
  border: 1px solid var(--linha-forte);
  box-shadow: var(--sombra-card);
  background: var(--surface);
}
.mp-ficha-poster .poster-vazio { display: grid; place-items: center; color: var(--txt-3, #8d8da3); }

.mp-ficha-info h1 { font-size: clamp(26px, 4vw, 40px); line-height: 1.1; margin-bottom: 6px; }

.mp-ficha-pessoas { display: flex; flex-direction: column; gap: 8px; margin: 18px 0; font-size: 13.5px; }
.mp-ficha-pessoas div { display: flex; gap: 10px; flex-wrap: wrap; }
.mp-ficha-pessoas dt { color: var(--txt-3, #8d8da3); min-width: 66px; }
.mp-ficha-pessoas dd { margin: 0; color: var(--txt-2, #c9c9d6); }
.mp-ficha-pessoas a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.mp-ficha-pessoas a:hover { color: var(--ciano); }

.mp-legendas-disp {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--txt-3, #8d8da3);
  margin-bottom: 14px;
}

/* ---------------------------------------------------------------------
   EPISÓDIOS
   --------------------------------------------------------------------- */
.mp-temporada { margin-bottom: 34px; }

.mp-episodios { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; }

.mp-ep {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--linha);
  border-radius: var(--r);
  background: var(--surface);
  transition: border-color .18s;
}
.mp-ep:hover { border-color: var(--linha-forte); }
.mp-ep.visto { opacity: .72; }

.mp-ep-thumb {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: #101018;
  display: grid; place-items: center;
  color: var(--txt-3, #8d8da3);
}
.mp-ep-thumb img { width: 100%; height: 100%; object-fit: cover; }

.mp-ep-play, .mp-hist-play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: #fff;
  background: rgba(13,13,19,.35);
  opacity: 0;
  transition: opacity .18s;
}
.mp-ep:hover .mp-ep-play,
.mp-ep-play:focus-visible,
.mp-hist-capa:hover .mp-hist-play { opacity: 1; }

.mp-ep-corpo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mp-ep-corpo b { font-size: 14.5px; }
.mp-ep-corpo p { font-size: 13px; color: var(--txt-2, #c9c9d6); line-height: 1.5; }
.mp-ep-visto { color: var(--verde); display: inline-flex; align-items: center; gap: 4px; }

/* ---------------------------------------------------------------------
   HISTÓRICO
   --------------------------------------------------------------------- */
.mp-sub { font-size: 15px; margin: 26px 0 12px; color: var(--txt-2, #c9c9d6); }

.mp-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.mp-hist-item {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--linha);
  border-radius: var(--r);
  background: var(--surface);
}

.mp-hist-capa {
  position: relative;
  display: grid; place-items: center;
  aspect-ratio: 16/9;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: #101018;
  color: var(--txt-3, #8d8da3);
}
.mp-hist-capa img { width: 100%; height: 100%; object-fit: cover; }

.mp-hist-corpo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mp-hist-nome { font-size: 14.5px; font-weight: 600; }
.mp-hist-nome:hover { color: var(--ciano); }

/* ---------------------------------------------------------------------
   ATALHOS DA HOME
   --------------------------------------------------------------------- */
.mp-atalhos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}
.mp-atalho {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 18px;
  border: 1px solid var(--linha);
  border-radius: var(--r);
  background: var(--grad-surf), var(--surface);
  transition: border-color .18s, transform .18s;
}
.mp-atalho:hover { border-color: var(--violeta); transform: translateY(-2px); }
.mp-atalho svg { color: var(--ciano); margin-bottom: 6px; }
.mp-atalho b { font-size: 15px; }
.mp-atalho span { font-size: 12.5px; color: var(--txt-3, #8d8da3); }

/* ---------------------------------------------------------------------
   TELAS MENORES

   Os pontos de corte acompanham o que muda de verdade: primeiro o pôster
   da ficha sai de lado e vai para cima (tablet), depois os cards
   encolhem e o banner perde altura (celular).
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
  .mp-ficha-grade { grid-template-columns: 150px minmax(0, 1fr); gap: 20px; }
  .mp-ep { grid-template-columns: 132px minmax(0, 1fr); }
  .mp-hist-item { grid-template-columns: 120px minmax(0, 1fr); }
  .mp-hist-item > .btn { grid-column: 2; justify-self: start; }
}

@media (max-width: 620px) {
  .mp-banner { min-height: 62vh; padding-top: 74px; }
  .mp-banner-sinopse { display: none; }
  .mp-banner-botoes .btn { flex: 1 1 auto; justify-content: center; }

  .mp-ficha { padding-top: 74px; }
  .mp-ficha-grade { grid-template-columns: 108px minmax(0, 1fr); }
  .mp-ficha-info h1 { font-size: 22px; }

  .mp-trilho-item { width: 136px; }
  .mp-grade { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 16px 12px; }

  .mp-filtro-rotulo { min-width: 100%; }
  .mp-ep { grid-template-columns: 108px minmax(0, 1fr); gap: 12px; }
  .mp-ep-corpo p { display: none; }

  /* Sem hover no toque: o botão de lista fica sempre visível, senão ele
     simplesmente não existe para quem usa celular. */
  .mp-card-lista { opacity: 1; }
}

/* Quem pediu menos animação recebe menos animação — inclusive na
   rolagem do carrossel, que é a mais enjoativa das daqui. */
@media (prefers-reduced-motion: reduce) {
  .mp-trilho { scroll-behavior: auto; }
  .mp-card-capa, .mp-atalho, .mp-seta { transition: none; }
  .mp-card-capa:hover { transform: none; }
}

/* ---------------------------------------------------------------------
   ATRIBUIÇÃO DE METADADOS (CC BY-SA)

   Discreta, mas legível: a licença exige crédito visível, e "visível"
   não combina com cinza sobre preto em 10px. Fica no fluxo do texto,
   nunca escondida atrás de hover ou de um `details`.
   --------------------------------------------------------------------- */
.mp-atribuicao {
  font-size: 12px;
  color: var(--txt-3, #8d8da3);
  margin: 10px 0 14px;
}
.mp-atribuicao a { color: var(--txt-2, #c9c9d6); text-decoration: underline; text-underline-offset: 2px; }
.mp-atribuicao a:hover { color: var(--ciano); }

.rodape-atribuicao a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }