@media (min-width: 1080px) {
    .popup-code {
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 0, 0, 0.104);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        z-index: 9999;
        opacity: 0;
        visibility: hidden;
        transition: opacity 1s ease;
        pointer-events: none;
    }

    .popup-code.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .popup-code-content {
        transform: scale(0.8);
        opacity: 0;
        transition: transform .5s ease, opacity .5s ease;
    }

    .popup-code.active .popup-code-content {
        transform: scale(1);
        opacity: 1;
    }

    .code-container {
        background-color: #2f2f2f;
        border-radius: 8px;
        box-shadow: rgb(31 31 31 / 17%) 0px -23px 25px 0px inset,
            rgb(108 108 108 / 23%) 0px -36px 30px 0px inset,
            rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px,
            rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px,
            rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
        padding: 40px;
        max-width: 400px;
        width: 100%;
        text-align: center;
        margin: 0 auto;
    }

    .i-close {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 10px;
        cursor: pointer;
        font-size: 26px;
        width: 100%;
        text-align: right;
    }

    .i-close i {
        color: var(--rojo);
    }

    .code-form {
        display: flex;
        flex-direction: column;
    }

    .heading {
        color: var(--blanco);
        font-weight: 500;
        font-size: 40px;
        font-family: 'MiFuente', sans-serif;
        margin-bottom: 5px;
    }

    .paragraph {
        color: var(--blanco);
        font-weight: 400;
        font-size: 15px;
        margin-bottom: 15px;
        font-family: 'MiFuente', sans-serif;
    }

    .error-code {
        color: var(--blanco);
        font-weight: 400;
        font-size: 15px;
        margin-bottom: 15px;
        font-family: 'MiFuente', sans-serif;
    }

    .input-group-code {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 10px;
        margin-bottom: 20px;

    }

    .input-group-code input {
        background: none;
        border: 1px solid #353535;
        padding: 15px 23px;
        font-size: 16px;
        border-radius: 8px;
        color: #979797;
        width: 100%;
        box-shadow: rgb(136 136 136 / 17%) 0px -23px 25px 0px inset,
            rgb(81 81 81 / 23%) 0px -36px 30px 0px inset,
            rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px,
            rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px,
            rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
        font-family: 'MiFuente', sans-serif;
        text-align: center;
    }

    .input-group-code input:focus {
        border-color: var(--rojo);
        outline: none;
        font-family: 'MiFuente', sans-serif;
    }

    button {
        padding: 15px;
        border: none;
        border-radius: 8px;
        background-color: var(--rojo);
        color: var(--blanco);
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        transition: background-color 0.3s ease;
        font-family: 'MiFuente', sans-serif;
    }

    button:hover {
        background-color: var(--rojo);
    }

    .bottom-text {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
        color: var(--blanco);
        font-size: 15px;
        font-weight: 400;
        font-family: 'MiFuente', sans-serif;
    }

    .bottom-text a {
        color: var(--azul2);
        text-decoration: none;
        transition: color 0.3s ease;
        font-family: 'MiFuente', sans-serif;
        text-align: left;
        width: 90%;
    }

    .bottom-text a:hover {
        color: var(--azul2);
    }
}

