:root {
  --preto: #000;
  --palco: #121212;
  --alt: #1c1c1c;
  --linha: #2a2a2a;
  --texto: #d8d5cf;
  --cinza: #999;
  --cinza2: #666;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--preto);
  color: var(--texto);
  font-family: "Futura Light BT", Futura, "Century Gothic", "Trebuchet MS", Verdana, sans-serif;
  font-size: 14px; line-height: 1.6;
}
a { color: var(--cinza); text-decoration: none; }
a:hover { color: #fff; }
img { max-width: 100%; display: block; }
.palco { width: min(1200px, 100%); margin: 0 auto; background: var(--palco); min-height: 100vh; box-shadow: 0 0 60px rgba(255,255,255,.04); }

.cabecalho { text-align: center; padding: 34px 40px 24px; border-bottom: 1px solid var(--linha); }
.kicker { text-align: left; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 14px; }
.logo { width: 150px; height: auto; margin: 0 auto 12px; }
.cabecalho h1 { color: #fff; font-weight: 300; font-size: 34px; letter-spacing: .3em; text-transform: uppercase; }
.sub { color: var(--cinza2); font-size: 11px; letter-spacing: .4em; text-transform: uppercase; margin: 6px 0 20px; }
.menu { display: flex; justify-content: center; }
.menu a { font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; padding: 8px 16px; color: var(--cinza); }
.menu a + a { border-left: 1px solid var(--linha); }
.menu a:hover { color: #fff; }

.secao { padding: 38px 44px 44px; border-bottom: 1px solid var(--linha); }
.secao h2 {
  color: #fff; font-weight: 400; font-size: 15px; letter-spacing: .34em; text-transform: uppercase;
  border-bottom: 1px solid var(--cinza2); display: inline-block; padding-bottom: 10px; margin-bottom: 24px;
}
.bloco-texto h3 { color: var(--cinza); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; margin: 22px 0 10px; }
.bloco-texto p { margin-bottom: 12px; color: var(--texto); }

.filmes { display: grid; grid-template-columns: 1fr; gap: 16px; }
.filme {
  display: grid; grid-template-columns: 1fr 230px; gap: 22px; align-items: start;
  border: 1px solid var(--linha); background: var(--alt); padding: 20px 22px;
}
.filme.destaque { border-color: var(--cinza2); background: linear-gradient(180deg, #202020, #161616); }
.filme-info h3 { color: #fff; font-weight: 400; font-size: 17px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; }
.ano { color: var(--cinza2); font-size: 12px; letter-spacing: .1em; margin-left: 6px; }
.meta { color: var(--cinza2); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px; }
.filme-info p { font-size: 13.5px; color: var(--texto); margin-bottom: 10px; }
.premios { color: var(--cinza2); font-size: 12px !important; }
.saiba { margin-top: 14px !important; }
.saiba a {
  display: inline-block; border: 1px solid var(--cinza2); border-radius: 3px;
  padding: 8px 18px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
}
.saiba a:hover { background: rgba(255,255,255,.06); }
.filme-foto img { width: 230px; border: 1px solid var(--linha); object-fit: cover; transition: opacity .2s, border-color .2s; }
.filme-foto a:hover img { opacity: .82; border-color: var(--cinza2); }

.rodape { text-align: center; padding: 28px 40px 36px; color: var(--cinza2); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; }
.rodape .mini { margin-top: 8px; font-size: 10px; }

@media (max-width: 700px) {
  .secao { padding: 28px 22px 34px; }
  .filme { grid-template-columns: 1fr; }
  .filme-foto img { width: 100%; }
  .menu a { padding: 8px 10px; font-size: 10.5px; }
}