/* =========================================================
   KEY! | EXPEDITIONS-CAROUSEL.CSS
   Archivo de expediciones — versión corregida / premium
========================================================= */

.expeditions-carousel {
    --ec-card-w: min(720px, 64vw);
    --ec-card-h: 500px;
    --ec-gap: 34px;
    --ec-ease: cubic-bezier(0.16, 1, 0.3, 1);

    position: relative;
    margin-top: 0.9rem;

    -webkit-tap-highlight-color: transparent;
    outline: none;
}

.expeditions-carousel:focus-visible {
    outline: 2px solid var(--theme-accent, var(--color-primary));
    outline-offset: 9px;
    border-radius: var(--radius-xl);
}


/* =========================================================
   VIEWPORT
========================================================= */

.expeditions-carousel__viewport {
    position: relative;

    min-height: calc(var(--ec-card-h) + 84px);

    overflow: hidden;

    padding: 2.7rem 0 2.5rem;

    mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            #000 4%,
            #000 96%,
            transparent 100%
        );

    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            #000 4%,
            #000 96%,
            transparent 100%
        );
}


/* Luz ambiental detrás de la tarjeta activa */

.expeditions-carousel__viewport::before {
    content: "";

    position: absolute;

    width: min(680px, 70vw);
    height: 390px;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    pointer-events: none;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(
                var(--theme-accent-rgb, 140, 255, 63),
                0.10
            ),
            transparent 68%
        );

    filter: blur(18px);
}


/* =========================================================
   TRACK
========================================================= */

.expeditions-carousel__track {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;

    gap: var(--ec-gap);

    list-style: none;

    margin: 0;
    padding: 0;

    /*
     * El primer slide comienza en el centro del viewport.
     * JS resta después la mitad del ancho de la tarjeta.
     */
    padding-left: 50%;
    padding-right: 50%;

    will-change: transform;

    cursor: grab;
    touch-action: pan-y;
    user-select: none;
}

.expeditions-carousel__track.is-dragging {
    cursor: grabbing;
}

.expeditions-carousel__track.is-animating {
    transition:
        transform
        720ms
        var(--ec-ease);
}


/* =========================================================
   SLIDE
========================================================= */

.expedition-slide {
    position: relative;

    flex:
        0 0
        var(--ec-card-w);

    width:
        var(--ec-card-w);

    height:
        var(--ec-card-h);

    opacity: 0.18;

    filter:
        blur(4px)
        saturate(0.58)
        brightness(0.64);

    transform:
        scale(0.72);

    transform-origin:
        center center;

    pointer-events: none;

    transition:
        transform 720ms var(--ec-ease),
        opacity 720ms var(--ec-ease),
        filter 720ms var(--ec-ease);
}


/*
 * MUY IMPORTANTE:
 * el article tiene que llenar físicamente el <li>.
 * Esta era una de las causas del colapso de las tarjetas.
 */

.expedition-slide > .project-card {
    width: 100%;
    height: 100%;

    margin: 0;

    grid-column: auto;
    grid-row: auto;
}


/* Activa */

.expedition-slide[data-ec-offset="0"] {
    z-index: 4;

    opacity: 1;

    filter:
        blur(0)
        saturate(1)
        brightness(1);

    transform:
        scale(1);

    pointer-events: auto;
}


/* Vecinas */

.expedition-slide[data-ec-offset="-1"],
.expedition-slide[data-ec-offset="1"] {
    z-index: 3;

    opacity: 0.48;

    filter:
        blur(1.3px)
        saturate(0.78)
        brightness(0.76);

    transform:
        scale(0.80);

    pointer-events: auto;
}


.expedition-slide[data-ec-offset="-2"],
.expedition-slide[data-ec-offset="2"] {
    z-index: 2;

    opacity: 0.16;

    transform:
        scale(0.68);
}


.expedition-slide[data-ec-hidden="true"] {
    display: none;
}


/* =========================================================
   CARD
========================================================= */

