/* ================================
PORTAFOLIO FULL IMAGEN
================================ */

.portafolio{
    background:#0d1117;
    padding:100px 20px;
    text-align:center;
}

.portafolio-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position: center top;
}

.titulo-seccion{
    font-size:38px;
    margin-bottom:60px;
    font-weight:700;
    letter-spacing:1px;
    color:white;
    position:relative;
}

.titulo-seccion::after{
    content:'';
    width:60px;
    height:3px;
    background:#25D366;
    position:absolute;
    bottom:-10px;
    left:50%;
    transform:translateX(-50%);
    border-radius:5px;
}
/* GRID */
.grid-portafolio{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap:30px; /* más juntas */
    max-width:1350px;
    margin:auto;
}

/* ITEM */
.portafolio-item{
    position:relative;
    border-radius:12px;
    overflow:hidden;
    cursor:pointer;
    height:220px; /* altura fija elegante */
}

/* IMAGEN FULL */
.portafolio-item img{
    width:100%;
    height:100%;
    object-fit:cover; /* 🔥 clave: ocupa todo */
    display:block;
    transition: transform 0.4s ease;
}

/* HOVER SUAVE */
.portafolio-item:hover img{
    transform: scale(1.07);
}

/* ================================
MODAL (IMAGEN GRANDE)
================================ */

.modal{
    display:none;
    position:fixed;
    z-index:1000;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.9);
    backdrop-filter: blur(6px);
    justify-content:center;
    align-items:center;
}

/* CONTENIDO */
.modal-content{
    width:90%;
    max-width:1100px;
}

/* IMAGEN GRANDE */
.modal-content img{
    width:100%;
    height:auto;
    border-radius:12px;
}

/* BOTÓN CERRAR */
.close{
    position:absolute;
    top:20px;
    right:30px;
    font-size:30px;
    color:white;
    cursor:pointer;
}

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

@media(max-width:500px){
    .grid-portafolio{
        grid-template-columns: 1fr;
    }
    

}