/* ===============================
   PORTAFOLIO WEBS
=============================== */

.portafolio-web{
  padding:100px 0;
  background:#0b0b0f;
}

.portafolio-wrap{
  width:90%;
  max-width:1200px;
  margin:auto;
}

/* TITULO */
.portafolio-head{
  text-align:center;
  margin-bottom:50px;
}

.portafolio-head h2{
  font-size:34px;
  font-weight:900;
  color:white;
  margin-bottom:10px;
}

.portafolio-head p{
  color:#bdbdbd;
}

/* GRID */
.portafolio-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}

/* ITEM */
.portafolio-item{
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* VIDEO */
.portafolio-link{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.08);
  transition:.35s;
}

.portafolio-link video{
  width:100%;
  display:block;
  transition:.4s;
}

/* HOVER */
.portafolio-link:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 40px rgba(0,0,0,.35);
}

.portafolio-link:hover video{
  transform:scale(1.05);
}

/* OVERLAY */
.overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.45);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:.3s;
}

.overlay span{
  background:#25D366;
  color:black;
  padding:10px 16px;
  border-radius:8px;
  font-weight:800;
}

.portafolio-link:hover .overlay{
  opacity:1;
}

/* BOTON LINK */
.visit-btn{
  text-align:center;
  padding:12px;
  border-radius:10px;
  border:1px solid rgba(37,211,102,0.5);
  color:#25D366;
  text-decoration:none;
  font-weight:700;
  transition:.25s;
}

.visit-btn:hover{
  background:#25D366;
  color:black;
}

/* RESPONSIVE */
@media(max-width:980px){
  .portafolio-grid{
    grid-template-columns:1fr;
  }
}