.expedition-slide .project-card__button {
    position: relative;

    display: block;

    width: 100%;
    height: 100%;
    min-height: 100%;

    padding: 0;

    overflow: hidden;

    border-radius:
        clamp(
            24px,
            2.4vw,
            34px
        );

    border:
        1px solid
        rgba(
            var(--theme-accent-rgb, 140, 255, 63),
            0.12
        );

    background:
        linear-gradient(
            145deg,
            rgba(
                var(--theme-accent-rgb, 140, 255, 63),
                0.045
            ),
            rgba(255,255,255,0.018)
        ),
        var(
            --theme-surface-strong,
            var(--color-surface-strong)
        );

    box-shadow:
        0 28px 70px
        rgba(0,0,0,0.28);

    transform: none;
}


.expedition-slide[data-ec-offset="0"]
.project-card__button {
    box-shadow:
        0 34px 90px
        rgba(0,0,0,0.36),

        0 0 42px
        rgba(
            var(--theme-accent-rgb, 140, 255, 63),
            0.055
        );
}


/* =========================================================
   IMAGEN
========================================================= */

.expedition-slide
.project-card__image,
.expedition-slide
.project-card__overlay {
    position: absolute;
    inset: 0;
}


.expedition-slide
.project-card__image {
    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 43%,
            rgba(
                var(--theme-accent-rgb, 140, 255, 63),
                0.11
            ),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,0.035),
            rgba(0,0,0,0.06)
        );
}


.expedition-slide
.project-card__image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transform:
        translateX(
            var(--ec-parallax, 0px)
        )
        scale(1.10);

    transition:
        transform
        720ms
        var(--ec-ease),

        filter
        720ms
        var(--ec-ease);
}


.expedition-slide[data-ec-offset="0"]
.project-card__image img {
    transform:
        translateX(
            var(--ec-parallax, 0px)
        )
        scale(1.035);
}


.project-card__overlay {
    background:

        linear-gradient(
            180deg,
            rgba(3, 12, 8, 0.02) 20%,
            rgba(3, 12, 8, 0.22) 56%,
            rgba(3, 12, 8, 0.92) 100%
        ),

        linear-gradient(
            90deg,
            rgba(3, 12, 8, 0.34),
            transparent 56%
        );
}


/* =========================================================
   PLACEHOLDER DE IMAGEN FALTANTE
========================================================= */

.ec-project-placeholder {
    position: absolute;
    inset: 0;

    z-index: 1;

    display: grid;
    place-items: center;

    padding: 2rem;

    text-align: center;

    background:

        radial-gradient(
            circle at 50% 42%,
            rgba(
                var(--theme-accent-rgb, 140, 255, 63),
                0.12
            ),
            transparent 30%
        ),

        linear-gradient(
            145deg,
            rgba(
                var(--theme-accent-rgb, 140, 255, 63),
                0.035
            ),
            rgba(255,255,255,0.015)
        );
}


.ec-project-placeholder::before {
    content: "";

    position: absolute;

    width: min(56%, 300px);
    aspect-ratio: 1;

    border-radius: 50%;

    border:
        1px solid
        rgba(
            var(--theme-accent-rgb, 140, 255, 63),
            0.14
        );

    box-shadow:
        0 0 0 24px
        rgba(
            var(--theme-accent-rgb, 140, 255, 63),
            0.018
        ),

        0 0 0 52px
        rgba(
            var(--theme-accent-rgb, 140, 255, 63),
            0.010
        );
}


.ec-project-placeholder__inner {
    position: relative;
    z-index: 2;

    display: grid;
    justify-items: center;

    gap: 0.7rem;

    max-width: 300px;
}


.ec-project-placeholder__icon {
    display: grid;
    place-items: center;

    width: 68px;
    height: 68px;

    border-radius: 50%;

    color:
        var(
            --theme-accent,
            var(--color-primary)
        );

    background:
        rgba(
            var(--theme-accent-rgb, 140, 255, 63),
            0.10
        );

    border:
        1px solid
        rgba(
            var(--theme-accent-rgb, 140, 255, 63),
            0.18
        );

    font-size: 1.25rem;
}


.ec-project-placeholder__code {
    color:
        var(
            --theme-accent,
            var(--color-primary)
        );

    font-family:
        var(--font-display);

    font-size:
        0.72rem;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;
}


