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

/* BODY */
body{
  font-family: Arial, sans-serif;
  background:#111;
  color:#fff;
}

/* PORTFÓLIO */
.portfolio{
  width:100%;
  padding:80px 5%;
}

/* TÍTULO */
.portfolio-header{
  text-align:center;
  margin-bottom:50px;
}

.portfolio-header h2{
  font-size:42px;
  margin-bottom:10px;
}

.portfolio-header p{
  font-size:18px;
  color:#aaa;
}

/* GRID 2 COLUNAS / 3 LINHAS */
.mosaic-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:20px;
}

/* ITEM */
.item{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  height:300px;
  display:block;
}

/* IMAGEM */
.item img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:0.5s ease;
}

/* EFEITO HOVER */
.item:hover img{
  transform:scale(1.08);
}

/* OVERLAY */
.overlay{
  position:absolute;
  inset:0;

  background:linear-gradient(
    to top,
    rgba(0,0,0,0.8),
    transparent
  );

  display:flex;
  flex-direction:column;
  justify-content:flex-end;

  padding:25px;

  opacity:0;
  transition:0.4s ease;
}

/* MOSTRAR TEXTO NO HOVER */
.item:hover .overlay{
  opacity:1;
}

/* TEXTO */
.overlay h3{
  font-size:24px;
  margin-bottom:5px;
}

.overlay span{
  font-size:14px;
  color:#ddd;
}

/* RESPONSIVO */
@media(max-width:768px){

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

  .portfolio-header h2{
    font-size:32px;
  }

  .item{
    height:250px;
  }

}


    .portfolio-section{
      max-width:1200px;
      margin:auto;
    }

    .portfolio-title{
      text-align:center;
      font-size:36px;
      margin-bottom:30px;
    }

    .slider-wrapper{
      position:relative;
      overflow:hidden;
    }

    .portfolio-slider{
      display:flex;
      gap:20px;
      transition:transform 0.5s ease;
    }

    .portfolio-item{
      min-width:calc(25% - 15px);
      height:320px;
      border-radius:14px;
      overflow:hidden;
      flex-shrink:0;
      cursor:pointer;
      position:relative;
    }

    .portfolio-item img{
      width:100%;
      height:100%;
      object-fit:cover;
      transition:0.4s;
      display:block;
    }

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

    .portfolio-item::after{
      position:absolute;
      bottom:0;
      left:0;
      width:100%;
      padding:14px;
      background:rgba(0,0,0,0.7);
      text-align:center;
      opacity:0;
      transition:0.3s;
    }

    .portfolio-item:hover::after{
      opacity:1;
    }

    .slider-btn{
      position:absolute;
      top:50%;
      transform:translateY(-50%);
      width:50px;
      height:50px;
      border:none;
      border-radius:50%;
      background:rgba(255,255,255,0.85);
      color:#000;
      font-size:24px;
      cursor:pointer;
      z-index:10;
      transition:0.3s;
    }

    .slider-btn:hover{
      background:#fff;
      transform:translateY(-50%) scale(1.1);
    }

    .prev{
      left:10px;
    }

    .next{
      right:10px;
    }

    /* LIGHTBOX */

    .lightbox{
      position:fixed;
      top:0;
      left:0;
      width:100%;
      height:100%;
      background:rgba(0,0,0,0.95);
      display:none;
      align-items:center;
      justify-content:center;
      z-index:999;
      padding:20px;
    }

    .lightbox.active{
      display:flex;
    }

    .lightbox img{
      max-width:90%;
      max-height:90%;
      border-radius:12px;
      animation:zoom 0.3s ease;
    }

    .close-lightbox{
      position:absolute;
      top:25px;
      right:35px;
      font-size:40px;
      color:#fff;
      cursor:pointer;
    }

    @keyframes zoom{
      from{
        transform:scale(0.8);
        opacity:0;
      }
      to{
        transform:scale(1);
        opacity:1;
      }
    }

    @media(max-width:900px){
      .portfolio-item{
        min-width:calc(50% - 10px);
      }
    }

    @media(max-width:600px){
      .portfolio-item{
        min-width:100%;
      }
    }