é a página (12px de respiro lateral). Cada .ck-view é o CARTÃO BRANCO que envolve todo o conteúdo do passo. */ body[data-tela="v-form"] .ck-wrap, body[data-tela="v-pix"] .ck-wrap, body[data-tela="v-upsell"] .ck-wrap, body[data-tela="v-ok"] .ck-wrap{ max-width:100%; /* left/right em vez de padding-inline: WebView antigo de Android não entende propriedades lógicas e ignoraria a regra inteira */ padding-left:12px; padding-right:12px; margin-left:auto; margin-right:auto; } body[data-tela="v-form"] .ck-main, body[data-tela="v-pix"] .ck-main, body[data-tela="v-upsell"] .ck-main, body[data-tela="v-ok"] .ck-main{ padding-top:16px; padding-bottom:32px; } body[data-tela="v-form"] .ck-view, body[data-tela="v-pix"] .ck-view, body[data-tela="v-upsell"] .ck-view, body[data-tela="v-ok"] .ck-view{ padding:12px; background:var(--branco); border-radius:var(--pg-r); box-shadow:var(--pg-sombra-cartao); } /* ═══ Abertura (ck-lede) ═══ O cliente não pediu para remover este bloco — só para trazê-lo à escala da Cakto: título ~20px e apoio 14px cinza. */ body[data-tela="v-form"] .ck-h1, body[data-tela="v-pix"] .ck-h1, body[data-tela="v-upsell"] .ck-h1, body[data-tela="v-ok"] .ck-h1{ font-size:20px; line-height:1.3; letter-spacing:-0.3px; font-weight:var(--p-bold); } body[data-tela="v-form"] .ck-sub, body[data-tela="v-pix"] .ck-sub, body[data-tela="v-upsell"] .ck-sub, body[data-tela="v-ok"] .ck-sub{ margin-top:6px; max-width:none; font-size:14px; line-height:20px; letter-spacing:0; color:var(--tinta-2); } /* na tela de dados o texto acompanha os títulos das seções, à esquerda; PIX, oferta e confirmação seguem centralizados como já eram */ body[data-tela="v-form"] .ck-lede{ margin-bottom:16px; text-align:left; } /* ═══ Situação da reunião ═══ Painel de uma etapa no topo do passo de pagamento. Não é enfeite: diz o que falta — o pagamento — para liberar o link da reunião. É o mesmo fato que o botão promete. Tudo aqui anima só opacity e transform: são as duas propriedades que a GPU compõe sem recalcular layout. Animar width/height numa tela de pagamento engasga em celular intermediário. */ body[data-tela="v-form"] .ck-reuniao{ margin-bottom:24px; padding:14px; background:var(--pg-painel); border:1px solid var(--pg-fio); border-radius:var(--pg-r); } body[data-tela="v-form"] .ck-etapas{ display:flex; flex-direction:column; gap:12px; margin:0; padding:0; list-style:none; } body[data-tela="v-form"] .ck-etapa{ display:grid; /* minmax(0,1fr) no texto: sem isso o conteúdo define o mínimo da coluna e a frase longa da segunda etapa empurra o indicador para fora. */ grid-template-columns:30px minmax(0,1fr) 18px; align-items:center; gap:10px; } /* ── Ícones ── */ body[data-tela="v-form"] .ck-etapa-ic{ width:30px; height:30px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; } /* Meet: a marca é de terceiro e vai SEM recorte, sem sombra e sem tingir. Alterar o logo de outra empresa não é liberdade de design. */ body[data-tela="v-form"] .ck-etapa-ic--meet svg{ width:26px; height:26px; display:block; } /* ── Texto ── */ body[data-tela="v-form"] .ck-etapa-txt{ min-width:0; font-size:13px; line-height:18px; letter-spacing:0; color:var(--tinta-2); transition:color .3s ease; } body[data-tela="v-form"] .ck-etapa.is-feito .ck-etapa-txt{ color:var(--tinta); font-weight:var(--p-med); } /* ── Indicador de estado (coluna da direita) ── */ body[data-tela="v-form"] .ck-etapa-estado{ width:18px; height:18px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; } /* concluído: disco azul com o traço do check. Entra com um leve overshoot (o 1.06 no meio) — é o que dá a sensação de "assentou" em vez de simplesmente aparecer. */ body[data-tela="v-form"] .ck-etapa.is-feito .ck-etapa-estado::before{ content:""; width:18px; height:18px; border-radius:50%; background:var(--acao); -webkit-mask-image:none; mask-image:none; animation:ckSelo .34s cubic-bezier(.34,1.3,.64,1) both; } body[data-tela="v-form"] .ck-etapa.is-feito .ck-etapa-estado{ position:relative; } body[data-tela="v-form"] .ck-etapa.is-feito .ck-etapa-estado::after{ content:""; position:absolute; inset:0; margin:auto; width:10px; height:10px; background:var(--branco); -webkit-mask-image:var(--i-check); mask-image:var(--i-check); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; animation:ckSurge .3s .12s ease-out both; } @keyframes ckSelo{ 0%{ opacity:0; transform:scale(.4); } 60%{ opacity:1; transform:scale(1.06); } 100%{ opacity:1; transform:scale(1); } } @keyframes ckSurge{ from{ opacity:0; } to{ opacity:1; } } /* em espera: três pontos respirando em sequência. Escolhido em vez de um anel girando porque girar significa "estou trabalhando agora"; aqui o sistema está PARADO, esperando uma ação do cliente. O ritmo lento comunica espera, não processamento. */ body[data-tela="v-form"] .ck-etapa.is-espera .ck-etapa-estado{ display:flex; align-items:center; justify-content:flex-end; gap:3px; } body[data-tela="v-form"] .ck-etapa.is-espera .ck-etapa-estado::before, body[data-tela="v-form"] .ck-etapa.is-espera .ck-etapa-estado::after{ content:""; width:4px; height:4px; border-radius:50%; background:var(--tinta-3); animation:ckRespira 1.6s ease-in-out infinite; } body[data-tela="v-form"] .ck-etapa.is-espera .ck-etapa-estado::after{ animation-delay:.26s; } /* Pago: a segunda etapa vira concluída junto com a confirmação */ body[data-tela="v-form"] .ck-etapa.is-espera .ck-etapa-txt{ color:var(--tinta-2); } @media (prefers-reduced-motion:reduce){ body[data-tela="v-form"] .ck-etapa-estado::before, body[data-tela="v-form"] .ck-etapa-estado::after{ animation:none !important; } } /* ═══ Seções do passo ═══ Dentro do cartão branco não existe outro cartão: as seções são só blocos empilhados. */ body[data-tela="v-form"] .ck-block{ padding:0; background:transparent; border:0; border-radius:0; } body[data-tela="v-form"] .ck-block + .ck-block{ margin-top:24px; } body[data-tela="v-form"] .ck-block-hd{ align-items:center; gap:8px; /* ícone 24px + 8px + título */ margin-bottom:16px; } body[data-tela="v-form"] .ck-block-t{ font-size:18px; line-height:28px; letter-spacing:-0.2px; font-weight:var(--p-bold); color:var(--tinta); } /* O HTML traz 2 — um número em círculo azul. No padrão Cakto o título leva um ÍCONE DE CONTORNO. Em vez de mexer no HTML/JS, apagamos o número (font-size:0) e usamos o próprio span como máscara do ícone. */ body[data-tela="v-form"] .ck-step-n{ flex:0 0 auto; width:24px; height:24px; padding:0; border-radius:0; background:var(--tinta); /* é esta cor que a máscara deixa passar */ color:transparent; font-size:0; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; } body[data-tela="v-form"] .ck-dados .ck-step-n{ -webkit-mask-image:var(--i-pessoa); mask-image:var(--i-pessoa); } body[data-tela="v-form"] .ck-pag .ck-step-n{ -webkit-mask-image:var(--i-nota); mask-image:var(--i-nota); } /* ═══ Campos ═══ */ body[data-tela="v-form"] .ck-field{ gap:4px; } body[data-tela="v-form"] .ck-field + .ck-field{ margin-top:24px; } /* 24px entre linhas; 16px entre colunas (validade/CVV lado a lado) */ body[data-tela="v-form"] .ck-grid{ gap:24px 16px; } /* dentro da grade quem afasta é o gap: sem isto os 24px somariam com a margem da regra acima e o espaço entre campos viraria 48px */ body[data-tela="v-form"] .ck-grid .ck-field + .ck-field{ margin-top:0; } body[data-tela="v-form"] .ck-grid-3{ margin-top:24px; } body[data-tela="v-form"] .ck-lbl, body[data-tela="v-pix"] .ck-lbl, body[data-tela="v-ok"] .ck-lbl{ font-size:12px; line-height:16px; letter-spacing:0; font-weight:var(--p-reg); color:var(--pg-rotulo); } body[data-tela="v-form"] .ck-in{ min-height:44px; /* ── DUAS CORREÇÕES DELIBERADAS — NÃO "CONSERTE" DE VOLTA ── a) a Cakto usa 14px no campo. No iOS, campo com menos de 16px faz o Safari dar ZOOM automático a cada toque. 88% do tráfego é celular, então aqui é 16px. b) por causa disso a altura sobe de 38px (Cakto) para 44px — que também é um alvo de toque decente. Daí o padding 10px 12px. */ padding:10px 12px; font-size:16px; line-height:1.4; color:var(--tinta); /* background-COLOR, não o atalho: o atalho zeraria o background-image do