.ec-project-placeholder strong {
    color: #ffffff;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            1.4rem,
            3vw,
            2.2rem
        );

    line-height: 0.95;

    text-transform:
        uppercase;
}


.ec-project-placeholder small {
    color:
        var(
            --theme-text-muted,
            var(--color-text-muted)
        );

    line-height: 1.5;
}


.expedition-slide.has-missing-image
.project-card__image img {
    display: none;
}


/* =========================================================
   INFORMACIÓN
========================================================= */

.expedition-slide
.project-card__information {
    left: 1.45rem;
    right: 1.45rem;
    bottom: 1.45rem;

    z-index: 5;

    align-items: end;
}


.expedition-slide
.project-card__code {
    margin-bottom: 0.42rem;

    color:
        var(
            --theme-accent,
            var(--color-primary)
        );

    font-size: 0.76rem;
}


.expedition-slide
.project-card__information h3 {
    max-width: 520px;

    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            1.85rem,
            3.4vw,
            3.15rem
        );

    line-height: 0.9;
}


.expedition-slide
.project-card__category {
    flex-shrink: 0;

    color: #ffffff;

    background:
        rgba(
            4,
            15,
            10,
            0.68
        );

    border:
        1px solid
        rgba(255,255,255,0.08);

    backdrop-filter:
        blur(12px);
}


.expedition-slide
.project-card__open {
    z-index: 7;

    width: 46px;
    height: 46px;

    top: 1.2rem;
    right: 1.2rem;

    color: #ffffff;

    border:
        1px solid
        rgba(255,255,255,0.09);

    background:
        rgba(
            4,
            15,
            10,
            0.66
        );

    backdrop-filter:
        blur(10px);

    transition:
        transform
        var(--transition-fast),

        background
        var(--transition-fast);
}


.expedition-slide[data-ec-offset="0"]
.project-card__button:hover
.project-card__open {
    transform:
        rotate(90deg);

    color:
        var(
            --theme-button-text,
            #06210e
        );

    background:
        var(
            --theme-accent,
            var(--color-primary)
        );
}


/* =========================================================
   TILT — SOLO DESKTOP
========================================================= */

@media
(hover: hover)
and
(pointer: fine) {

    .expedition-slide[data-ec-offset="0"]
    .project-card__button {
        transition:
            transform
            320ms
            var(--ec-ease),

            box-shadow
            320ms
            var(--ec-ease);
    }


    .expedition-slide[data-ec-offset="0"]:hover
    .project-card__button {
        transform:
            perspective(1100px)

            rotateX(
                var(--ec-tilt-x, 0deg)
            )

            rotateY(
                var(--ec-tilt-y, 0deg)
            )

            translateY(-7px)

            scale(1.012);
    }

}


/* =========================================================
   NAVEGACIÓN
========================================================= */

.expeditions-carousel__nav {
    position: relative;
    z-index: 4;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 1.25rem;

    margin-top: 0.35rem;
}


.ec-arrow {
    display: grid;
    place-items: center;

    width: 52px;
    height: 52px;

    flex-shrink: 0;

    padding: 0;

    border-radius: 50%;

    border:
        1px solid
        var(
            --theme-border,
            var(--color-border-strong)
        );

    background:
        rgba(255,255,255,0.03);

    color:
        var(
            --theme-text,
            var(--color-text)
        );

    cursor: pointer;

    transition:
        transform
        var(--transition-fast),

        background
        var(--transition-fast),

        border-color
        var(--transition-fast),

        color
        var(--transition-fast);
}


.ec-arrow:hover:not(:disabled) {
    transform:
        translateY(-3px);

    color:
        var(
            --theme-button-text,
            #06210e
        );

    border-color:
        var(
            --theme-accent,
            var(--color-primary)
        );

    background:
        var(
            --theme-accent,
            var(--color-primary)
        );
}


.ec-arrow:disabled {
    opacity: 0.28;
    cursor: not-allowed;
}


