@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
  @font-face {
    font-family: "bold";
    src: url('fonts/bold-regular.woff2') format('woff2'),
    url('fonts/bold-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    }
    @font-face {
      font-family: "brook";
      src: url('fonts/brook.woff2') format('woff2'),
      url('fonts/brook.woff') format('woff');
      font-weight: normal;
      font-style: normal;
      }

*{
  padding:0;
  margin:0;
  box-sizing:border-box;
}

html{ background:#050505; }
body{
  user-select:none;
  background:#050505;
  color: rgb(245,245,245);
}

a{ color:inherit; text-decoration:none; outline:none; }
a:hover{ color:inherit; text-decoration:none; outline:none; }

ul{ display:flex; flex-direction:row; }
li{ list-style:none; padding-left:40px; }

img{
  display:block;
  width:100%;
  height:auto;
  position: relative; /* evita bug caso exista regra global de img absolute */
}

/* ===== NAV (igual template) ===== */
.navigation{
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  color: rgb(245, 245, 245);
  font-family: 'brook', sans-serif;
  padding: 20px;
  padding-top: 40px;
  padding-left: 40px;
  font-size: 18px;
  width: 100%;
}

.logo{
  display: inline-block;
  z-index: 10;
  color: rgb(245, 245, 245);
  padding:10px;
  font-family: brook;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 1px;
  border-radius: 4px;
}

.navigation-links{
  float: right;
  padding: 10px;
  padding-right: 40px;
}

.links{
  opacity:.9;
  transition: all .4s ease;
}
.links:hover{ opacity:1; }

/* ===== MINI NAV (REC 35MM SOBRE) ===== */
.mini-nav{
  position:absolute;
  left: 40px;
  top: 110px;
  z-index: 10;
  display:flex;
  gap: 18px;
  font-family: brook;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .95;
}

.rec-dot{
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:99px;
  background:#ff3b3b;
  margin-right:8px;
  vertical-align:middle;
}

/* ===== PAGE WRAP ===== */
.project-page{
  width:100%;
  min-height:100vh;
  position: relative;
  overflow:hidden;
}

/* ===== HERO (bloco branco + frame) ===== */
.hero{
  width: 100%;
  padding-top: 165px; /* espaço da nav */
}

.hero-grid{
  width: 95%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.95fr 2.05fr;
  gap: 18px;
  align-items: stretch;
}

.hero-info{
  background: #e9e9e9;
  color: #000;
  padding: 40px;
  display:flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 420px;
}

.hero-meta{
  font-family: brook;
  font-size: 18px;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.35;
  opacity: .95;
}

.hero-data{
  font-family: brook;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.35;
  opacity: .95;
}

.hero-title{
  font-family: bold;
  font-size: 56px;
  line-height: .92;
  letter-spacing: .02em;
  text-transform: lowercase;
}

/* frame principal (pode ser img ou video) */
.hero-video{
  width: 100%;
  overflow: hidden;
  background: #000;
  min-height: 420px;
  position: relative;
}

/* se você usar <img> */
.hero-video img{
  width:100%;
  height:100%;
  min-height: 420px;
  object-fit: cover;
}

/* se você trocar para <video class="hero-media"> */
.hero-media{
  width:100%;
  height:100%;
  min-height: 420px;
  object-fit: cover;
  display:block;
}

/* ===== STILLS ===== */
.project-content{
  width: 95%;
  margin: 18px auto 0;
  display:flex;
  flex-direction: column;
  gap: 18px;
}

.project-content img{
  width:100%;
  border-radius: 0px;
}

/* ===== CREDITOS (faixa clara) ===== */
.credits{
  position: fixed;
  bottom: 70px;
  left: 30px;
  width: min(320px, 35vw);
  max-height: calc(100vh - 100px);
  overflow: auto;
  padding: 24px 30px;
  background: transparent;
  color: #fff;
  font-family: brook;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.6;
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
  z-index: 20;
}

.credits--visible{
  opacity: 1;
  transform: translateX(0);
}

/* ===== BOTÃO ASSISTIR ===== */
.watch-button{
  width:95%;
  margin: 22px auto 0;
  display:flex;
  justify-content:center;
}

.watch-button a{
  display:inline-block;
  border: 1px solid rgba(245,245,245,.35);
  padding: 12px 28px;
  font-family: brook;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: all .35s ease;
}

.watch-button a:hover{
  background: rgb(245,245,245);
  color:#050505;
  border-color: rgb(245,245,245);
}

/* ===== VEJA TAMBÉM ===== */
.related{
  width: 95%;
  margin: 70px auto 0;
  padding-bottom: 60px;
}

.related-title{
  font-family: brook;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .9;
  margin-bottom: 16px;
}

.related-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.related-grid a{
  display:block;
  overflow:hidden;
  background:#0b0b0b;
}

.related-grid img{
  width:100%;
  height: 320px;
  object-fit: cover;
  transform: scale(1.01);
  transition: all .6s ease;
  filter: contrast(1.05) saturate(1.05);
}

.related-grid a:hover img{
  transform: scale(1.06);
  filter: contrast(1.12) saturate(1.1);
}

/* ===== FOOTER (minimal) ===== */
footer{
  width:95%;
  margin: 30px auto 60px;
  text-align:center;
  font-family: brook;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .55;
  line-height: 1.6;
}

/* ===== RESPONSIVE (mesma lógica do template) ===== */
@media all and (max-width: 991px){
  .hero-grid{
    grid-template-columns: 1fr;
  }
  .hero-info{
    min-height: auto;
  }
  .hero-video,
  .hero-video img,
  .hero-media{
    min-height: 320px;
  }
}

@media all and (max-width: 576px){
  .navigation{
    font-size: 14px;
    padding-top:20px;
    padding-left: 10px;
  }
  .navigation-links{
    padding-right: 0px;
    padding-left: 0px;
  }
  .logo{
    font-size: 14px;
    padding-left: 0px;
  }
  li{ padding-left: 20px; }

  .mini-nav{
    left: 10px;
    top: 92px;
    font-size: 11px;
  }

  .hero{
    padding-top: 145px;
  }
  .hero-title{
    font-size: 46px;
  }

  .related-grid{
    grid-template-columns: 1fr;
  }
  .related-grid img{
    height: 190px;
  }
}
/* ===== HERO: vídeo responsivo no frame ===== */
.hero-video{
  background:#000;
  overflow:hidden;
  position: relative;
}

.hero-media{
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  display: block;
}

/* ===== STILLS: mosaico estilo referência ===== */
.project-stills{
  width: 72%;
  max-width: 1200px;
  margin: 40px auto 0;
}

/* grade 2 colunas com separadores pretos (gap) */
.stills-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;                 /* linhas pretas entre as imagens */
  background: #050505;       /* garante o “preto” do separador */
}

/* itens que ocupam a largura toda */
.stills-grid .span-2{
  grid-column: span 2;
}

/* tile base */
.tile{
  background: #000;
  overflow: hidden;
}

/* imagem dentro do tile */
.tile img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* proporções para imitar o layout do print */
.tile--wide{ aspect-ratio: 16 / 9; }     /* pequenas e médias */

/* faixas largas (Deixa a imagem ditar o formato e impede cortes) */
.tile--cinema { 
  aspect-ratio: auto; 
  background: transparent; 
}  
.tile--cinema img { 
  object-fit: contain; 
  height: auto; 
}

.tile--portrait{ aspect-ratio: 3 / 4; }  /* retrato grande */

/* mobile: mantém 2 colunas, mas pode abrir 1 se você preferir */
@media (max-width: 640px){
  .hero-media{ min-height: 320px; }
  .stills-grid{ gap: 8px; }
}
/* ===== HERO: vídeo responsivo no frame ===== */
.hero-video{
  background:#000;
  overflow:hidden;
  position: relative;
}

.hero-media{
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  display: block;
}

/* ===== STILLS: mosaico estilo referência ===== */
.project-stills{
  width: 95%;
  margin: 18px auto 0;
}

/* grade 2 colunas com separadores pretos (gap) */
.stills-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;                 /* linhas pretas entre as imagens */
  background: #050505;       /* garante o “preto” do separador */
}

/* itens que ocupam a largura toda */
.stills-grid .span-2{
  grid-column: span 2;
}

/* tile base */
.tile{
  background: #000;
  overflow: hidden;
}

/* imagem dentro do tile */
.tile img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* proporções para imitar o layout do print */
.tile--wide{ aspect-ratio: 16 / 9; }     /* pequenas e médias */
.tile--cinema{ aspect-ratio: 21 / 9; }   /* faixas largas */
.tile--portrait{ aspect-ratio: 3 / 4; }  /* retrato grande */

/* mobile: mantém 2 colunas, mas pode abrir 1 se você preferir */
@media (max-width: 640px){
  .hero-media{ min-height: 320px; }
  .stills-grid{ gap: 8px; }
}

/* ===== STILLS: layout masonry para página STILL ===== */
.project-stills--only-images .stills-grid {
  display: block !important;
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-gap: 16px;
  -moz-column-gap: 16px;
  column-gap: 16px;
}

.project-stills--only-images .tile {
  display: block;
  width: 100%;
  margin-bottom: 16px;

  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  -moz-page-break-inside: avoid;
  break-inside: avoid-column;
  break-inside: avoid;

  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  overflow: hidden;
}

.project-stills--only-images .tile img {
  width: 100%;
  height: auto !important;
  position: static !important;
  object-fit: unset !important;
  display: block;
}

@media (max-width: 992px) {
  .project-stills--only-images .stills-grid {
    column-count: 2;
  }
}

@media (max-width: 768px) {
  .project-stills--only-images .stills-grid {
    column-count: 1;
    column-gap: 0;
  }
}

/* LIGHTBOX */

.lightbox{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
  z-index: 9999;
}

.lightbox.active{
  opacity: 1;
  pointer-events: all;
}

.lightbox-img{
  max-width: 90%;
  max-height: 90vh;
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0,0,0,0.8);
}

