/* ===== VIAJES (scope) ===== */
.page-viajes {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 16px 64px;
}

    .page-viajes .title {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 16px;
        margin: 18px 0 14px;
    }

        .page-viajes .title h1 {
            margin: 0;
            font-size: clamp(24px, 3vw, 36px);
        }

        .page-viajes .title p {
            margin: 0;
            color: var(--muted);
        }

    .page-viajes .toolbar {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
        justify-content: space-between;
        margin: 10px 0 18px;
    }

    .page-viajes .chips {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .page-viajes .chip {
        display: inline-flex;
        align-items: center;
        height: 36px;
        padding: 0 14px;
        border-radius: 999px;
        background: var(--card);
        border: 1px solid rgba(255,255,255,.08);
        color: var(--text);
        font-size: .92rem;
        cursor: pointer;
        transition: background .2s ease, transform .06s ease;
    }

        .page-viajes .chip:hover {
            background: #0d1a2b;
        }

        .page-viajes .chip:active {
            transform: scale(.98);
        }

        .page-viajes .chip[data-active="true"] {
            background: linear-gradient(180deg, var(--brand), var(--brand-2));
            color: #1b1b1b;
            font-weight: 600;
        }

    .page-viajes .search {
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .page-viajes .search input {
            height: 38px;
            min-width: 220px;
            padding: 0 12px 0 36px;
            border-radius: 12px;
            border: 1px solid rgba(255,255,255,.08);
            background: var(--card) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%239fb2cc" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>') no-repeat 10px 50%;
            color: var(--text);
            outline: none;
        }

            .page-viajes .search input::placeholder {
                color: #93a7c1;
            }

    .page-viajes .gallery {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 14px;
    }

    .page-viajes figure.card {
        margin: 0;
        position: relative;
        overflow: hidden;
        border-radius: var(--radius,16px);
        background: var(--card);
        box-shadow: 0 8px 20px rgba(0,0,0,.4);
    }

    .page-viajes .card img {
        width: 100%;
        aspect-ratio: 3/2;
        object-fit: cover;
        filter: saturate(1.05);
        transition: transform .35s ease;
        display: block;
    }

    .page-viajes .card:hover img {
        transform: scale(1.03);
    }

    .page-viajes .badge {
        position: absolute;
        top: 8px;
        left: 8px;
        background: rgba(0,0,0,.55);
        color: #fff;
        padding: 4px 10px;
        border-radius: 999px;
        font-size: .75rem;
        z-index: 2;
    }

    .page-viajes figcaption {
        position: absolute;
        inset-inline: 0;
        bottom: 0;
        padding: 12px;
        font-size: .95rem;
        color: #fff;
        text-shadow: 0 1px 2px rgba(0,0,0,.6);
        background: linear-gradient(180deg, transparent, rgba(0,0,0,.74));
    }

.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(3,8,18,.9);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

    .lightbox[open] {
        display: flex;
    }

    .lightbox .inner {
        position: relative;
        width: min(92vw, 1200px);
    }

    .lightbox img {
        width: 100%;
        height: auto;
        max-height: 86vh;
        display: block;
        border-radius: 14px;
        box-shadow: 0 12px 32px rgba(0,0,0,.6);
        background: #000;
    }

    .lightbox .meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        margin-top: 8px;
        color: var(--muted);
    }

    .lightbox .caption {
        color: #e6edf6;
        font-size: .98rem;
    }

    .lightbox button {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(255,255,255,.08);
        border: 1px solid rgba(255,255,255,.12);
        color: var(--text);
        width: 46px;
        height: 46px;
        border-radius: 12px;
        cursor: pointer;
    }

        .lightbox button:hover {
            background: rgba(255,255,255,.14);
        }

    .lightbox .prev {
        left: -64px;
    }

    .lightbox .next {
        right: -64px;
    }

    .lightbox .close {
        top: -52px;
        right: 0;
        transform: none;
        width: auto;
        height: auto;
        padding: 10px 12px;
    }

@media (max-width: 900px) {
    .lightbox .prev {
        left: 6px;
    }

    .lightbox .next {
        right: 6px;
    }

    .lightbox .close {
        right: 6px;
        top: 6px;
    }
}