/* Arquivo de sobreposição para o desenvolvedor */

/* Label I.A — home KV */
.section.inicio-cadastro .kv .kv-ai-label {
    position: absolute;
    left: 1%;
    bottom: 24%;
    z-index: 5;
    writing-mode: sideways-lr;
    /* transform: rotate(180deg); */
    font-family: var(--f-body, inherit);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255);
    padding: 0.35rem 0.2rem;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}

@media (max-width: 991px) {
    .section.inicio-cadastro .kv .kv-ai-label {
        font-size: 1.6rem;
        left: 2%;
        bottom: 46%;
    }
}

@media (max-width: 575px) {
    .section.inicio-cadastro .kv .kv-ai-label {
        font-size: 1.6rem;
        left: 2%;
        bottom: 46%;
    }
}

/*Personalização do protótipo*/
.section.inicio-cadastro .kv.desktop .semanaturbo {
    position: absolute;
    z-index: 4;
    top: 18%;
    left: 1%;
    width: 26%;
    transition: all 0.3s ease-in-out;
}
.section.inicio-cadastro .kv.desktop .img-semanaturbo {
    width: 100%;
    max-width: 400px;
    transition: all 0.3s ease-in-out;
}

/*.section.inicio-cadastro .kv.mobile .semanaturbo {
position: absolute;
z-index: 4;
top: 2%;
left: 2%;
width: 30%;
transition: all 0.3s ease-in-out;
}
.section.inicio-cadastro .kv.mobile .img-semanaturbo {
width: 100%;
max-width: 400px;
transition: all 0.3s ease-in-out;
}*/



/*Geral*/
#loader {
    z-index: 999999999 !important;
}


/* Select2 */
.select2-container{
    display: block!important;
    width: auto!important;
}

.select2-container--default .select2-selection--single:focus{
    outline-color: #ffd998;         
}

.select2-container--default .select2-selection--single{
    padding: 1.7rem 1.2rem 1.7rem 1.2rem!important;
    height: auto!important;
    min-height: 0!important;
    box-sizing: border-box!important;
    border-radius: 0.4rem !important;
    border: none!important;
    margin: 15px 0px 6px 0px!important;
    font-size: 1.4rem!important;
    line-height: 1!important;
    background: var(--c-gray)!important;
    font-family: "Outfit", Arial, sans-serif!important;
    font-weight: 300!important;
    color: var(--c-black)!important;
    width: 100%;
    text-transform: none;
    overflow: hidden;
    display: flex!important;
    align-items: center!important;
    outline-color: var(--c-white);
    outline-width: 0;
    outline-offset: 0;
    outline-style: solid;
    transition: all 0.3s ease-in-out;
}

.select2-container--open .select2-dropdown {
    top: -1px;
}

.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple{
    word-break: break-all!important;
    border-bottom-left-radius: 0!important;
    border-bottom-right-radius: 0!important;
}

.select2-container--default .select2-search--dropdown .select2-search__field{
    font-family: 'Grotesca', Arial, sans-serif;
    font-weight: 400;
    font-size: 12px;
    border-radius: 0.4rem;
    border: 1px solid var(--c-black) !important;
    background: #e9e9e9;
    outline: none;
    padding: 1rem;
}

.select2-container--default .select2-selection--single .select2-selection__rendered{
    position: relative;
    top: 0;
    color: var(--c-black)!important;
    font-family: "Outfit", Arial, sans-serif;
    font-weight: 300;
    font-size: 1.4rem;
    line-height: 1!important;
    padding: 0!important;
    text-shadow: none;
    text-transform: none;
    letter-spacing: var(--form-control-letter-spacing);
    text-align: left;
    padding-left: 0!important;
}

.select2-container .select2-selection--single .select2-selection__rendered{
    overflow: hidden;
    word-break: break-all;
    white-space: nowrap;
}

.select2-container--default .select2-results__option--disabled {
    color: var(--c-black)!important;
    background: var(--c-gray2)!important;
    padding: 1rem!important;
    font-weight: 800!important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow{
    opacity: 0;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{
    color: var(--c-black)!important;
    background: var(--c-yellow1)!important;
    padding: 1rem !important;
    font-weight: 800!important;
}

.select2-results__option--selectable{
    color: var(--c-black);
    font-size: 1.6rem;
    padding: 1rem !important;
}

.select2-results__option{
    color: var(--c-black);
    font-family: 'Grotesca', Arial, sans-serif;
    font-weight: 400;
    font-size: 1.3rem;
    line-height: 1;
    text-shadow: none;
    text-transform: none;
}

.select2-dropdown{
    border: 0px solid #ffffff!important;
    border-radius: 50rem;
    overflow: hidden;
}

label#ProdutoQtdError,
label#ProdutoItemError,
label#erroProduto ,
label#erroProdutoGranel {
    text-align: left;
    display: block;
    width: 100%;
    font-size: 1.3rem;
    line-height: 1;
    font-family: "Outfit", Arial, sans-serif;
    font-weight: 800;
    margin-top: 1px;
    margin-bottom: 8px;
    padding: 0;
    background: transparent;
    color: var(--c-error);
    letter-spacing: 0.3px;
}

.select2-results ::-webkit-scrollbar-thumb {
    background: var(--c-yellow1)!important;
    border-radius: 5rem!important;
}


/*Mapa*/
.mapa img {
    display: none;
}

@media (max-width: 991px){
    .mapsvg svg {
        width: 80%!important;
        margin-top: 50px!important;
    }
}

.section#ganhadores .mapa .quantidade {
    position: relative;
    top: -50px;
    display: inline-block;
    padding: 10px;
    border-radius: 3px;
    font-size: 1.5rem;
    text-transform: uppercase;
    line-height: 110%;
    color: white;
    background: red;
    font-family: "GrotescaCondensed", Arial, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
}
@media (max-width: 991px){
    .section#ganhadores .mapa .quantidade {
        top: 0px;
    }
}
.section#ganhadores .mapa .atualizacao {
    font-size: 1.5rem;
    line-height: 110%;
    font-family: "GrotescaCondensed", Arial, sans-serif;
    font-weight: 800;
}

