/* =========================================================
   HERO
   Mobile first
   ========================================================= */

.hero {
    position: relative;
    isolation: isolate;

    min-height: 47rem;
    padding: 1.4rem 0 0;

    overflow: hidden;

    color: var(--color-white);

    background-image: var(--gradient-hero);

}


/* =========================================================
   CONFETI
   ========================================================= */

.hero__confetti {
    position: absolute;
    inset: 0;
    z-index: -1;

    width: 100%;
    height: 100%;

    object-fit: fill;

    pointer-events: none;
    user-select: none;
}

.hero {
    position: relative;
    overflow: hidden;
}

.hero__confetti-canvas {
    position: absolute;
    inset: 0;
    z-index: 10;

    display: block;

    width: 100%;
    height: 100%;

    pointer-events: none;
}


/* =========================================================
   TÍTULO PRINCIPAL
   ========================================================= */

.hero__headline {
    position: relative;
    isolation: isolate;

    display: grid;
    grid-template-columns:
        clamp(2rem, 12vw, 3.5rem)
        minmax(0, 1fr)
        clamp(2rem, 12vw, 3.5rem);
    align-items: center;

    width: 100%;
    min-height: 7.25rem;
    padding: 1.1rem 0.35rem;

    background: var(--gradient-purple-highlight);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.hero__title {
    font-family: var(--font-display);
    font-size: clamp(2.15rem, 9.5vw, 3rem);
    font-style: italic;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    text-align: center;
    text-transform: uppercase;
}

.hero__title span {
    display: block;
    white-space: nowrap;
}

.hero__burst {
    width: 100%;
    height: auto;

    pointer-events: none;
    user-select: none;
}

.hero__burst--left {
    justify-self: end;
}

.hero__burst--right {
    justify-self: start;
}


/* =========================================================
   PREVIA + LOGO
   ========================================================= */

.hero__campaign {
    position: relative;

    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(8rem, 1.1fr);
    align-items: center;

    width: min(100% - 1.5rem, 32rem);
    min-height: 11rem;
    margin: 0 auto;
    padding: 0.8rem 0.25rem 0.25rem;
}

.hero__pretitle {
    justify-self: end;

    font-family: var(--font-display);
    font-size: clamp(1.8rem, 8.5vw, 2.9rem);
    font-style: italic;
    font-weight: 600;
    line-height: 0.9;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    white-space: nowrap;
}

.hero__pretitle {
    position: relative;
    isolation: isolate;
    z-index: 1;

    justify-self: stretch;

    padding: 0.85rem 1rem;

    text-align: right;
}

.hero__pretitle::before {
    content: "";

    position: absolute;
    top: 50%;
    right: -1.5rem;
    z-index: -1;

    width: calc(100% + 3rem);
    height: 100%;

    background: var(--gradient-purple-highlight);

    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);

    transform: translateY(-50%);

    pointer-events: none;
}

.hero__campaign-logo {
    justify-self: center;

    width: clamp(8.25rem, 39vw, 12rem);
    height: auto;
}


/* =========================================================
   TELÉFONO + APP
   ========================================================= */

.hero__promotion {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: center;

    width: min(100%, 32rem);
    min-height: 19rem;
    margin-inline: auto;
    padding: 0 0.7rem;
}

.hero__lower-background {
    position: absolute;
    right: -25%;
    bottom: -8rem;
    left: -25%;
    z-index: -2;

    height: 31rem;

    background-color: #881c8a;
    background-image: var(--gradient-wave);
    border-radius: 50% 50% 0 0 / 32% 32% 0 0;

    pointer-events: none;
}

.hero__phone-column {
    position: relative;

    align-self: stretch;
}

.hero__phone {
    position: absolute;
    top: -2.75rem;
    left: -2rem;

    width: 15rem;
    max-width: none;
    height: auto;

    transform-origin: center;
}

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

    display: flex;
    flex-direction: column;
    align-items: center;

    padding-bottom: .25rem;
}

.hero__download-title {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 10vw, 3.4rem);
    text-align: center;
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.hero__download-title span {
    display: block;
}

.hero__app-logo {
    width: clamp(5.75rem, 27vw, 8rem);
    margin-top: 0.8rem;
}


/* =========================================================
   FRANJA DE GANADORES
   ========================================================= */

.hero__winner-banner {
    position: absolute;
    right: 0;
    bottom: 1rem;
    z-index: 2;

    padding: 0.45rem 0.75rem 0.45rem 1rem;

    color: var(--color-white);
    background-color: #ee0b74;

    font-family: var(--font-display);
    font-size: clamp(0.8rem, 3.6vw, 1.15rem);
    font-style: italic;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;

    transform: skewX(-11deg);
    box-shadow: 0 4px 8px rgb(75 0 81 / 22%);
}

.hero__winner-banner > * {
    display: inline-block;
}

.hero__winner-banner strong {
    margin-left: 0.2rem;

    font-size: 1.45em;
    font-weight: 900;
    text-transform: uppercase;
}

.hero__winner-banner,
.hero__winner-banner strong {
    text-shadow: 0 1px 1px rgb(83 0 67 / 20%);
}

