.pantalla-participar {
    background-color: var(--base);
    overflow-x: hidden;
    width: 100%;
    min-width: 375px;
    min-height: 1546px;
    display: flex;
    flex-direction: column;
}

    .pantalla-participar .group {
        position: fixed;
        width: 322px;
        z-index: 3;
    }

    .pantalla-participar .arrow-narrow-left {
        z-index: 2;
        margin-left: 28px;
        width: 22px;
        height: 23px;
        margin-top: 87px;
        display: flex;
    }

    .pantalla-participar .vector {
        flex: 1;
        width: 12.83px;
    }

    .pantalla-participar .div {
        z-index: 1;
        margin-left: -1.5px;
        width: 390px;
        height: 1363px;
        position: relative;
        margin-top: 19px;
    }

    .pantalla-participar .frame {
        display: flex;
        flex-direction: column;
        width: 390px;
        align-items: flex-start;
        gap: 24px;
        padding: 0px 32px;
        position: absolute;
        top: 885px;
        left: 0;
    }

    .pantalla-participar .frame-2 {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .pantalla-participar .line {
        position: relative;
        align-self: stretch;
        width: 100%;
        height: 1px;
    }

    .pantalla-participar .frame-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .pantalla-participar .frame-3 {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 40px;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .pantalla-participar .text-wrapper {
        position: relative;
        width: fit-content;
        margin-top: -1px;
        font-family: var(--h2-font-family);
        font-weight: var(--h2-font-weight);
        color: #ffffff;
        font-size: var(--h2-font-size);
        letter-spacing: var(--h2-letter-spacing);
        line-height: var(--h2-line-height);
        white-space: nowrap;
        font-style: var(--h2-font-style);
    }

    .pantalla-participar .frame-4 {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .pantalla-participar .text-wrapper-2 {
        position: relative;
        width: fit-content;
        margin-top: -1px;
        font-family: var(--body-font-family);
        font-weight: var(--body-font-weight);
        color: #ffffff;
        font-size: var(--body-font-size);
        letter-spacing: var(--body-letter-spacing);
        line-height: var(--body-line-height);
        font-style: var(--body-font-style);
    }

    .pantalla-participar .text-wrapper-3 {
        position: relative;
        width: fit-content;
        font-family: var(--body-font-family);
        font-weight: var(--body-font-weight);
        color: #ffffff;
        font-size: var(--body-font-size);
        letter-spacing: var(--body-letter-spacing);
        line-height: var(--body-line-height);
        font-style: var(--body-font-style);
    }

    .pantalla-participar .text-wrapper-4 {
        position: relative;
        width: fit-content;
        font-family: var(--body-font-family);
        font-weight: var(--body-font-weight);
        color: #e5e5e5;
        font-size: var(--body-font-size);
        letter-spacing: var(--body-letter-spacing);
        line-height: var(--body-line-height);
        font-style: var(--body-font-style);
    }

    .pantalla-participar .img {
        margin-bottom: -1px;
        position: relative;
        align-self: stretch;
        width: 100%;
        height: 1px;
    }

    .pantalla-participar .div-wrapper {
        display: flex;
        align-items: center;
        gap: 40px;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .pantalla-participar .text-wrapper-5 {
        position: relative;
        flex: 1;
        margin-top: -1px;
        font-family: var(--h2-font-family);
        font-weight: var(--h2-font-weight);
        color: #ffffff;
        font-size: var(--h2-font-size);
        letter-spacing: var(--h2-letter-spacing);
        line-height: var(--h2-line-height);
        font-style: var(--h2-font-style);
    }

    .pantalla-participar .frame-5 {
        display: inline-flex;
        flex-direction: column;
        height: 74px;
        align-items: flex-start;
        gap: 5px;
        position: relative;
    }

    .pantalla-participar .frame-6 {
        display: flex;
        width: 326px;
        align-items: center;
        gap: 10px;
        position: relative;
        flex: 0 0 auto;
    }

    .pantalla-participar .text-wrapper-6 {
        position: relative;
        width: 326px;
        margin-top: -1px;
        font-family: var(--h1-font-family);
        font-weight: var(--h1-font-weight);
        color: #ffffff;
        font-size: var(--h1-font-size);
        letter-spacing: var(--h1-letter-spacing);
        line-height: var(--h1-line-height);
        font-style: var(--h1-font-style);
    }

    .pantalla-participar .l-v-de-a-wrapper {
        display: flex;
        flex-direction: column;
        width: 326px;
        align-items: flex-start;
        gap: 16px;
        position: relative;
        flex: 0 0 auto;
    }

    .pantalla-participar .l-v-de-a {
        position: relative;
        width: fit-content;
        margin-top: -1px;
        font-family: var(--small-font-family);
        font-weight: var(--small-font-weight);
        color: #ffffff;
        font-size: var(--small-font-size);
        letter-spacing: var(--small-letter-spacing);
        line-height: var(--small-line-height);
        font-style: var(--small-font-style);
    }

    .pantalla-participar .p {
        position: relative;
        align-self: stretch;
        height: 118px;
        font-family: var(--copyright-font-family);
        font-weight: var(--copyright-font-weight);
        color: #e5e5e5;
        font-size: var(--copyright-font-size);
        letter-spacing: var(--copyright-letter-spacing);
        line-height: var(--copyright-line-height);
        font-style: var(--copyright-font-style);
    }

    .pantalla-participar .input {
        display: flex;
        flex-direction: column;
        width: 323px;
        height: 848px;
        align-items: center;
        padding: 24px;
        position: absolute;
        top: calc(50.00% - 682px);
        left: 34px;
        background-color: #ffffff75;
        border-radius: 12px;
        overflow: hidden;
    }

    .pantalla-participar .ellipse {
        position: absolute;
        top: -119px;
        left: 113px;
        width: 437px;
        height: 409px;
        background-color: #ffffff;
        border-radius: 218.5px / 204.5px;
        filter: blur(65px);
        opacity: 0.97;
    }

    .pantalla-participar .text {
        display: flex;
        flex-direction: column;
        height: 131px;
        align-items: center;
        justify-content: center;
        gap: 12px;
        position: relative;
        align-self: stretch;
        width: 100%;
    }

    .pantalla-participar .text-wrapper-7 {
        position: relative;
        display: flex;
        align-items: center;
        width: fit-content;
        font-family: var(--heading-h1-font-family);
        font-weight: var(--heading-h1-font-weight);
        color: var(--mode-headline);
        font-size: var(--heading-h1-font-size);
        letter-spacing: var(--heading-h1-letter-spacing);
        line-height: var(--heading-h1-line-height);
        white-space: nowrap;
        font-style: var(--heading-h1-font-style);
    }

    .pantalla-participar .text-wrapper-8 {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: stretch;
        height: 51px;
        font-family: "Inter-Medium", Helvetica;
        font-weight: 500;
        color: var(--surface);
        font-size: 12px;
        text-align: center;
        letter-spacing: -0.12px;
        line-height: 16.8px;
    }

    .pantalla-participar .field {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .pantalla-participar .input-field {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        flex: 0 0 auto;
        display: flex;
        position: relative;
        align-self: stretch;
        width: 100%;
    }

    .pantalla-participar .input-area {
        height: 46px;
        align-items: center;
        gap: 10px;
        padding: 27px 14px;
        background-color: #ffffff;
        border-radius: 10px;
        overflow: hidden;
        border: 1px solid;
        border-color: var(--mode-stroke);
        box-shadow: 0px 1px 2px #e4e5e73d;
        display: flex;
        position: relative;
        align-self: stretch;
        width: 100%;
    }

    .pantalla-participar .frame-7 {
        display: flex;
        align-items: center;
        gap: 12px;
        position: relative;
        flex: 1;
        flex-grow: 1;
        margin-top: -14.5px;
        margin-bottom: -14.5px;
    }

    .pantalla-participar .yourname-gmail-com {
        position: relative;
        width: 207px;
        height: 21px;
        margin-top: -1px;
        font-family: var(--body-small-medium-font-family);
        font-weight: var(--body-small-medium-font-weight);
        color: var(--texto-secundario);
        font-size: var(--body-small-medium-font-size);
        letter-spacing: var(--body-small-medium-letter-spacing);
        line-height: var(--body-small-medium-line-height);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        font-style: var(--body-small-medium-font-style);
    }

    .pantalla-participar .input-field-2 {
        display: flex;
        flex-direction: column;
        height: 55px;
        align-items: flex-start;
        gap: 2px;
        position: relative;
        align-self: stretch;
        width: 100%;
    }

    .pantalla-participar .link {
        display: flex;
        height: 20px;
        align-items: center;
        justify-content: space-around;
        gap: 16px;
        position: relative;
        align-self: stretch;
        width: 100%;
    }

    .pantalla-participar .remember {
        display: flex;
        align-items: center;
        gap: 5px;
        position: relative;
        flex: 1;
        flex-grow: 1;
    }

    .pantalla-participar .player-stop {
        position: relative;
        width: 19px;
        height: 19px;
    }

    .pantalla-participar .text-wrapper-9 {
        position: relative;
        width: fit-content;
        font-family: var(--small-font-family);
        font-weight: var(--small-font-weight);
        color: var(--texto-primari);
        font-size: var(--small-font-size);
        text-align: center;
        letter-spacing: var(--small-letter-spacing);
        line-height: var(--small-line-height);
        font-style: var(--small-font-style);
    }

    .pantalla-participar .remember-wrapper {
        display: flex;
        height: 30px;
        align-items: center;
        justify-content: space-around;
        gap: 16px;
        position: relative;
        align-self: stretch;
        width: 100%;
    }

    .pantalla-participar .remember-2 {
        display: flex;
        align-items: flex-start;
        gap: 5px;
        position: relative;
        flex: 1;
        flex-grow: 1;
        margin-top: -1px;
        margin-bottom: -1px;
    }

    .pantalla-participar .text-wrapper-10 {
        position: relative;
        width: 241px;
        margin-top: -1px;
        font-family: var(--small-font-family);
        font-weight: var(--small-font-weight);
        color: var(--texto-primari);
        font-size: var(--small-font-size);
        letter-spacing: var(--small-letter-spacing);
        line-height: var(--small-line-height);
        font-style: var(--small-font-style);
    }

    .pantalla-participar .tiquet {
        display: flex;
        flex-direction: column;
        width: 319px;
        height: 284px;
        align-items: flex-start;
        gap: 16px;
        padding: 21px 21px 11px 25px;
        position: relative;
        margin-left: -22px;
        margin-right: -22px;
        border-radius: var(--brand-radi-xl);
    }

    .pantalla-participar .title-section-title {
        display: flex;
        flex-direction: column;
        height: 15px;
        align-items: flex-start;
        width: 100%;
        position: relative;
        align-self: stretch;
    }

    .pantalla-participar .master-general {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-spacing-smd);
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
        margin-bottom: -33px;
    }

    .pantalla-participar .wrapper {
        display: flex;
        align-items: center;
        gap: var(--spacing-spacing-xs);
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .pantalla-participar .left {
        display: flex;
        flex-direction: column;
        height: 48px;
        align-items: flex-start;
        gap: var(--spacing-spacing-xxxs);
        position: relative;
        flex: 1;
        flex-grow: 1;
    }

    .pantalla-participar .title-section {
        position: relative;
        align-self: stretch;
        margin-top: -1px;
        font-family: var(--heading-h3-font-family);
        font-weight: var(--heading-h3-font-weight);
        color: var(--texto-primari);
        font-size: var(--heading-h3-font-size);
        letter-spacing: var(--heading-h3-letter-spacing);
        line-height: var(--heading-h3-line-height);
        font-style: var(--heading-h3-font-style);
    }

    .pantalla-participar .master-general-wrapper {
        display: flex;
        flex-direction: column;
        height: 25px;
        align-items: flex-start;
        position: relative;
        align-self: stretch;
        width: 100%;
    }

    .pantalla-participar .master-general-2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-spacing-smd);
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
        margin-bottom: -23px;
    }

    .pantalla-participar .title-section-2 {
        margin-top: -1px;
        font-family: var(--copyright-font-family);
        font-weight: var(--copyright-font-weight);
        color: var(--texto-primari);
        font-size: var(--copyright-font-size);
        letter-spacing: var(--copyright-letter-spacing);
        line-height: var(--copyright-line-height);
        position: relative;
        align-self: stretch;
        font-style: var(--copyright-font-style);
    }

    .pantalla-participar .upload-drag-upload {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: var(--spacing-spacing-lg);
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
        background-color: var(--alias-bgcolor-light);
        border-radius: var(--radii-radi-mlg);
    }

    .pantalla-participar .backup {
        position: relative;
        width: 36px;
        height: 36px;
    }

    .pantalla-participar .frame-8 {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .pantalla-participar .text-2 {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        gap: 4px;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .pantalla-participar .drag-your-file-s-or {
        position: relative;
        width: fit-content;
        margin-top: -1px;
        font-family: var(--body-small-font-family);
        font-weight: var(--body-small-font-weight);
        color: var(--alias-textcolor-default);
        font-size: var(--body-small-font-size);
        letter-spacing: var(--body-small-letter-spacing);
        line-height: var(--body-small-line-height);
        white-space: nowrap;
        font-style: var(--body-small-font-style);
    }

    .pantalla-participar .jpg-png-or-svg {
        position: relative;
        align-self: stretch;
        font-family: var(--copyright-font-family);
        font-weight: var(--copyright-font-weight);
        color: var(--texto-secundario);
        font-size: var(--copyright-font-size);
        text-align: center;
        letter-spacing: var(--copyright-letter-spacing);
        line-height: var(--copyright-line-height);
        font-style: var(--copyright-font-style);
    }

    .pantalla-participar .desc {
        position: relative;
        width: 241px;
        height: 13px;
        font-family: var(--copyright-font-family);
        font-weight: var(--copyright-font-weight);
        color: var(--texto-primari);
        font-size: var(--copyright-font-size);
        letter-spacing: var(--copyright-letter-spacing);
        line-height: var(--copyright-line-height);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 0;
        -webkit-box-orient: vertical;
        font-style: var(--copyright-font-style);
    }

    .pantalla-participar .button {
        all: unset;
        box-sizing: border-box;
        display: flex;
        height: 48px;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 10px 24px;
        position: relative;
        align-self: stretch;
        width: 100%;
        background-color: var(--resaltat);
        border-radius: 10px;
        overflow: hidden;
        border: none;
        box-shadow: 0px 0px 0px 1px #585858, 0px 1px 2px #575757;
    }

        .pantalla-participar .button::before {
            content: "";
            position: absolute;
            inset: 0;
            padding: 1px;
            border-radius: 10px;
            background: linear-gradient( 180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100% );
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            z-index: 1;
            pointer-events: none;
        }

    .pantalla-participar .label-text {
        position: relative;
        width: fit-content;
        font-family: var(--bot-n-font-family);
        font-weight: var(--bot-n-font-weight);
        color: var(--base);
        font-size: var(--bot-n-font-size);
        text-align: center;
        letter-spacing: var(--bot-n-letter-spacing);
        line-height: var(--bot-n-line-height);
        white-space: nowrap;
        font-style: var(--bot-n-font-style);
    }
/* =============================================
   ORIGINAL style.css STYLES INJECTED BELOW
   ============================================= */

.pantalla-participar {
    background-color: var(--base);
    overflow-x: hidden;
    width: 100%;
    min-width: 375px;
    min-height: 1546px;
    display: flex;
    flex-direction: column;
}

    .pantalla-participar .group {
        position: fixed;
        width: 322px;
        z-index: 3;
    }

    .pantalla-participar .arrow-narrow-left {
        z-index: 2;
        margin-left: 28px;
        width: 22px;
        height: 23px;
        margin-top: 87px;
        display: flex;
    }

    .pantalla-participar .vector {
        flex: 1;
        width: 12.83px;
    }

    .pantalla-participar .div {
        z-index: 1;
        margin-left: -1.5px;
        width: 390px;
        height: 1363px;
        position: relative;
        margin-top: 19px;
    }

    .pantalla-participar .frame {
        display: flex;
        flex-direction: column;
        width: 390px;
        align-items: flex-start;
        gap: 24px;
        padding: 0px 32px;
        position: absolute;
        top: 885px;
        left: 0;
    }

    .pantalla-participar .frame-2 {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .pantalla-participar .line {
        position: relative;
        align-self: stretch;
        width: 100%;
        height: 1px;
    }

    .pantalla-participar .frame-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .pantalla-participar .frame-3 {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 40px;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .pantalla-participar .text-wrapper {
        position: relative;
        width: fit-content;
        margin-top: -1px;
        font-family: var(--h2-font-family);
        font-weight: var(--h2-font-weight);
        color: #ffffff;
        font-size: var(--h2-font-size);
        letter-spacing: var(--h2-letter-spacing);
        line-height: var(--h2-line-height);
        white-space: nowrap;
        font-style: var(--h2-font-style);
    }

    .pantalla-participar .frame-4 {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .pantalla-participar .text-wrapper-2 {
        position: relative;
        width: fit-content;
        margin-top: -1px;
        font-family: var(--body-font-family);
        font-weight: var(--body-font-weight);
        color: #ffffff;
        font-size: var(--body-font-size);
        letter-spacing: var(--body-letter-spacing);
        line-height: var(--body-line-height);
        font-style: var(--body-font-style);
    }

    .pantalla-participar .text-wrapper-3 {
        position: relative;
        width: fit-content;
        font-family: var(--body-font-family);
        font-weight: var(--body-font-weight);
        color: #ffffff;
        font-size: var(--body-font-size);
        letter-spacing: var(--body-letter-spacing);
        line-height: var(--body-line-height);
        font-style: var(--body-font-style);
    }

    .pantalla-participar .text-wrapper-4 {
        position: relative;
        width: fit-content;
        font-family: var(--body-font-family);
        font-weight: var(--body-font-weight);
        color: #e5e5e5;
        font-size: var(--body-font-size);
        letter-spacing: var(--body-letter-spacing);
        line-height: var(--body-line-height);
        font-style: var(--body-font-style);
    }

    .pantalla-participar .img {
        margin-bottom: -1px;
        position: relative;
        align-self: stretch;
        width: 100%;
        height: 1px;
    }

    .pantalla-participar .div-wrapper {
        display: flex;
        align-items: center;
        gap: 40px;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .pantalla-participar .text-wrapper-5 {
        position: relative;
        flex: 1;
        margin-top: -1px;
        font-family: var(--h2-font-family);
        font-weight: var(--h2-font-weight);
        color: #ffffff;
        font-size: var(--h2-font-size);
        letter-spacing: var(--h2-letter-spacing);
        line-height: var(--h2-line-height);
        font-style: var(--h2-font-style);
    }

    .pantalla-participar .frame-5 {
        display: inline-flex;
        flex-direction: column;
        height: 74px;
        align-items: flex-start;
        gap: 5px;
        position: relative;
    }

    .pantalla-participar .frame-6 {
        display: flex;
        width: 326px;
        align-items: center;
        gap: 10px;
        position: relative;
        flex: 0 0 auto;
    }

    .pantalla-participar .text-wrapper-6 {
        position: relative;
        width: 326px;
        margin-top: -1px;
        font-family: var(--h1-font-family);
        font-weight: var(--h1-font-weight);
        color: #ffffff;
        font-size: var(--h1-font-size);
        letter-spacing: var(--h1-letter-spacing);
        line-height: var(--h1-line-height);
        font-style: var(--h1-font-style);
    }

    .pantalla-participar .l-v-de-a-wrapper {
        display: flex;
        flex-direction: column;
        width: 326px;
        align-items: flex-start;
        gap: 16px;
        position: relative;
        flex: 0 0 auto;
    }

    .pantalla-participar .l-v-de-a {
        position: relative;
        width: fit-content;
        margin-top: -1px;
        font-family: var(--small-font-family);
        font-weight: var(--small-font-weight);
        color: #ffffff;
        font-size: var(--small-font-size);
        letter-spacing: var(--small-letter-spacing);
        line-height: var(--small-line-height);
        font-style: var(--small-font-style);
    }

    .pantalla-participar .p {
        position: relative;
        align-self: stretch;
        height: 118px;
        font-family: var(--copyright-font-family);
        font-weight: var(--copyright-font-weight);
        color: #e5e5e5;
        font-size: var(--copyright-font-size);
        letter-spacing: var(--copyright-letter-spacing);
        line-height: var(--copyright-line-height);
        font-style: var(--copyright-font-style);
    }

    .pantalla-participar .input {
        display: flex;
        flex-direction: column;
        width: 323px;
        height: 848px;
        align-items: center;
        padding: 24px;
        position: absolute;
        top: calc(50.00% - 682px);
        left: 34px;
        background-color: #ffffff75;
        border-radius: 12px;
        overflow: hidden;
    }

    .pantalla-participar .ellipse {
        position: absolute;
        top: -119px;
        left: 113px;
        width: 437px;
        height: 409px;
        background-color: #ffffff;
        border-radius: 218.5px / 204.5px;
        filter: blur(65px);
        opacity: 0.97;
    }

    .pantalla-participar .text {
        display: flex;
        flex-direction: column;
        height: 131px;
        align-items: center;
        justify-content: center;
        gap: 12px;
        position: relative;
        align-self: stretch;
        width: 100%;
    }

    .pantalla-participar .text-wrapper-7 {
        position: relative;
        display: flex;
        align-items: center;
        width: fit-content;
        font-family: var(--heading-h1-font-family);
        font-weight: var(--heading-h1-font-weight);
        color: var(--mode-headline);
        font-size: var(--heading-h1-font-size);
        letter-spacing: var(--heading-h1-letter-spacing);
        line-height: var(--heading-h1-line-height);
        white-space: nowrap;
        font-style: var(--heading-h1-font-style);
        margin: 0;
    }

    .pantalla-participar .text-wrapper-8 {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: stretch;
        height: 51px;
        font-family: "Inter-Medium", Helvetica;
        font-weight: 500;
        color: var(--surface);
        font-size: 12px;
        text-align: center;
        letter-spacing: -0.12px;
        line-height: 16.8px;
        margin: 0;
    }

    .pantalla-participar .field {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .pantalla-participar .input-field {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        flex: 0 0 auto;
        display: flex;
        position: relative;
        align-self: stretch;
        width: 100%;
    }

    .pantalla-participar .input-area {
        height: 46px;
        align-items: center;
        gap: 10px;
        padding: 27px 14px;
        background-color: #ffffff;
        border-radius: 10px;
        overflow: hidden;
        border: 1px solid;
        border-color: var(--mode-stroke);
        box-shadow: 0px 1px 2px #e4e5e73d;
        display: flex;
        position: relative;
        align-self: stretch;
        width: 100%;
    }

    .pantalla-participar .frame-7 {
        display: flex;
        align-items: center;
        gap: 12px;
        position: relative;
        flex: 1;
        flex-grow: 1;
        margin-top: -14.5px;
        margin-bottom: -14.5px;
    }

    .pantalla-participar .yourname-gmail-com {
        position: relative;
        width: 207px;
        height: 21px;
        margin-top: -1px;
        font-family: var(--body-small-medium-font-family);
        font-weight: var(--body-small-medium-font-weight);
        color: var(--texto-secundario);
        font-size: var(--body-small-medium-font-size);
        letter-spacing: var(--body-small-medium-letter-spacing);
        line-height: var(--body-small-medium-line-height);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        font-style: var(--body-small-medium-font-style);
        cursor: pointer;
    }

    /* Hidden native input overlaid on the label placeholder */
    .pantalla-participar .input-native {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        border: none;
        background: transparent;
        cursor: text;
        font-family: var(--body-small-medium-font-family);
        font-size: var(--body-small-medium-font-size);
    }

    /* Hidden file input */
    .pantalla-participar .file-input-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    /* Checkbox hidden but accessible */
    .pantalla-participar .player-stop-checkbox {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .pantalla-participar .input-field-2 {
        display: flex;
        flex-direction: column;
        height: 55px;
        align-items: flex-start;
        gap: 2px;
        position: relative;
        align-self: stretch;
        width: 100%;
    }

    .pantalla-participar .link {
        display: flex;
        height: 20px;
        align-items: center;
        justify-content: space-around;
        gap: 16px;
        position: relative;
        align-self: stretch;
        width: 100%;
    }

    .pantalla-participar .remember {
        display: flex;
        align-items: center;
        gap: 5px;
        position: relative;
        flex: 1;
        flex-grow: 1;
        cursor: pointer;
    }

    .pantalla-participar .player-stop {
        position: relative;
        width: 19px;
        height: 19px;
        flex-shrink: 0;
    }

    .pantalla-participar .text-wrapper-9 {
        position: relative;
        width: fit-content;
        font-family: var(--small-font-family);
        font-weight: var(--small-font-weight);
        color: var(--texto-primari);
        font-size: var(--small-font-size);
        text-align: center;
        letter-spacing: var(--small-letter-spacing);
        line-height: var(--small-line-height);
        font-style: var(--small-font-style);
        margin: 0;
    }

    .pantalla-participar .remember-wrapper {
        display: flex;
        height: 30px;
        align-items: center;
        justify-content: space-around;
        gap: 16px;
        position: relative;
        align-self: stretch;
        width: 100%;
    }

    .pantalla-participar .remember-2 {
        display: flex;
        align-items: flex-start;
        gap: 5px;
        position: relative;
        flex: 1;
        flex-grow: 1;
        margin-top: -1px;
        margin-bottom: -1px;
        cursor: pointer;
    }

    .pantalla-participar .text-wrapper-10 {
        position: relative;
        width: 241px;
        margin-top: -1px;
        font-family: var(--small-font-family);
        font-weight: var(--small-font-weight);
        color: var(--texto-primari);
        font-size: var(--small-font-size);
        letter-spacing: var(--small-letter-spacing);
        line-height: var(--small-line-height);
        font-style: var(--small-font-style);
        margin: 0;
    }

    .pantalla-participar .tiquet {
        display: flex;
        flex-direction: column;
        width: 319px;
        height: 284px;
        align-items: flex-start;
        gap: 16px;
        padding: 21px 21px 11px 25px;
        position: relative;
        margin-left: -22px;
        margin-right: -22px;
        border-radius: var(--brand-radi-xl);
    }

    .pantalla-participar .title-section-title {
        display: flex;
        flex-direction: column;
        height: 15px;
        align-items: flex-start;
        width: 100%;
        position: relative;
        align-self: stretch;
    }

    .pantalla-participar .master-general {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-spacing-smd);
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
        margin-bottom: -33px;
    }

    .pantalla-participar .wrapper {
        display: flex;
        align-items: center;
        gap: var(--spacing-spacing-xs);
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .pantalla-participar .left {
        display: flex;
        flex-direction: column;
        height: 48px;
        align-items: flex-start;
        gap: var(--spacing-spacing-xxxs);
        position: relative;
        flex: 1;
        flex-grow: 1;
    }

    .pantalla-participar .title-section {
        position: relative;
        align-self: stretch;
        margin-top: -1px;
        font-family: var(--heading-h3-font-family);
        font-weight: var(--heading-h3-font-weight);
        color: var(--texto-primari);
        font-size: var(--heading-h3-font-size);
        letter-spacing: var(--heading-h3-letter-spacing);
        line-height: var(--heading-h3-line-height);
        font-style: var(--heading-h3-font-style);
        margin: 0;
    }

    .pantalla-participar .master-general-wrapper {
        display: flex;
        flex-direction: column;
        height: 25px;
        align-items: flex-start;
        position: relative;
        align-self: stretch;
        width: 100%;
    }

    .pantalla-participar .master-general-2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-spacing-smd);
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
        margin-bottom: -23px;
    }

    .pantalla-participar .title-section-2 {
        margin-top: -1px;
        font-family: var(--copyright-font-family);
        font-weight: var(--copyright-font-weight);
        color: var(--texto-primari);
        font-size: var(--copyright-font-size);
        letter-spacing: var(--copyright-letter-spacing);
        line-height: var(--copyright-line-height);
        position: relative;
        align-self: stretch;
        font-style: var(--copyright-font-style);
        margin: 0;
    }

    .pantalla-participar .upload-drag-upload {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: var(--spacing-spacing-lg);
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
        background-color: var(--alias-bgcolor-light);
        border-radius: var(--radii-radi-mlg);
        cursor: pointer;
    }

    .pantalla-participar .backup {
        position: relative;
        width: 36px;
        height: 36px;
    }

    .pantalla-participar .frame-8 {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .pantalla-participar .text-2 {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        gap: 4px;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .pantalla-participar .drag-your-file-s-or {
        position: relative;
        width: fit-content;
        margin-top: -1px;
        font-family: var(--body-small-font-family);
        font-weight: var(--body-small-font-weight);
        color: var(--alias-textcolor-default);
        font-size: var(--body-small-font-size);
        letter-spacing: var(--body-small-letter-spacing);
        line-height: var(--body-small-line-height);
        white-space: nowrap;
        font-style: var(--body-small-font-style);
        margin: 0;
    }

    .pantalla-participar .jpg-png-or-svg {
        position: relative;
        align-self: stretch;
        font-family: var(--copyright-font-family);
        font-weight: var(--copyright-font-weight);
        color: var(--texto-secundario);
        font-size: var(--copyright-font-size);
        text-align: center;
        letter-spacing: var(--copyright-letter-spacing);
        line-height: var(--copyright-line-height);
        font-style: var(--copyright-font-style);
        margin: 0;
    }

    .pantalla-participar .desc {
        position: relative;
        width: 241px;
        height: 13px;
        font-family: var(--copyright-font-family);
        font-weight: var(--copyright-font-weight);
        color: var(--texto-primari);
        font-size: var(--copyright-font-size);
        letter-spacing: var(--copyright-letter-spacing);
        line-height: var(--copyright-line-height);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 0;
        -webkit-box-orient: vertical;
        font-style: var(--copyright-font-style);
        margin: 0;
    }

    .pantalla-participar .button {
        all: unset;
        box-sizing: border-box;
        display: flex;
        height: 48px;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 10px 24px;
        position: relative;
        align-self: stretch;
        width: 100%;
        background-color: var(--resaltat);
        border-radius: 10px;
        overflow: hidden;
        border: none;
        box-shadow: 0px 0px 0px 1px #585858, 0px 1px 2px #575757;
        cursor: pointer;
    }

        .pantalla-participar .button::before {
            content: "";
            position: absolute;
            inset: 0;
            padding: 1px;
            border-radius: 10px;
            background: linear-gradient( 180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100% );
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            z-index: 1;
            pointer-events: none;
        }

    .pantalla-participar .label-text {
        position: relative;
        width: fit-content;
        font-family: var(--bot-n-font-family);
        font-weight: var(--bot-n-font-weight);
        color: var(--base);
        font-size: var(--bot-n-font-size);
        text-align: center;
        letter-spacing: var(--bot-n-letter-spacing);
        line-height: var(--bot-n-line-height);
        white-space: nowrap;
        font-style: var(--bot-n-font-style);
    }






.pantalla-inicial {
    width: 375px; /* ancho real del diseño */
    max-width: 375px;
    margin: 0 auto; /* centra el canvas */
    position: relative;
}





    .pantalla-inicial .group {
        position: relative;
        top: 121px;
        left: -193px;
        width: 683px;
        height: 596px;
    }

    .pantalla-inicial .CELSIUS {
        position: absolute;
        top: 0;
        left: 0;
        width: 683px;
        height: 455px;
        aspect-ratio: 1.5;
        object-fit: cover;
    }

    .pantalla-inicial .fondo {
        position: absolute;
        top: 380px;
        left: 130px;
        width: 496px;
        height: 216px;
        background: linear-gradient( 0deg, rgba(2, 2, 2, 1) 24%, rgba(0, 0, 0, 0.34) 100% );
    }

    .pantalla-inicial .frame {
        display: flex;
        flex-direction: column;
        width: 390px;
        align-items: flex-start;
        gap: 24px;
        padding: 0px 32px;
        position: absolute;
        top: 1937px;
    }

    .pantalla-inicial .div {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .pantalla-inicial .line {
        position: relative;
        align-self: stretch;
        width: 100%;
        height: 1px;
    }

    .pantalla-inicial .frame-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .pantalla-inicial .frame-2 {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 40px;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .pantalla-inicial .text-wrapper {
        position: relative;
        width: fit-content;
        margin-top: -1px;
        font-family: var(--h2-font-family);
        font-weight: var(--h2-font-weight);
        color: #ffffff;
        font-size: var(--h2-font-size);
        letter-spacing: var(--h2-letter-spacing);
        line-height: var(--h2-line-height);
        white-space: nowrap;
        font-style: var(--h2-font-style);
    }

    .pantalla-inicial .frame-3 {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .pantalla-inicial .text-wrapper-2 {
        position: relative;
        width: fit-content;
        margin-top: -1px;
        font-family: var(--small-font-family);
        font-weight: var(--small-font-weight);
        color: #e5e5e5;
        font-size: var(--small-font-size);
        letter-spacing: var(--small-letter-spacing);
        line-height: var(--small-line-height);
        font-style: var(--small-font-style);
    }

    .pantalla-inicial .text-wrapper-3 {
        position: relative;
        width: fit-content;
        font-family: var(--small-font-family);
        font-weight: var(--small-font-weight);
        color: #e5e5e5;
        font-size: var(--small-font-size);
        letter-spacing: var(--small-letter-spacing);
        line-height: var(--small-line-height);
        font-style: var(--small-font-style);
    }

    .pantalla-inicial .img {
        margin-bottom: -1px;
        position: relative;
        align-self: stretch;
        width: 100%;
        height: 1px;
    }

    .pantalla-inicial .div-wrapper {
        display: flex;
        align-items: center;
        gap: 40px;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .pantalla-inicial .text-wrapper-4 {
        position: relative;
        flex: 1;
        margin-top: -1px;
        font-family: var(--h2-font-family);
        font-weight: var(--h2-font-weight);
        color: #ffffff;
        font-size: var(--h2-font-size);
        letter-spacing: var(--h2-letter-spacing);
        line-height: var(--h2-line-height);
        font-style: var(--h2-font-style);
    }

    .pantalla-inicial .frame-4 {
        display: inline-flex;
        flex-direction: column;
        height: 74px;
        align-items: flex-start;
        gap: 5px;
        position: relative;
    }

    .pantalla-inicial .frame-5 {
        display: flex;
        width: 326px;
        align-items: center;
        gap: 10px;
        position: relative;
        flex: 0 0 auto;
    }

    .pantalla-inicial .text-wrapper-5 {
        position: relative;
        width: 326px;
        margin-top: -1px;
        font-family: var(--h1-font-family);
        font-weight: var(--h1-font-weight);
        color: #ffffff;
        font-size: var(--h1-font-size);
        letter-spacing: var(--h1-letter-spacing);
        line-height: var(--h1-line-height);
        font-style: var(--h1-font-style);
    }

    .pantalla-inicial .l-v-de-a-wrapper {
        display: flex;
        flex-direction: column;
        width: 326px;
        align-items: flex-start;
        gap: 16px;
        position: relative;
        flex: 0 0 auto;
    }

    .pantalla-inicial .l-v-de-a {
        position: relative;
        width: fit-content;
        margin-top: -1px;
        font-family: var(--small-font-family);
        font-weight: var(--small-font-weight);
        color: #ffffff;
        font-size: var(--small-font-size);
        letter-spacing: var(--small-letter-spacing);
        line-height: var(--small-line-height);
        font-style: var(--small-font-style);
    }

    .pantalla-inicial .p {
        position: relative;
        align-self: stretch;
        height: 118px;
        font-family: var(--copyright-font-family);
        font-weight: var(--copyright-font-weight);
        color: #e5e5e5;
        font-size: var(--copyright-font-size);
        letter-spacing: var(--copyright-letter-spacing);
        line-height: var(--copyright-line-height);
        font-style: var(--copyright-font-style);
    }

    .pantalla-inicial .BOTO-participa {
        display: flex;
        width: 317px;
        height: 48px;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 10px 24px;
        position: absolute;
        top: 1829px;
        left: 34px;
        border-radius: 10px;
        overflow: hidden;
        border: 1px solid;
        border-color: #ffc700;
        box-shadow: 0px 0px 0px 1px #6c7278, 0px 1px 2px #6c7278;
    }

    .pantalla-inicial .label-text {
        position: relative;
        width: fit-content;
        font-family: var(--bot-n-font-family);
        font-weight: var(--bot-n-font-weight);
        color: var(--texto-primari);
        font-size: var(--bot-n-font-size);
        text-align: center;
        letter-spacing: var(--bot-n-letter-spacing);
        line-height: var(--bot-n-line-height);
        white-space: nowrap;
        font-style: var(--bot-n-font-style);
    }

    .pantalla-inicial .pasos {
        display: flex;
        flex-direction: column;
        width: 321px;
        align-items: center;
        gap: 10px;
        position: absolute;
        top: 1082px;
        left: 30px;
    }

    .pantalla-inicial .surface {
        display: flex;
        align-items: flex-start;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .pantalla-inicial .list {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        position: relative;
        flex: 1;
        flex-grow: 1;
    }

    .pantalla-inicial .element-compra {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
        background-color: #414141;
        border-radius: 10px;
    }

    .pantalla-inicial .surface-2 {
        gap: 15px;
        padding: 40px 20px;
        background-color: #414141;
        border-radius: 10px;
        display: flex;
        align-items: flex-start;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .pantalla-inicial .number {
        display: inline-flex;
        align-items: flex-start;
        gap: 10px;
        position: relative;
        flex: 0 0 auto;
    }

    .pantalla-inicial .number-2 {
        position: relative;
        width: fit-content;
        margin-top: -1px;
        font-family: var(--large-title-3-strong-font-family);
        font-weight: var(--large-title-3-strong-font-weight);
        color: var(--resaltat);
        font-size: var(--large-title-3-strong-font-size);
        letter-spacing: var(--large-title-3-strong-letter-spacing);
        line-height: var(--large-title-3-strong-line-height);
        white-space: nowrap;
        font-style: var(--large-title-3-strong-font-style);
    }

    .pantalla-inicial .content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        padding: 3px 0px 0px;
        position: relative;
        flex: 1;
        flex-grow: 1;
    }

    .pantalla-inicial .header {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .pantalla-inicial .title {
        display: flex;
        align-items: flex-start;
        position: relative;
        flex: 1;
        flex-grow: 1;
    }

    .pantalla-inicial .block-title {
        display: flex;
        align-items: center;
        flex: 1;
        font-family: var(--h2-font-family);
        font-weight: var(--h2-font-weight);
        color: var(--texto-primari);
        font-size: var(--h2-font-size);
        letter-spacing: var(--h2-letter-spacing);
        line-height: var(--h2-line-height);
        position: relative;
        margin-top: -1px;
        font-style: var(--h2-font-style);
    }

    .pantalla-inicial .text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .pantalla-inicial .block-text {
        align-self: stretch;
        font-family: var(--body-font-family);
        font-weight: var(--body-font-weight);
        color: var(--texto-secundario);
        font-size: var(--body-font-size);
        letter-spacing: var(--body-letter-spacing);
        line-height: var(--body-line-height);
        position: relative;
        margin-top: -1px;
        font-style: var(--body-font-style);
    }

    .pantalla-inicial .divisor {
        display: flex;
        flex-direction: column;
        width: 200px;
        height: 3px;
        align-items: center;
        position: relative;
    }

    .pantalla-inicial .surface-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .pantalla-inicial .surface-3 {
        display: flex;
        align-items: flex-start;
        gap: 15px;
        padding: 40px 30px;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
        background-color: #414141;
        border-radius: 10px;
    }

    .pantalla-inicial .divisor-2 {
        display: flex;
        flex-direction: column;
        height: 3px;
        align-items: flex-start;
        position: relative;
        align-self: stretch;
        width: 100%;
    }

    .pantalla-inicial .como-funciona {
        position: absolute;
        top: 993px;
        width: 325px;
        height: 421px;
        display: flex;
    }

    .pantalla-inicial .headline-wrapper {
        display: flex;
        height: 421px;
        flex: 1;
        position: relative;
        flex-direction: column;
        width: 325px;
        align-items: center;
    }

    .pantalla-inicial .headline {
        display: flex;
        flex-direction: column;
        width: 371px;
        align-items: flex-start;
        justify-content: center;
        position: relative;
        flex: 0 0 auto;
        margin-left: -23px;
        margin-right: -23px;
    }

    .pantalla-inicial .text-2 {
        display: flex;
        gap: 20px;
        align-self: stretch;
        width: 100%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        flex: 0 0 auto;
    }

    .pantalla-inicial .text-wrapper-6 {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: stretch;
        margin-top: -1px;
        font-family: var(--h3-font-family);
        font-weight: var(--h3-font-weight);
        color: var(--texto-primari);
        font-size: var(--h3-font-size);
        text-align: center;
        letter-spacing: var(--h3-letter-spacing);
        line-height: var(--h3-line-height);
        font-style: var(--h3-font-style);
    }

    .pantalla-inicial .text-wrapper-7 {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 289px;
        font-family: var(--body-font-family);
        font-weight: var(--body-font-weight);
        color: var(--texto-secundario);
        font-size: var(--body-font-size);
        text-align: center;
        letter-spacing: var(--body-letter-spacing);
        line-height: var(--body-line-height);
        font-style: var(--body-font-style);
    }

    .pantalla-inicial .group-2 {
        position: absolute;
        top: 724px;
        left: -6px;
        width: 357px;
        height: 300px;
    }

    .pantalla-inicial .boxea {
        display: flex;
        flex-direction: column;
        width: 373px;
        height: 386px;
        align-items: center;
        gap: 113px;
        padding: 0px 24px 16px;
        position: absolute;
        top: 367px;
        left: 2px;
        overflow-x: scroll;
    }

        .pantalla-inicial .boxea::-webkit-scrollbar {
            width: 0;
            display: none;
        }

    .pantalla-inicial .frame-6 {
        display: flex;
        flex-direction: column;
        width: 317px;
        height: 421px;
        align-items: center;
        gap: 40px;
        position: relative;
        margin-bottom: -51px;
    }

    .pantalla-inicial .headline-2 {
        display: inline-flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        position: relative;
        flex: 0 0 auto;
        margin-left: -5px;
        margin-right: -5px;
    }

    .pantalla-inicial .text-3 {
        display: inline-flex;
        gap: 15px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        flex: 0 0 auto;
    }

    .pantalla-inicial .BOXEA-CON-ENERG-a {
        position: relative;
        width: 327px;
        margin-top: -1px;
        text-shadow: 0px 4px 4px #00000040;
        font-family: var(--heading-h1-font-family);
        font-weight: var(--heading-h1-font-weight);
        color: var(--texto-primari);
        font-size: var(--heading-h1-font-size);
        text-align: center;
        letter-spacing: var(--heading-h1-letter-spacing);
        line-height: var(--heading-h1-line-height);
        font-style: var(--heading-h1-font-style);
    }

    .pantalla-inicial .text-wrapper-8 {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 289px;
        height: 95px;
        font-family: var(--h2-font-family);
        font-weight: var(--h2-font-weight);
        color: var(--texto-secundario);
        font-size: var(--h2-font-size);
        text-align: center;
        letter-spacing: var(--h2-letter-spacing);
        line-height: var(--h2-line-height);
        font-style: var(--h2-font-style);
    }

    .pantalla-inicial .button {
        all: unset;
        box-sizing: border-box;
        display: flex;
        height: 48px;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 10px 24px;
        position: relative;
        align-self: stretch;
        width: 100%;
        background-color: var(--resaltat);
        border-radius: 10px;
        overflow: hidden;
        border: none;
        box-shadow: 0px 0px 0px 1px #6c7278, 0px 1px 2px #6c7278;
    }

        .pantalla-inicial .button::before {
            content: "";
            position: absolute;
            inset: 0;
            padding: 1px;
            border-radius: 10px;
            background: linear-gradient( 180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100% );
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            z-index: 1;
            pointer-events: none;
        }

    .pantalla-inicial .label-text-2 {
        position: relative;
        width: fit-content;
        font-family: var(--bot-n-font-family);
        font-weight: var(--bot-n-font-weight);
        color: var(--base);
        font-size: var(--bot-n-font-size);
        text-align: center;
        letter-spacing: var(--bot-n-letter-spacing);
        line-height: var(--bot-n-line-height);
        white-space: nowrap;
        font-style: var(--bot-n-font-style);
    }

    .pantalla-inicial .group-3 {
        width: 381px;
        height: 123px;
        top: -2px;
        left: 0;
    }
/* =============================================
   ORIGINAL style.css CONTENT INJECTED BELOW
   ============================================= */

.pantalla-inicial {
    background-color: var(--base);
    overflow-x: hidden;
    width: 100%;
    min-width: 375px;
    min-height: 2405px;
    position: relative;
}

    .pantalla-inicial .group {
        position: absolute;
        top: 121px;
        left: -193px;
        width: 683px;
        height: 596px;
    }

    .pantalla-inicial .CELSIUS {
        position: absolute;
        top: 0;
        left: 0;
        width: 683px;
        height: 455px;
        aspect-ratio: 1.5;
        object-fit: cover;
    }

    .pantalla-inicial .fondo {
        position: absolute;
        top: 380px;
        left: 130px;
        width: 496px;
        height: 216px;
        background-color: #000;
        color: #fff;
        /*background: linear-gradient( 0deg, rgba(2, 2, 2, 1) 24%, rgba(0, 0, 0, 0.34) 100% );*/
    }

    .pantalla-inicial .frame {
        display: flex;
        flex-direction: column;
        width: 390px;
        align-items: flex-start;
        gap: 24px;
        padding: 0px 32px;
        position: absolute;
        top: 1937px;
    }

    .pantalla-inicial .div {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .pantalla-inicial .line {
        position: relative;
        align-self: stretch;
        width: 100%;
        height: 1px;
    }

    .pantalla-inicial .frame-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .pantalla-inicial .frame-2 {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 40px;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .pantalla-inicial .text-wrapper {
        position: relative;
        width: fit-content;
        margin-top: -1px;
        font-family: var(--h2-font-family);
        font-weight: var(--h2-font-weight);
        color: #ffffff;
        font-size: var(--h2-font-size);
        letter-spacing: var(--h2-letter-spacing);
        line-height: var(--h2-line-height);
        white-space: nowrap;
        font-style: var(--h2-font-style);
    }

    /* frame-3 used both inside footer nav (ul) and footer contact section */
    .pantalla-inicial .frame-3 {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .pantalla-inicial .text-wrapper-2 {
        position: relative;
        width: fit-content;
        margin-top: -1px;
        font-family: var(--small-font-family);
        font-weight: var(--small-font-weight);
        color: #e5e5e5;
        font-size: var(--small-font-size);
        letter-spacing: var(--small-letter-spacing);
        line-height: var(--small-line-height);
        font-style: var(--small-font-style);
    }

    .pantalla-inicial .text-wrapper-3 {
        position: relative;
        width: fit-content;
        font-family: var(--small-font-family);
        font-weight: var(--small-font-weight);
        color: #e5e5e5;
        font-size: var(--small-font-size);
        letter-spacing: var(--small-letter-spacing);
        line-height: var(--small-line-height);
        font-style: var(--small-font-style);
    }

    .pantalla-inicial .img {
        margin-bottom: -1px;
        position: relative;
        align-self: stretch;
        width: 100%;
        height: 1px;
    }

    .pantalla-inicial .div-wrapper {
        display: flex;
        align-items: center;
        gap: 40px;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .pantalla-inicial .text-wrapper-4 {
        position: relative;
        flex: 1;
        margin-top: -1px;
        font-family: var(--h2-font-family);
        font-weight: var(--h2-font-weight);
        color: #ffffff;
        font-size: var(--h2-font-size);
        letter-spacing: var(--h2-letter-spacing);
        line-height: var(--h2-line-height);
        font-style: var(--h2-font-style);
    }

    .pantalla-inicial .frame-4 {
        display: inline-flex;
        flex-direction: column;
        height: 74px;
        align-items: flex-start;
        gap: 5px;
        position: relative;
    }

    .pantalla-inicial .frame-5 {
        display: flex;
        width: 326px;
        align-items: center;
        gap: 10px;
        position: relative;
        flex: 0 0 auto;
    }

    .pantalla-inicial .text-wrapper-5 {
        position: relative;
        width: 326px;
        margin-top: -1px;
        font-family: var(--h1-font-family);
        font-weight: var(--h1-font-weight);
        color: #ffffff;
        font-size: var(--h1-font-size);
        letter-spacing: var(--h1-letter-spacing);
        line-height: var(--h1-line-height);
        font-style: var(--h1-font-style);
        text-decoration: none;
    }

    .pantalla-inicial .l-v-de-a-wrapper {
        display: flex;
        flex-direction: column;
        width: 326px;
        align-items: flex-start;
        gap: 16px;
        position: relative;
        flex: 0 0 auto;
    }

    .pantalla-inicial .l-v-de-a {
        position: relative;
        width: fit-content;
        margin-top: -1px;
        font-family: var(--small-font-family);
        font-weight: var(--small-font-weight);
        color: #ffffff;
        font-size: var(--small-font-size);
        letter-spacing: var(--small-letter-spacing);
        line-height: var(--small-line-height);
        font-style: var(--small-font-style);
    }

    .pantalla-inicial .p {
        position: relative;
        align-self: stretch;
        height: 118px;
        font-family: var(--copyright-font-family);
        font-weight: var(--copyright-font-weight);
        color: #e5e5e5;
        font-size: var(--copyright-font-size);
        letter-spacing: var(--copyright-letter-spacing);
        line-height: var(--copyright-line-height);
        font-style: var(--copyright-font-style);
    }

    .pantalla-inicial .BOTO-participa {
        display: flex;
        width: 317px;
        height: 48px;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 10px 24px;
        position: absolute;
        top: 1829px;
        left: 34px;
        border-radius: 10px;
        overflow: hidden;
        border: 1px solid;
        border-color: #ffc700;
        box-shadow: 0px 0px 0px 1px #6c7278, 0px 1px 2px #6c7278;
        background: transparent;
        cursor: pointer;
    }

    .pantalla-inicial .label-text {
        position: relative;
        width: fit-content;
        font-family: var(--bot-n-font-family);
        font-weight: var(--bot-n-font-weight);
        color: var(--texto-primari);
        font-size: var(--bot-n-font-size);
        text-align: center;
        letter-spacing: var(--bot-n-letter-spacing);
        line-height: var(--bot-n-line-height);
        white-space: nowrap;
        font-style: var(--bot-n-font-style);
    }

    .pantalla-inicial .pasos {
        display: flex;
        flex-direction: column;
        width: 321px;
        align-items: center;
        gap: 10px;
        position: absolute;
        top: 1082px;
        left: 30px;
    }

    .pantalla-inicial .surface {
        display: flex;
        align-items: flex-start;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    /* ol reset for list */
    .pantalla-inicial .list {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        position: relative;
        flex: 1;
        flex-grow: 1;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .pantalla-inicial .element-compra {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
        background-color: #414141;
        border-radius: 10px;
    }

    .pantalla-inicial .surface-2 {
        gap: 15px;
        padding: 40px 20px;
        background-color: #414141;
        border-radius: 10px;
        display: flex;
        align-items: flex-start;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .pantalla-inicial .number {
        display: inline-flex;
        align-items: flex-start;
        gap: 10px;
        position: relative;
        flex: 0 0 auto;
    }

    .pantalla-inicial .number-2 {
        position: relative;
        width: fit-content;
        margin-top: -1px;
        font-family: var(--large-title-3-strong-font-family);
        font-weight: var(--large-title-3-strong-font-weight);
        color: var(--resaltat);
        font-size: var(--large-title-3-strong-font-size);
        letter-spacing: var(--large-title-3-strong-letter-spacing);
        line-height: var(--large-title-3-strong-line-height);
        white-space: nowrap;
        font-style: var(--large-title-3-strong-font-style);
    }

    .pantalla-inicial .content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        padding: 3px 0px 0px;
        position: relative;
        flex: 1;
        flex-grow: 1;
    }

    .pantalla-inicial .header {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .pantalla-inicial .title {
        display: flex;
        align-items: flex-start;
        position: relative;
        flex: 1;
        flex-grow: 1;
    }

    .pantalla-inicial .block-title {
        display: flex;
        align-items: center;
        flex: 1;
        font-family: var(--h2-font-family);
        font-weight: var(--h2-font-weight);
        color: var(--texto-primari);
        font-size: var(--h2-font-size);
        letter-spacing: var(--h2-letter-spacing);
        line-height: var(--h2-line-height);
        position: relative;
        margin-top: -1px;
        font-style: var(--h2-font-style);
    }

    .pantalla-inicial .text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .pantalla-inicial .block-text {
        align-self: stretch;
        font-family: var(--body-font-family);
        font-weight: var(--body-font-weight);
        color: var(--texto-secundario);
        font-size: var(--body-font-size);
        letter-spacing: var(--body-letter-spacing);
        line-height: var(--body-line-height);
        position: relative;
        margin-top: -1px;
        font-style: var(--body-font-style);
    }

    .pantalla-inicial .divisor {
        display: flex;
        flex-direction: column;
        width: 200px;
        height: 3px;
        align-items: center;
        position: relative;
    }

    .pantalla-inicial .surface-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .pantalla-inicial .surface-3 {
        display: flex;
        align-items: flex-start;
        gap: 15px;
        padding: 40px 30px;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
        background-color: #414141;
        border-radius: 10px;
    }

    .pantalla-inicial .divisor-2 {
        display: flex;
        flex-direction: column;
        height: 3px;
        align-items: flex-start;
        position: relative;
        align-self: stretch;
        width: 100%;
    }

    .pantalla-inicial .como-funciona {
        position: absolute;
        top: 993px;
        left: 20px;
        width: 325px;
        height: 421px;
        display: flex;
    }

    .pantalla-inicial .headline-wrapper {
        display: flex;
        height: 421px;
        flex: 1;
        position: relative;
        flex-direction: column;
        width: 325px;
        align-items: center;
    }

    .pantalla-inicial .headline {
        display: flex;
        flex-direction: column;
        width: 371px;
        align-items: flex-start;
        justify-content: center;
        position: relative;
        flex: 0 0 auto;
        margin-left: -23px;
        margin-right: -23px;
    }

    .pantalla-inicial .text-2 {
        display: flex;
        gap: 20px;
        align-self: stretch;
        width: 100%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        flex: 0 0 auto;
    }

    .pantalla-inicial .text-wrapper-6 {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: stretch;
        margin-top: -1px;
        font-family: var(--h3-font-family);
        font-weight: var(--h3-font-weight);
        color: var(--texto-primari);
        font-size: var(--h3-font-size);
        text-align: center;
        letter-spacing: var(--h3-letter-spacing);
        line-height: var(--h3-line-height);
        font-style: var(--h3-font-style);
    }

    .pantalla-inicial .text-wrapper-7 {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 289px;
        font-family: var(--body-font-family);
        font-weight: var(--body-font-weight);
        color: var(--texto-secundario);
        font-size: var(--body-font-size);
        text-align: center;
        letter-spacing: var(--body-letter-spacing);
        line-height: var(--body-line-height);
        font-style: var(--body-font-style);
    }

    .pantalla-inicial .group-2 {
        position: absolute;
        top: 724px;
        left: -6px;
        width: 357px;
        height: 300px;
    }

    .pantalla-inicial .boxea {
        display: flex;
        flex-direction: column;
        width: 373px;
        height: 386px;
        align-items: center;
        gap: 113px;
        padding: 0px 24px 16px;
        position: absolute;
        top: 367px;
        left: 2px;
        overflow-x: scroll;
    }

        .pantalla-inicial .boxea::-webkit-scrollbar {
            width: 0;
            display: none;
        }

    .pantalla-inicial .frame-6 {
        display: flex;
        flex-direction: column;
        width: 317px;
        height: 421px;
        align-items: center;
        gap: 40px;
        position: relative;
        margin-bottom: -51px;
    }

    .pantalla-inicial .headline-2 {
        display: inline-flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        position: relative;
        flex: 0 0 auto;
        margin-left: -5px;
        margin-right: -5px;
    }

    .pantalla-inicial .text-3 {
        display: inline-flex;
        gap: 15px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        flex: 0 0 auto;
    }

    .pantalla-inicial .BOXEA-CON-ENERG-a {
        position: relative;
        width: 327px;
        margin-top: -1px;
        text-shadow: 0px 4px 4px #00000040;
        font-family: var(--heading-h1-font-family);
        font-weight: var(--heading-h1-font-weight);
        color: var(--texto-primari);
        font-size: var(--heading-h1-font-size);
        text-align: center;
        letter-spacing: var(--heading-h1-letter-spacing);
        line-height: var(--heading-h1-line-height);
        font-style: var(--heading-h1-font-style);
    }

    .pantalla-inicial .text-wrapper-8 {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 289px;
        height: 95px;
        font-family: var(--h2-font-family);
        font-weight: var(--h2-font-weight);
        color: var(--texto-secundario);
        font-size: var(--h2-font-size);
        text-align: center;
        letter-spacing: var(--h2-letter-spacing);
        line-height: var(--h2-line-height);
        font-style: var(--h2-font-style);
    }

    .pantalla-inicial .button {
        all: unset;
        box-sizing: border-box;
        display: flex;
        height: 48px;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 10px 24px;
        position: relative;
        align-self: stretch;
        width: 100%;
        background-color: var(--resaltat);
        border-radius: 10px;
        overflow: hidden;
        border: none;
        box-shadow: 0px 0px 0px 1px #6c7278, 0px 1px 2px #6c7278;
        cursor: pointer;
    }

        .pantalla-inicial .button::before {
            content: "";
            position: absolute;
            inset: 0;
            padding: 1px;
            border-radius: 10px;
            background: linear-gradient( 180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100% );
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            z-index: 1;
            pointer-events: none;
        }

    .pantalla-inicial .label-text-2 {
        position: relative;
        width: fit-content;
        font-family: var(--bot-n-font-family);
        font-weight: var(--bot-n-font-weight);
        color: var(--base);
        font-size: var(--bot-n-font-size);
        text-align: center;
        letter-spacing: var(--bot-n-letter-spacing);
        line-height: var(--bot-n-line-height);
        white-space: nowrap;
        font-style: var(--bot-n-font-style);
    }

    .pantalla-inicial .group-3 {
        width: 381px;
        height: 123px;
        top: -2px;
        left: 0;
    }