/* =========================================
   PORTFOLIO SECTION
========================================= */

.portfolio {
    padding: 120px 0;

    background: #ffffff;
}


/* GRID */

.portfolio-grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(320px, 1fr));

    gap: 2.5rem;
}


/* TARJETAS */

.portfolio-card {
    position: relative;

    overflow: hidden;

    border-radius: 24px;

    background: white;

    box-shadow:
        0 10px 30px rgba(0,0,0,0.08);

    transition:
        transform 0.45s ease,
        box-shadow 0.45s ease;
}


/* IMAGEN */

.portfolio-card img {
    width: 100%;
    height: 420px;

    object-fit: cover;

    display: block;

    transition:
        transform 0.7s ease;
}


/* INFO */

.portfolio-info {
    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    padding: 2rem;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,0.82),
            rgba(0,0,0,0.08)
        );

    color: white;
}


.portfolio-info h3 {
    font-size: 2rem;

    margin-bottom: 1rem;

    font-weight: 600;
}


/* BOTÓN */

.btn-small {
    display: inline-flex;

    width: fit-content;

    padding: 0.8rem 1.6rem;

    border-radius: 40px;

    background: #d4af37;

    color: var(--navy);

    font-weight: 600;

    text-decoration: none;

    transition: all 0.35s ease;
}

.btn-small:hover {
    transform: translateY(-4px);

    background: #f0cb5c;
}


/* HOVER */

.portfolio-card:hover {
    transform: translateY(-10px);

    box-shadow:
        0 18px 40px rgba(0,0,0,0.15);
}

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

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 768px) {

    .portfolio {
        padding: 90px 0;
    }

    .portfolio-card img {
        height: 340px;
    }

    .portfolio-info h3 {
        font-size: 1.6rem;
    }

}

/* =========================================
   PORTFOLIO EXTRA EFFECTS
========================================= */

.portfolio-card {
    transform-style: preserve-3d;

    will-change: transform;
}


/* SUAVIDAD */

.portfolio-card img {
    transition:
        transform 0.7s ease,
        filter 0.7s ease;
}


/* BRILLO HOVER */

.portfolio-card::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            120deg,
            transparent 20%,
            rgba(255,255,255,0.18),
            transparent 80%
        );

    opacity: 0;

    transition: opacity 0.5s ease;

    pointer-events: none;
}


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


/* BOTÓN */

.btn-small {
    position: relative;

    overflow: hidden;
}


/* EFECTO SHINE */

.btn-small::before {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 100%;
    height: 100%;

    background:
        linear-gradient(
            120deg,
            transparent,
            rgba(255,255,255,0.5),
            transparent
        );

    transition: left 0.7s ease;
}


.btn-small:hover::before {
    left: 120%;
}