@media (min-width: 600px) and (max-width:1079px) {
    .popup-code {
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 0, 0, 0.104);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        z-index: 9999;
        opacity: 0;
        visibility: hidden;
        transition: opacity 1s ease;
        pointer-events: none;
    }

    .popup-code.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .popup-code-content {
        transform: scale(0.8);
        opacity: 0;
        transition: transform .5s ease, opacity .5s ease;
    }

    .popup-code.active .popup-code-content {
        transform: scale(1);
        opacity: 1;
    }

    .code-container {
        background-color: #2f2f2f;
        border-radius: 8px;
        box-shadow: rgb(31 31 31 / 17%) 0px -23px 25px 0px inset,
            rgb(108 108 108 / 23%) 0px -36px 30px 0px inset,
            rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px,
            rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px,
            rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
        padding: 20px;
        max-width: 400px;
        width: 90%;
        text-align: center;
        margin: 0 auto;
    }

    .i-close {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 10px;
        cursor: pointer;
        font-size: 28px;
        width: 100%;
        text-align: right;
    }

    .i-close i {
        color: var(--rojo);
    }

    .code-form {
        display: flex;
        flex-direction: column;
    }

    .heading {
        color: var(--blanco);
        font-weight: 500;
        font-size: 30px;
        font-family: 'MiFuente', sans-serif;
        margin-bottom: 5px;
    }

    .paragraph {
        color: var(--blanco);
        font-weight: 400;
        font-size: 18px;
        margin-bottom: 15px;
        font-family: 'MiFuente', sans-serif;
    }

    .error-code {
        color: var(--blanco);
        font-weight: 400;
        font-size: 18px;
        margin-bottom: 15px;
        font-family: 'MiFuente', sans-serif;
    }

    .input-group-code {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 10px;
        margin-bottom: 20px;
    }

    .input-group-code input {
        background: none;
        border: 1px solid #353535;
        padding: 15px 23px;
        font-size: 18px;
        border-radius: 8px;
        color: #979797;
        width: 100%;
        box-shadow: rgb(136 136 136 / 17%) 0px -23px 25px 0px inset,
            rgb(81 81 81 / 23%) 0px -36px 30px 0px inset,
            rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px,
            rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px,
            rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
        font-family: 'MiFuente', sans-serif;
        text-align: center;
    }

    .input-group-code input:focus {
        border-color: var(--rojo);
        outline: none;
        font-family: 'MiFuente', sans-serif;
    }

    button {
        padding: 15px;
        border: none;
        border-radius: 8px;
        background-color: var(--rojo);
        color: var(--blanco);
        font-size: 18px;
        font-weight: 500;
        cursor: pointer;
        transition: background-color 0.3s ease;
        font-family: 'MiFuente', sans-serif;
    }

    button:hover {
        background-color: var(--rojo);
    }

    .bottom-text {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
        color: var(--blanco);
        font-size: 18px;
        font-weight: 400;
        font-family: 'MiFuente', sans-serif;
    }

    .bottom-text a {
        color: var(--azul2);
        text-decoration: none;
        transition: color 0.3s ease;
        font-family: 'MiFuente', sans-serif;
        text-align: left;
        width: 90%;
    }

    .bottom-text a:hover {
        color: var(--azul2);
    }
}

@media (max-width: 599px) {
    .popup-code {
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 0, 0, 0.104);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        z-index: 9999;
        opacity: 0;
        visibility: hidden;
        transition: opacity 1s ease;
        pointer-events: none;
    }

    .popup-code.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .popup-code-content {
        transform: scale(0.8);
        opacity: 0;
        transition: transform .5s ease, opacity .5s ease;
    }

    .popup-code.active .popup-code-content {
        transform: scale(1);
        opacity: 1;
    }

    .code-container {
        background-color: #2f2f2f;
        border-radius: 8px;
        box-shadow: rgb(31 31 31 / 17%) 0px -23px 25px 0px inset,
            rgb(108 108 108 / 23%) 0px -36px 30px 0px inset,
            rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px,
            rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px,
            rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
        padding: 20px;
        max-width: 400px;
        width: 80%;
        text-align: center;
        margin: 0 auto;
    }

    .i-close {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 10px;
        cursor: pointer;
        font-size: 28px;
        width: 100%;
        text-align: right;
    }

    .i-close i {
        color: var(--rojo);
    }

    .code-form {
        display: flex;
        flex-direction: column;
    }

    .heading {
        color: var(--blanco);
        font-weight: 500;
        font-size: 30px;
        font-family: 'MiFuente', sans-serif;
        margin-bottom: 5px;
    }

    .paragraph {
        color: var(--blanco);
        font-weight: 400;
        font-size: 18px;
        margin-bottom: 15px;
        font-family: 'MiFuente', sans-serif;
    }

    .error-code {
        color: var(--blanco);
        font-weight: 400;
        font-size: 18px;
        margin-bottom: 15px;
        font-family: 'MiFuente', sans-serif;
    }

    .input-group-code {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 10px;
        margin-bottom: 20px;
    }

    .input-group-code input {
        background: none;
        border: 1px solid #353535;
        padding: 15px 23px;
        font-size: 18px;
        border-radius: 8px;
        color: #979797;
        width: 100%;
        box-shadow: rgb(136 136 136 / 17%) 0px -23px 25px 0px inset,
            rgb(81 81 81 / 23%) 0px -36px 30px 0px inset,
            rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px,
            rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px,
            rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
        font-family: 'MiFuente', sans-serif;
        text-align: center;
    }

    .input-group-code input:focus {
        border-color: var(--rojo);
        outline: none;
        font-family: 'MiFuente', sans-serif;
    }

    button {
        padding: 15px;
        border: none;
        border-radius: 8px;
        background-color: var(--rojo);
        color: var(--blanco);
        font-size: 18px;
        font-weight: 500;
        cursor: pointer;
        transition: background-color 0.3s ease;
        font-family: 'MiFuente', sans-serif;
    }

    button:hover {
        background-color: var(--rojo);
    }

    .bottom-text {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
        color: var(--blanco);
        font-size: 18px;
        font-weight: 400;
        font-family: 'MiFuente', sans-serif;
    }

    .bottom-text a {
        color: var(--azul2);
        text-decoration: none;
        transition: color 0.3s ease;
        font-family: 'MiFuente', sans-serif;
        text-align: left;
        width: 90%;
    }

    .bottom-text a:hover {
        color: var(--azul2);
    }
}

