/* Checkout (passos 1 e 3) no padrão do Design System TagPlus. Fonte: Claude Design, "Institucional - Checkout Dados/Login" (desktop e mobile).
   Tokens copiados de tagplus-site/packages/ui/v1/tokens/tokens.css. Mobile first: 769px+ = desktop do design. */
@font-face { font-family: 'Inter'; font-weight: 300 800; font-display: swap; src: url('inter.woff2') format('woff2'); }
:root {
  --navy: #072E6C; --primary: #2D6EDA; --primary-hover: #6593E1; --light: #E2EDFF;
  --ink-4: #8FA0B8; --line-2: #CFDCF2; --erro: #B3122E; --input-focus: 0 0 0 2px #2D6EDA4D;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--navy); -webkit-font-smoothing: antialiased; }
.display-none { display: none !important; }

.ck { min-height: 100vh; display: flex; flex-direction: column; background: linear-gradient(180deg, #FFFFFF 0%, #E2EDFFEB 100%); }
.ck__topo { height: 64px; flex: none; display: flex; align-items: center; justify-content: center; padding: 0 20px; background: #fff; border-bottom: 1px solid #E8EDF5; }
.ck__topo a { display: flex; align-items: center; height: 24px; }
.ck__topo img { display: block; height: 24px; width: auto; }
.ck__main { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: 28px 20px 40px; }
.ck__grade { width: 100%; max-width: 1040px; }
.ck__imagem { display: none; }
.ck h1 { margin: 0; font-size: 24px; line-height: 1.3; letter-spacing: -.01em; font-weight: 300; color: var(--navy); text-wrap: balance; }
.ck h1 b, .ck h1 strong { font-weight: 700; }
.ck__form { margin-top: 24px; }
.ck__form--login { display: flex; flex-direction: column; gap: 16px; }
.ck__form--login .ck__acao { margin-top: 8px; }
.ck__blocos { display: flex; flex-direction: column; gap: 16px; }
.ck__linha { display: flex; flex-direction: column; gap: 16px; }
.ck__email { display: flex; flex-direction: column; gap: 10px; }
.ck__email .ck__entrada { flex: 1; min-width: 0; }
.ck__dica { position: relative; }
.ck__dica .ck__botao { width: 100%; }
.ck__botao.ck__botao--navy { background: var(--navy); }
.ck__botao.ck__botao--navy:hover, .ck__botao.ck__botao--navy:focus-visible { background: #334F7D; }
.ck__dica__balao { display: none; position: absolute; bottom: calc(100% + 10px); left: 0; right: 0; z-index: 10; padding: 10px 12px; border-radius: 10px; background: var(--navy); color: #fff; font-size: 12.5px; line-height: 1.4; box-shadow: 0 8px 20px rgba(7, 46, 108, .25); }
.ck__dica:hover .ck__dica__balao, .ck__dica:focus-within .ck__dica__balao { display: block; }

.ck__campo { display: flex; flex-direction: column; gap: 8px; }
.ck__campo > label { font-size: 14px; font-weight: 600; color: var(--navy); }
.ck__campo > label span { font-weight: 400; color: var(--ink-4); }
.ck__entrada { position: relative; }
.ck input.form-control, .ck select.form-control {
  display: block; width: 100%; height: 54px; padding: 0 26px; border-radius: 999px; background: #fff; border: 1px solid var(--line-2);
  color: var(--navy); font-family: inherit; font-size: 16.5px; font-weight: 500; outline: none; box-shadow: none; margin: 0; appearance: none; -webkit-appearance: none;
}
.ck input.form-control::placeholder { color: var(--ink-4); font-weight: 400; }
.ck input.form-control:focus, .ck select.form-control:focus { border-color: var(--primary); box-shadow: var(--input-focus); }
.ck input.form-control.error, .ck select.form-control.error { border-color: var(--erro); }
.ck select.form-control {
  padding-right: 52px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5l6 6 6-6' fill='none' stroke='%238FA0B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 24px center;
}
.ck input.fieldOthers { margin-top: 8px; }
.ck small { display: block; font-size: 12.5px; line-height: 1.4; color: var(--ink-4); }
.ck small.error, .ck small#senhaLabel.error { color: var(--erro); }
.ck small.error:empty { display: none; }
.ck__acao { margin-top: 24px; }
.ck__botao { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 54px; padding: 0 30px; border: 0; border-radius: 999px; background: var(--primary); color: #fff; font-family: inherit; font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; cursor: pointer; transition: background 180ms; text-decoration: none; }
.ck__botao:hover, .ck__botao:focus-visible { background: var(--primary-hover); outline: none; }
.ck__botao:disabled { opacity: .6; cursor: default; }
.ck__texto { margin: 14px 0 0; font-size: 15px; line-height: 1.4; color: var(--navy); }
.ck__texto b { font-weight: 700; }
.ck__acoes { margin: 22px 0 0; display: flex; flex-direction: column; gap: 12px; }
.ck__botao.ck__botao--contorno { background: #fff; color: var(--navy); border: 1px solid var(--line-2); }
.ck__botao.ck__botao--contorno:hover, .ck__botao.ck__botao--contorno:focus-visible { background: var(--light); color: var(--primary); border-color: var(--primary); }
.ck__br-desk { display: none; }
.ck__main.ck__main--centro { align-items: center; padding: 40px 24px; }
.ck__espera-pagina { display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; }
.ck__janela { width: 128px; height: 116px; display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; background: #fff; box-shadow: 0 11px 22px rgba(0, 0, 0, .08); }
.ck__janela__barra { height: 29px; flex: none; display: flex; align-items: center; gap: 6px; padding: 0 10px; background: var(--primary); }
.ck__janela__barra i { width: 6px; height: 6px; border-radius: 50%; background: #fff; opacity: .9; }
.ck__janela__barra i + i { opacity: .6; }
.ck__janela__corpo { flex: 1; display: flex; align-items: center; justify-content: center; padding: 12px 14px; }
.ck__engrenagem { width: 40px; height: 40px; color: var(--primary); animation: ck-girar 3s linear infinite; }
.ck__redirecionando { margin: 0; font-size: 17px; line-height: 1.5; color: var(--navy); }
.ck__redirecionando b { font-weight: 700; }
@keyframes ck-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ck__engrenagem { animation: none; } }
/* Bloqueio por falta de pagamento (telas "Bloqueio Comprovante" e "Bloqueio Pagamento" do Claude Design) */
@font-face { font-family: 'TP Icones Marca'; font-style: normal; font-weight: 400; font-display: block; src: url('icones-marca.woff2') format('woff2'); }
@font-face { font-family: 'TP Icones Solido'; font-style: normal; font-weight: 900; font-display: block; src: url('icones-solido.woff2') format('woff2'); }
.ck__ico { font-family: 'TP Icones Solido', sans-serif; font-weight: 900; font-style: normal; font-size: 16.5px; line-height: 1; }
.ck__ico--marca { font-family: 'TP Icones Marca', sans-serif; font-weight: 400; }
.ck__botao.ck__botao--ico { gap: 10px; }
.ck h1.ck__h1b { font-size: 26px; line-height: 1.3; letter-spacing: -.01em; }
.ck__texto--solto { line-height: 1.5; }
.ck__texto--solto + .ck__texto--solto { margin-top: 12px; }
.ck__lista { margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.ck__lista li { display: flex; gap: 8px; font-size: 14px; line-height: 1.4; color: var(--navy); }
.ck__lista b { font-weight: 700; flex: none; }
.ck__acoes.ck__acoes--10 { gap: 10px; }
.ck__envio { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-2); text-align: center; }
.ck__envio a { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; text-decoration: underline; color: var(--primary); }
.ck__envio a:hover { color: var(--primary-hover); }
.ck__envio .ck__ico { font-size: 14px; }
.ck__envio-aviso { margin: 10px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--erro); }
.ck__envio-aviso:empty { display: none; }
.ck__info { margin-top: 24px; padding: 16px 18px; border: 1px solid var(--line-2); border-radius: 16px; background: #fff; font-size: 14px; line-height: 1.5; color: var(--navy); }
.ck__info h2 { margin: 0 0 8px; font-size: 15px; font-weight: 700; }
.ck__info p { margin: 0 0 8px; }
.ck__info p:last-child { margin-bottom: 0; }
.ck__info a { color: var(--primary); }
.ck__link { align-self: flex-start; display: inline-block; margin-top: 8px; padding: 0; border: 0; background: none; color: var(--primary); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; text-decoration: underline; }
.ck__termos { margin: 14px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--ink-4); }
.ck__termos a { color: var(--primary); }
.ck__termos a:hover { color: var(--primary-hover); }

/* tela de espera (substitui o modal antigo; mesmos ids #loading e #frase-modal que o checkout.js usa) */
.ck-espera { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(7, 46, 108, .55); }
.ck-espera__caixa { background: #fff; border-radius: 24px; padding: 28px 32px; max-width: 340px; text-align: center; box-shadow: 0 11px 22px #00000012; }
.ck-espera h4 { margin: 0 0 14px; font-size: 16px; font-weight: 600; color: var(--navy); }
.ck-espera__bolas { display: inline-flex; gap: 8px; }
.ck-espera__bolas i { width: 10px; height: 10px; border-radius: 50%; background: var(--primary); animation: ck-pulso 1s infinite ease-in-out; }
.ck-espera__bolas i:nth-child(2) { animation-delay: .15s; }
.ck-espera__bolas i:nth-child(3) { animation-delay: .3s; }
@keyframes ck-pulso { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }

@media (min-width: 769px) {
  .ck__topo { height: 77px; padding: 0 40px; }
  .ck__topo a { height: 28px; }
  .ck__topo img { height: 28px; }
  .ck__main { align-items: center; padding: 48px 32px; }
  .ck__grade--imagem { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 64px; align-items: center; }
  .ck__grade--comercial { max-width: 880px; }
  .ck__imagem { display: block; width: 100%; aspect-ratio: 440 / 544; border-radius: 24px; overflow: hidden; }
  .ck__imagem img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .ck h1 { font-size: 36px; line-height: 1.28; letter-spacing: -.02em; }
  .ck__form { margin-top: 32px; }
  .ck__linha { gap: 18px; }
  .ck__blocos { gap: 18px; }
  .ck__grade--comercial .ck__linha--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .ck__grade--comercial .ck__linha--n { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 18px; }
  .ck__email--verificar { flex-direction: row; align-items: flex-start; }
  .ck__email--verificar .ck__dica { flex: none; }
  .ck__email--verificar .ck__dica .ck__botao { width: auto; }
  .ck__dica__balao { left: auto; right: 0; width: 220px; }
  .ck__texto { margin-top: 24px; font-size: 18px; }
  .ck__acoes, .ck__acoes.ck__acoes--10 { margin-top: 32px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px; }
  .ck__br-desk { display: inline; }
  .ck__main.ck__main--centro { padding: 48px 32px; }
  .ck__espera-pagina { gap: 40px; }
  .ck__janela { width: 148px; height: 133px; border-radius: 16px; }
  .ck__janela__barra { height: 34px; padding: 0 12px; }
  .ck__janela__barra i { width: 7px; height: 7px; }
  .ck__janela__corpo { padding: 14px 16px; }
  .ck__engrenagem { width: 46px; height: 46px; }
  .ck__redirecionando { font-size: 24px; }
  .ck h1.ck__h1b { font-size: 36px; line-height: 1.25; letter-spacing: -.02em; }
  .ck__texto--solto + .ck__texto--solto { margin-top: 16px; }
  .ck__lista { margin-top: 20px; gap: 12px; }
  .ck__lista li { font-size: 16px; }
  .ck__envio { margin-top: 24px; padding-top: 20px; max-width: 436px; }
  .ck__envio a { font-size: 15px; }
  .ck__envio .ck__ico { font-size: 15px; }
  .ck__info { font-size: 15px; }
  .ck__acao { margin-top: 28px; }
  .ck__botao { width: auto; }
  .ck__form--login { gap: 18px; }
}