.expeditions-carousel__progress {
    display: flex;
    align-items: center;

    gap: 0.8rem;

    min-width: 225px;

    font-family:
        var(--font-display);

    letter-spacing:
        0.06em;
}


.ec-counter {
    color:
        var(
            --theme-text-muted,
            var(--color-text-muted)
        );

    font-size: 0.98rem;

    font-variant-numeric:
        tabular-nums;
}


.ec-counter--current {
    color:
        var(
            --theme-accent,
            var(--color-primary)
        );

    font-size: 1.25rem;
}


.ec-progress-bar {
    position: relative;

    flex: 1;

    height: 3px;

    overflow: hidden;

    border-radius: 999px;

    background:
        rgba(255,255,255,0.10);
}


.ec-progress-bar__fill {
    position: absolute;
    inset: 0;

    width: 0%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            var(
                --theme-accent,
                var(--color-primary)
            ),
            var(
                --theme-accent-2,
                var(--color-secondary)
            )
        );

    transition:
        width
        620ms
        var(--ec-ease);

    box-shadow:
        0 0 14px
        rgba(
            var(--theme-accent-rgb, 140, 255, 63),
            0.50
        );
}


/* =========================================================
   FILTROS — RESPETAN EL BIOMA
========================================================= */

.projects
.project-filter:hover,

.projects
.project-filter.is-active {
    color: #ffffff;

    border-color:
        rgba(
            var(--theme-accent-rgb, 140, 255, 63),
            0.25
        );

    background:
        rgba(
            var(--theme-accent-rgb, 140, 255, 63),
            0.10
        );

    box-shadow:
        0 8px 24px
        rgba(
            var(--theme-accent-rgb, 140, 255, 63),
            0.05
        );
}


/* =========================================================
   FOOTER DE LA SECCIÓN
========================================================= */

.projects__footer {
    margin-top: 2.2rem;
}


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

@media (max-width: 1100px) {

    .expeditions-carousel {
        --ec-card-w: min(650px, 72vw);
        --ec-card-h: 460px;
        --ec-gap: 25px;
    }

}


@media (max-width: 780px) {

    .expeditions-carousel {
        --ec-card-w:
            min(
                86vw,
                570px
            );

        --ec-card-h:
            430px;

        --ec-gap:
            16px;
    }


    .expeditions-carousel__viewport {
        min-height:
            calc(
                var(--ec-card-h)
                + 60px
            );

        padding:
            2rem 0
            1.8rem;
    }


    .expedition-slide[data-ec-offset="-2"],
    .expedition-slide[data-ec-offset="2"] {
        opacity: 0;
    }


    .expedition-slide
    .project-card__information {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;

        flex-direction: column;
        align-items: flex-start;
    }


    .expedition-slide
    .project-card__category {
        font-size: 0.74rem;
    }


    .ec-arrow {
        width: 45px;
        height: 45px;
    }


    .expeditions-carousel__progress {
        min-width: 150px;
    }

}


@media (max-width: 520px) {

    .expeditions-carousel {
        --ec-card-w:
            calc(
                100vw
                - 2.7rem
            );

        --ec-card-h:
            390px;

        --ec-gap:
            11px;
    }


    .expeditions-carousel__viewport {
        overflow: visible;

        mask-image: none;
        -webkit-mask-image: none;
    }


    .expedition-slide {
        opacity: 0;
        transform: scale(0.94);
    }


    .expedition-slide[data-ec-offset="0"] {
        opacity: 1;
        transform: scale(1);
    }


    .expedition-slide[data-ec-offset="-1"],
    .expedition-slide[data-ec-offset="1"] {
        opacity: 0.12;
        pointer-events: none;
    }


    .expeditions-carousel__nav {
        gap: 0.7rem;
    }


    .expeditions-carousel__progress {
        min-width: 120px;
        gap: 0.55rem;
    }


    .expedition-slide
    .project-card__information h3 {
        font-size: 1.75rem;
    }

}


/* =========================================================
   REDUCE MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .expeditions-carousel__track.is-animating,
    .expedition-slide,
    .ec-progress-bar__fill,
    .expedition-slide
    .project-card__image img {

        transition-duration:
            1ms !important;

    }

}