/* Bloque Últimos Proyectos · replica Stackable scroll-reveal */

/* ===== Sección wrapper ===== */
.zw-proyectos {
    padding-top: 100px;
    margin-bottom: 100px;
}


.zw-proyectos__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.zw-proyectos__title {
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.01em;
    color: inherit;
    text-align: left;
    margin-bottom: 50px;
}

/* ===== Card individual ===== */
.zw-proyecto-card {
    position: relative;
    background-color: #1a1a1a;
    background-image: var(--zw-proyecto-bg, none);
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 7px 5px 30px #48497927;
    min-height: 700px;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    align-items: center;
    margin-bottom: 40px;
    /* Animación entrada scroll-reveal */
    opacity: 0;
    transform: rotate(20deg) scale(0.05);
    transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.zw-proyecto-card.is-visible {
    opacity: 1;
    transform: none;
}

/* Overlay oscuro 90% sobre bg-image */
.zw-proyecto-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: #1a1a1a;
    opacity: 0.9;
    z-index: 0;
    pointer-events: none;
}

/* Columnas dentro del card — por encima del overlay */
.zw-proyecto-card__left,
.zw-proyecto-card__img,
.zw-proyecto-card__right {
    position: relative;
    z-index: 1;
    padding: 48px 32px;
}

/* Columna izq: nombre empresa + tags */
.zw-proyecto-card__name {
    font-size: var(--fs-h3);
    font-weight: 700;
    color: var(--zander-white-soft);
    margin-bottom: 24px;
    line-height: 1.2;
}

.zw-proyecto-card__tags {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.zw-proyecto-card__tags li {
    color: var(--zander-white-soft);
    font-size: var(--fs-body);
    display: flex;
    align-items: center;
    gap: 10px;
}

.zw-proyecto-card__tags li::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: var(--zander-yellow);
    border-radius: 50%;
    flex-shrink: 0;
}

/* Columna central: imagen mockup */
.zw-proyecto-card__img img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* Columna der: descripción + contador */
.zw-proyecto-card__right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 500px;
}

.zw-proyecto-card__desc {
    color: var(--zander-white-soft);
    font-size: var(--fs-body);
    line-height: 1.6;
}

.zw-proyecto-card__counter {
    font-size: var(--fs-h3);
    font-weight: 700;
    color: var(--zander-yellow);
    line-height: 1;
    margin: 0;
    align-self: flex-start;
}

/* ===== Responsive ===== */
@media (max-width: 999.98px) {
    /* títulos ya fluidos via clamp */
}

/* Tablet: 2 cols (img + info) */
@media (max-width: 999.98px) and (min-width: 690px) {
    .zw-proyecto-card {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "left img"
            "right right";
    }
    .zw-proyecto-card__left  { grid-area: left; }
    .zw-proyecto-card__img   { grid-area: img; }
    .zw-proyecto-card__right { grid-area: right; min-height: auto; }
}

/* Móvil: 1 columna, sin fixed bg (iOS) */
@media (max-width: 689.98px) {
    .zw-proyectos {
        margin-bottom: 60px;
        padding-top: 60px;
    }
    .zw-proyectos__title {
        margin-bottom: 32px;
        text-align: center;
    }
    .zw-proyecto-card {
        grid-template-columns: 1fr;
        grid-template-areas:
            "left"
            "img"
            "right";
        background-attachment: scroll;
        margin-bottom: 30px;
        min-height: auto;
        transform: rotate(20deg) scale(0.05);
    }
    .zw-proyecto-card.is-visible {
        transform: none;
    }
    .zw-proyecto-card__left  { grid-area: left;  padding: 32px 24px 16px; }
    .zw-proyecto-card__img   { grid-area: img;   padding: 0 24px; }
    .zw-proyecto-card__right { grid-area: right; padding: 16px 24px 32px; min-height: auto; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .zw-proyecto-card {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}