.hero__winner-banner > strong,
.hero__winner-banner {
    /* El texto heredará la inclinación general de la franja. */
}


/* =========================================================
   CARRITO
   ========================================================= */

.hero__cart-wrapper {
    display: flex;
    justify-content: flex-end;

    min-height: 9.5rem;
    margin-top: 1rem;
    padding: 0 0.75rem;

    pointer-events: none;
}

.hero__cart {
    align-self: flex-end;

    width: clamp(11rem, 51vw, 16rem);
    height: auto;

    transform: translateY(0.4rem);
}


/* =========================================================
   TELÉFONOS PEQUEÑOS
   ========================================================= */

@media (max-width: 22.5rem) {
    .hero {
        min-height: 43rem;
    }

    .hero__headline {
        grid-template-columns: 2rem minmax(0, 1fr) 2rem;
        min-height: 6.5rem;
    }

    .hero__campaign {
        min-height: 9.5rem;
    }

    .hero__promotion {
        min-height: 17.5rem;
        padding-inline: 0.35rem;
    }

    .hero__cart-wrapper {
        min-height: 8rem;
    }
}


/* =========================================================
   TELÉFONOS GRANDES
   ========================================================= */

@media (min-width: 30rem) and (max-width: 47.99rem) {
    .hero {
        min-height: 53rem;
    }

    .hero__headline {
        min-height: 8.5rem;
    }

    .hero__campaign {
        min-height: 12.5rem;
    }

    .hero__promotion {
        min-height: 21rem;
    }

    .hero__cart-wrapper {
        min-height: 10.5rem;
    }
}

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

@media (min-width: 64rem) {
    .hero {
        min-height: 85rem;
        padding-top: 4rem;
        background: var(--gradient-desktop-darkness);
        overflow: hidden;
    }


    /* =====================================================
       TÍTULO PRINCIPAL
       ===================================================== */

    .hero__headline {
        grid-template-columns:
            clamp(4.5rem, 7vw, 6.5rem)
            minmax(0, 52rem)
            clamp(4.5rem, 7vw, 6.5rem);

        justify-content: center;

        min-height: 10rem;
        padding: 1.5rem 1rem;
    }

    .hero__title {
        font-size: clamp(4rem, 6vw, 4.75rem);
        line-height: 0.92;
        letter-spacing: -0.025em;
    }

    .hero__burst {
        width: clamp(4.5rem, 7vw, 6.5rem);
    }


    /* =====================================================
       PREVIA + LOGO FIESTONONÓN
       ===================================================== */

    .hero__campaign {
        grid-template-columns:
            minmax(0, 0.95fr)
            minmax(16rem, 1.05fr);

        width: min(calc(100% - 4rem), 62rem);
        min-height: 15rem;
        padding: 1rem 1.5rem 0;
    }

    .hero__pretitle {
        padding: 1rem 2rem;

        font-size: clamp(3.3rem, 5vw, 4.5rem);
        line-height: 0.9;
    }

    .hero__pretitle::before {
        right: -2rem;

        width: calc(100% + 4rem);
    }

    .hero__campaign-logo {
        width: clamp(15rem, 25vw, 20rem);
    }


    /* =====================================================
       TELÉFONO + DESCARGA
       ===================================================== */

    .hero__promotion {
        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(0, 1.1fr);

        width: min(calc(100% - 4rem), 62rem);
        min-height: 22rem;
        padding-inline: 1.5rem;
    }

    .hero__phone {
        top: -8rem;
        left: -8rem;

        width: clamp(26rem, 44vw, 32rem);
        max-width: none;
        height: auto;
    }

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

        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: clamp(1rem, 2vw, 2rem);

        padding: 0;

        transform: translateY(2.75rem);
    }

    .hero__download-title {
        font-size: clamp(3.5rem, 5.5vw, 5rem);
        line-height: 0.88;
    }

    .hero__app-logo {
        width: clamp(8.5rem, 14vw, 11rem);
        margin-top: 1rem;
    }


    /* =====================================================
       FRANJA DE GANADORES
       ===================================================== */

    .hero__winner-banner {
        right: 1rem;
        bottom: -2.75rem;

        padding: 0.65rem 1.25rem 0.65rem 1.5rem;

        font-size: clamp(2rem, 1.8vw, 1.5rem);
    }


    /* =====================================================
       ONDA INFERIOR
       ===================================================== */

    .hero__lower-background {
        right: -3%;
        bottom: 8rem;
        left: -3%;

        height: 19rem;

        background-color: #911a87;
        background-image: none;

        border-radius:
            50% 50% 0 0 /
            100% 100% 0 0;
    }

    /* =====================================================
       CARRITO
       ===================================================== */

    .hero__cart-wrapper {
        position: absolute;
        right: clamp(4rem, 10vw, 10rem);
        bottom: -0.5rem;
        z-index: 3;

        display: block;

        min-height: 0;
        margin: 0;
        padding: 0;
    }

    .hero__cart {
        width: clamp(17rem, 26vw, 21rem);

        transform: none;
    }
}