@media screen and (max-height: 500px) and (orientation: landscape) {
    .popup-code {
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 0, 0, 0.104);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        z-index: 9999;
        opacity: 0;
        visibility: hidden;
        transition: opacity 1s ease;
        pointer-events: none;
    }

    .popup-code.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .popup-code-content {
        transform: scale(0.8);
        opacity: 0;
        transition: transform .5s ease, opacity .5s ease;
    }

    .popup-code.active .popup-code-content {
        transform: scale(1);
        opacity: 1;
    }

    .code-container {
        background-color: #2f2f2f;
        border-radius: 8px;
        box-shadow: rgb(31 31 31 / 17%) 0px -23px 25px 0px inset,
            rgb(108 108 108 / 23%) 0px -36px 30px 0px inset,
            rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px,
            rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px,
            rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
        padding: 20px;
        max-width: 400px;
        width: 40%;
        text-align: center;
        margin: 0 auto;
    }

    .i-close {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 5px;
        cursor: pointer;
        font-size: 22px;
        width: 100%;
        text-align: right;
    }

    .i-close i {
        color: var(--rojo);
    }

    .code-form {
        display: flex;
        flex-direction: column;
    }

    .heading {
        color: var(--blanco);
        font-weight: 500;
        font-size: 24px;
        font-family: 'MiFuente', sans-serif;
        margin-bottom: 5px;
    }

    .paragraph {
        color: var(--blanco);
        font-weight: 400;
        font-size: 15px;
        margin-bottom: 15px;
        font-family: 'MiFuente', sans-serif;
    }

    .error-code {
        color: var(--blanco);
        font-weight: 400;
        font-size: 15px;
        margin-bottom: 15px;
        font-family: 'MiFuente', sans-serif;
    }

    .input-group-code {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 10px;
        margin-bottom: 20px;
    }

    .input-group-code input {
        background: none;
        border: 1px solid #353535;
        padding: 10px 23px;
        font-size: 16px;
        border-radius: 8px;
        color: #979797;
        width: 100%;
        box-shadow: rgb(136 136 136 / 17%) 0px -23px 25px 0px inset,
            rgb(81 81 81 / 23%) 0px -36px 30px 0px inset,
            rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px,
            rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px,
            rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
        font-family: 'MiFuente', sans-serif;
        text-align: center;
    }

    .input-group-code input:focus {
        border-color: var(--rojo);
        outline: none;
        font-family: 'MiFuente', sans-serif;
    }

    button {
        padding: 10px;
        border: none;
        border-radius: 8px;
        background-color: var(--rojo);
        color: var(--blanco);
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        transition: background-color 0.3s ease;
        font-family: 'MiFuente', sans-serif;
    }

    button:hover {
        background-color: var(--rojo);
    }

    .bottom-text {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
        color: var(--blanco);
        font-size: 15px;
        font-weight: 400;
        font-family: 'MiFuente', sans-serif;
    }

    .bottom-text a {
        color: var(--azul2);
        text-decoration: none;
        transition: color 0.3s ease;
        font-family: 'MiFuente', sans-serif;
        text-align: left;
        width: 90%;
    }

    .bottom-text a:hover {
        color: var(--azul2);
    }
}