.section#ganhadores .mapa .ilustracao-mapa {
    /*padding: 20px 10px;*/
    overflow: hidden;
}
@media (max-width: 991px){
    .section#ganhadores .mapa .ilustracao-mapa {
        overflow: hidden;
    }
}
.section#ganhadores .mapa .ilustracao-mapa .mapsvg {
    overflow: inherit;
}

.section#ganhadores .mapa .mapsvg,
.section#ganhadores .mapa .mapsvg * {
    touch-action: pan-y;
}

/*Ajustes no cookies*/
.cmp-revoke-consent {
    position: static!important;
    padding: 0!important;
}


/*Página: Aguarde New */
.aguardenew {
    background: transparent!important;
}
@media (max-width: 991px){
    .aguardenew {
        padding-top: 0rem !important;
    }
}

.aguardenew .section {
    background: transparent;
}

/*Logo*/
.aguardenew .logo {
    position: absolute;
    top: 2%;
    right: 1.5%;
}
.aguardenew .logo img {
    max-width: 150px;
}
@media (max-width: 991px){
    .aguardenew .logo {
        position: relative;
        top: inherit;
        right: inherit;
    }
    .aguardenew .logo img {
        max-width: 150px;
    }
}

.aguardenew .section .padding {
    padding: 5rem 5rem 2rem 5rem!important;
}
@media (max-width: 991px){
    .aguardenew .section {
        padding-top: 3rem !important;
    }
    .aguardenew .section .padding {
        padding: 4rem 3rem 2rem 3rem!important;
    }
}

/*Aviso*/
.aguardenew .section .padding .aviso {
    width: 100%;
    margin: 4rem auto 0 auto;
    border: 3px solid #fff;
    border-radius: 30px;
    padding: 4rem;
    background: #2229FF;
    background: -webkit-linear-gradient(125deg, rgba(34, 41, 255, 1) 69%, rgba(0, 109, 250, 1) 100%);
    background: -moz-linear-gradient(125deg, rgba(34, 41, 255, 1) 69%, rgba(0, 109, 250, 1) 100%);
    background: linear-gradient(125deg, rgba(34, 41, 255, 1) 69%, rgba(0, 109, 250, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2229FF", endColorstr="#006DFA", GradientType=0);
}
.aguardenew .section .padding .title {
    padding: 0px;
    margin-bottom: 1rem;
    font-size: 5rem;
    line-height: 1;
    font-family: "Outfit", Arial, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
}
.aguardenew .section .padding .aviso p {
    padding: 0px;
    margin-bottom: 1rem;
    font-size: 2.2rem;
    line-height: 1;
    font-family: "GrotescaCondensed", Arial, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0;
    color: var(--c-white);
    text-align: center;
    margin-bottom: 0rem;
}
@media (max-width: 991px){
    .aguardenew .section .padding .title {
        font-size: 4rem;
    }
    .aguardenew .section .padding .aviso {
        padding: 3rem 3rem;
    }
    .aguardenew .section .padding .aviso p {
        font-size: 2.4rem;
        line-height: 1.1;
    }
}
@media (min-width: 992px) and (max-width: 1100px){
    .aguardenew .section .padding .aviso {
        padding: 4rem 4rem;
    }
    .aguardenew .section .padding .aviso p {
        font-size: 2.2rem;
    }
}




/*App*/
.aguardenew .section .padding .app {
    font-size: 2.4rem;
    padding: 0px;
    line-height: 120%;
    color: var(--c-white);
    font-family: "GrotescaCondensed", Arial, sans-serif;
    font-weight: 800;
    margin-bottom: 5px;
    text-transform: uppercase;
    text-align: center;
    margin-top: 4rem;
}



/*Footer*/
.aguardenew .footer {
    background: transparent;
}

.aguardenew .footer .padding {
    padding: 0rem 3rem 3rem 3rem;
}

.aguardenew .footer p {
    font-family: "GrotescaCondensed", Arial, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 1.1rem !important;
}

/* Contador */
#aguardenew .countdown {
    position: relative;
    z-index: 9;
    margin-top: 0px;
    width: 850px;
    margin-bottom: 0;
}

#aguardenew .countdown .count {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

#aguardenew .countdown .count > div {
    font-size: 1.6rem;
    padding: 0px;
    line-height: 100%;
    color: var(--c-white);
    font-family: "GrotescaCondensed", Arial, sans-serif;
    font-weight: 800;
    margin-bottom: 5px;
    text-transform: uppercase;
}

#aguardenew .countdown .digits {
    height: 132px;
    background: #8bd2ef !important;
    border-radius: 6px;
    padding-bottom: 0px;
    padding-right: 0px;
    padding-left: 0px;
    font-family: "Grotesca", Arial, sans-serif;
    font-weight: 400;
    overflow: hidden;
    margin: 7px;
}

#aguardenew .countdown .time {
    font-size: 2.4rem;
    padding: 0px;
    line-height: 100%;
    color: #8bd2ef;
    font-family: "GrotescaCondensed", Arial, sans-serif;
    font-weight: 800;
    margin-bottom: 5px;
    text-transform: uppercase;
}

#aguardenew span.line {
    position: absolute;
    z-index: 0;
    left: 12.6%;
    top: 43px;
    content: "";
    width: 77.7px;
    height: 1px;
    border: 1px solid #5b5b5b;
}

#aguardenew .countdown .digits span {
    color: #ffffff;
    margin-top: 7px;
}

@media (max-width: 991px) {
    #aguardenew .countdown {
        position: relative;
        top: inherit;
        bottom: inherit;
        right: inherit;
        z-index: 9;
        margin-bottom: inherit;
        margin-top: inherit;
        width: 100%;
    }
}

#aguardenew .countdown .info {
    font-size: 2rem;
    padding: 0px;
    line-height: 120%;
    color: var(--c-white);
    font-family: "GrotescaCondensed", Arial, sans-serif;
    font-weight: 800;
    margin-bottom: 5px;
    text-transform: uppercase;
}