.lightbox-close{
  position: absolute;
  top: 40px;
  right: 60px;
  font-size: 48px;
  line-height: 1;
  text-align: center;
  color: white;
  font-family: brook;
  cursor: pointer;
  opacity: .8;

  /* aumenta área clicável e melhora usabilidade */
  padding: 18px;
  border-radius: 50%;
  background: rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  min-height: 64px;
  box-sizing: border-box;
  z-index: 10001;
}

.lightbox-close::before {
  content: '';
  position: absolute;
  inset: -12px;
  pointer-events: none;
}

.lightbox-close:hover{
  opacity: 1;
  background: rgba(0,0,0,0.35);
}

/* cursor pointer nas imagens */

.tile img{
  cursor: zoom-in;
}
/* overlay do vídeo */

.hero-video{
  position: relative;
  overflow: hidden;
}

.video-overlay{
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  background: linear-gradient(
to top,
rgba(0,0,0,0.7),
rgba(0,0,0,0.1)
);

  opacity: 0;
  transition: opacity .35s ease;

  cursor: pointer;
}

.hero-video:hover .video-overlay{
  opacity: 1;
}

.video-overlay span{

  font-family: brook;
  font-size: 14px;
  letter-spacing: .2em;
  text-transform: uppercase;

  border: 1px solid white;
  padding: 14px 28px;

  transition: all .3s ease;
}

