/* =========================================================
   SISTEMA BASE DE PASOS
   Mobile first
   ========================================================= */

.step {
    position: relative;
    isolation: isolate;

    width: 100%;

    overflow: hidden;

    color: var(--color-white);
    background-color: var(--gradient-steps-wave);
}

.step__content {
    position: relative;
    z-index: 1;

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

.step__number,
.step__eyebrow,
.step__title,
.step__description {
    font-family: var(--font-display);
    font-style: italic;
}


/* =========================================================
   PASO 1
   ========================================================= */

.step--one {
    position: relative;
    z-index: 2;

    min-height: 20.75rem;
    margin-top: -4rem;

    overflow: hidden;

    background-color: var(--gradient-steps-wave);
}

.step--one .step__ticket {
    bottom: -3.5rem;
}


/* =========================================================
   FONDO MORADO CURVO
   ========================================================= */

.step--one::before {
    content: "";

    position: absolute;
    top: -3.5rem;
    left: -18%;
    z-index: -1;

    width: 136%;
    height: 15.75rem;

    background-color: #702a91;
    border-radius: 0 0 50% 50% / 0 0 28% 28%;

    transform: rotate(-8deg);
    transform-origin: center bottom;

    pointer-events: none;
}


/* =========================================================
   NÚMERO
   ========================================================= */

.step--one .step__number {
    position: absolute;
    top: 1.7rem;
    left: 0.65rem;

    color: var(--color-green);

    font-size: clamp(4rem, 19vw, 5rem);
    font-weight: 900;
    line-height: 0.8;
}


/* =========================================================
   TEXTO
   ========================================================= */

.step--one .step__copy {
    position: relative;
    z-index: 3;

    width: calc(100% - 3.15rem);
    padding-top: 1.15rem;
    margin-left: 4.15rem;
}

.step--one .step__title {
    margin-top: -0.15rem;

    font-size: clamp(4.1rem, 20.5vw, 5.4rem);
    font-weight: 900;
    line-height: 0.82;
    letter-spacing: -0.045em;
    text-transform: uppercase;
}

.step--one .step__description {
    margin-top: 0.2rem;

    font-size: clamp(1.45rem, 7vw, 1.9rem);
    font-weight: 800;
    line-height: 0.95;
}

.step--one .step__eyebrow {
    font-size: clamp(1.55rem, 7.2vw, 2rem);
    font-weight: 800;
    line-height: 1;
}
.step--one .step__description strong {
    font-weight: 900;
}

.step--one .step__description span {
    display: block;
}


/* =========================================================
   TICKET + CÁMARA
   ========================================================= */

.step--one .step__visual {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 3;

    width: clamp(9rem, 43vw, 11rem);
    height: 15.5rem;

    pointer-events: none;
}

.step--one .step__ticket-mask {
    position: absolute;
    right: 0.7rem;
    bottom: 0;

    width: clamp(7.5rem, 35vw, 9.25rem);
    height: 15.5rem;

    overflow: hidden;
}

.step--one .step__ticket {
    position: absolute;
    right: 0;
    bottom: -3.25rem;

    width: 100%;
    max-width: none;
    height: auto;
}

/* =========================================================
   PASO 2
   ========================================================= */

.step--two {
    position: relative;
    z-index: 4;

    min-height: 20rem;
    margin-top: -1.5rem;

    overflow: visible;

    background-color: var(--gradient-steps-wave);
}

.step--two .step__camera--one {
    position: absolute;
    top: -3rem;
    right: 0.15rem;
    z-index: 5;

    width: clamp(3.8rem, 18vw, 4.75rem);
    max-width: none;
    height: auto;

    pointer-events: none;
}


/* Fondo morado y curva inferior */
.step--two::before {
    content: "";

    position: absolute;
    top: 0;
    left: -15%;
    z-index: -1;

    width: 130%;
    height: 12.5rem;

    background-color: #702a91;
    border-radius: 0 0 50% 50% / 0 0 50% 50%;

    pointer-events: none;
}


/* Número verde */
.step--two .step__number {
    position: absolute;
    top: 1.6rem;
    left: 0.6rem;

    color: var(--color-green);

    font-size: clamp(4rem, 19vw, 5rem);
    font-weight: 900;
    line-height: 0.8;
}


/* Contenedor de texto */
.step--two .step__copy {
    position: relative;
    z-index: 2;
    padding-top: 1.2rem;
}


/* “SUBE TU TICKET” */
.step--two .step__title {
    font-size: clamp(3.6rem, 17vw, 4.8rem);
    font-weight: 900;
    line-height: 0.78;
    letter-spacing: -0.035em;
    text-transform: uppercase;
}


.step--two .step__title span {
    display: block;
}


/* “a nuestra app” */
.step--two .step__description {
    display: flex;
    align-items: center;
    gap: 0.4rem;

    padding-right: 1rem;

    font-size: clamp(1.55rem, 7.5vw, 2rem);
    font-weight: 800;
    line-height: 1;
}


/* Logo pequeño de Merco Más */
.step--two .step__inline-app-logo {
    display: inline-block;

    width: clamp(2.75rem, 13vw, 3.6rem);
    height: auto;

    transform: translateY(-0.1rem);
}

/* =========================================================
   PASO 3
   ========================================================= */

.step--three {
    position: relative;
    z-index: 6;

    min-height: 20rem;
    margin-top: -1.25rem;

    overflow: visible;

    background-color: var(--gradient-steps-wave);
}

.step--three::before {
    content: "";

    position: absolute;
    top: 0;
    left: -13%;
    z-index: -1;

    width: 130%;
    height: 11rem;

    background-color: #702a91;
    border-radius: 0 0 50% 50% / 0 0 70% 80%;

    pointer-events: none;
}

.step--three .step__number {
    position: absolute;
    top: 1.7rem;
    left: 0.6rem;

    color: var(--color-green);

    font-size: clamp(4rem, 19vw, 5rem);
    font-weight: 900;
    line-height: 0.8;
}

.step--three .step__copy {
    position: relative;
    z-index: 3;

    width: calc(100% - 3.4rem);
    padding-top: 1.45rem;
    margin-left: 3.4rem;
}

.step--three .step__title {
    font-size: clamp(3.65rem, 17vw, 4.9rem);
    font-weight: 900;
    line-height: 0.85;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.step--three .step__description {
    margin-top: 0.25rem;
    padding-right: 0.4rem;

    font-size: clamp(1.3rem, 6vw, 1.7rem);
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.step--three .step__visual--tickets {
    position: absolute;
    right: 0.65rem;
    bottom: -4rem;
    z-index: 2;

    width: clamp(10rem, 52vw, 14rem);

    pointer-events: none;
}

.step--three .step__tickets {
    width: 100%;
    max-width: none;
    height: auto;
}

.step--three .step__visual--stars {
    position: absolute;
    top: -7rem;
    right: 0.8rem;
    z-index: 5;

    width: clamp(8rem, 50vw, 11rem);

    pointer-events: none;
}

.step--three .step__stars {
    width: 100%;
    max-width: none;
    height: auto;
}

.step__stars--mobile {
    display: block;
}

.step__stars--desktop {
    display: none;
}

/* =========================================================
   PASO 4
   ========================================================= */

.step--four {
    position: relative;
    z-index: 8;

    min-height: 18rem;
    margin-top: -1.25rem;

    overflow: hidden;

    background-color: var(--gradient-steps-wave);
}

.step--four::before {
    content: "";

    position: absolute;
    top: 0;
    left: -8%;
    z-index: -1;

    width: 130%;
    height: 11rem;

    background-color: #702a91;
    border-radius: 0 0 50% 50% / 0 0 70% 40%;

    pointer-events: none;
}

.step--four .step__number {
    position: absolute;
    top: 1.75rem;
    left: 0.6rem;

    color: var(--color-green);

    font-size: clamp(4rem, 19vw, 5rem);
    font-weight: 900;
    line-height: 0.8;
}

.step--four .step__copy {
    position: relative;
    z-index: 3;

    width: calc(100% - 3.4rem);
    padding-top: 1.45rem;
    margin-left: 3.4rem;
}

.step--four .step__title {
    font-size: clamp(4rem, 19vw, 5.25rem);
    font-weight: 900;
    line-height: 0.82;
    letter-spacing: -0.04em;
    text-transform: uppercase;
}

.step--four .step__description {
    margin-top: 0.3rem;
    padding-right: 0.5rem;

    font-size: clamp(1.4rem, 6.5vw, 1.8rem);
    font-weight: 800;
    line-height: 0.95;
}

.step--four .step__description span {
    display: block;
}

/* =========================================================
   LOGOS DEL PASO 4
   ========================================================= */

.step--four .step__sponsors {
    position: absolute;
    right: 1.25rem;
    bottom: 1.8rem;
    left: 1.25rem;
    z-index: 3;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 0.75fr)
        minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
}

.step--four .step__sponsor {
    justify-self: center;

    width: 100%;
    height: auto;
    max-height: 3.4rem;

    object-fit: contain;
}

.step--four .step__sponsor--nescafe {
    max-width: 6.5rem;
}

.step--four .step__sponsor--gamesa {
    max-width: 4.25rem;
}

.step--four .step__sponsor--tribus {
    max-width: 5.25rem;
}



.step--two .step__title,
.step--three .step__title,
.step--four .step__title {
    letter-spacing: 0.005em;
}

.step--two .step__copy,
.step--three .step__copy,
.step--four .step__copy {
    width: calc(100% - 3.4rem);
    margin-left: 4.18rem;
}

.step__cart-desktop {
    display: none;
}

/* =========================================================
   HERO DESKTOP
   Desde 1024px
   ========================================================= */

@media (min-width: 64rem) {
    
    .step--one {
        position: relative;

        min-height: clamp(29rem, 35vw, 34rem);
        margin-top: -8rem;

        overflow: visible;

        background: #702a91;
    }
    

    .step--one::before {
        content: "";

        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;

        width: 100%;
        height: 100%;

        background-image:
            url("../../public/images/steps/onda1desktop.png");
        background-repeat: no-repeat;
        background-position: top left;
        background-size: 100% 100%;

        border-radius: 0;
        transform: none;

        pointer-events: none;
    }

    .hero__cart-wrapper {
        display: none;
    }
    
    .step--one, .step--two, .step--three, .step--four {
        background: var(--gradient-steps-wave-desktop);
    }

    .step__cart-desktop {
        position: absolute;
        top: -6.5rem;
        right: clamp(5rem, 11vw, 13rem);
        z-index: 5;

        display: block;

        width: clamp(19rem, 25vw, 24rem);
        max-width: none;
        height: auto;

        pointer-events: none;
    }

    .step--one .step__number {
        left: clamp(9rem, 4vw, 15rem);
        top: 4rem;
    }

    .step--one .step__copy {
        width: min(34rem, 40vw);
        margin-left: clamp(15rem, 8vw, 10rem);
        padding-top: 3.5rem;
    }

    .step--one .step__number {
        font-size: clamp(8rem, 8vw, 6.5rem);
    }

    .step--one .step__eyebrow {
        font-size: clamp(4rem, 7.2vw, 2rem);
    }

    .step--one .step__title{
        font-size: clamp(7rem, 7.2vw, 2rem);
    }

    .step--one .step__description {
        font-size: clamp(1.25rem, 7.2vw, 2.5rem);
    }

    /* =========================================================
   STEP 2 DESKTOP
   Desde 1024px
   ========================================================= */
   
    .step--one .step__visual--ticket {
        position: absolute;
        top: calc(100% - 2.5rem);
        right: auto;
        bottom: auto;
        left: clamp(10rem, 14vw, 16rem);
        z-index: 4;

        width: clamp(18rem, 23vw, 22rem);
        height: 32rem;

        pointer-events: none;
    }

    .step--one .step__ticket-mask {
        position: absolute;
        top: 0;
        right: auto;
        bottom: auto;
        left: 0;

        width: 100%;
        height: 32rem;

        overflow: hidden;
    }

    .step--one .step__ticket {
        position: absolute;
        top: 0;
        right: auto;
        bottom: auto;
        left: 0;

        width: 100%;
        max-width: none;
        height: auto;
    }

    .step--two {
        position: relative;
        z-index: auto;

        min-height: clamp(30rem, 36vw, 35rem);
        margin-top: 0;

        overflow: visible;

        background: #702a91;
    }

    .step--two::before {
        content: "";

        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;

        width: 100%;
        height: 100%;

        background-image:
            url("../../public/images/steps/onda2desktop.png");
        background-repeat: no-repeat;
        background-position: top left;
        background-size: 100% 100%;

        border-radius: 0;
        transform: none;

        pointer-events: none;
    }

    .step--two .step__content {
        position: relative;
        z-index: 2;
    }

    .step--two .step__camera--one {
        display: none;
    }

    /* Número 2 */
    .step--two .step__number {
        top: 6rem;
        left: 55vw;

        font-size: clamp(7rem, 8vw, 8.5rem);
        line-height: 0.8;
    }

    /* SUBE TU TICKET */
    .step--two .step__copy {
        width: min(40rem, 38vw);
        padding-top: 5.5rem;
        margin-left: 60vw;
    }

    .step--two .step__title {
        font-size: clamp(6.25rem, 7.2vw, 8rem);
        line-height: 0.78;
    }

    .step--two .step__description {
        margin-top: 0.75rem;

        font-size: clamp(2.25rem, 2.8vw, 3rem);
    }


    /* =====================================================
       PASO 3
       Bajo izquierda → alto derecha
       ===================================================== */

    .step--three {
        position: relative;
        z-index: auto;

        min-height: clamp(29rem, 34vw, 33rem);
        margin-top: 0;

        isolation: auto;
        overflow: visible;

        background: #702a91;
    }

    .step--three::before {
        content: "";

        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;

        width: 100%;
        height: 100%;

        background-image:
            url("../../public/images/steps/onda3desktop.png");
        background-repeat: no-repeat;
        background-position: top left;
        background-size: 100% 100%;

        border-radius: 0;
        transform: none;

        pointer-events: none;
    }

    .step__stars--mobile {
        display: none;
    }

    .step__stars--desktop {
        display: block;

        width: 100%;
        max-width: none;
        height: auto;
    }

    .step--three .step__content {
        position: relative;
        z-index: 2;
    }

    /* Número 3 */
    .step--three .step__number {
        position: absolute;
        top: 5rem;
        left: clamp(6rem, 8vw, 10rem);
        z-index: 3;

        font-size: clamp(7rem, 8vw, 8.5rem);
        line-height: 0.8;
    }

    /* Bloque de texto */
    .step--three .step__copy {
        position: relative;
        z-index: 3;

        width: min(38rem, 42vw);
        padding-top: 4.5rem;
        margin-left: clamp(14rem, 17vw, 21rem);
    }

    .step--three .step__title {
        font-size: clamp(6.25rem, 7.2vw, 8rem);
        line-height: 0.78;
        letter-spacing: 0.005em;
    }

    .step--three .step__description {
        margin-top: 0.75rem;
        padding-right: 0;

        font-size: clamp(2.25rem, 2.8vw, 3rem);
        line-height: 1;
        white-space: normal;
    }

    .step--three .step__visual--stars {
        position: absolute;
        top: -2rem;
        right: clamp(7rem, 11vw, 14rem);
        left: auto;
        z-index: 4;

        width: clamp(22rem, 24vw, 28rem);
    }



    /* =====================================================
       PASO 4
       Alto izquierda → bajo derecha
       ===================================================== */

    .step--three .step__visual--tickets {
        position: absolute;
        top: calc(100% - 3rem);
        right: auto;
        bottom: auto;
        left: clamp(8rem, 12vw, 16rem);
        z-index: 5;

        width: clamp(32rem, 27vw, 29rem);

        pointer-events: none;
    }

    .step--three .step__tickets {
        display: block;

        width: 100%;
        max-width: none;
        height: auto;
    }


    .step--four {
        position: relative;
        z-index: auto;

        min-height: clamp(38rem, 45vw, 46rem);
        margin-top: 0;

        overflow: hidden;

        background: #702a91;
    }

    .step--four::before {
        content: "";

        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;

        width: 100%;
        height: 100%;

        background-image:
            url("../../public/images/steps/onda4desktop.png");
        background-repeat: no-repeat;
        background-position: top left;
        background-size: 100% 100%;

        border-radius: 0;
        transform: none;

        pointer-events: none;
    }

    .step--four .step__content {
        position: relative;
        z-index: 2;
    }

    /* Número 4 */
    .step--four .step__number {
        position: absolute;
        top: 5rem;
        left: 55vw;
        z-index: 3;

        font-size: clamp(7rem, 8vw, 8.5rem);
        line-height: 0.8;
    }

    /* Texto del paso 4 */
    .step--four .step__copy {
        position: relative;
        z-index: 3;

        width: min(34rem, 31vw);
        padding-top: 4.5rem;
        margin-left: 63vw;
    }

    .step--four .step__title {
        font-size: clamp(6.25rem, 7.2vw, 8rem);
        line-height: 0.78;
        letter-spacing: 0.005em;
    }

    .step--four .step__description {
        margin-top: 0.75rem;
        padding-right: 0;

        font-size: clamp(2.25rem, 2.8vw, 3rem);
        line-height: 1;
    }

    .step--four .step__sponsors {
        position: absolute;
        right: 14%;
        bottom: 3.5rem;
        left: 14%;
        z-index: 4;

        display: grid;
        grid-template-columns:
            minmax(0, 1.15fr)
            minmax(0, 0.8fr)
            minmax(0, 1fr);
        align-items: center;
        gap: clamp(3rem, 6vw, 7rem);
    }

    .step--four .step__sponsor {
        justify-self: center;

        width: 100%;
        max-width: none;
        height: auto;
        max-height: 8rem;

        object-fit: contain;
    }

    .step--four .step__sponsor--nescafe {
        max-width: clamp(13rem, 18vw, 19rem);
    }

    .step--four .step__sponsor--gamesa {
        max-width: clamp(10rem, 12vw, 13rem);
    }

    .step--four .step__sponsor--tribus {
        max-width: clamp(12rem, 16vw, 17rem);
    }


}