#aguardenew .countdown .descricao {
    font-size: 1.3rem;
    padding: 0px;
    line-height: 1.3;
    color: var(--c-yellow1);
    font-family: "Grotesca", Arial, sans-serif;
    font-weight: 800;
    margin-bottom: 5px;
    text-transform: none;
    text-shadow: 0px 0px 11px #fdc200;
}

#aguardenew .countdown .descricao2 {
    font-size: 1.4rem;
    padding: 0px;
    line-height: 1.3;
    color: var(--c-yellow1);
    font-family: "Grotesca", Arial, sans-serif;
    font-weight: 800;
    margin-bottom: 5px;
    text-transform: none;
    text-shadow: 0px 0px 11px #fdc200;
}

#aguardenew .countdown .digits div {
    font-size: 90px;
    color: white;
    background: #14A4DE;
    font-family: "GrotescaCondensed", Arial, sans-serif;
    font-weight: 800;
    width: 120px;
    height: 61px;
    line-height: 120px;
    z-index: 1;
    position: relative;
    border-radius: 0;
    border-bottom: 1px solid #072262;
    margin: 0;
    letter-spacing: -5px;
    opacity: 1;
}




/*Leitura do QR Code*/
.cadastro-qrcode-foto .container {
    text-align: center;
}
.cadastro-qrcode-foto #reader {
    width: 100%;
    max-width: 500px;
    margin: 20px auto;
    position: relative;
}
.cadastro-qrcode-foto .qr-reader-logo {
    position: absolute;
    top: 50%;
    left: 53%;
    transform: translate(-50%, -50%);
    max-width: 45%;
    height: auto;
    pointer-events: none;
    z-index: 2;
}
.cadastro-qrcode-foto .qr-reader-logo.hide {
    display: none;
}
.cadastro-qrcode-foto #qr-canvas {
    width: 100%;
    display: block;
    border: 1px solid #ffcb00;
    background-color: #0c2768;
}
.cadastro-qrcode-foto #qr-result {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid var(--c-yellow1);
    background-color: var(--c-yellow1);
    border-radius: 5px;
    display: none;
}
.cadastro-qrcode-foto #qr-result p {
    color: var(--c-bluedark1);
    text-align: center;
    font-weight: 600;
}
.cadastro-qrcode-foto #chave-acesso {
    font-size: 18px;
    font-weight: bold;
    word-break: break-all;
    margin-top: 10px;
    padding: 10px;
    background-color: #ffdc54;
    color: var(--c-bluedark1);
    border-radius: 4px;
}
.cadastro-qrcode-foto #file-input {
    display: none;
}
.cadastro-qrcode-foto .btn {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    margin: 10px 5px;
}
.cadastro-qrcode-foto .btn:hover {
    background-color: #45a049;
}
.cadastro-qrcode-foto .fallback {
    margin-top: 20px;
    display: none;
}
.cadastro-qrcode-foto .fallback p {
    text-align: center;
    color: var(--c-white) !important;
    /* text-shadow: 0px 0px 11px #fdc200; */
    /* color: var(--c-yellow1) !important; */
    /* text-shadow: 0px 0px 11px #fdc200; */
}
.cadastro-qrcode-foto .error {
    text-align: center;
    display: block;
    width: 100%;
    font-size: 1.4rem;
    line-height: 1.4;
    font-family: "Grotesca", Arial, sans-serif;
    font-weight: 800;
    background: transparent;
    color: var(--c-red2);
    padding: 20px;
    border: 0px solid var(--c-red2);
    background-color: transparent;
    border-radius: 5px;
    text-transform: uppercase;
}


#adopt-controller-button {
    z-index: 99999999 !important;
}


/*Faixa*/
.tarja-contador{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    display: inline-block;
    width: 100%;
    max-width: 630px;
    padding: 10px 25px 10px 5px;
    color: #00015c;
    font-family: 'Grotesca', Arial, sans-serif !important;
    font-size: 14px;
    line-height: 150%;
    text-align: center;
    background: #ffcb00;
    transition: all 0.5s ease-in-out;
    top: 77px;
    border-radius: 0.7rem;
    text-transform: uppercase;
    letter-spacing: -0.5px;
}

.tarja-contador.close{
    display: none;
}

@media (max-width: 991px){
    .tarja-contador{
        font-size: 13px;
        line-height: 1.1;
        bottom: inherit;
        top: 90px;
        padding: 17px 25px 15px 25px;
        border-radius: 0.5rem !important;
        max-width: 370px;
    }
}

.tarja-contador .close-contador{
    position: absolute;
    float: inherit;
    opacity: 1;
    z-index: 2;
    cursor: pointer;
    top: 9px;
    right: 5px;
    color: var(--c-blue1);
    line-height: 10px;
    transition: all 0.3s ease-in-out;
}

.tarja-contador .close-contador:hover{
    transform: scale(1.3);
}

.tarja-contador .close-contador i{
    font-size: 25px;
}

.tarja-contador svg{
    top: -3px;
    position: relative;
    margin-right: 7px;
    transition: all 0.3s ease-in-out;
}

.tarja-contador svg:hover{
    transform: scale(1.3);
    transition: all 0.3s ease-in-out;
}

.tarja-contador svg i{
    font-size: 25px;
}

@media (max-width: 991px){
    .tarja-contador {
        font-size: 13px;
        line-height: 1.1;
        bottom: inherit;
        top: 85px;
        padding: 17px 35px 15px 15px;
        border-radius: 0.5rem !important;
        max-width: 370px;
    }
    
    .tarja-contador svg {
        top: 7px;
    }
    
    .tarja-contador .close-contador {
        top: 23px;
    }
}


body[data-encerrado='true'] .encerramento-show {
    display: block !important;
}

body[data-encerrado='true'] .encerramento,
body[data-encerrado='true'] .encerramento-hide,
body:not([data-encerrado='true']) .encerramento-show {
    display: none !important;
}



/* Bolha de participação */
/* Bolha - CTA Participe */
.bolha-participe {
    display: none;
    position: fixed;
    z-index: 999999;
    top: 90px;
    left: 10px;
    /*width: 500px;*/
    width: 100px;
}

