:root {
        --bg: #0f0f10;
        --fg: #e6e6e6;
        --muted: #9a9a9a;
        --accent: #b23a3a; /* vermelho queimado */
        --grain: rgba(255, 255, 255, 0.03);
      }
      * {
        box-sizing: border-box;
      }
      body {
        margin: 0;
        font-family: -apple-system, BlinkMacSystemFont, "Inter", Arial,
          sans-serif;
        color: var(--fg);
        background: radial-gradient(
            800px 600px at 8% 8%,
            rgba(255, 255, 255, 0.08),
            rgba(255, 255, 255, 0) 70%
          ),
          linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
          radial-gradient(
            circle at 20% 10%,
            rgba(255, 255, 255, 0.03),
            transparent 40%
          ),
          var(--bg);
        letter-spacing: 0.2px;
      }

      .grain::after {
        content: "";
        position: fixed;
        inset: 0;
        background-image: repeating-linear-gradient(
          0deg,
          transparent,
          transparent 2px,
          var(--grain) 3px
        );
        pointer-events: none;
        mix-blend-mode: overlay;
      }
      header {
        background: rgba(15, 15, 16, 0.95);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        padding: 24px 28px;
        border-bottom: 1px solid #1c1c1d;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .logo {
        display: inline-flex;
        align-items: center;
      }

      .logo img {
        height: 24px;
        width: auto;
        display: block;
      }

      .hero {
        padding: 96px 28px 72px;
        display: grid;
        grid-template-columns: 1.1fr 0.9fr;
        gap: 40px;
      }
      .kicker {
        color: var(--muted);
        text-transform: uppercase;
        font-size: 12px;
        letter-spacing: 2px;
      }
      h1 {
        font-size: 56px;
        line-height: 1.05;
        margin: 14px 0 18px;
      }
      .hero p {
        color: #cfcfcf;
        max-width: 520px;
        font-size: 18px;
      }
      .cta {
        margin-top: 28px;
        display: flex;
        gap: 16px;
        align-items: center;
      }
      .btn {
        padding: 14px 18px;
        border: 1px solid #2a2a2b;
        color: var(--fg);
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 1.6px;
        font-size: 12px;
      }
      .btn.primary {
        border-color: var(--accent);
        background: transparent;
      }
      .btn:hover {
        background: #151516;
      }

      .hero-art {
        border: 1px dashed #2a2a2b;
        padding: 24px;
        color: var(--muted);
      }
      .hero-art .block {
        position: relative;
        height: 150px;
        border: 1px solid #2a2a2b;
        margin-bottom: 14px;
        background-color: #121213;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        overflow: hidden;
      }
      .hero-art .block::after {
        content: "";
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient(
          0deg,
          rgba(255, 255, 255, 0.04),
          rgba(255, 255, 255, 0.04) 1px,
          transparent 2px
        );
        mix-blend-mode: overlay;
        pointer-events: none;
      }

      .block-1 {
        background-image: url("../Assets/block-1.jpg");
      }

      .block-2 {
        background-image: url("../Assets/block-2.jpg");
      }

      .block-3 {
        background-image: url("../Assets/block-3.jpg");
      }

      section {
        padding: 72px 28px;
        border-top: 1px solid #1c1c1d;
      }
      .grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 28px;
      }
      .card {
        border: 1px solid #2a2a2b;
        padding: 24px;
        background: #121213;
      }
      .card h3 {
        margin: 0 0 10px;
        font-size: 18px;
      }
      .card p {
        margin: 0;
        color: #c7c7c7;
      }

      .work {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 28px;
}
      .thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3; /* formato pôster */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid rgba(255,255,255,0.08);
  transition: transform 0.35s ease, opacity 0.35s ease;
}

      footer {
        padding: 48px 28px;
        border-top: 1px solid #1c1c1d;
        color: var(--muted);
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 24px;
      }
      .footer-cta {
        text-align: right;
      }

      @media (max-width: 900px) {
        .hero {
          grid-template-columns: 1fr;
        }
        .grid {
          grid-template-columns: 1fr;
        }
        .work {
          grid-template-columns: 1fr 1fr;
        }
        h1 {
          font-size: 42px;
        }
      }

      nav {
        display: flex;
        gap: 36px;
        align-items: center;
      }

      
      nav a {
        position: relative;
        color: var(--muted);
        text-decoration: none;
        font-size: 13px;
        letter-spacing: 1.8px;
        text-transform: uppercase;
        padding: 4px 0;
        transition: color 0.25s ease;
      }

      nav a::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -6px;
        width: 100%;
        height: 1px;
        background: var(--fg);
        opacity: 0;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.25s ease, opacity 0.25s ease;
      }

      nav a:hover {
        color: var(--fg);
      }

      nav a:hover::after {
        opacity: 0.6;
        transform: scaleX(1);
      }

      .footer-cta {
  display: flex;
  align-items: center;
  gap: 16px;
}

