/* FliperamIA — vitrine no formato streaming (referência: a navegação da Netflix).
   Banner do destaque + fileiras de títulos + prévia no hover + janela de detalhes. */

:root {
  color-scheme: dark;
  --noite: #141319;      /* fundo (a Netflix usa #141414; aqui com um toque do roxo da marca) */
  --painel: #1b1a21;     /* prévia e janela de detalhes */
  --painel-2: #2c2b34;   /* destaque dentro do painel */
  --linha: #3a3942;
  --texto: #ffffff;
  --texto-2: #e5e5e5;
  --apagado: #a3a2ab;
  --roxo: #b04dff;       /* as duas cores do "IA" do logo */
  --ciano: #25d0ee;
  --botao-cinza: rgba(109, 109, 118, .7);

  --display: 'Chakra Petch', 'DM Sans', system-ui, sans-serif; /* só no selo e no rodapé */
  --corpo: 'DM Sans', system-ui, -apple-system, sans-serif;
  --margem: 4vw;
  --vao: .4vw;
  --por-fileira: 6;
  --card: calc((100vw - 2 * var(--margem) - (var(--por-fileira) - 1) * var(--vao)) / var(--por-fileira));
}
@media (max-width: 1399px) { :root { --por-fileira: 5; } }
@media (max-width: 1099px) { :root { --por-fileira: 4; } }
@media (max-width: 799px) { :root { --por-fileira: 3; } }
@media (max-width: 599px) { :root { --por-fileira: 2.25; --vao: 8px; } }

* { box-sizing: border-box; }
html { scroll-padding-top: 80px; }
body {
  margin: 0;
  background: var(--noite);
  color: var(--texto);
  font-family: var(--corpo);
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--texto); outline-offset: 3px; border-radius: 4px; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.pular {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  background: var(--texto); color: var(--noite); padding: 10px 14px; border-radius: 4px; font-weight: 700;
}
.pular:focus { top: 12px; }

/* ---------- topo ---------- */

.topo {
  position: fixed; inset: 0 0 auto; z-index: 20;
  height: 68px; padding: 0 var(--margem);
  display: flex; align-items: center; gap: clamp(20px, 2.6vw, 40px);
  background: linear-gradient(180deg, rgba(0, 0, 0, .7) 10%, rgba(0, 0, 0, 0));
  transition: background-color .4s;
}
.topo.rolou { background-color: var(--noite); }

.logo { flex: none; width: clamp(118px, 10vw, 150px); }
.logo img { width: 100%; height: auto; } /* assets/logo.png: texto branco em fundo transparente */