.bolha-participe a {
    cursor: pointer;
    height: inherit;
    position: absolute;
}

/*body.scrolled2 .bolha-participe {
display: block;
transition: all 0.3s ease-in-out;
}*/

.bolha-participe {
    display: block;
    transition: all 0.3s ease-in-out;
}

#bolhaMagnet{
    position: fixed;
    left: 16px; top: 120px;   /*posição inicial */
    z-index: 10000;
    cursor: grab;
    touch-action: none;
    transition: left .25s ease, top .25s ease, transform .15s ease; /* suaviza o snap */
}
#bolhaMagnet.dragging{
    cursor: grabbing;
    transition: none; /* sem animação enquanto arrasta */
}

@media (max-width: 991px){
    body.body-index #bolhaMagnet{
        left: 16px; top: 400px;
    }
}

/* Bolha — overlay/fade PNG→GIF */
.bolha-participe [data-login="desconectado"]{
    inset: 0;
    width: 100%;
    display: block;
}

.bolha-participe .cta-bolha-wrap{
    position: relative;
    display: block;
    width: 100%;
    border-radius: inherit;
}

.bolha-participe .cta-static,
.bolha-participe .cta-gif{
    display: block;
    width: 100%;
    height: auto;
    border-radius: inherit;
    will-change: opacity;
    transition: opacity .3s ease;
}

.bolha-participe .cta-static{
    position: relative;
    z-index: 2;
    opacity: 1;
}

.bolha-participe .cta-gif{
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
}

/* Estado “play”: troca as opacidades */
.bolha-participe .cta-bolha-wrap.play .cta-static{ opacity: 0; }
.bolha-participe .cta-bolha-wrap.play .cta-gif{ opacity: 1; }

/* Acessibilidade: reduzir movimento */
@media (prefers-reduced-motion: reduce){
    .bolha-participe .cta-bolha-wrap.play .cta-static{ opacity: 1; }
    .bolha-participe .cta-bolha-wrap.play .cta-gif{ opacity: 0; }
}

/* estados extras para a timeline */
.bolha-participe .cta-bolha-wrap.play.fadeout .cta-gif{
    opacity: 0; /* GIF some após 2s, PNG ainda oculto por .play */
}

.bolha-participe .cta-bolha-wrap{
    transition: opacity .25s ease; /* para o hold→visível no 7s */
}
.bolha-participe .cta-bolha-wrap.hold{
    opacity: 0;
    pointer-events: none;
}

/*
* Safari/iOS: zoom automático ao focar campos com fonte computada menor que 16px.
* Regra global — carrega após ype.css e sobrescreve valores em rem menores.
*/
textarea,
select,
input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="hidden"]) {
    font-size: 16px !important;
}

@media (min-width: 1151px) and (max-width: 1366px){
    textarea,
    select,
    input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="hidden"]) {
        font-size: 14px !important;
    }
}

@media (min-width: 992px) and (max-width: 1150px){
    textarea,
    select,
    input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="hidden"]) {
        font-size: 12px !important;
    }
}

.select2-container .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-search--dropdown .select2-search__field {
    font-size: 16px !important;
}

/* [DESATIVADO] Cadastro cupom sucesso — intro vídeo (~8s). Reativar se o cliente solicitar.
body.cadastrosucesso-intro-active .cadastrosucesso-intro-content {
    display: none !important;
}

.section.cadastrosucesso-intro {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    background: transparent;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    margin-top: -10rem !important;
}

.section.cadastrosucesso-intro.cadastrosucesso-intro--ready {
    opacity: 1;
    visibility: visible;
}

.cadastrosucesso-intro__cover {
    position: relative;
    width: 100%;
    line-height: 0;
    margin-bottom: -4rem !important;
}

.cadastrosucesso-intro__video {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    max-width: 100%;
    margin: 0;
    vertical-align: top;
    background: transparent;
}

.cadastrosucesso-intro__caption {
    position: absolute;
    left: 50%;
    bottom: 8%;
    transform: translateX(-50%);
    z-index: 2;
    width: 92%;
    max-width: 820px;
    margin: 0;
    padding: 0 1rem;
    font-family: "Outfit", Arial, sans-serif;
    font-size: 1.6rem;
    line-height: 1.35;
    font-weight: 400;
    text-align: center;
    color: var(--c-white, #fff);
    pointer-events: none;
}

@media (max-width: 991px) {
    .cadastrosucesso-intro__caption {
        bottom: 6%;
        line-height: 1.1;
        width: 94%;
    }
}

.cadastrosucesso-intro--leaving {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.65s ease, visibility 0.65s ease;
}

@media (prefers-reduced-motion: reduce) {
    .section.cadastrosucesso-intro {
        transition-duration: 0.01ms !important;
    }
}
*/



/* Box - Cadastro */
#boxParticipe {
    z-index: 999999999 !important;
    display: none;
}

#boxParticipe .boxParticipe {
  position: fixed;
  z-index: 999999999 !important;
  left: calc(50% - 202px);
  bottom: 50px;
  border-radius: 10px;
  max-width: 520px;
  transition: none;
  color: var(--c-bluedark1);
  background: var(--c-white);
}

#boxParticipe .boxParticipe .btn-fechar {
  width: 20px;
  height: 20px;
  background: #dcdcdc;
  border-radius: 0.5rem;
  cursor: pointer;
  border: 0;
  margin: 0px 0px 0 0;
  padding: 0rem;
  position: absolute;
  top: 7px;
  right: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#boxParticipe .boxParticipe .btn-fechar svg {
  display: block;
}

#boxParticipe .boxParticipe .btn-fechar:hover {
  background: #c8c8c8;
}

#boxParticipe .boxParticipe .btn-fechar:hover svg {
  transform: scale(1.1);
  transition: all 0.3s ease-in-out;
}

@media (max-width: 991px) {
    #boxParticipe .boxParticipe {
      left: 15px;
      bottom: 10px;
      max-width: calc(100% - 30px);
    }
}
#boxParticipe .padding {
    max-width: 400px;
    padding: 2rem 3rem 3rem 3rem;
}

