/* =====================================================================
estilo.css — O visual do que esta pasta injeta
---------------------------------------------------------------------
Só o modal e os campos do formulário, que são escritos pelo
ui-popup.js. Mais as poucas classes novas que o card de preços
ganhou por causa do parcelamento.
O CARD DE PREÇOS NÃO ESTÁ AQUI. Ele é HTML normal no index.html e o
visual dele mora no assets/css/style.css, no bloco .pricing, junto
com as outras seções da página.
COMO CARREGAR
DEPOIS do style.css da página, para vencer em caso de empate.
AS CLASSES NOVAS, que não existiam antes
.pricing__cta--duplo o arranjo de DOIS botões (4x e 12x)
.pricing__btn cada botão de pagamento do card
.pricing__indisponivel o aviso quando não há oferta configurada
.popup__miolo onde o modal troca formulário por escolha
.popup__subtitulo a linha de apoio da tela de escolha
.popup__opcoes a coluna de botões da tela de escolha
.popup__opcao cada botão de parcelamento
CUIDADO AO EDITAR: um caractere solto ANTES da primeira regra faz o
navegador ler "aquele caractere + .popup" como um seletor único,
inválido, e DESCARTAR a regra inteira em silêncio. Foi o que
aconteceu uma vez: um "0" perdido no topo do arquivo tirou todo o
estilo do modal, e ele virou um bloco solto no rodapé da página.
Aninhamento nativo do CSS (&). Pede Chrome 112+, Safari 16.5+ ou
Firefox 117+ — o mesmo que o style.css da página já exigia.
===================================================================== */
/* ======================================================================
2 · MODAL (injetado pelo ui-popup.js)
====================================================================== */
.popup {
position: fixed;
inset: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background-color: #000000a6;
opacity: 0;
transition: opacity .25s ease;
overflow-y: auto;
/* O popup.js usa o atributo [hidden] para tirá-lo do fluxo e a classe
.is-open para o fade. Sem o !important o display:flex acima venceria
o [hidden], e o popup ficaria visível o tempo todo. */
&[hidden] {
display: none !important;
}
&.is-open {
opacity: 1;
}
& .popup__dialog {
position: relative;
width: 100%;
max-width: 500px;
padding: 38px 30px;
border-radius: 15px;
background-image: linear-gradient(153deg, #200000, #741003);
box-shadow: 0 18px 50px #0000006e;
font-family: Montserrat, sans-serif;
@media (max-width: 991px) { /* tablet */
max-width: 380px;
padding: 40px 20px;
}
}
& .popup__close {
position: absolute;
top: -10px;
right: -10px;
width: 35px;
height: 35px;
padding: 0;
border: 2px solid #e4ae5f;
border-radius: 100%;
background-color: #e4ae5f;
color: #000;
font-size: 20px;
font-weight: 700;
line-height: 1;
cursor: pointer;
@media (max-width: 479px) { /* celular */
width: 30px;
height: 30px;
font-size: 17px;
}
}
& .popup__title {
width: 100%;
margin: 0 0 25px;
color: #fff;
text-align: center;
font-size: 20px;
font-weight: 700;
line-height: 26px;
}
}
/* ======================================================================
3 · CAMPOS DO FORMULÁRIO (injetados pelo ui-popup.js)
====================================================================== */
/* ---- Campo de formulário (.field) e o formulário de lead ----------- */
/* Estrutura que o form.js espera em cada campo:
.field > .field__label + .field__input + .field__error
Ele acha o .field pelo closest() e escreve a mensagem no .field__error. */
/* O popup.js põe .no-scroll no enquanto o diálogo está aberto:
sem isto, rolar dentro do popup rola a página atrás dele. */
.no-scroll {
overflow: hidden;
}
.field {
margin-bottom: 16px;
text-align: left;
}
.field__label {
display: block;
margin-bottom: 6px;
color: #ffffffcc;
font-size: 13px;
font-weight: 500;
}
.field__input {
width: 100%;
height: 55px;
padding: 0 20px;
border: 1px solid #fff;
border-radius: 15px;
background-color: #fff;
color: #333;
font-family: inherit;
font-size: 15px;
}
.field__input::placeholder {
color: #9a9a9a;
}
.field__input:focus-visible {
outline: 2px solid #e4ae5f;
outline-offset: 2px;
}
/* Campo inválido: o form.js marca aria-invalid, e a cor vem daí — assim
não é preciso uma classe só para o estado de erro. */
.field__input[aria-invalid="true"] {
border-color: #ff7a7a;
box-shadow: 0 0 0 3px #ff7a7a33;
}
.field__error {
min-height: 16px;
margin: 6px 0 0;
color: #ffb3b3;
font-size: 13px;
line-height: 16px;
}
/* Telefone: o seletor de DDI e o campo lado a lado. O geo-ddi.js
pré-seleciona o país do visitante no