.menu { display: flex; gap: 20px; }
.menu button { font-size: 14px; color: var(--texto-2); transition: color .4s; white-space: nowrap; }
.menu button:hover { color: #b3b3b3; }
.menu button[aria-current="page"] { color: #fff; font-weight: 700; cursor: default; }
.menu-conta {
  font-size: 11px; font-weight: 700; margin-left: 5px; padding: 1px 6px;
  border-radius: 10px; background: var(--roxo); color: #fff;
}

.busca {
  margin-left: auto; display: flex; align-items: center;
  height: 36px; border: 1px solid transparent; transition: border-color .2s, background-color .2s;
}
.busca-abrir { width: 36px; height: 36px; display: grid; place-items: center; flex: none; }
.busca svg { width: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.busca input {
  width: 0; padding: 0; border: 0; background: transparent; outline: none; font-size: 14px;
  transition: width .3s;
}
.busca.aberta { border-color: #fff; background: rgba(0, 0, 0, .75); }
.busca.aberta input { width: clamp(160px, 18vw, 250px); padding-right: 10px; }
.busca input::-webkit-search-cancel-button { filter: invert(1); }

/* ---------- banner do destaque ---------- */

.banner { position: relative; height: min(84vh, 56.25vw, 880px); min-height: 520px; }
.banner-quadro { position: absolute; inset: 0; overflow: hidden; }
.banner-imagem { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.banner-quadro::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    /* o degradê de baixo vem por cima, para a base do banner ter exatamente a cor da página */
    linear-gradient(0deg, var(--noite) 0%, var(--noite) 7%, rgba(20, 19, 25, .58) 19%, rgba(20, 19, 25, .35) 28%, rgba(20, 19, 25, .15) 36%, rgba(20, 19, 25, 0) 46%),
    linear-gradient(77deg, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .35) 34%, rgba(0, 0, 0, 0) 62%);
}
.banner-conteudo {
  position: absolute; z-index: 1;
  left: var(--margem); bottom: max(30%, 190px);
  width: min(36vw, 560px);
}
.banner-conteudo > * { animation: subir .8s cubic-bezier(.2, .7, .2, 1) both; }
.banner-conteudo > :nth-child(2) { animation-delay: .08s; }
.banner-conteudo > :nth-child(3) { animation-delay: .16s; }
.banner-conteudo > :nth-child(n+4) { animation-delay: .24s; }
@keyframes subir { from { opacity: 0; transform: translateY(14px); } }

/* "F  ORIGINAL FLIPERAMIA" — o equivalente ao "N SÉRIE" */
.selo-original {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--display); font-weight: 600; font-size: 13px; letter-spacing: .28em;
  color: #ddd;
}
.selo-original svg { width: 14px; height: 16.5px; flex: none; }

.banner .marca { font-size: clamp(56px, 7.4vw, 124px); margin: 14px 0 18px; }
.banner-generos { display: none; }

.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 15px; color: #bcbcbc; }
.meta .novo { color: var(--ciano); font-weight: 700; }
.meta .fases { border: 1px solid rgba(255, 255, 255, .4); border-radius: 3px; padding: 0 6px; font-size: 13px; line-height: 1.5; color: #ddd; }

.banner-sinopse {
  font-size: clamp(15px, 1.25vw, 20px); line-height: 1.35; margin: 12px 0 0; color: #fff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, .45);
}

.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 1.5vw; }
.banner .acoes { margin-top: max(20px, 1.5vw); }
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: clamp(42px, 3vw, 52px); padding: 0 clamp(20px, 2vw, 30px) 0 clamp(16px, 1.6vw, 24px); border-radius: 4px;
  font-size: clamp(15px, 1.15vw, 19px); font-weight: 700; white-space: nowrap;
  transition: background-color .2s, transform .15s;
}
.botao:active { transform: scale(.97); }
.botao svg { width: 1.45em; height: 1.45em; flex: none; }
.botao-jogar { background: #fff; color: #000; }
.botao-jogar:hover { background: rgba(255, 255, 255, .75); }
.botao-jogar svg { fill: currentColor; }
.botao-info, .botao-lista { background: var(--botao-cinza); color: #fff; }
.botao-info:hover, .botao-lista:hover { background: rgba(109, 109, 118, .4); }
.botao-info svg, .botao-lista svg { fill: none; stroke: currentColor; stroke-width: 2; }
.botao-lista { display: none; }

/* ---------- marca de um título (desenhada com a fonte do próprio jogo) ---------- */

.marca {
  display: block; margin: 0;
  font-family: var(--marca-fonte); font-weight: var(--marca-peso, 900);
  letter-spacing: var(--marca-espacamento, 0); line-height: .84;
  color: var(--marca-cor-1, #fff);
  text-shadow: 0 2px 22px rgba(0, 0, 0, .35);
}
.marca .linha { display: block; }
.marca .linha + .linha { color: var(--marca-cor-2, #fff); }
.marca i { font-style: normal; font-size: .42em; vertical-align: top; margin-left: .08em; color: var(--marca-estrela, var(--ciano)); }

/* ---------- fileiras ---------- */

.fileiras { position: relative; z-index: 2; margin-top: clamp(-190px, -20vh, -110px); padding-bottom: 3vw; }
.fileira { position: relative; margin-bottom: 3vw; }
.fileira-topo { display: flex; align-items: flex-end; justify-content: space-between; padding: 0 var(--margem); }
.fileira-titulo { margin: 0 0 .5em; font-size: clamp(16px, 1.4vw, 24px); font-weight: 700; color: var(--texto-2); }
.fileira-titulo a, .fileira-titulo span.nome { display: inline-flex; align-items: baseline; }
.ver-tudo {
  display: inline-flex; align-items: center; margin-left: 10px;
  font-size: .62em; font-weight: 700; color: var(--ciano);
  max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap;
  transition: max-width .5s, opacity .3s;
}
.ver-tudo svg { width: 1.3em; height: 1.3em; fill: none; stroke: currentColor; stroke-width: 2.6; flex: none; }
.fileira-titulo a:hover .ver-tudo, .fileira-titulo a:focus-visible .ver-tudo { max-width: 160px; opacity: 1; }
.fileira-titulo a:hover, .fileira-titulo a:focus-visible { color: #fff; }

.paginas { display: flex; gap: 2px; margin: 0 0 .9em; padding: 0; list-style: none; opacity: 0; transition: opacity .3s; }
.paginas li { width: 12px; height: 2px; background: #4d4d4d; }
.paginas li.atual { background: #aaa; }
.fileira:hover .paginas { opacity: 1; }

.trilho {
  display: flex; gap: var(--vao);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margem);
  padding: 0 var(--margem);
  scrollbar-width: none;
}
.trilho::-webkit-scrollbar { display: none; }
.trilho > * { flex: none; width: var(--card); scroll-snap-align: start; }

.seta {
  position: absolute; bottom: 0; z-index: 3; width: calc(var(--margem) - 2px); height: calc(var(--card) * 9 / 16);
  display: grid; place-items: center; background: rgba(20, 20, 20, .5); opacity: 0; transition: opacity .2s, background-color .2s;
}
.seta:hover { background: rgba(20, 20, 20, .7); }
.seta svg { width: 60%; max-width: 30px; fill: none; stroke: #fff; stroke-width: 2.6; transition: transform .2s; }
.seta:hover svg { transform: scale(1.25); }
.seta-esq { left: 0; border-radius: 0 4px 4px 0; }
.seta-dir { right: 0; border-radius: 4px 0 0 4px; }
.fileira:hover .seta:not([hidden]) { opacity: 1; }

/* ---------- card de título ---------- */

.card { position: relative; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: var(--painel); }
.card-abrir { position: absolute; inset: 0; display: block; border-radius: inherit; }
.card-abrir img { width: 100%; height: 100%; object-fit: cover; }
.card-abrir::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, 0) 55%);
}
.selo-f { width: 13px; height: 15px; }
.card .selo-f, .previa .selo-f { position: absolute; left: 8px; top: 8px; z-index: 1; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .7)); pointer-events: none; }
/* nos cards a marca fica centralizada, com espaço embaixo para a etiqueta "Novo" */
.card .marca {
  position: absolute; z-index: 1; left: 0; right: 0; bottom: max(17%, 25px);
  text-align: center; font-size: calc(var(--card) * .125); pointer-events: none;
}
/* etiqueta "Novo" presa na base do card, como o "Novidade" da Netflix */
.etiqueta-novo {
  position: absolute; z-index: 1; left: 50%; bottom: 0; transform: translateX(-50%);
  padding: 2px 8px 1px; border-radius: 3px 3px 0 0;
  background: var(--roxo); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
  pointer-events: none;
}

/* painel do card: só aparece para quem navega pelo teclado (no mouse, quem aparece é a prévia) */
.card-painel {
  position: absolute; z-index: 2; inset: auto 0 0;
  display: flex; align-items: center; gap: 6px; padding: 8px;
  background: linear-gradient(0deg, rgba(20, 19, 25, .97), rgba(20, 19, 25, .8));
  opacity: 0; transform: translateY(100%); transition: opacity .2s, transform .25s;
}
.card:has(:focus-visible) .card-painel { opacity: 1; transform: none; }
.card:has(:focus-visible) { outline: 2px solid #fff; outline-offset: 2px; }
.card-meta { margin: 0 0 0 2px; font-size: 12px; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-meta .novo { color: var(--ciano); font-weight: 700; }

.redondo {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid rgba(255, 255, 255, .5); background: rgba(42, 42, 42, .6);
  transition: border-color .2s, background-color .2s;
}
.redondo:hover { border-color: #fff; background: rgba(255, 255, 255, .1); }
.redondo svg { width: 55%; height: 55%; fill: none; stroke: #fff; stroke-width: 2.2; }
.redondo-jogar { background: #fff; border-color: #fff; }
.redondo-jogar svg { fill: #000; stroke: none; }
.redondo-jogar:hover { background: rgba(255, 255, 255, .8); }
.redondo-mais { margin-left: auto; }

/* card de "Continuar jogando" */
.card-continuar {
  position: absolute; z-index: 1; inset: auto 0 0; padding: 5px 9px;
  font-size: 12px; color: var(--texto-2); background: rgba(0, 0, 0, .72);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
.card-continuar b { color: var(--ciano); }
.card.continuar .marca { bottom: calc(17% + 22px); }
.card.continuar .etiqueta-novo { display: none; }

/* ---------- prévia no hover (o "mini modal" da Netflix) ---------- */

.previa {
  position: absolute; z-index: 30;
  border-radius: 6px; overflow: hidden; background: var(--painel);
  box-shadow: rgba(0, 0, 0, .75) 0 3px 10px;
  transform-origin: var(--origem, center) center;
  transform: scale(var(--de, .66)); opacity: .6;
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), opacity .25s;
}
.previa.aberta { transform: none; opacity: 1; }
.previa-imagem { position: relative; aspect-ratio: 16 / 9; display: block; cursor: pointer; }
.previa-imagem img { width: 100%; height: 100%; object-fit: cover; }
.previa-imagem::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 50%); }
.previa .marca { position: absolute; z-index: 1; left: 7%; bottom: 11%; font-size: calc(var(--largura-previa) * .11); pointer-events: none; }
.previa-painel { padding: 14px 16px 16px; }
.previa-botoes { display: flex; align-items: center; gap: 8px; }
.previa-botoes .redondo { width: 38px; height: 38px; }
.previa-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 14px 0 10px; font-size: 14px; color: #bcbcbc; }
.previa-meta .novo { color: var(--ciano); font-weight: 700; }
.previa-meta .fases { border: 1px solid rgba(255, 255, 255, .4); border-radius: 3px; padding: 0 5px; font-size: 12px; color: #ddd; }
.previa-generos { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; font-size: 14px; color: #fff; }
.previa-generos li + li::before { content: '•'; color: #646464; margin: 0 7px; }
.previa-continuar { margin: 10px 0 0; font-size: 13px; color: var(--texto-2); }
.previa-continuar b { color: var(--ciano); }

/* ---------- grade (ver tudo / minha lista / busca) ---------- */

.grade-secao { padding: 110px var(--margem) 60px; min-height: 70vh; }
.grade-titulo { margin: 0 0 24px; font-size: clamp(22px, 2.2vw, 32px); font-weight: 700; }
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--card)), 1fr)); gap: 4vw var(--vao); }
.vazio { max-width: 460px; color: var(--apagado); }
.vazio p { margin: 0 0 18px; }

/* ---------- janela de detalhes ---------- */

.detalhes {
  width: min(850px, 94vw); max-width: none; max-height: none; margin: 30px auto auto; padding: 0;
  border: 0; border-radius: 6px; overflow: hidden;
  background: var(--painel); color: var(--texto);
  box-shadow: rgba(0, 0, 0, .75) 0 3px 10px;
}
.detalhes::backdrop { background: rgba(0, 0, 0, .7); }
.detalhes[open] { animation: aparecer .35s cubic-bezier(.2, .7, .2, 1); }
@keyframes aparecer { from { opacity: 0; transform: translateY(40px) scale(.96); } }
.detalhes-rolagem { max-height: calc(100vh - 30px); overflow-y: auto; overscroll-behavior: contain; }

.detalhes-fechar {
  position: absolute; top: 14px; right: 14px; z-index: 5;
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--painel);
}
.detalhes-fechar svg { width: 20px; fill: none; stroke: #fff; stroke-width: 2.2; }

.det-topo { position: relative; aspect-ratio: 16 / 9; width: 100%; }
.det-topo > img { width: 100%; height: 100%; object-fit: cover; }
.det-topo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(0deg, var(--painel) 0%, rgba(27, 26, 33, 0) 45%);
}
.det-topo-conteudo { position: absolute; z-index: 1; left: 48px; right: 48px; bottom: 7%; }
.det-topo .marca { font-size: clamp(44px, 7.4vw, 76px); margin: 12px 0 0; }
.det-topo .acoes { margin-top: 22px; }
.det-topo .botao { height: 44px; font-size: 17px; }
.det-topo .redondo { width: 42px; height: 42px; }

.det-corpo { padding: 4px 48px 40px; }
.det-resumo { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 32px; }
.det-resumo .meta { margin-bottom: 14px; font-size: 16px; }
.det-descricao { margin: 0; font-size: 15px; line-height: 1.5; color: #fff; }
.det-lateral p { margin: 0 0 12px; font-size: 14px; line-height: 1.45; color: #fff; }
.rotulo { color: #777; }

.det-secao { margin-top: 44px; }
.det-secao-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.det-secao h3 { margin: 0; font-size: 24px; font-weight: 700; }
.det-secao-topo span { color: var(--texto-2); font-size: 16px; font-weight: 700; }

.fases { list-style: none; margin: 0; padding: 0; }
.fase {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 18px;
  min-height: 96px; padding: 16px 22px 16px 14px; border-bottom: 1px solid #404040; border-radius: 0;
  transition: background-color .2s;
}
.fase.atual { background: #333; border-radius: 4px; border-bottom-color: transparent; }
.fase:hover { background: #2a2a2a; }
.fase.atual:hover { background: #3a3a3a; }
.fase-numero { font-size: 24px; color: #d2d2d2; text-align: center; }
.fase-titulo { display: block; font-size: 16px; font-weight: 700; }
.fase-chamada { display: block; font-size: 14px; line-height: 1.45; color: #d2d2d2; margin-top: 4px; }
.fase .redondo { opacity: 0; transition: opacity .2s; }
.fase:hover .redondo, .fase:focus-visible .redondo, .fase.atual .redondo { opacity: 1; }
.fase .redondo svg { fill: #fff; stroke: none; }

.semelhantes { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.semelhante { border-radius: 4px; overflow: hidden; background: #2f2f2f; }
.semelhante-imagem { position: relative; display: block; aspect-ratio: 16 / 9; }
.semelhante-imagem img { width: 100%; height: 100%; object-fit: cover; }
.semelhante-corpo { padding: 14px; }
.semelhante-corpo p { margin: 10px 0 0; font-size: 14px; color: #d2d2d2; }

.bastidores { display: flex; gap: 22px; align-items: center; padding: 20px; border-radius: 4px; background: #262530; }
.bastidores img { flex: none; width: 88px; height: 118px; object-fit: cover; border-radius: 4px; transform: rotate(-3deg); }
.bastidores h4 { margin: 0 0 6px; font-size: 17px; line-height: 1.3; }
.bastidores p { margin: 0; font-size: 14px; color: #d2d2d2; }

.sobre h3 { font-weight: 400; margin-bottom: 16px; }
.sobre h3 b { font-weight: 700; }
.sobre p { margin: 0 0 10px; font-size: 14px; line-height: 1.45; }

/* ---------- rodapé e aviso ---------- */

.rodape {
  max-width: 980px; margin: 30px auto 0; padding: 0 var(--margem) 40px;
  color: #808080; font-size: 13px;
}
.rodape-marca { display: block; margin-bottom: 14px; font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: .08em; color: #bcbcbc; }
.rodape-marca b { color: var(--roxo); font-weight: 700; }
.rodape p { margin: 0 0 6px; }

.aviso {
  position: fixed; left: 50%; bottom: 28px; z-index: 60; transform: translate(-50%, 20px);
  background: var(--texto); color: #000; font-weight: 500; font-size: 14px;
  padding: 12px 20px; border-radius: 4px; box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
  width: max-content; max-width: calc(100vw - 32px); text-align: center;
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
}
.aviso.mostrar { opacity: 1; transform: translate(-50%, 0); }

/* ---------- celular: banner vira cartão, categorias em pílulas (como no app da Netflix) ---------- */

@media (max-width: 799px) {
  .topo { height: auto; min-height: 58px; flex-wrap: wrap; gap: 0 12px; padding-top: 10px; padding-bottom: 10px; }
  .topo.rolou { background-color: rgba(20, 19, 25, .96); }
  .menu { order: 3; width: 100%; gap: 8px; margin-top: 10px; }
  .menu button {
    font-size: 13px; padding: 5px 13px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 16px; color: #fff;
  }
  .menu button[aria-current="page"] { background: rgba(255, 255, 255, .16); border-color: transparent; }
  .busca.aberta { position: absolute; inset: 10px var(--margem) auto; z-index: 2; background: var(--noite); }
  .busca.aberta input { width: 100%; }

  .banner {
    height: auto; min-height: 0; padding: 118px 5vw 26px;
    background: radial-gradient(120% 70% at 50% 0%, var(--ambiente, #3a2a22) 0%, rgba(20, 19, 25, 0) 75%);
  }
  .banner-quadro {
    position: relative; inset: auto; aspect-ratio: 4 / 5; max-height: 72vh; margin: 0 auto;
    border-radius: 10px; border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 16px 50px rgba(0, 0, 0, .55);
  }
  .banner-imagem { object-position: var(--foco-banner, 72% 35%); }
  .banner-quadro::after { background: linear-gradient(0deg, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .35) 34%, rgba(0, 0, 0, 0) 60%); }
  .banner-conteudo {
    left: 0; right: 0; bottom: 0; width: auto; padding: 0 16px 18px;
    display: flex; flex-direction: column; align-items: center; text-align: center;
  }
  .banner .selo-original { font-size: 11px; letter-spacing: .24em; }
  .banner .marca { font-size: clamp(56px, 17vw, 84px); margin: 10px 0 12px; }
  .banner .meta, .banner-sinopse { display: none; }
  .banner-generos { display: flex; margin: 0; padding: 0; list-style: none; font-size: 14px; color: #fff; }
  .banner-generos li + li::before { content: '•'; color: #8c8c8c; margin: 0 8px; }
  .banner .acoes { width: 100%; flex-wrap: nowrap; gap: 10px; margin-top: 16px; }
  .banner .botao { flex: 1; height: 42px; font-size: 16px; padding: 0 12px; }
  .banner .botao-info { display: none; }
  .banner .botao-lista { display: inline-flex; }
  .fileiras { margin-top: 8px; }
  .fileira { margin-bottom: 26px; }
  .fileira-titulo { font-size: 17px; }
  .seta, .paginas { display: none; }

  .detalhes { width: 100vw; height: 100dvh; margin: 0; border-radius: 0; }
  .detalhes-rolagem { max-height: 100dvh; }
  /* no celular a imagem fica sozinha no topo; marca e botões descem para baixo dela */
  .det-topo { aspect-ratio: auto; }
  .det-topo > img { height: auto; aspect-ratio: 16 / 9; }
  .det-topo::after { bottom: auto; height: calc(100vw * 9 / 16); }
  .det-topo-conteudo { position: relative; left: auto; right: auto; bottom: auto; margin-top: -34px; padding: 0 18px; }
  .det-topo .marca { font-size: 54px; }
  .det-topo .acoes { flex-wrap: nowrap; margin-top: 18px; }
  .det-topo .botao-jogar { flex: 1; }
  .det-corpo { padding: 18px 18px 40px; }
  .det-resumo { grid-template-columns: 1fr; gap: 16px; }
  .fase { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; padding: 14px 10px; min-height: 0; }
  .fase-numero { font-size: 19px; }
  .bastidores { padding: 16px; gap: 16px; }
  .bastidores img { width: 70px; height: 94px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}