#boxParticipe .padding .title {
    padding: 0px;
    margin-bottom: 1rem;
    margin-top: 0;
    font-size: 3rem;
    line-height: 1;
    font-family: "GrotescaCondensed", Arial, sans-serif;
    font-weight: 800;
    text-transform: none;
    letter-spacing: 0;
    color: var(--c-bluedark1);
    text-align: center;
}


#boxParticipe .form-control {
  height: 45px;
}
#boxParticipe [class*="vld-"] + .error {
  position: absolute;
  text-align: left;
  display: block;
  width: 100%;
  font-size: 1.1rem;
  line-height: 1;
  font-family: "Grotesca", Arial, sans-serif;
  font-weight: 800;
  margin-top: 0px;
  margin-bottom: 8px;
  padding: 0 0 0 19px;
  background: transparent;
  color: #ff494b;
}
#boxParticipe .float-placeholder {
  display: none;
}

#boxParticipe .padding  .btn {
  position: relative;
  height: 45px;
  font-family: 'Grotesca', Arial, sans-serif;
  font-weight: 800;
  color: var(--c-white);
  background: var(--c-red1);
  border-color: var(--c-red1);
  font-size: 2rem;
  line-height: 1;
  padding: 1rem 0rem 1.4rem 0rem;
  transition: background 0.3s ease-in-out, border-color 0.3s ease-in-out, transform 0.3s ease-in-out;
  text-transform: none;
  text-decoration: none;
  border-radius: 0.7rem;
  margin: 15px 0px 6px 0px;
  transform: scale(1.1);
  box-shadow: 0 0 16px 4px rgba(255, 58, 40, 0.75);
}
#boxParticipe .padding  .btn:focus,
#boxParticipe .padding  .btn:hover,
#boxParticipe .padding  .btn.active {
  color: var(--c-white);
  background: var(--c-red2);
  border-color: var(--c-red2);
  transform: scale(1.2);
  box-shadow: 0 0 18px 4px rgba(222, 0, 3, 0.7);
}

/* Elementos decorativos da campanha */
.campaign-element {
    position: absolute;
    z-index: 1;
    display: block;
    height: auto;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 1.2rem 1.5rem rgba(0, 31, 96, 0.18));
}

.section:has(> .campaign-element) > .padding {
    position: relative;
    z-index: 2;
}

.campaign-element-ship {
    top: 11%;
    right: 12%;
    width: clamp(13rem, 19vw, 39rem);
}

.campaign-element-podium {
    bottom: -4rem;
    left: 1%;
    width: clamp(10rem, 15vw, 25rem);
}

.campaign-element-claw-ype {
    top: 32rem;
    right: 8rem;
    width: clamp(11rem, 12vw, 19rem);
}

.campaign-element-claw-tixan {
    top: 42rem;
    right: 6%;
    width: clamp(11rem, 15vw, 27rem);
    /* width: clamp(11rem, 12vw, 23rem); */
}

.campaign-element-king {
    left: 5rem;
    bottom: 8.8rem;
    width: clamp(12rem, 24vw, 22rem);
}

.campaign-element-brasil {
    top: 12rem;
    right: 3%;
    width: clamp(10rem, 15vw, 21rem);
}

@media (max-width: 991px) {
    .campaign-element {
        filter: drop-shadow(0 0.8rem 1rem rgba(0, 31, 96, 0.16));
    }

    .campaign-element-ship {
        top: 8rem;
        right: -2rem;
        width: 10rem;
    }

    .campaign-element-podium {
        bottom: -1rem;
        left: -1.5rem;
        width: 9rem;
    }

    .campaign-element-claw-ype {
        top: 58rem;
        right: -2.5rem;
        width: 9rem;
    }

    .campaign-element-claw-tixan {
        top: 9rem;
        right: -0.8rem;
        width: 9rem;
    }

    .campaign-element-king {
        left: 3rem!important;
        bottom: -0.2rem!important;
        width: clamp(12rem, 26vw, 40rem)!important;
    }

    .campaign-element-brasil {
        top: 7rem;
        right: -2rem;
        width: 9rem;
    }
}

@media (max-width: 575px) {
    .campaign-element-ship {
        top: 8rem;
        width: 15rem;
    }

    .campaign-element-podium {
        width: 7.5rem;
    }

    .campaign-element-claw-ype {
        top: -2rem;
        width: 11rem;
        right: 2%;
    }

    .campaign-element-claw-tixan {
        top: 1rem;
        width: 10.5rem;
        right: 1rem;
    }

    .campaign-element-king {
        left: 28% !important;
        bottom: 1.8rem !important;
        width: clamp(12rem, 40vw, 40rem) !important;
    }

    .campaign-element-brasil {
        top: 15.9rem;
        width: 10.5rem;
        left: 3rem;
        right: inherit !important;
    }
}

/* Dúvidas */
@media (max-width: 991px) {
    .section.duvidas .padding {
        padding-bottom: 30rem!important;
    }
}

/* Popup: Como cadastrar */
.popup-comocadastrar .modal-dialog {
    max-width: 520px;
}

.popup-comocadastrar .modal-content {
    min-width: auto;
    max-height: none;
    overflow: visible;
}

.popup-comocadastrar .btn-fechar {
    background: transparent !important;
    color: #fff;
}

.popup-comocadastrar .btn-fechar svg {
    display: block;
    margin: 0 auto;
}

.popup-comocadastrar .video-embed {
    width: 100%;
    max-width: 315px;
    margin: 0 auto 2.4rem;
}

.popup-comocadastrar .video-embed iframe {
    display: block;
    width: 100%;
    height: 560px;
    border: 0;
    border-radius: 1.2rem;
    background: transparent;
}

.popup-comocadastrar .nav-tabs {
    display: flex;
    gap: 0.8rem;
    border: 0;
    margin: 0 0 1.6rem;
}

.popup-comocadastrar .nav-item {
    flex: 1;
}

