.acf-trabajos {
width: calc(100% - 60px);
padding:30px;
}
.trabajos-header {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1400px;
margin: 0 auto 2rem;
}
.trabajos-intro {
flex: 1;
margin-right: 2rem;
}
.trabajos-filter select {
padding: 0.5rem 1rem;
font-size: 1rem;
}
.trabajos-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
max-width: 1400px;
margin: 0 auto;
}
.trabajo-item {
display: block;
width: 100%;
aspect-ratio: 4 / 3; overflow: hidden;
}
.trabajo-item img {
width: 100%;
height: 100%;
display: block;
cursor: pointer;
object-fit: cover;
object-position: center center;
} @media (max-width: 1024px) {
.trabajos-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
.trabajos-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.trabajos-grid { grid-template-columns: 1fr; }
} .lightbox-toggle {
display: none;
} .lightbox-overlay {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
z-index: 9999;
transition: opacity 0.3s ease;
} .lightbox-toggle:checked + .trabajo-lightbox + .lightbox-overlay {
opacity: 1;
pointer-events: all;
} .lightbox-background {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.85);
cursor: pointer;
z-index: 1;
} .lightbox-image {
max-width: 90vw;
max-height: 90vh;
object-fit: contain;
z-index: 2;
position: relative;
} .lightbox-close {
position: absolute;
top: 20px;
right: 20px;
font-size: 32px;
color: #fff;
cursor: pointer;
z-index: 3;
background: none;
border: none;
}