.btn-icon {
  padding: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-icon img {
  width: 18px;
  height: 18px;
  display: block;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reveal {
  opacity: 0;
  animation: fadeUp 0.8s ease-out forwards;
}

.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-right: 12px;
  text-align: right;
}

.footer-label {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}

.footer-link {
  font-size: 13px;
  color: var(--fg);
  text-decoration: none;
  transition: opacity 0.25s ease;
}

.footer-link:hover {
  opacity: 0.6;
}

.contact-invite {
  padding: 96px 28px;
}


.contact-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
  align-items: center;
}

.contact-text h2 {
  font-size: 36px;
  line-height: 1.1;
  margin: 0 0 14px;
}

.contact-text p {
  color: #cfcfcf;
  max-width: 520px;
  font-size: 17px;
}

.contact-actions {
  display: flex;
  gap: 16px;
  justify-content: flex-end;
}

@media (max-width: 900px) {
  .contact-inner {
    grid-template-columns: 1fr;
  }

  .contact-actions {
    justify-content: flex-start;
  }

  .contact-text h2 {
    font-size: 30px;
  }
}

.footer-logo {
  color: var(--fg);
  text-decoration: none;
}

.footer-logo:hover {
  text-decoration: underline;
}

html {
  scroll-behavior: smooth;
}

.about {
  padding: 96px 28px;
}

.about-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

.about-text h2 {
  font-size: 36px;
  line-height: 1.1;
  margin: 14px 0 16px;
}

.about-text p {
  color: #cfcfcf;
  max-width: 520px;
  font-size: 17px;
}

/* BLOCO DE IMAGEM */
.about-image {
  height: 320px;
  border: 1px solid #2a2a2b;
  background-color: #121213;
  background-image: url("../assets/about-work.jpg");
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}

/* textura / ruído */
.about-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.04),
    rgba(255, 255, 255, 0.04) 1px,
    transparent 2px
  );
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* RESPONSIVO */
@media (max-width: 900px) {
  .about-inner {
    grid-template-columns: 1fr;
  }

  .about-image {
    height: 260px;
  }

  .about-text h2 {
    font-size: 30px;
  }
}

.open-files {
  padding: 96px 28px;
}

.open-files-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 48px;
  align-items: center;
}

.open-files-text h2 {
  font-size: 36px;
  line-height: 1.1;
  margin: 14px 0 16px;
}

.open-files-text p {
  color: #cfcfcf;
  max-width: 520px;
  font-size: 17px;
}

.open-files-actions {
  margin-top: 28px;
  display: flex;
  gap: 16px;
  align-items: center;
}

/* PREVIEW DOS ARQUIVOS */
.open-files-preview {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.file-thumb {
  height: 120px;
  border: 1px solid #2a2a2b;
  background-color: #121213;
  position: relative;
  overflow: hidden;
}

/* textura */
.file-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(255,255,255,0.04),
    rgba(255,255,255,0.04) 1px,
    transparent 2px
  );
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* EXEMPLO DE IMAGEM */
.file-thumb:nth-child(1) {
  background-image: url("../Assets/psd-1.jpg");
  background-size: cover;
  background-position: center;
}

.file-thumb:nth-child(2) {
  background-image: url("../Assets/psd-2.jpg");
  background-size: cover;
  background-position: center;
}

.file-thumb:nth-child(3) {
  background-image: url("../Assets/psd-3.jpg");
  background-size: cover;
  background-position: center;
}

/* RESPONSIVO */
@media (max-width: 900px) {
  .open-files-inner {
    grid-template-columns: 1fr;
  }

  .open-files-text h2 {
    font-size: 30px;
  }
}

.selected-work {
  padding-top: 72px;
}

.selected-header {
  max-width: 520px;
  margin-bottom: 32px;
}

.selected-desc {
  margin: 10px 0 0;
  color: #cfcfcf;
  font-size: 15px;
  line-height: 1.5;
}

/* thumbs com leitura mais autoral */
.thumb {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.35s ease, opacity 0.35s ease;
}