.popup-comocadastrar .nav-link {
    width: 100%;
    border: 1px solid #fff;
    border-radius: 2rem;
    color: #fff;
    background: transparent;
    font-family: "Outfit", Arial, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 1.4rem;
    line-height: 1.2;
    padding: 0.8rem 1rem;
}

.popup-comocadastrar .nav-link:hover,
.popup-comocadastrar .nav-link:focus {
    border-color: var(--c-yellow1);
    color: var(--c-yellow1);
    background: transparent;
}

.popup-comocadastrar .nav-link.active {
    background: var(--c-yellow1);
    border-color: var(--c-yellow1);
    color: var(--c-bluedark1, #002c6c);
}

.popup-comocadastrar .descricao p {
    margin-bottom: 1rem;
}

.popup-comocadastrar .descricao p:last-child {
    margin-bottom: 0;
}

@media (max-width: 991px) {
    .popup-comocadastrar .modal-content {
        padding: 4rem 2rem 3rem;
    }

    .popup-comocadastrar .video-embed iframe {
        height: 480px;
    }
}

/* Brilho pulsante verde — botão Quero participar / Começar a participar (home) */
@keyframes piscaPiscaGreen {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(90, 220, 70, 0.7), 0px -1px 16px 4px rgb(76 186 63);
    }

    50% {
        transform: scale(1.045);
        box-shadow: 0 0 0 10px rgba(90, 220, 70, 0), 0px -1px 6px 2px rgb(47 160 38);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(90, 220, 70, 0.7), 0px -1px 16px 4px rgb(76 186 63);
    }
}

.piscaPisca-green {
    -webkit-animation-name: piscaPiscaGreen;
    animation-name: piscaPiscaGreen;
    animation-duration: 0.85s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    transition: background 0.3s ease-in-out, border-color 0.3s ease-in-out !important;
}

.piscaPisca-green:hover,
.piscaPisca-green:focus {
    animation-play-state: paused;
    transform: scale(1.05);
}

/* CTA Começar a participar da index — vermelho */
#frm-verificacpf .btn.btn-red {
    background: var(--c-red1);
    border-color: var(--c-red1);
    text-shadow: 0 1px 2px rgba(80, 0, 0, 0.35);
    box-shadow: 0 0 16px 4px rgba(255, 58, 40, 0.75);
}

#frm-verificacpf .btn.btn-red:hover,
#frm-verificacpf .btn.btn-red:focus,
#frm-verificacpf .btn.btn-red.active {
    background: var(--c-red2);
    border-color: var(--c-red2);
    box-shadow: 0 0 18px 4px rgba(222, 0, 3, 0.55);
}

@keyframes piscaPiscaRed {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 58, 40, 0.85), 0px -1px 16px 4px rgb(255 58 40);
    }

    50% {
        transform: scale(1.045);
        box-shadow: 0 0 0 10px rgba(255, 58, 40, 0), 0px -1px 6px 2px rgb(222 0 3);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 58, 40, 0.85), 0px -1px 16px 4px rgb(255 58 40);
    }
}

.piscaPisca-red,
#boxParticipe .padding .btn.piscaPisca-red,
#frm-verificacpf .btn.piscaPisca-red,
.popup-participarminuto .btn.piscaPisca-red {
    -webkit-animation-name: piscaPiscaRed !important;
    animation-name: piscaPiscaRed !important;
    animation-duration: 0.85s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    transition: background 0.3s ease-in-out, border-color 0.3s ease-in-out !important;
}

.piscaPisca-red:hover,
.piscaPisca-red:focus {
    animation-play-state: paused;
    transform: scale(1.05);
    box-shadow: 0 0 18px 4px rgba(255, 58, 40, 0.75) !important;
}

@media (prefers-reduced-motion: reduce) {
    .piscaPisca-green,
    .piscaPisca-red {
        animation: none;
    }
}

/* Popup: participar após 1 minuto */
.popup-participarminuto .modal-content {
    min-width: auto;
}

.popup-participarminuto .titulo {
    font-size: 3.2rem;
}

.popup-participarminuto .descricao {
    font-size: 2.185rem;
    line-height: 1.35;
    max-width: 36rem;
    margin-left: auto;
    margin-right: auto;
}

.popup-participarminuto .descricao .nowrap {
    white-space: nowrap;
}

.popup-participarminuto .button .btn {
    min-width: 26rem;
    box-shadow: 0 0 16px 4px rgba(255, 58, 40, 0.75);
}

.popup-participarminuto .btn-fechar {
    background: transparent !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-participarminuto .btn-fechar svg {
    display: block;
}

@media (max-width: 991px) {
    .popup-participarminuto .titulo {
        font-size: 2.4rem;
    }

    .popup-participarminuto .descricao {
        font-size: 1.955rem;
    }

    .popup-participarminuto .button .btn {
        min-width: 0;
        width: 100%;
    }
}

/* QA #ajustes_062126_2 — Menu branco, itens azuis, botões vermelhos */
#menu nav {
    background: #ffffff !important;
    filter: none;
    box-shadow: 0 4px 16px rgba(0, 1, 92, 0.14);
}

#menu .navbar-nav a,
#menu .navbar-nav button,
.navbar-light .navbar-nav .nav-link,
.navbar-nav .nav-link {
    color: var(--c-blue1);
}

#menu .navbar-nav a:hover,
#menu .navbar-nav button:hover,
#menu .navbar-nav a.active,
#menu .navbar-nav button.active,
#menu .navbar-nav a.active:hover,
#menu .navbar-nav button.active:hover,
.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .show > .nav-link {
    color: var(--c-bluenew1);
    background: transparent;
    text-decoration: none;
    text-shadow: none;
}

#menu .navbar-nav a span {
    color: var(--c-white);
    background: var(--c-red1);
    text-shadow: none;
    animation: none;
    /* -webkit-animation-name: piscaPiscaRed; */
    /* animation-name: piscaPiscaRed; */
}

#menu .navbar-nav a span:hover,
#menu .navbar-nav a:hover span {
    color: var(--c-white);
    background: var(--c-red2);
    /* box-shadow: 0 0 12px rgba(222, 0, 3, 0.35); */
    box-shadow: none;
    text-shadow: none;
}

