```css
/* =========================
   RESET
========================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body {
    font-family: 'Montserrat', sans-serif;
    background: #111;
}


/* =========================
   PÁGINA
========================= */

.codigo-page {

    position: relative;

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

    display: flex;

    justify-content: center;

    align-items: center;

    overflow: hidden;
}


/* =========================
   FONDO
========================= */

.codigo-background {

    position: absolute;

    inset: 0;

    background-image:
        url("../images/home/HERO1.webp");

    background-size: cover;

    background-position: center;

    transform: scale(1.03);
}


.codigo-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            rgba(0, 0, 0, .72),
            rgba(0, 0, 0, .85)
        );
}


/* =========================
   CONTENEDOR
========================= */

.codigo-container {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 470px;

    padding: 25px 20px;
}


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

.codigo-card {

    padding: 45px;

    background:
        rgba(20, 20, 20, .92);

    border:
        1px solid
        rgba(255, 255, 255, .12);

    border-radius: 20px;

    box-shadow:
        0 25px 70px
        rgba(0, 0, 0, .5);

    backdrop-filter: blur(15px);
}


/* =========================
   LOGO
========================= */

.codigo-logo {

    text-align: center;

    margin-bottom: 25px;
}


.codigo-logo img {

    width: 150px;

    max-width: 100%;

    height: auto;
}


/* =========================
   HEADER
========================= */

.codigo-header {

    text-align: center;

    margin-bottom: 25px;
}


.codigo-header span {

    color: #b9975b;

    font-size: 11px;

    letter-spacing: 4px;

    font-weight: 600;
}


.codigo-header h1 {

    margin-top: 8px;

    color: #fff;

    font-size: 28px;

    font-weight: 500;
}


.codigo-header p {

    margin-top: 12px;

    color:
        rgba(255, 255, 255, .6);

    font-size: 13px;

    line-height: 1.6;
}


/* =========================
   ICONO
========================= */

.codigo-icon {

    width: 55px;

    height: 55px;

    margin:
        0 auto 25px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 50%;

    background:
        rgba(185, 151, 91, .12);

    border:
        1px solid
        rgba(185, 151, 91, .3);
}


.codigo-icon i {

    color: #b9975b;

    font-size: 20px;
}


/* =========================
   FORMULARIO
========================= */

.form-group {

    display: flex;

    flex-direction: column;

    gap: 9px;

    margin-bottom: 20px;
}


.form-group label {

    color:
        rgba(255, 255, 255, .8);

    font-size: 13px;
}


.input-codigo {

    position: relative;
}


.input-codigo i {

    position: absolute;

    left: 16px;

    top: 50%;

    transform:
        translateY(-50%);

    color:
        rgba(255, 255, 255, .4);
}


.input-codigo input {

    width: 100%;

    padding:
        16px 16px 16px 44px;

    background:
        rgba(255, 255, 255, .06);

    border:
        1px solid
        rgba(255, 255, 255, .14);

    border-radius: 10px;

    outline: none;

    color: #fff;

    font-size: 14px;

    letter-spacing: 1px;

    transition: .3s;
}


.input-codigo input:focus {

    border-color: #b9975b;

    background:
        rgba(255, 255, 255, .09);
}


.input-codigo input::placeholder {

    color:
        rgba(255, 255, 255, .3);
}


/* =========================
   BOTÓN
========================= */

.btn-verificar {

    width: 100%;

    padding: 16px;

    border: none;

    border-radius: 10px;

    background: #b9975b;

    color: #111;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 10px;

    transition: .3s;
}


.btn-verificar:hover {

    background: #d0b477;

    transform:
        translateY(-2px);
}


/* =========================
   MENSAJE
========================= */

.mensaje-codigo {

    text-align: center;

    margin-top: 15px;

    font-size: 13px;

    min-height: 18px;
}


.mensaje-codigo.error {

    color: #e57373;
}


.mensaje-codigo.success {

    color: #81c784;
}


/* =========================
   VOLVER
========================= */

.btn-back {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 8px;

    margin-top: 25px;

    color:
        rgba(255, 255, 255, .5);

    text-decoration: none;

    font-size: 12px;

    transition: .3s;
}


.btn-back:hover {

    color: #fff;
}


/* =========================
   CELULAR
========================= */

@media (max-width: 576px) {

    .codigo-container {

        padding:
            20px 15px;
    }


    .codigo-card {

        padding:
            35px 22px;

        border-radius: 16px;
    }


    .codigo-logo img {

        width: 130px;
    }


    .codigo-header h1 {

        font-size: 25px;
    }

}
```