.video-overlay span:hover{
  background: white;
  color: black;
}
/* GRID */

.related-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:40px;
}

/* CARD */

.related-item{
  position:relative;
  overflow:hidden;
  display:block;
}

.related-item img{
  width:100%;
  height:260px;
  object-fit:cover;
  transition:transform .6s ease;
}

/* OVERLAY */

.related-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  padding:20px;
  background:linear-gradient(
    to top,
    rgba(0,0,0,.7),
    rgba(0,0,0,0)
  );
  opacity:0;
  transition:opacity .4s ease;
}

/* TITULO */

.related-name{
  color:#fff;
  font-size:18px;
  letter-spacing:1px;
}

/* HOVER */

.related-item:hover img{
  transform:scale(1.08);
}

.related-item:hover .related-overlay{
  opacity:1;
}
*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
background:#000;
font-family:sans-serif;
overflow-x:hidden;
}

.gallery{
width:100%;
display:grid;
grid-template-columns:repeat(2,1fr);
gap:0;
}

.gallery img{
width:100%;
height:70vh;
object-fit:cover;
cursor:zoom-in;
transition:0.4s;
}

.gallery img:hover{
opacity:.85;
}

@media(max-width:900px){

.gallery{
grid-template-columns:1fr;
}

.gallery img{
height:60vh;
}

}

.lightbox{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:black;
display:flex;
align-items:center;
justify-content:center;
opacity:0;
pointer-events:none;
transition:.3s;
}

.lightbox img{
max-width:95%;
max-height:95%;
object-fit:contain;
}

.lightbox.active{
opacity:1;
pointer-events:auto;
}

/* =========================
   AJUSTE DA PÁGINA DE FOTOS
   TABLET + MOBILE
========================= */

/* desktop: desce mais a galeria */
.project-stills,
.project-stills--only-images{
  margin: 175px auto 30px;
}