#menu .user .btn.btn-login,
#menu .user.user_logado .btn.btn-login {
    color: var(--c-blue1);
}

#menu .user .btn.btn-login:hover,
#menu .user.user_logado .btn.btn-login:hover {
    color: var(--c-bluenew1);
    text-shadow: none;
}

@media (max-width: 991px) {
    #menu nav .user2 {
        animation: none;
        /* -webkit-animation-name: piscaPiscaRed; */
        /* animation-name: piscaPiscaRed; */
    }

    #menu .user .btn.btn-login.mobile {
        color: var(--c-white);
        background: var(--c-red1);
        border-color: var(--c-red1);
        padding: 1.2rem 2rem;
        border-radius: 0.5rem;
        box-shadow: none;
    }

    #menu .user .btn.btn-login.mobile:hover,
    #menu .user .btn.btn-login.mobile:focus {
        color: var(--c-white);
        background: var(--c-red2);
        border-color: var(--c-red2);
        text-shadow: none;
    }
}

#menu .user2 .btn.btn-yellow,
#menu .user2 .btn.btn-yellow:focus,
#menu .user2 .btn.btn-yellow:hover,
#menu .user2 .btn.btn-yellow.active {
    color: var(--c-white);
    background: var(--c-red1);
    border-color: var(--c-red1);
    text-shadow: none;
    box-shadow: none;
    /* box-shadow: 0 0 16px 4px rgba(255, 58, 40, 0.75); */
}

#menu .user2 .btn.btn-yellow:hover,
#menu .user2 .btn.btn-yellow:focus,
#menu .user2 .btn.btn-yellow.active {
    background: var(--c-red2);
    border-color: var(--c-red2);
}

#menu .navbar-toggler,
#menu .navbar-toggler i,
#menu .navbar-toggler.icone-menu:before,
#menu .navbar-toggler[aria-expanded="true"].icone-menu:before {
    color: var(--c-blue1);
    fill: var(--c-blue1) !important;
}

#menu .navbar-toggler svg path {
    fill: var(--c-blue1) !important;
}

@media (max-width: 991px) {
    #menu nav,
    #menu .navbar-collapse,
    .navbar-collapse {
        background: #ffffff !important;
        filter: none;
    }

    #menu .navbar-toggler {
        color: var(--c-blue1);
    }

    #menu .navbar-nav a:hover,
    #menu .navbar-collapse a.active {
        color: var(--c-bluenew1) !important;
        background: transparent;
    }
}

/* Mobile home: navio no topo, form no meio, prêmios gerais depois do botão (desktop intacto) */
.premio-1mm-home-wrap,
.premio-carro-home-wrap,
.headline-ype-mobile,
.descricao-home-mobile {
    display: none !important;
}

@media (max-width: 991px) {
    .section.inicio-cadastro .kv.mobile,
    .section.inicio-cadastro .kv.mobile.kv-sem-selo,
    .section.inicio-cadastro [data-login="desconectado"] .kv.mobile,
    .section.inicio-cadastro [data-login="conectado"] .kv.mobile {
        display: none !important;
    }

    #inicio .img-bolhas {
        display: none !important;
    }

    body.body-index .bolha-participe,
    body.body-index #bolhaMagnet {
        display: none !important;
    }

    .section.inicio-cadastro .padding > .row {
        display: flex;
        flex-direction: column;
    }

    .premio-1mm-home-wrap {
        order: -2;
        display: block !important;
        position: relative;
        z-index: 2;
        padding: 0;
        margin: 0;
    }

    #cadastro2 {
        order: -1;
    }

    .premio-1mm-home {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        padding: 1.2rem 1.6rem 0.2rem;
        overflow: visible;
        pointer-events: none;
    }

    .premio-1mm-navio {
        display: block;
        width: auto;
        height: auto;
        max-width: min(100vw, 500px);
        max-height: 55vh;
        /*max-height: 40vh;*/
        object-fit: contain;
        object-position: center;
        user-select: none;
        filter: drop-shadow(0 14px 22px rgba(12, 24, 72, 0.22));
        transform-origin: 50% 38%;
        /* animation: premioNavio 6.8s ease-in-out infinite; */
        will-change: transform;
    }

    .section.inicio-cadastro .formulario {
        padding-top: 1.6rem !important;
        padding-bottom: 3.2rem !important;
    }

    .section.inicio-cadastro #frm-verificacpf .title {
        text-align: center;
        margin-bottom: 0.6rem;
        letter-spacing: 0.02em;
    }

    .section.inicio-cadastro #frm-verificacpf .descricao-home-desktop {
        display: none !important;
    }

    .section.inicio-cadastro #frm-verificacpf .headline-ype-mobile {
        display: block !important;
        margin: 0 auto 0.7rem;
        padding: 0.35rem 0.6rem 0.5rem;
        max-width: 22em;
        font-family: "Outfit", Arial, sans-serif;
        font-size: 1.85rem;
        font-weight: 700;
        line-height: 1.3;
        letter-spacing: 0.01em;
        color: #fff;
        text-align: center;
    }

    .section.inicio-cadastro #frm-verificacpf .headline-ype-mobile strong {
        color: var(--c-yellow1);
        font-weight: 800;
    }

    .section.inicio-cadastro #frm-verificacpf .headline-ype-jump {
        display: inline-block;
        animation: frasePula 3.6s cubic-bezier(0.28, 0.84, 0.42, 1) infinite;
        will-change: transform;
    }

    .section.inicio-cadastro #frm-verificacpf .descricao-home-mobile {
        display: block !important;
        margin-top: 0 !important;
        margin-bottom: 2rem !important;
        padding: 0 0.8rem;
        font-size: 1.45rem !important;
        font-weight: 400;
        line-height: 1.4;
        color: rgba(255, 255, 255, 0.92) !important;
        text-align: center;
    }

    .premio-carro-home-wrap {
        display: block !important;
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
        margin-top: 2.8rem;
        padding: 0 0.4rem;
    }

    .premio-carro-home {
        display: flex;
        justify-content: center;
        pointer-events: none;
    }

    .premio-carro-home img {
        display: block;
        width: 100%;
        height: auto;
        max-width: 100%;
        object-fit: contain;
        user-select: none;
        filter: drop-shadow(0 10px 18px rgba(12, 24, 72, 0.16));
    }
}