.thumb:hover {
  transform: translateY(-4px);
  opacity: 0.85;
}

/* exemplos de imagens */
.thumb-1 { background-image: url("../Assets/work-1.jpg"); }
.thumb-2 { background-image: url("../assets/work-2.jpg"); }
.thumb-3 { background-image: url("../assets/work-3.jpg"); }
.thumb-4 { background-image: url("../assets/work-4.jpg"); }

.selected-work {
  display: flex;
  justify-content: center;
}

.selected-inner {
  width: 100%;
  max-width: 1100px; /* controla o “bloco curatorial” */
}

.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 180px;
  gap: 24px;
}

/* itens base */
.bento-item {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid rgba(255,255,255,0.08);
  position: relative;
  overflow: hidden;
}

/* textura grit */
.bento-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(255,255,255,0.04),
    rgba(255,255,255,0.04) 1px,
    transparent 2px
  );
  mix-blend-mode: overlay;
}

/* destaques */
.bento-item.big {
  grid-column: span 2;
  grid-row: span 2;
}

/* exemplos de imagens */
.item-a { background-image: url("../assets/work-1.jpg"); }
.item-b { background-image: url("../assets/work-2.jpg"); }
.item-c { background-image: url("../assets/work-3.jpg"); }
.item-d { background-image: url("../assets/work-4.jpg"); }
.item-e { background-image: url("../assets/work-5.jpg"); }

/* hover sutil */
.bento-item:hover {
  transform: translateY(-4px);
  opacity: 0.9;
  transition: all 0.35s ease;
}

/* responsivo */
@media (max-width: 900px) {
  .bento-grid {
    grid-template-columns: 1fr 1fr;
  }

  .bento-item.big {
    grid-column: span 2;
  }
}

.poster-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 2fr 1fr 1.2fr 1fr;
  gap: 24px;

  width: 100%;
  max-width: 1100px;
  aspect-ratio: 16 / 10;
}

.poster {
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255,255,255,0.08);
  position: relative;
  overflow: hidden;
}

/* textura grit */
.poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(255,255,255,0.04),
    rgba(255,255,255,0.04) 1px,
    transparent 2px
  );
  mix-blend-mode: overlay;
}


.poster.a {
  grid-column: 1;
  grid-row: 1 / span 2;
  background-image: url("../assets/work-1.jpg");
}


.poster.b {
  grid-column: 2;
  grid-row: 1;
  background-image: url("../assets/work-2.jpg");
}


.poster.c {
  grid-column: 2;
  grid-row: 2;
  background-image: url("../assets/work-3.jpg");
}


.poster.d {
  grid-column: 1 / -1;
  grid-row: 3;
  background-image: url("../assets/work-4.jpg");
}


.poster.e {
  grid-column: 1 / -1;
  grid-row: 4;
  background-image: url("../assets/work-5.jpg");
}


@media (max-width: 900px) {
  .poster-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    aspect-ratio: auto;
  }

  .poster {
    height: 260px;
  }
}

.poster {
  position: relative;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  overflow: hidden;

  transition:
    transform 0.6s ease,
    filter 0.6s ease;
}

.poster-link:hover .poster {
  transform: translateY(-10px);
  filter: brightness(0.75);
}



.poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
  opacity: 0;
  transition: opacity 0.6s ease;
}

.poster-link:hover .poster::after {
  opacity: 1;
}

.poster-link.a {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.poster-link.b {
  grid-column: 2;
  grid-row: 1;
}

.poster-link.c {
  grid-column: 2;
  grid-row: 2;
}

.poster-link.d {
  grid-column: 1 / -1;
  grid-row: 3;
}

.poster-link.e {
  grid-column: 1 / -1; /* 🔥 ISSO É O QUE ESTAVA FALTANDO */
  grid-row: 4;
}

.poster

.poster {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  position: relative;
  transition: transform 0.6s ease, filter 0.6s ease;
}

.poster-link {
  display: block;
  width: 100%;
  height: 100%;
}

.poster-link {
  display: block;
  width: 100%;
  height: 100%;
}


.poster-link:nth-child(1) {
  grid-column: 1;
  grid-row: 1 / span 2;
}


.poster-link:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
}


.poster-link:nth-child(3) {
  grid-column: 2;
  grid-row: 2;
}


.poster-link:nth-child(4) {
  grid-column: 1 / -1;
  grid-row: 3;
}


.poster-link:nth-child(5) {
  grid-column: 1 / -1;
  grid-row: 4;
}