/* tablet */
@media all and (max-width: 991px){

  .mini-nav{
    top: 105px;
    left: 30px;
    gap: 14px;
    font-size: 11px;
  }

  .project-stills,
  .project-stills--only-images{
    width: 94%;
    margin: 185px auto 24px;
  }

  .stills-grid{
    gap: 8px;
  }
}

/* mobile */
@media all and (max-width: 768px){

  .navigation{
    padding-top: 20px;
    padding-left: 12px;
    padding-right: 12px;
    font-size: 14px;
  }

  .logo{
    font-size: 14px;
    padding-left: 0;
  }

  .navigation-links{
    padding-right: 0;
  }

  li{
    padding-left: 18px;
  }

  .mini-nav{
    left: 12px;
    top: 88px;
    gap: 10px;
    font-size: 10px;
    letter-spacing: .12em;
  }

  .project-stills,
  .project-stills--only-images{
    width: 100%;
    margin: 155px auto 16px;
    padding: 0 10px;
  }

  .stills-grid{
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .stills-grid .span-2{
    grid-column: span 1;
  }

  .tile--wide,
  .tile--cinema,
  .tile--portrait{
    aspect-ratio: 4 / 5;
  }

  .lightbox{
    padding: 16px;
  }

  .lightbox-img{
    max-width: 100%;
    max-height: 86vh;
  }

  .lightbox-close{
    top: 14px;
    right: 16px;
    font-size: 30px;
  }
}

/* mobile pequeno */
@media all and (max-width: 480px){

  .navigation{
    padding-top: 16px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .mini-nav{
    left: 10px;
    top: 82px;
    font-size: 9.5px;
    gap: 8px;
  }

  .project-stills,
  .project-stills--only-images{
    margin: 145px auto 12px;
    padding: 0 8px;
  }

  .stills-grid{
    gap: 6px;
  }

  .lightbox-close{
    top: 10px;
    right: 12px;
    font-size: 28px;
  }
}
/* =========================================
   MOBILE ONLY — imagens no formato do print
========================================= */
@media all and (max-width: 768px) {
  .project-stills,
  .project-content,
  .gallery,
  .grid {
    width: calc(100% - 20px);
    margin-left: auto;
    margin-right: auto;
  }

  .stills-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .stills-grid .span-2 {
    grid-column: span 1;
  }

  .tile,
  .card {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    background: #0a0a0a;
    aspect-ratio: 16 / 9;
    min-height: unset;
    height: auto;
  }

  .tile img,
  .card img,
  .card .media,
  .gallery img,
  .project-content img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
  }

  .gallery {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .gallery img {
    aspect-ratio: 16 / 9;
    height: auto;
    max-height: none;
    background: #0a0a0a;
  }

  .project-content {
    gap: 14px;
  }

  .project-content img {
    aspect-ratio: 16 / 9;
    height: auto;
    background: #0a0a0a;
  }

  .meta {
    opacity: 1;
    padding: 16px;
    background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 65%);
  }

  .title {
    font-size: 20px;
    line-height: 1.05;
  }

  .sub {
    font-size: 11px;
    margin-top: 4px;
  }
}

/* =========================================
   MOBILE PEQUENO
========================================= */
@media all and (max-width: 480px) {
  .tile,
  .card,
  .gallery img,
  .project-content img {
    aspect-ratio: 16 / 10;
    border-radius: 7px;
  }

  .stills-grid,
  .gallery,
  .project-content {
    gap: 12px;
  }

  .meta {
    padding: 14px;
  }

  .title {
    font-size: 18px;
  }

  .sub {
    font-size: 10px;
  }
}

@media all and (max-width: 768px) {
  .tile,
  .card,
  .gallery img,
  .project-content img {
    aspect-ratio: 1.8 / 1;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
    overflow: hidden;
    background: #0a0a0a;
  }
}



/* ==========================================================
   CORREÇÃO BLINDADA: ELIMINAR CROP CINEMA NO PC
   ========================================================== */

@media all and (min-width: 769px) {
  
  /* Remove a caixa rígida 21:9 ignorando qualquer código duplicado acima */
  .stills-grid .tile.tile--cinema {
    aspect-ratio: auto !important;
    height: auto !important;
    background: transparent !important;
  }

  /* Faz a imagem ditar o próprio tamanho sem cortar o topo/base */
  .stills-grid .tile.tile--cinema img {
    height: auto !important;
    object-fit: contain !important; 
  }
  
}