@media (max-width: 991px) and (max-height: 720px) {
    .premio-1mm-home {
        padding-top: 0.8rem;
        padding-bottom: 0;
    }

    .premio-1mm-navio {
        max-width: min(78vw, 300px);
        max-height: 32vh;
    }

    .section.inicio-cadastro .formulario {
        padding-top: 1.2rem !important;
        padding-bottom: 2.4rem !important;
    }

    .premio-carro-home-wrap {
        margin-top: 2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .premio-1mm-navio,
    .headline-ype-jump {
        animation: none !important;
        transform: none !important;
    }
}

@keyframes frasePula {
    0%,
    68%,
    100% {
        transform: translate3d(0, 0, 0);
    }
    74% {
        transform: translate3d(0, -9px, 0);
    }
    80% {
        transform: translate3d(0, 0, 0);
    }
    85% {
        transform: translate3d(0, -5px, 0);
    }
    90% {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes premioNavio {
    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(-1.6deg);
    }
    25% {
        transform: translate3d(4px, -5px, 0) rotate(0.6deg);
    }
    50% {
        transform: translate3d(0, -2px, 0) rotate(1.8deg);
    }
    75% {
        transform: translate3d(-4px, -6px, 0) rotate(-0.5deg);
    }
}

/* Como participar — 4 blocos só no mobile (desktop intacto) */
.cp-mobile {
    display: none !important;
}

@media (max-width: 991px) {
    .section.como-participar .cp-desktop-passos,
    .section.como-participar .packProdutos {
        display: none !important;
    }

    .section.como-participar .header-section {
        margin-bottom: 2.4rem !important;
    }

    .section.como-participar .header-section h2 {
        font-size: 2.8rem;
    }

    .cp-mobile {
        display: flex !important;
        flex-direction: column;
        gap: 1.8rem;
        position: relative;
        z-index: 1;
        padding: 0 0.2rem 1rem;
    }

    .cp-mobile-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 2.2rem 1.6rem 2rem;
        overflow: visible;
        border-radius: 2.2rem;
        background: linear-gradient(180deg, rgba(42, 18, 78, 0.42) 0%, rgba(16, 10, 40, 0.28) 100%);
        border: 1px solid rgba(255, 255, 255, 0.16);
        box-shadow: 0 10px 28px rgba(8, 6, 30, 0.18);
        text-align: center;
        scroll-margin-top: 8.5rem;
    }

    .cp-mobile-card--arte {
        padding: 0.8rem;
    }

    .cp-mobile-title {
        margin: 0 0 0.9rem;
        max-width: 16em;
        font-family: "Outfit", Arial, sans-serif;
        font-size: 2.15rem;
        font-weight: 800;
        line-height: 1.15;
        letter-spacing: 0.01em;
        text-transform: uppercase;
        color: var(--c-yellow1);
        text-shadow: 0 0 18px rgba(255, 214, 0, 0.28);
    }

    .cp-mobile-text {
        margin: 0 0 1.2rem;
        /*max-width: 22em;*/
        font-size: 1.45rem;
        font-weight: 400;
        line-height: 1.4;
        color: rgba(255, 255, 255, 0.94);
    }

    .cp-mobile-text strong {
        font-weight: 700;
        color: #fff;
    }

    .cp-mobile-figure {
        position: relative;
        width: 100%;
        max-width: 34rem;
        margin: 0 auto;
    }

    .cp-mobile-figure + .cp-mobile-figure {
        margin-top: 1rem;
    }

    .cp-mobile-figure img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: contain;
        user-select: none;
        -webkit-user-drag: none;
        pointer-events: none;
    }

    .cp-mobile-hit {
        position: absolute;
        z-index: 2;
        display: block;
        overflow: hidden;
        text-indent: -9999px;
        white-space: nowrap;
    }

    .cp-mobile-hit--site {
        top: 21%;
        left: 8%;
        width: 84%;
        height: 16%;
    }

    .cp-mobile-hit--whatsapp {
        top: 38%;
        left: 8%;
        width: 84%;
        height: 16%;
    }

    .section.como-participar .cta-produtos {
        margin-top: 2.4rem;
        text-align: center;
    }
}

[data-tag-trigger="header_click_premios|header"] {
    /* Suas propriedades CSS aqui */
    display: none;
}

/* Home — etapas do cadastro (CPF → dados pessoais) */
.home-steps {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    list-style: none;
    margin: 0 0 1.8rem;
    padding: 0;
}
.home-steps__item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: rgba(255, 255, 255, 0.55);
    font-family: "Outfit", Arial, sans-serif;
    font-weight: 800;
    font-size: 1.25rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.home-steps__num {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.45);
    color: #fff;
    font-size: 1.3rem;
    line-height: 1;
    flex-shrink: 0;
}
.home-steps__item.is-active {
    color: var(--c-yellow1);
}
.home-steps__item.is-active .home-steps__num {
    background: var(--c-yellow1);
    border-color: var(--c-yellow1);
    color: var(--c-bluedark1);
    box-shadow: 0 0 14px rgba(255, 203, 0, 0.55);
}
.home-steps__item.is-done .home-steps__num {
    background: rgba(255, 203, 0, 0.35);
    border-color: rgba(255, 203, 0, 0.35);
    color: var(--c-bluedark1);
}
.home-steps__bar {
    width: 42px;
    height: 2px;
    margin: 0 0.8rem;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.35);
    flex-shrink: 0;
}
.home-steps__bar.is-done {
    background: var(--c-yellow1);
}
@media (max-width: 748px) {
    .home-steps {
        justify-content: center;
        margin-bottom: 1.4rem;
    }
    .home-steps__bar {
        width: 28px;
        margin: 0 0.6rem;
    }
}