/* Área do cliente ("aplicativo"): conta, horários, prêmios, indicar, clube, perfil, entrar/cadastro/senha e voucher.
   Tema escuro da vitrine (Kort). Até 900px parece app: barra de topo que encolhe ao rolar + abas embaixo (base.css);
   acima disso, coluna central com marca e menu de topo. Movimento só com transform/opacity (e o `scale` do toque). */

html { background: var(--preto); }
.ct-pagina {
  --ct-largura: 820px; --ct-margem: 16px; --ct-verde: #8BDB9C; --ct-vermelho: #FF9C86; --ct-linha-forte: #3a3a37;
  --ct-card: linear-gradient(165deg, #1a1a18, #121211 70%);
  --ct-card-2: #232320;
  --ct-trans: opacity .55s var(--saida) var(--atraso, 0s), transform .55s var(--saida) var(--atraso, 0s), scale .16s ease, border-color .2s ease, background-color .2s ease;
}
@media (min-width: 901px) { .ct-pagina { --ct-margem: 20px; } }
.ct-pagina input[type=date] { color-scheme: dark; }
.ct-pagina .input[type=date]::-webkit-calendar-picker-indicator { opacity: .7; cursor: pointer; }
.ct-destaque { color: var(--kort); }
.ct-so-desk { display: none !important; }
@media (min-width: 901px) { .ct-so-desk { display: block !important; } }

/* ---------- Barra de topo do app (celular) ---------- */
.ct-barra { position: sticky; top: 0; z-index: 25; height: calc(64px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); pointer-events: none; }
.ct-barra::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; bottom: 0; background: rgb(8 8 8 / .84); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); border-bottom: 1px solid transparent; transition: transform .38s var(--saida), border-color .3s ease; }
.ct-barra.encolhida::before { transform: translateY(-10px); border-bottom-color: var(--borda); }
.ct-barra-in { position: relative; max-width: var(--ct-largura); height: 64px; margin: 0 auto; display: flex; align-items: center; gap: 10px; padding: 0 10px 0 var(--ct-margem); transition: transform .38s var(--saida); }
.ct-barra.encolhida .ct-barra-in { transform: translateY(-5px); }
.ct-barra-in > a, .ct-barra-in > button { pointer-events: auto; }
.ct-barra-voltar, .ct-barra-logo { flex: none; width: 44px; height: 44px; margin-left: -8px; display: grid; place-items: center; border-radius: 14px; color: var(--txt); transition: scale .15s ease; }
.ct-barra-voltar:active, .ct-barra-logo:active { scale: .9; }
.ct-barra-logo .ct-logo { width: 34px; height: 34px; }
.ct-barra-tit { flex: 1; min-width: 0; padding-top: 3px; font-family: var(--f-display); font-weight: 900; font-size: 25px; line-height: 1; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(12px); transition: opacity .25s ease, transform .4s var(--saida); }
.ct-barra.mostra-tit .ct-barra-tit { opacity: 1; transform: none; }
.ct-logo { flex: none; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--kort); color: var(--kort-txt); font-family: var(--f-display); font-weight: 900; font-size: 14px; line-height: 1; }
.ct-logo img { width: 100%; height: 100%; object-fit: cover; }

/* saudação do início */
.ct-ola { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ct-ola-pre { font-size: 12.5px; font-weight: 600; line-height: 1.15; color: var(--txt-2); transition: opacity .25s ease, transform .38s var(--saida); }
.ct-ola-nome { font-family: var(--f-display); font-weight: 900; font-size: 30px; line-height: .92; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transform-origin: left center; animation: colar .55s var(--mola) .05s backwards; transition: transform .38s var(--saida); }
.ct-barra.encolhida .ct-ola-pre { opacity: 0; transform: translateY(-8px); }
.ct-barra.encolhida .ct-ola-nome { transform: translateY(-8px) scale(.86); }

/* avatar com as iniciais e o anel do nível */
.ct-av { --tam: 44px; position: relative; flex: none; width: var(--tam); height: var(--tam); border-radius: 50%; display: grid; place-items: center; color: var(--txt); text-decoration: none; transition: transform .38s var(--saida), scale .15s ease; }
.ct-av::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--kort) calc(var(--p, 1) * 1turn), #34342f 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); animation: ctAnel 1s var(--saida) .1s backwards; }
.ct-av-in { position: relative; width: calc(100% - 10px); height: calc(100% - 10px); border-radius: 50%; display: grid; place-items: center; background: linear-gradient(150deg, #2a2a27, #1a1a18); font-family: var(--f-display); font-weight: 800; font-size: calc(var(--tam) * .34); line-height: 1; letter-spacing: .02em; }
.ct-av.liso::before { background: var(--kort); }
.ct-av-coroa { position: absolute; right: -2px; bottom: -2px; width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; background: var(--kort); color: var(--kort-txt); box-shadow: 0 0 0 2px var(--preto); animation: abaSelo .5s var(--mola) .5s backwards; }
a.ct-av:active { scale: .92; }
a.ct-av::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; }
.ct-barra.encolhida .ct-av-barra { transform: scale(.82); }
.ct-av-mini { --tam: 40px; }
.ct-av-xl { --tam: 96px; }
.ct-av-xl::before { -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px)); }
.ct-av-xl .ct-av-in { width: calc(100% - 16px); height: calc(100% - 16px); background: var(--kort); color: var(--kort-txt); font-weight: 900; box-shadow: 3px 3px 0 var(--sombra); }
.ct-av-xl .ct-av-coroa { width: 30px; height: 30px; right: 2px; bottom: 2px; box-shadow: 0 0 0 3px var(--preto); }
.ct-av-xl .ct-av-coroa svg { width: 16px; height: 16px; }
@keyframes ctAnel { 0% { opacity: 0; transform: rotate(-140deg) scale(.7); } }

/* sino */
.ct-sino { position: relative; flex: none; width: 44px; height: 44px; margin-left: auto; display: grid; place-items: center; border-radius: 14px; background: var(--sup); border: 1px solid var(--borda); color: var(--txt); transition: scale .15s ease; }
.ct-sino:active { scale: .9; }
.ct-sino b { position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; background: var(--kort); color: var(--kort-txt); font: 800 11px/1 var(--f-texto); box-shadow: 0 0 0 2px var(--preto); animation: abaSelo .55s var(--mola) .45s backwards; }
.ct-sino b.saindo, .ct-secao-cab small.saindo { transform: scale(0); opacity: 0; transition: transform .25s ease, opacity .25s ease; }
.ct-sino svg { transform-origin: 50% 2px; }
.ct-sino.toca svg { animation: ctSino 1.1s ease .7s 1; }
@keyframes ctSino { 0%, 100% { transform: none; } 12% { transform: rotate(16deg); } 26% { transform: rotate(-13deg); } 40% { transform: rotate(9deg); } 54% { transform: rotate(-6deg); } 68% { transform: rotate(3deg); } }

/* ---------- Topo do computador: marca + menu da conta ---------- */
.ct-cab, .ct-nav { display: none; }
@media (min-width: 901px) {
  .ct-barra { display: none; }
  .ct-cab { display: block; }
  .ct-cab-in { max-width: var(--ct-largura); margin: 0 auto; padding: 26px 20px 18px; display: flex; align-items: center; gap: 14px; }
  .ct-marca { margin-right: auto; display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--txt); text-decoration: none; }
  .ct-marca .ct-logo { width: 44px; height: 44px; font-size: 18px; }
  .ct-marca strong { font-family: var(--f-display); font-weight: 900; font-size: 34px; line-height: .95; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ct-nav { display: block; position: sticky; top: 0; z-index: 25; background: rgb(8 8 8 / .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); }
  .ct-nav-in { max-width: var(--ct-largura); margin: 0 auto; padding: 0 20px; display: flex; gap: 26px; overflow-x: auto; scrollbar-width: none; }
  .ct-nav-in::-webkit-scrollbar { display: none; }
  .ct-nav a { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 15px 0 12px; color: var(--txt-2); text-decoration: none; font-weight: 600; font-size: 14.5px; border-bottom: 3px solid transparent; transition: color .15s, border-color .2s; }
  .ct-nav a svg { opacity: .75; }
  .ct-nav a:hover { color: var(--txt); }
  .ct-nav a[aria-current=page] { color: var(--txt); border-bottom-color: var(--kort); }
  .ct-nav a[aria-current=page] svg { color: var(--kort); opacity: 1; }
}

/* ---------- Coluna, títulos e peças comuns ---------- */
.ct { max-width: var(--ct-largura); margin: 0 auto; padding: 4px var(--ct-margem) 28px; }
@media (min-width: 901px) { .ct { padding-top: 34px; padding-bottom: 56px; } }
.ct-titulo { margin-top: 6px; font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(42px, 12vw, 64px); line-height: .9; overflow-wrap: anywhere; animation: colar .5s var(--mola) backwards; }
.ct-titulo-pre { display: block; margin-bottom: 8px; font-family: var(--f-texto); font-size: 15px; font-weight: 600; text-transform: none; color: var(--txt-2); line-height: 1.2; }
.ct-sub { margin-top: 8px; color: var(--txt-2); font-size: 15px; max-width: 58ch; animation: subir .45s var(--saida) .08s backwards; }
.ct-rotulo { display: block; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--txt-2); }
.ct-link { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--txt-2); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.ct-link:hover { color: var(--kort); }
.ct-link svg { flex: none; transition: transform .2s var(--mola); }
.ct-link:hover svg { transform: translateX(3px); }
.ct .pub-rodape { margin-top: 36px; }

.ct-secao { margin-top: 30px; }
.ct-secao[id], .ct-dobra { scroll-margin-top: calc(80px + env(safe-area-inset-top)); }
.ct-secao-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ct-secao-cab h2 { display: flex; align-items: center; gap: 8px; min-width: 0; font-family: var(--f-display); font-weight: 800; font-size: 27px; line-height: 1; text-transform: uppercase; }
.ct-secao-cab h2 small { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--kort); color: var(--kort-txt); font: 800 12.5px/1 var(--f-texto); }
.ct-dica { color: var(--txt-2); font-size: 14px; margin: -4px 0 14px; }
.ct-dica-ico { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.ct-dica-ico svg { flex: none; color: var(--kort); }

.ct-card { background: var(--ct-card); border: 1px solid var(--borda); border-radius: 18px; padding: 18px; }
.ct-card + .ct-card { margin-top: 12px; }
.ct-card h3 { font-size: 17px; line-height: 1.3; }
.ct-card p { color: var(--txt-2); font-size: 14.5px; }
.ct .vazio { background: var(--sup); border-radius: 18px; }
.ct-vazio-app { display: grid; justify-items: center; gap: 8px; padding: 30px 20px 26px; border-radius: 20px; border: 1.5px dashed var(--ct-linha-forte); background: radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--kort) 7%, transparent), transparent 70%), var(--sup); text-align: center; }
.ct-vazio-app strong { font-family: var(--f-display); font-weight: 800; font-size: 26px; line-height: 1; text-transform: uppercase; }
.ct-vazio-app p { color: var(--txt-2); font-size: 14.5px; max-width: 34ch; }
.ct-vazio-app .btn { margin-top: 8px; }
.ct-vazio-ico { width: 64px; height: 64px; margin-bottom: 4px; border-radius: 20px; display: grid; place-items: center; background: var(--ct-card-2); color: var(--kort); }

/* toque com `scale` (não briga com o transform do .revelar) */
.ct-acao, .ct-voucher, .ct-linha, .ct-ag, .ct-avaliar, .ct-novo, .ct-premio, .ct-plano, .ct-aviso, .ct-mov, .ct-rank-li, .ct-num-caixa, .ct-perfil-stats a, .ct-instalar, .ct-meu-saldo { transition: var(--ct-trans); }
a.ct-acao:active, a.ct-voucher:active, a.ct-avaliar:active, a.ct-novo:active, a.ct-aviso:active, .ct-perfil-stats a:active { scale: .97; }

/* selos de status no tema escuro (no ingresso limão ficam os do base.css) */
.ct .selo-ok { background: color-mix(in srgb, var(--ct-verde) 15%, transparent); color: var(--ct-verde); }
.ct .selo-alerta { background: #3a2a0e; color: #f5c46a; }
.ct .selo-perigo { background: #3a1610; color: var(--ct-vermelho); }
.ct .selo-info { background: #14233d; color: #9cc0f5; }
.ct-bilhete .selo-ok { background: var(--ok-fundo); color: var(--ok); }
.ct-bilhete .selo-alerta { background: var(--alerta-fundo); color: var(--alerta); }
.ct-bilhete .selo-perigo { background: var(--perigo-fundo); color: var(--perigo); }
.ct-bilhete .selo-info { background: var(--info-fundo); color: var(--info); }
.ct-bilhete .selo-preto { background: var(--preto); color: var(--kort); }

/* ---------- Início: próximo horário (ingresso limão) ---------- */
.ct-topo-grade { display: grid; gap: 12px; margin-top: 4px; }
@media (min-width: 760px) { .ct-topo-grade { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: stretch; margin-top: 22px; } }
.ct-bilhete { position: relative; padding: 16px 18px 18px; border-radius: 22px; background: var(--kort); color: var(--kort-txt); box-shadow: 5px 5px 0 var(--sombra); }
.ct-bilhete.revelar { transition: opacity .4s ease, transform .75s var(--mola); }
.ct-bilhete.revelar:not(.visivel) { transform: translateY(-28px) rotate(-3deg) scale(.97); }
.ct-bilhete-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ct-bilhete-rot { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.ct-vivo { position: relative; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--preto); }
.ct-vivo::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--preto); animation: ctVivo 1.8s ease-out infinite; }
@keyframes ctVivo { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(2.8); } }
.ct-bilhete-hora { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin-top: 12px; }
.ct-bilhete-hora strong { font-family: var(--f-display); font-weight: 900; font-size: 72px; line-height: .8; letter-spacing: -.005em; font-variant-numeric: tabular-nums; }
.ct-quando { display: inline-flex; align-items: center; gap: 6px; height: 32px; margin-bottom: 2px; padding: 0 12px; border-radius: 999px; background: var(--preto); color: var(--kort); font-size: 13.5px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ct-quando svg { flex: none; }
.ct-quando.agora { animation: pulsar 1.6s ease-in-out infinite; }
.ct-bilhete-dia { margin-top: 10px; font-size: 16px; font-weight: 700; }
.ct-picote { position: relative; height: 0; margin: 16px -18px 14px; border-top: 2px dashed rgb(8 8 8 / .28); }
.ct-picote::before, .ct-picote::after { content: ""; position: absolute; top: -12px; width: 22px; height: 22px; border-radius: 50%; background: var(--furo, var(--fundo)); }
.ct-picote::before { left: -11px; }
.ct-picote::after { right: -11px; }
.ct-bilhete-quem { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.ct-bilhete-foto { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--preto); color: var(--kort); font-family: var(--f-display); font-weight: 800; font-size: 17px; box-shadow: 0 0 0 2px var(--preto); }
.ct-bilhete-foto img { width: 100%; height: 100%; object-fit: cover; }
.ct-bilhete-quem strong { display: block; font-size: 15.5px; line-height: 1.25; overflow-wrap: anywhere; }
.ct-bilhete-quem small { display: block; font-size: 13px; font-weight: 600; color: rgb(8 8 8 / .66); }
.ct-bilhete-valor { font-family: var(--f-display); font-weight: 800; font-size: 21px; line-height: 1.05; text-align: right; max-width: 120px; }
.ct-bilhete .btn { width: 100%; height: 50px; margin-top: 16px; border-radius: 12px; font-size: 15.5px; }
.ct-bilhete .btn svg { transition: transform .2s var(--mola); }
.ct-bilhete .btn:hover svg { transform: translateX(3px); }
.ct-bilhete-mais { display: flex; align-items: center; justify-content: center; gap: 2px; min-height: 44px; margin-top: 8px; font-size: 13.5px; font-weight: 700; color: rgb(8 8 8 / .72); text-decoration: none; }

.ct-semhorario { display: grid; justify-items: start; gap: 8px; padding: 20px 18px; border-radius: 22px; border: 1.5px dashed var(--ct-linha-forte); background: radial-gradient(100% 80% at 100% 0%, color-mix(in srgb, var(--kort) 10%, transparent), transparent 65%), var(--sup); }
.ct-semhorario-ico { width: 52px; height: 52px; margin-bottom: 6px; border-radius: 16px; display: grid; place-items: center; background: var(--kort); color: var(--kort-txt); box-shadow: 3px 3px 0 var(--sombra); }
.ct-semhorario strong { font-family: var(--f-display); font-weight: 900; font-size: 32px; line-height: .95; text-transform: uppercase; }
.ct-semhorario p { color: var(--txt-2); font-size: 14.5px; }
.ct-semhorario .btn { width: 100%; margin-top: 8px; }

/* atalhos (grade 2x2) */
.ct-atalhos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 760px) { .ct-atalhos { grid-auto-rows: 1fr; } }
.ct-acao { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; min-width: 0; min-height: 122px; padding: 14px; border-radius: 20px; background: var(--ct-card); border: 1px solid var(--borda); color: var(--txt); text-decoration: none; }
.ct-acao:hover { border-color: #46463f; }
.ct-acao-ico { position: relative; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--ct-card-2); color: var(--kort); }
.ct-acao-ico b { position: absolute; top: -6px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; background: var(--kort); color: var(--kort-txt); font: 800 11px/1 var(--f-texto); box-shadow: 0 0 0 2px #171716; animation: abaSelo .5s var(--mola) .6s backwards; }
.ct-acao-txt { min-width: 0; }
.ct-acao-txt strong { display: block; font-family: var(--f-display); font-weight: 800; font-size: 25px; line-height: 1; text-transform: uppercase; }
.ct-acao-txt small { margin-top: 4px; font-size: 12.5px; line-height: 1.3; color: var(--txt-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ct-acao-seta { position: absolute; top: 13px; right: 13px; color: #5f5f59; transition: transform .25s var(--mola), color .2s ease; }
.ct-acao:hover .ct-acao-seta { transform: translate(2px, -2px); color: var(--kort); }
.ct-acao-1 { background: var(--kort); border-color: var(--kort); color: var(--kort-txt); box-shadow: 3px 3px 0 var(--sombra); }
.ct-acao-1:hover { border-color: var(--kort); }
.ct-acao-1 .ct-acao-ico { background: var(--preto); color: var(--kort); }
.ct-acao-1 .ct-acao-txt small { color: rgb(8 8 8 / .7); }
.ct-acao-1 .ct-acao-seta, .ct-acao-1:hover .ct-acao-seta { color: var(--preto); }
.ct-acao-1 .ct-acao-ico svg { animation: ctMexe 3.4s ease-in-out 1.4s infinite; }
@keyframes ctMexe { 0%, 82%, 100% { transform: none; } 86% { transform: rotate(-12deg) scale(1.08); } 92% { transform: rotate(9deg); } 96% { transform: rotate(-4deg); } }

/* convite para avaliar */
.ct-avaliar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-top: 12px; padding: 13px 12px 13px 13px; border-radius: 20px; border: 1px solid color-mix(in srgb, var(--kort) 45%, var(--borda)); background: linear-gradient(110deg, color-mix(in srgb, var(--kort) 11%, #141413), #141413 72%); color: var(--txt); text-decoration: none; }
.ct-avaliar-ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--kort); color: var(--kort-txt); box-shadow: 2px 2px 0 var(--sombra); }
.ct-avaliar-ico svg { fill: currentColor; animation: ctMexe 3s ease-in-out 1s infinite; }
.ct-avaliar-txt strong { display: block; font-size: 15px; line-height: 1.3; }
.ct-avaliar-txt small { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; margin-top: 3px; font-size: 12.5px; color: var(--txt-2); }
.ct-avaliar-estrelas { display: inline-flex; gap: 1px; color: var(--kort); }
.ct-avaliar-estrelas i { display: block; animation: ctEstrela 2.8s ease-in-out infinite; animation-delay: calc(1.2s + var(--i) * .1s); }
.ct-avaliar-estrelas svg { fill: currentColor; }
.ct-avaliar-seta { color: #6e6e68; }
@keyframes ctEstrela { 0%, 55%, 100% { transform: none; } 64% { transform: translateY(-3px) scale(1.2); } 72% { transform: none; } }

/* ---------- Fidelidade: cartão de selos e pontos ---------- */
.ct-fidel { display: grid; gap: 12px; }
@media (min-width: 700px) { .ct-fidel { grid-template-columns: 1fr 1fr; } }
.ct-cartao { padding: 18px; border-radius: 22px; background: radial-gradient(110% 80% at 100% 0%, color-mix(in srgb, var(--kort) 13%, transparent), transparent 58%), linear-gradient(150deg, #1c1d13, #121211 66%); border: 1px solid #3a3a28; box-shadow: 4px 4px 0 var(--kort); }
.ct-cartao-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 16px; }
.ct-cartao-cab strong { display: block; font-family: var(--f-display); font-weight: 800; font-size: 25px; line-height: 1; text-transform: uppercase; }
.ct-cartao-cab small { display: block; margin-top: 5px; font-size: 13px; color: var(--txt-2); }
.ct-cartao-conta { flex: none; display: inline-flex; align-items: baseline; gap: 1px; padding: 6px 11px 4px; border-radius: 999px; background: var(--preto); border: 1px solid #3a3a28; font-family: var(--f-display); font-weight: 800; font-size: 17px; line-height: 1; color: var(--txt-2); }
.ct-cartao-conta b { color: var(--kort); font-size: 23px; }
.ct-selos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; }
.ct-selo { position: relative; aspect-ratio: 1; border-radius: 50%; border: 1.5px dashed #4a4a44; display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; font-size: 18px; color: #5b5b56; }
.ct-selo.cheio { border: 0; background: var(--kort); color: var(--kort-txt); transform: rotate(var(--r, 0deg)); box-shadow: inset 0 0 0 3px rgb(8 8 8 / .14), 2px 2px 0 rgb(0 0 0 / .45); }
.ct-selo.cheio::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--kort); opacity: 0; pointer-events: none; }
.ct-selo.premio { border: 1.5px dashed var(--kort); color: var(--kort); }
.ct-selo.premio:not(.cheio) svg { animation: ctPresente 2.6s ease-in-out 1.6s infinite; }
.ct-selo.premio.cheio { color: var(--preto); }
@keyframes ctPresente { 0%, 70%, 100% { transform: none; } 76% { transform: translateY(-3px) rotate(-10deg); } 84% { transform: translateY(0) rotate(8deg); } 92% { transform: rotate(-3deg); } }
/* carimbo: os selos entram um a um quando o cartão aparece */
.ct-cartao.revelar:not(.visivel) .ct-selo.cheio { opacity: 0; }
.ct-cartao.visivel .ct-selo.cheio { animation: ctCarimbo .55s var(--mola) both; animation-delay: calc(.3s + var(--i) * .13s); }
.ct-cartao.visivel .ct-selo.cheio::after { animation: ctTinta .6s ease-out both; animation-delay: calc(.38s + var(--i) * .13s); }
@keyframes ctCarimbo { 0% { opacity: 0; transform: scale(1.9) rotate(calc(var(--r, 0deg) - 28deg)); } 55% { opacity: 1; transform: scale(.86) rotate(var(--r, 0deg)); } 100% { opacity: 1; transform: scale(1) rotate(var(--r, 0deg)); } }
@keyframes ctTinta { 0% { opacity: .85; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.45); } }
.ct-cartao-pe { margin-top: 14px; font-size: 13.5px; color: var(--txt-2); }
.ct-cartao-pe b { color: var(--kort); }

.ct-pontos { display: flex; flex-direction: column; padding: 18px; border-radius: 22px; background: var(--ct-card); border: 1px solid var(--borda); }
.ct-pontos-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ct-pontos-num { margin-top: 10px; font-family: var(--f-display); font-weight: 900; font-size: 74px; line-height: .84; color: var(--kort); font-variant-numeric: tabular-nums; }
.ct-pontos-num small { font-size: 22px; font-weight: 800; color: var(--txt-2); }
.ct-pontos .btn { margin-top: 16px; }
.ct-prog { position: relative; height: 12px; margin: 16px 0 8px; border-radius: 999px; background: #232320; overflow: hidden; }
.ct-prog i { position: relative; display: block; height: 100%; width: calc(var(--p, 0) * 100%); min-width: 8px; overflow: hidden; border-radius: inherit; background: linear-gradient(90deg, var(--kort-forte), var(--kort)); transform-origin: left center; }
.ct-prog i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgb(255 255 255 / .6), transparent); transform: translateX(-100%); animation: ctCorre 3s ease-in-out 1.8s infinite; }
.revelar:not(.visivel) .ct-prog i { transform: scaleX(0); }
.revelar .ct-prog i { transition: transform 1.2s var(--saida) calc(var(--atraso, 0s) + .35s); }
@keyframes ctCorre { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }
.ct-prog-txt { font-size: 13.5px; color: var(--txt-2); }
.ct-prog-txt b { color: var(--txt); }

/* ---------- Vouchers: ingressos recortados ---------- */
.ct-vouchers { display: grid; gap: 12px; }
@media (min-width: 700px) { .ct-vouchers { grid-template-columns: 1fr 1fr; } }
.ct-voucher { --furo: var(--fundo); position: relative; display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; min-height: 108px; border-radius: 18px; background: var(--ct-card); box-shadow: inset 0 0 0 1px var(--borda); color: var(--txt); text-decoration: none; overflow: hidden; }
.ct-voucher-ico { position: relative; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 0 6px; background: var(--kort); color: var(--kort-txt); border-right: 2px dashed rgb(8 8 8 / .3); }
.ct-voucher-ico small { font-size: 9.5px; font-weight: 800; line-height: 1.1; text-align: center; text-transform: uppercase; letter-spacing: .06em; }
.ct-voucher-ico::before, .ct-voucher-ico::after { content: ""; position: absolute; z-index: 1; right: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--furo); }
.ct-voucher-ico::before { top: -10px; }
.ct-voucher-ico::after { bottom: -10px; }
.ct-voucher-info { display: grid; gap: 3px; align-content: center; min-width: 0; padding: 12px 4px 12px 18px; }
.ct-voucher-desc { font-weight: 700; font-size: 14.5px; line-height: 1.3; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ct-voucher-cod { font-family: var(--f-display); font-weight: 900; font-size: 32px; line-height: 1.02; letter-spacing: .1em; color: var(--kort); }
.ct-voucher-val { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--txt-2); }
.ct-voucher-val svg { flex: none; }
.ct-voucher-seta { display: grid; place-items: center; padding: 0 14px 0 4px; color: var(--kort); }
.ct-voucher:hover { box-shadow: inset 0 0 0 1px #46463f; }
.ct-voucher.apagado .ct-voucher-ico { background: #262624; color: var(--txt-2); border-right-color: #3a3a37; }
.ct-voucher.apagado .ct-voucher-cod { color: var(--txt-2); text-decoration: line-through; text-decoration-thickness: 2px; }
.ct-voucher.apagado .ct-voucher-desc { color: var(--txt-2); }
.ct-voucher.apagado .ct-voucher-seta { color: #5b5b56; }

/* ---------- Sorteio ---------- */
.ct-sorteios { display: grid; gap: 12px; }
.ct-sorteio { position: relative; display: grid; gap: 14px; padding: 18px; border-radius: 22px; background: var(--ct-card); border: 1px solid var(--borda); overflow: hidden; }
.ct-sorteio.ativo { border-color: color-mix(in srgb, var(--kort) 42%, var(--borda)); background: radial-gradient(90% 70% at 0% 0%, color-mix(in srgb, var(--kort) 9%, transparent), transparent 60%), var(--ct-card); }
.ct-sorteio-cab { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; }
.ct-sorteio-ico { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--kort); color: var(--kort-txt); box-shadow: 3px 3px 0 var(--sombra); overflow: hidden; }
.ct-sorteio-ico img { width: 100%; height: 100%; object-fit: cover; }
.ct-sorteio.ativo .ct-sorteio-ico svg { animation: ctDado 3.4s ease-in-out 1s infinite; }
@keyframes ctDado { 0%, 70%, 100% { transform: none; } 76% { transform: rotate(-20deg) scale(1.12); } 84% { transform: rotate(16deg); } 92% { transform: rotate(-6deg); } }
.ct-sorteio.fim .ct-sorteio-ico { background: var(--sup-2); color: var(--txt-2); box-shadow: none; }
.ct-sorteio h3 { font-size: 17px; line-height: 1.3; }
.ct-sorteio-cab p { color: var(--txt-2); font-size: 13.5px; margin-top: 2px; }
.ct-sorteio-premio { font-weight: 700; color: var(--kort); }
.ct-sorteio-fim { justify-self: start; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--ct-card-2); color: var(--txt); font-size: 13px; font-weight: 600; }
.ct-sorteio-fim svg { color: var(--kort); }
.ct-sorteio-regra { font-size: 13.5px; color: var(--txt-2); }
.ct-sorteio-regra svg { display: inline-block; vertical-align: -2px; color: var(--kort); }
.ct-numeros { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ct-numero { min-width: 54px; height: 54px; padding: 0 12px; border-radius: 999px; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #262624, var(--preto) 70%); border: 2px solid var(--kort); color: var(--kort); font-family: var(--f-display); font-weight: 900; font-size: 24px; line-height: 1; box-shadow: 2px 2px 0 var(--sombra); }
.revelar:not(.visivel) .ct-numero { opacity: 0; }
.visivel .ct-numero { animation: ctBola .6s var(--mola) both; animation-delay: calc(.3s + var(--i, 0) * 90ms); }
@keyframes ctBola { 0% { opacity: 0; transform: scale(.2) rotate(-40deg); } 100% { opacity: 1; transform: none; } }
.ct-numero.ganhou { background: var(--kort); color: var(--kort-txt); }
.ct-ganhador { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--sup-2); font-size: 14.5px; }
.ct-ganhador svg { color: var(--kort); flex: none; }
.ct-ganhador.eu { background: var(--kort); color: var(--kort-txt); font-weight: 600; }
.ct-ganhador.eu svg { color: var(--preto); }

/* ---------- Avisos ---------- */
.ct-avisos { display: grid; gap: 8px; }
.ct-aviso { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px 14px 14px 14px; border-radius: 18px; background: var(--sup); border: 1px solid var(--borda); color: var(--txt); text-decoration: none; overflow: hidden; }
a.ct-aviso:hover { border-color: #46463f; }
.ct-aviso-ico { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--ct-card-2); color: var(--kort); }
.ct-aviso strong { display: block; font-size: 14.5px; line-height: 1.35; }
.ct-aviso p { font-size: 13.5px; color: var(--txt-2); margin-top: 2px; overflow-wrap: anywhere; }
.ct-aviso time { font-size: 12px; color: #7d7d76; white-space: nowrap; padding-top: 2px; }
.ct-aviso::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--kort); opacity: 0; transition: opacity .6s ease; }
.ct-aviso.nova { background: linear-gradient(100deg, color-mix(in srgb, var(--kort) 8%, var(--sup)), var(--sup) 60%); border-color: color-mix(in srgb, var(--kort) 30%, var(--borda)); }
.ct-aviso.nova::before { opacity: 1; }
.ct-aviso.nova .ct-aviso-ico { background: var(--kort); color: var(--kort-txt); }
.ct-aviso.nova time { color: var(--kort); font-weight: 700; }

/* ---------- Instalar o app ---------- */
.ct-instalar { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; margin-top: 30px; padding: 16px; border-radius: 20px; border: 1px solid color-mix(in srgb, var(--kort) 55%, transparent); background: color-mix(in srgb, var(--kort) 7%, transparent); }
.ct-instalar-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--kort); color: var(--kort-txt); box-shadow: 2px 2px 0 var(--sombra); }
.ct-instalar strong { display: block; font-size: 16px; line-height: 1.3; }
.ct-instalar p { font-size: 14px; color: var(--txt-2); margin-top: 3px; }
.ct-instalar-ios { color: #dcdcd5 !important; }
.ct-instalar-ios svg { display: inline-block; vertical-align: -2px; color: var(--kort); }
.ct-instalar .btn { margin-top: 12px; }
@media (display-mode: standalone) { .ct-instalar { display: none !important; } }

/* ---------- Listas estilo app (linhas com ícone e seta) ---------- */
.ct-lista { display: grid; border-radius: 20px; border: 1px solid var(--borda); background: linear-gradient(180deg, #161615, #121211); overflow: hidden; }
.ct-linha { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; min-height: 66px; padding: 12px 14px 12px 14px; border: 0; background: none; color: var(--txt); text-decoration: none; text-align: left; font: inherit; cursor: pointer; }
.ct-linha + .ct-linha { border-top: 1px solid var(--borda); }
a.ct-linha:hover, button.ct-linha:hover { background: #1a1a18; }
a.ct-linha:active, button.ct-linha:active, summary.ct-linha:active { background: #20201e; }
.ct-linha-ico { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--ct-card-2); color: var(--kort); flex: none; transition: transform .25s var(--mola); }
a.ct-linha:active .ct-linha-ico, button.ct-linha:active .ct-linha-ico { transform: scale(.9); }
.ct-linha strong { display: block; font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.ct-linha small { display: block; font-size: 13px; color: var(--txt-2); margin-top: 1px; }
.ct-linha > svg:last-child { color: #5b5b56; transition: transform .2s var(--mola); }
a.ct-linha:hover > svg:last-child { transform: translateX(3px); color: var(--txt-2); }
.ct-linha.perigo, .ct-linha.perigo .ct-linha-ico { color: var(--ct-vermelho); }
.ct-linha.perigo .ct-linha-ico { background: #2a1511; }

/* ---------- Abas internas: segmentos com a pílula que desliza ---------- */
.ct-abas-faixa { position: sticky; top: calc(54px + env(safe-area-inset-top)); z-index: 20; margin: 16px calc(-1 * var(--ct-margem)) 4px; padding: 8px var(--ct-margem) 12px; background: linear-gradient(180deg, rgb(8 8 8 / .97) 86%, rgb(8 8 8 / 0)); }
@media (min-width: 901px) { .ct-abas-faixa { position: static; background: none; margin-top: 22px; } }
.ct-abas { position: relative; display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); padding: 4px; border-radius: 18px; background: #131312; border: 1px solid var(--borda); animation: subir .45s var(--saida) .12s backwards; }
.ct-abas-ind { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n, 2)); border-radius: 14px; background: var(--kort); box-shadow: 2px 2px 0 var(--sombra); transform: translateX(calc(var(--i, 0) * 100%)); transition: transform .45s var(--mola); }
.ct-aba { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 46px; padding: 6px 4px; border-radius: 14px; color: var(--txt-2); font-size: 14.5px; font-weight: 700; text-decoration: none; transition: color .25s ease, scale .15s ease; }
.ct-aba:active { scale: .95; }
.ct-aba:hover { color: var(--txt); }
.ct-aba[aria-selected=true] { color: var(--kort-txt); }
.ct-aba-ico { position: relative; flex: none; display: grid; place-items: center; }
.ct-aba-rot { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-aba-n { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; background: var(--kort); color: var(--kort-txt); font: 800 11px/1 var(--f-texto); }
.ct-aba[aria-selected=true] .ct-aba-n { background: var(--preto); color: var(--kort); }
.ct-abas.empilhadas .ct-aba { flex-direction: column; gap: 4px; min-height: 58px; font-size: 11.5px; letter-spacing: .01em; }
.ct-abas.empilhadas .ct-aba-rot { max-width: 100%; }
.ct-abas.empilhadas .ct-aba-n { position: absolute; top: 5px; left: calc(50% + 5px); min-width: 18px; height: 18px; padding: 0 5px; font-size: 10.5px; box-shadow: 0 0 0 2px #131312; }
.ct-abas.empilhadas .ct-aba[aria-selected=true] .ct-aba-n { box-shadow: 0 0 0 2px var(--kort); }
@media (min-width: 700px) {
  .ct-abas.empilhadas .ct-aba { flex-direction: row; gap: 8px; min-height: 48px; font-size: 14px; }
  .ct-abas.empilhadas .ct-aba-n { position: static; min-width: 20px; height: 20px; font-size: 11px; box-shadow: none; }
  .ct-abas.empilhadas .ct-aba[aria-selected=true] .ct-aba-n { box-shadow: none; }
}
.ct-painel { padding-top: 10px; }
.ct-painel:not([hidden]) { animation: ctPainel .35s var(--saida) both; }
@keyframes ctPainel { 0% { opacity: 0; transform: translateX(var(--entra, 14px)); } }

/* ---------- Horários ---------- */
.ct-ags { display: grid; gap: 10px; }
.ct-ag { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px; border-radius: 20px; background: var(--ct-card); border: 1px solid var(--borda); color: var(--txt); }
.ct-ag:hover { border-color: #46463f; }
.ct-ag:active { scale: .985; }
.ct-ag-link { color: inherit; text-decoration: none; }
.ct-ag-link::after { content: ""; position: absolute; inset: 0; border-radius: 20px; }
.ct-ag-data { display: grid; justify-items: center; align-content: center; gap: 2px; height: 76px; border-radius: 14px; background: var(--ct-card-2); text-transform: uppercase; }
.ct-ag-data small { font-size: 11px; font-weight: 800; color: var(--txt-2); letter-spacing: .06em; line-height: 1; }
.ct-ag-data strong { font-family: var(--f-display); font-weight: 900; font-size: 34px; line-height: .9; }
.ct-ag.prox .ct-ag-data { background: var(--sup-2); }
.ct-ag.primeiro { border-color: color-mix(in srgb, var(--kort) 55%, var(--borda)); box-shadow: 3px 3px 0 color-mix(in srgb, var(--kort) 30%, transparent); }
.ct-ag.primeiro .ct-ag-data { background: var(--kort); color: var(--kort-txt); box-shadow: 2px 2px 0 var(--sombra); }
.ct-ag.primeiro .ct-ag-data small { color: rgb(8 8 8 / .68); }
.ct-ag-info { display: grid; gap: 5px; min-width: 0; }
.ct-ag-info strong { font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
.ct-ag-quando, .ct-ag-quem { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13.5px; color: var(--txt-2); }
.ct-ag-quando svg { flex: none; color: var(--kort); }
.ct-ag-quem i { font-style: normal; color: #5b5b56; }
.ct-ag-foto { flex: none; width: 20px; height: 20px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--sup-2); color: var(--txt); font-family: var(--f-display); font-weight: 800; font-size: 10px; }
.ct-ag-foto img { width: 100%; height: 100%; object-fit: cover; }
.ct-ag-info .selo { justify-self: start; }
.ct-ag .selo-preto { background: #2b2b28; color: var(--txt); }
.ct-ag-lado { display: grid; justify-items: end; gap: 8px; color: #6e6e68; }
.ct-ag-lado .btn { position: relative; z-index: 1; min-height: 44px; padding: 0 14px; border-radius: 12px; }
.ct-ag-seta { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ct-card-2); color: var(--txt-2); transition: transform .2s var(--mola); }
.ct-ag:hover .ct-ag-seta { transform: translateX(2px); color: var(--kort); }
.ct-ag.apagado .ct-ag-data, .ct-ag.apagado .ct-ag-info strong { opacity: .55; }
.ct-estrelas { display: inline-flex; gap: 1px; color: var(--kort); }
.ct-estrelas svg { fill: currentColor; }
.ct-novo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; margin-top: 12px; padding: 12px 14px 12px 12px; border-radius: 20px; border: 1.5px dashed var(--ct-linha-forte); color: var(--txt); text-decoration: none; }
.ct-novo:hover { border-color: var(--kort); }
.ct-novo-ico { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--kort); color: var(--kort-txt); box-shadow: 2px 2px 0 var(--sombra); }
.ct-novo strong { display: block; font-size: 15.5px; }
.ct-novo small { display: block; font-size: 13px; color: var(--txt-2); }
.ct-novo > svg:last-child { color: #6e6e68; }

/* ---------- Prêmios: saldo, regras e extrato ---------- */
.ct-saldo { padding: 20px 18px; border-radius: 22px; background: radial-gradient(100% 80% at 100% 0%, color-mix(in srgb, var(--kort) 14%, transparent), transparent 60%), linear-gradient(150deg, #1c1d13, #121211 66%); border: 1px solid #3a3a28; box-shadow: 4px 4px 0 var(--kort); }
.ct-saldo-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ct-saldo-num { margin-top: 10px; font-family: var(--f-display); font-weight: 900; font-size: clamp(76px, 23vw, 112px); line-height: .84; color: var(--kort); font-variant-numeric: tabular-nums; }
.ct-saldo-num small { font-size: 22px; font-weight: 800; color: var(--txt-2); }
.ct-saldo .ct-prog { margin-top: 18px; }
.ct-saldo-nivel { display: flex; justify-content: space-between; gap: 10px; margin: -2px 0 10px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--txt-2); }
.ct-saldo-nivel span:first-child { color: var(--kort); }
.ct-prog-12m { display: block; margin-top: 4px; font-size: 12.5px; color: #7d7d76; }
.ct-regras { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ct-regras li { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 16px; background: var(--sup); border: 1px solid var(--borda); font-size: 14px; color: #cfcfc8; transition: var(--ct-trans); }
.ct-regra-ico { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--ct-card-2); color: var(--kort); }
.ct-regras b { color: var(--txt); }
.ct-extrato { display: grid; padding: 4px 14px; border-radius: 20px; border: 1px solid var(--borda); background: var(--ct-card); }
.ct-mov { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; }
.ct-mov + .ct-mov { border-top: 1px solid var(--borda); }
.ct-mov-ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--sup-2); color: var(--txt-2); }
.ct-mov.mais .ct-mov-ico { color: var(--ct-verde); background: color-mix(in srgb, var(--ct-verde) 13%, transparent); }
.ct-mov.menos .ct-mov-ico { color: var(--ct-vermelho); background: color-mix(in srgb, var(--ct-vermelho) 13%, transparent); }
.ct-mov strong { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.ct-mov small { display: block; font-size: 12.5px; color: var(--txt-2); }
.ct-mov-val { font-family: var(--f-display); font-weight: 800; font-size: 24px; line-height: 1; white-space: nowrap; text-align: right; }
.ct-mov-val small { display: inline; font-family: var(--f-texto); font-size: 11.5px; font-weight: 600; color: var(--txt-2); }
.ct-mov.mais .ct-mov-val { color: var(--ct-verde); }
.ct-mov.menos .ct-mov-val { color: var(--ct-vermelho); }

/* ---------- Catálogo de prêmios (vitrine 2 colunas) ---------- */
.ct-meu-saldo { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 12px; margin-bottom: 12px; padding: 12px 14px; border-radius: 18px; background: var(--sup); border: 1px solid var(--borda); }
.ct-meu-saldo-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--kort); color: var(--kort-txt); }
.ct-meu-saldo small { display: block; font-size: 12px; color: var(--txt-2); font-weight: 600; }
.ct-meu-saldo strong { display: block; font-family: var(--f-display); font-weight: 900; font-size: 26px; line-height: 1; color: var(--kort); white-space: nowrap; }
.ct-meu-saldo-txt { justify-self: end; text-align: right; font-size: 13px; font-weight: 600; color: var(--txt-2); }
.ct-premios { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 700px) { .ct-premios { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
.ct-premio { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: 20px; background: var(--ct-card); border: 1px solid var(--borda); overflow: hidden; }
.ct-premio.pode { border-color: color-mix(in srgb, var(--kort) 60%, var(--borda)); box-shadow: 3px 3px 0 color-mix(in srgb, var(--kort) 40%, transparent); }
.ct-premio-foto { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; padding-top: 18px; background: repeating-linear-gradient(135deg, #1d1d1b 0 10px, #161615 10px 20px); color: var(--kort); }
.ct-premio-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ct-premio-ico { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--preto); border: 1.5px solid #3a3a37; color: #8f8f88; }
.ct-premio.pode .ct-premio-foto { background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--kort) 26%, transparent), transparent 66%), repeating-linear-gradient(135deg, #1d1d1b 0 10px, #161615 10px 20px); }
.ct-premio.pode .ct-premio-ico { background: var(--kort); border-color: var(--kort); color: var(--kort-txt); box-shadow: 3px 3px 0 var(--sombra); animation: ctMexe 3.6s ease-in-out 1.5s infinite; }
.ct-premio-tag { position: absolute; top: 9px; left: 9px; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--kort); color: var(--kort-txt); font-size: 11.5px; font-weight: 800; }
.ct-premio-tag.trancado { background: rgb(8 8 8 / .78); color: var(--txt-2); border: 1px solid #34342f; }
.ct-premio-info { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 12px 12px 14px; }
.ct-premio h3 { font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; }
.ct-premio p { font-size: 12.5px; line-height: 1.35; color: var(--txt-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ct-premio-custo { margin-top: auto; padding-top: 4px; font-family: var(--f-display); font-weight: 900; font-size: 30px; line-height: 1; color: var(--kort); }
.ct-premio-custo small { margin-left: 4px; font-family: var(--f-texto); font-size: 11.5px; font-weight: 700; color: var(--txt-2); }
.ct-premio-pe { display: grid; gap: 7px; margin-top: 6px; }
.ct-premio-pe .btn { width: 100%; height: 44px; }
.ct-premio .ct-prog { height: 8px; margin: 2px 0 0; }
.ct-premio-falta { font-size: 12.5px; color: var(--txt-2); }
.ct-premio-falta b { color: var(--txt); }
.ct-premio.esgotado { opacity: .7; }

/* ---------- Ranking ---------- */
.ct-rank { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.ct-rank-li { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 62px; padding: 8px 14px 8px 8px; border-radius: 16px; background: var(--ct-card); border: 1px solid var(--borda); }
.ct-rank-pos { position: relative; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; align-content: center; gap: 1px; background: var(--sup-2); font-family: var(--f-display); font-weight: 900; font-size: 22px; line-height: 1; }
.ct-rank-pos svg { width: 13px; height: 13px; }
.ct-rank-li.p1 .ct-rank-pos { background: var(--kort); color: var(--kort-txt); box-shadow: 2px 2px 0 var(--sombra); }
.ct-rank-li.p2 .ct-rank-pos { background: #E6E5E0; color: var(--preto); }
.ct-rank-li.p3 .ct-rank-pos { background: #C98B52; color: var(--preto); }
.ct-rank-nome { min-width: 0; font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-rank-nome small { display: block; font-size: 12.5px; font-weight: 400; color: var(--txt-2); }
.ct-rank-pts { font-family: var(--f-display); font-weight: 800; font-size: 24px; line-height: 1; white-space: nowrap; }
.ct-rank-pts small { font-family: var(--f-texto); font-size: 11.5px; font-weight: 600; color: var(--txt-2); margin-left: 2px; }
.ct-rank-li.eu { border-color: var(--kort); background: color-mix(in srgb, var(--kort) 9%, var(--sup)); }
.ct-minha-pos { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; padding: 16px 18px; border-radius: 20px; background: var(--kort); color: var(--kort-txt); box-shadow: 4px 4px 0 var(--sombra); }
.ct-minha-pos strong { font-family: var(--f-display); font-weight: 900; font-size: 52px; line-height: .9; }
.ct-minha-pos span { font-size: 14px; font-weight: 600; line-height: 1.35; }
.ct-minha-pos-ico { margin-left: auto; flex: none; }
.ct-minha-pos.fora { background: var(--sup); color: var(--txt); border: 1px solid var(--borda); box-shadow: none; }
.ct-minha-pos.fora strong { color: var(--kort); }
.ct-rank-premios { margin-bottom: 12px; }
.ct-rank-premios .ct-rotulo { margin-bottom: 10px; }
.ct-inclui { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14.5px; }
.ct-inclui li { display: flex; gap: 10px; align-items: center; }
.ct-medalha { flex: none; width: 34px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--sup-2); font-family: var(--f-display); font-weight: 900; font-size: 15px; }
.ct-medalha.m1 { background: var(--kort); color: var(--kort-txt); }
.ct-medalha.m2 { background: #E6E5E0; color: var(--preto); }
.ct-medalha.m3 { background: #C98B52; color: var(--preto); }

/* ---------- Indicar: convite (ingresso VIP) ---------- */
.ct-convite { position: relative; margin-top: 20px; padding: 24px 18px 18px; border-radius: 24px; background: var(--kort); color: var(--kort-txt); box-shadow: 6px 6px 0 var(--sombra); text-align: center; }
.ct-convite.revelar { transition: opacity .4s ease, transform .75s var(--mola); }
.ct-convite.revelar:not(.visivel) { transform: translateY(-26px) rotate(2.5deg) scale(.97); }
.ct-convite .ct-rotulo { color: rgb(8 8 8 / .7); }
.ct-convite-rot { display: inline-flex; align-items: center; gap: 9px; }
.ct-convite-presente { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--preto); color: var(--kort); }
.ct-convite-cod { margin: 12px 0 10px; padding-left: .12em; font-family: var(--f-display); font-weight: 900; font-size: clamp(56px, 18vw, 86px); line-height: .95; letter-spacing: .12em; }
.ct-convite-bonus { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--preto); color: var(--kort); font-size: 13px; font-weight: 700; }
.ct-convite .ct-picote { margin: 18px -18px 14px; }
.ct-convite-link { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: rgb(8 8 8 / .72); word-break: break-all; }
.ct-convite-link svg { flex: none; }
.ct-convite-acoes { display: grid; gap: 8px; margin-top: 16px; }
.ct-convite .btn { width: 100%; height: 52px; border-radius: 13px; font-size: 16px; }
.ct-dupla { display: flex; gap: 8px; }
.ct-dupla .btn { flex: 1; min-width: 0; }
.ct-btn-contorno { background: transparent; border: 1.5px solid var(--preto); color: var(--preto); }
.ct-btn-contorno:hover { background: rgb(8 8 8 / .07); }
.ct-btn-contorno:active { scale: .97; }
.ct-copiar-ico { position: relative; display: grid; place-items: center; width: 18px; height: 18px; }
.ct-copiar-ico svg { grid-area: 1 / 1; transition: opacity .2s ease, transform .3s var(--mola); }
.ct-copiar-ico svg:last-child { opacity: 0; transform: scale(.3); }
.copiado .ct-copiar-ico svg:first-child { opacity: 0; transform: scale(.3); }
.copiado .ct-copiar-ico svg:last-child { opacity: 1; transform: none; }
.ct-numeros-resumo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ct-num-caixa { display: grid; gap: 2px; padding: 14px 16px; border-radius: 20px; background: var(--ct-card); border: 1px solid var(--borda); }
.ct-num-ico { width: 34px; height: 34px; margin-bottom: 6px; border-radius: 11px; display: grid; place-items: center; background: var(--ct-card-2); color: var(--kort); }
.ct-num-caixa strong { display: block; font-family: var(--f-display); font-weight: 900; font-size: 44px; line-height: .92; color: var(--kort); font-variant-numeric: tabular-nums; }
.ct-num-caixa span:last-child { font-size: 13px; color: var(--txt-2); }
.ct-passos { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; counter-reset: passo; }
.ct-passos::before { content: ""; position: absolute; left: 15px; top: 20px; bottom: 20px; width: 2px; background: repeating-linear-gradient(180deg, #3a3a37 0 6px, transparent 6px 12px); }
.ct-passos li { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 14.5px; color: #cfcfc8; counter-increment: passo; transition: var(--ct-trans); }
.ct-passos li::before { content: counter(passo); width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--kort); color: var(--kort-txt); font-family: var(--f-display); font-weight: 900; font-size: 18px; box-shadow: 2px 2px 0 var(--sombra); }
.ct-passos li > span { padding-top: 5px; }
.ct-passos b { color: var(--txt); }
.ct-iniciais { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--sup-2); font-family: var(--f-display); font-weight: 800; font-size: 16px; color: var(--txt); flex: none; }
.ct-iniciais.veio { background: var(--kort); color: var(--kort-txt); }

/* ---------- Clube ---------- */
.ct-planos { display: grid; gap: 14px; }
@media (min-width: 700px) { .ct-planos { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: start; } }
.ct-plano { position: relative; display: grid; gap: 12px; align-content: start; padding: 20px 18px 18px; border-radius: 22px; background: var(--ct-card); border: 1px solid var(--borda); scroll-margin-top: 90px; }
.ct-plano.destaque { border: 1.5px solid var(--kort); background: radial-gradient(110% 70% at 100% 0%, color-mix(in srgb, var(--kort) 14%, transparent), transparent 60%), var(--ct-card); box-shadow: 5px 5px 0 var(--kort); }
.ct-plano-fita { position: absolute; top: -1px; right: 18px; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px; border-radius: 0 0 10px 10px; background: var(--kort); color: var(--kort-txt); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.ct-plano h3 { padding-right: 120px; font-family: var(--f-display); font-weight: 800; font-size: 28px; line-height: 1; text-transform: uppercase; }
.ct-plano:not(.destaque):not(.meu) h3 { padding-right: 0; }
.ct-plano-preco { display: flex; align-items: flex-start; gap: 2px; font-family: var(--f-display); font-weight: 900; font-size: 58px; line-height: .9; color: var(--kort); }
.ct-plano-preco small { margin-top: 6px; font-size: 20px; font-weight: 800; color: var(--txt-2); }
.ct-plano-preco sup { margin-top: 5px; font-size: 24px; }
.ct-plano-preco em { align-self: flex-end; margin: 0 0 4px 4px; font-style: normal; font-family: var(--f-texto); font-size: 14px; font-weight: 600; color: var(--txt-2); }
.ct-plano p { font-size: 14px; color: var(--txt-2); }
.ct-plano ul { list-style: none; margin: 0; padding: 12px 0 0; display: grid; gap: 9px; font-size: 14.5px; border-top: 1px dashed #34342f; }
.ct-plano li { display: flex; gap: 10px; align-items: flex-start; }
.ct-check { flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--kort) 18%, transparent); color: var(--kort); }
.ct-plano.destaque .ct-check { background: var(--kort); color: var(--kort-txt); }
.ct-plano .btn { width: 100%; margin-top: 6px; }
.ct-assin { position: relative; margin-top: 20px; padding: 20px 18px; border-radius: 22px; background: radial-gradient(100% 70% at 100% 0%, color-mix(in srgb, var(--kort) 13%, transparent), transparent 60%), linear-gradient(150deg, #1c1d13, #121211 66%); border: 1px solid #3a3a28; box-shadow: 5px 5px 0 var(--kort); }
.ct-assin.parada { box-shadow: 4px 4px 0 var(--sombra); }
.ct-assin-cab { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.ct-assin-coroa { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: var(--kort); color: var(--kort-txt); box-shadow: 2px 2px 0 var(--sombra); }
.ct-assin-nome { min-width: 0; }
.ct-assin h2 { font-family: var(--f-display); font-weight: 900; font-size: 36px; line-height: .92; text-transform: uppercase; overflow-wrap: anywhere; }
.ct-assin dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px 16px; margin: 16px 0 0; padding-top: 14px; border-top: 1px dashed #3a3a28; font-size: 14.5px; }
.ct-assin dt { color: var(--txt-2); }
.ct-assin dd { margin: 0; text-align: right; font-weight: 600; }
.ct-usos { display: grid; gap: 14px; margin-top: 18px; padding-top: 16px; border-top: 1px dashed #3a3a28; }
.ct-uso { display: grid; gap: 7px; }
.ct-uso-cab { display: flex; justify-content: space-between; gap: 10px; font-size: 14.5px; font-weight: 600; }
.ct-uso-cab span { color: var(--txt-2); font-weight: 500; white-space: nowrap; }
.ct-uso .ct-prog { height: 8px; margin: 0; }
.ct-assin-acoes { display: grid; gap: 8px; margin-top: 18px; }
.ct-assin-acoes .btn { width: 100%; height: 48px; }
.ct-nota { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--sup-2); font-size: 14px; color: #cfcfc8; }
.ct-nota svg { flex: none; color: var(--kort); margin-top: 1px; }
.ct-nota.alerta { background: #3a2a0e; color: #f5dca6; }
.ct-nota.alerta svg { color: #f5c46a; }

/* ---------- Perfil ---------- */
.ct-perfil-cab { display: grid; justify-items: center; gap: 6px; padding: 8px 0 4px; text-align: center; }
.ct-perfil-cab .ct-av-xl { margin-bottom: 6px; animation: colar .55s var(--mola) backwards; }
.ct-perfil-cab .ct-titulo { margin-top: 0; font-size: clamp(40px, 11vw, 56px); }
.ct-perfil-cab p { color: var(--txt-2); font-size: 14.5px; }
.ct-perfil-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; width: 100%; margin-top: 12px; }
.ct-perfil-stats a { display: grid; gap: 2px; padding: 12px 8px; border-radius: 16px; background: var(--ct-card); border: 1px solid var(--borda); color: var(--txt); text-decoration: none; }
.ct-perfil-stats strong { font-family: var(--f-display); font-weight: 900; font-size: 26px; line-height: 1; color: var(--kort); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-perfil-stats strong small { font-size: 16px; color: var(--txt-2); }
.ct-perfil-stats span { font-size: 12px; font-weight: 600; color: var(--txt-2); text-transform: uppercase; letter-spacing: .05em; }

.ct-form { display: grid; gap: 14px; }
.ct-form .pub-erro { margin: 0; }
.ct-form-pe { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
@media (max-width: 900px) { .ct-form-pe .btn { width: 100%; height: 52px; font-size: 16px; } }
/* grupo de campos em linhas (estilo ajustes do celular) */
.ct-grupo { display: grid; border-radius: 20px; border: 1px solid var(--borda); background: linear-gradient(180deg, #161615, #121211); overflow: hidden; }
.ct-campo-linha { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 14px; row-gap: 0; align-items: center; padding: 12px 14px; transition: background-color .2s ease; }
.ct-campo-linha + .ct-campo-linha { border-top: 1px solid var(--borda); }
.ct-campo-linha-ico { grid-row: 1 / span 2; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--ct-card-2); color: var(--kort); align-self: center; }
.ct-campo-linha > label { grid-column: 2; font-size: 11.5px !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: .07em; color: var(--txt-2) !important; }
.ct-campo-linha .input { grid-column: 2; height: 34px !important; padding: 0 !important; border: 0 !important; border-radius: 0; background: transparent !important; font-size: 16px; font-weight: 600; box-shadow: none; }
.ct-campo-linha .input:focus-visible { outline: none; box-shadow: none; }
.ct-campo-linha:focus-within { background: color-mix(in srgb, var(--kort) 6%, transparent); }
.ct-campo-linha::after { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--kort); opacity: 0; transform: scaleY(.3); transition: opacity .2s ease, transform .3s var(--mola); }
.ct-campo-linha:focus-within::after { opacity: 1; transform: none; }
.ct-campo-linha .ajuda { grid-column: 2; margin-top: 4px; }
.ct-campo-linha.com-erro { background: color-mix(in srgb, var(--ct-vermelho) 8%, transparent); }
.ct-campo-linha.com-erro::after { opacity: 1; transform: none; background: var(--ct-vermelho); }
.ct-campo-linha.com-erro .ct-campo-linha-ico { color: var(--ct-vermelho); }
.ct-campo-valor { grid-column: 2; display: flex; align-items: center; gap: 8px; min-height: 34px; font-size: 16px; font-weight: 600; color: var(--txt); }
.ct-cadeado { flex: none; color: #6e6e68; }
.ct-campo-linha.fixo .ct-campo-valor { color: #cfcfc8; }
.ct-opcional { color: var(--txt-2); font-weight: 400; text-transform: none; letter-spacing: 0; }
/* dobra (trocar senha) */
.ct-dobra { border-radius: 20px; border: 1px solid var(--borda); background: linear-gradient(180deg, #161615, #121211); overflow: hidden; }
.ct-dobra > summary { list-style: none; }
.ct-dobra > summary::-webkit-details-marker { display: none; }
.ct-dobra-seta { color: #6e6e68; transition: transform .3s var(--mola); }
.ct-dobra[open] .ct-dobra-seta { transform: rotate(180deg); color: var(--kort); }
.ct-dobra[open] > summary { border-bottom: 1px solid var(--borda); }
.ct-dobra-corpo { padding: 16px 14px 16px; }
.ct-dobra[open] .ct-dobra-corpo { animation: subir .35s var(--saida) both; }
.ct-fixo { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 14px; border-radius: 12px; border: 1px dashed var(--borda); color: #cfcfc8; font-size: 16px; font-weight: 600; }
.ct-fixo > svg:first-child { color: var(--kort); flex: none; }
.ct-fixo .ct-cadeado { margin-left: auto; }
.ct-sair .ct-linha { min-height: 62px; }

/* campos com ícone, senha (olho) e medidor de força */
.ct-com-ico { position: relative; }
.ct-com-ico .input { padding-left: 46px; }
.ct-campo-ico { position: absolute; left: 15px; top: 50%; translate: 0 -50%; color: #6e6e68; pointer-events: none; transition: color .2s ease; }
.ct-com-ico:focus-within .ct-campo-ico { color: var(--kort); }
.campo.com-erro .ct-campo-ico { color: var(--ct-vermelho); }
.ct-senha { position: relative; }
.ct-senha .input { padding-right: 56px; }
.ct-olho { position: absolute; top: 4px; right: 4px; bottom: 4px; width: 46px; border: 0; border-radius: 10px; background: none; color: var(--txt-2); display: grid; place-items: center; transition: color .2s ease, scale .15s ease; }
.ct-olho:hover { color: var(--txt); }
.ct-olho:active { scale: .88; }
.ct-olho .ico-esconder, .ct-olho[aria-pressed=true] .ico-mostrar { display: none; }
.ct-olho[aria-pressed=true] .ico-esconder { display: block; }
.ct-olho[aria-pressed=true] { color: var(--kort); }
.ct-forca { display: grid; grid-template-columns: repeat(4, 1fr) auto; align-items: center; gap: 5px; margin-top: 2px; }
.ct-forca i { height: 5px; border-radius: 999px; background: #2a2a28; overflow: hidden; position: relative; }
.ct-forca i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--cor-forca, var(--kort)); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--saida); }
.ct-forca[data-n="1"] i:nth-child(-n+1)::after, .ct-forca[data-n="2"] i:nth-child(-n+2)::after, .ct-forca[data-n="3"] i:nth-child(-n+3)::after, .ct-forca[data-n="4"] i:nth-child(-n+4)::after { transform: none; }
.ct-forca[data-n="1"] { --cor-forca: var(--ct-vermelho); }
.ct-forca[data-n="2"] { --cor-forca: #f5c46a; }
.ct-forca span { min-width: 52px; text-align: right; font-size: 12px; font-weight: 700; color: var(--txt-2); }

/* erro bonito (caixa vermelha com ícone e tremidinha) */
.ct-pagina .pub-erro { position: relative; display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 14px 12px 42px; border-radius: 14px; background: linear-gradient(100deg, #3a1610, #2a110c); border: 1px solid #5c2318; color: #ffd9cf; font-size: 14px; font-weight: 500; line-height: 1.4; }
.ct-pagina .pub-erro::before { content: "!"; position: absolute; left: 12px; top: 11px; width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; background: var(--ct-vermelho); color: #2a110c; font: 900 13px/1 var(--f-texto); }
.ct-pagina .pub-erro:not([hidden]) { animation: subir .3s var(--saida) both; }
.ct-pagina .pub-erro.treme { animation: ctTreme .45s ease both; }
@keyframes ctTreme { 0%, 100% { transform: none; } 18% { transform: translateX(-7px); } 36% { transform: translateX(6px); } 54% { transform: translateX(-4px); } 72% { transform: translateX(3px); } 88% { transform: translateX(-1px); } }
.ct-pagina .campo.com-erro .input { border-color: var(--ct-vermelho); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ct-vermelho) 18%, transparent); }
.ct-pagina .ct-campo-linha.com-erro .input { box-shadow: none; }

/* ---------- Entrar / cadastro / senha / sair / voucher: telas cheias ---------- */
.ct-auth-pagina { background: radial-gradient(520px 380px at 100% 0%, color-mix(in srgb, var(--kort) 11%, transparent), transparent 70%), var(--preto); }
.ct-auth-tela { min-height: 100dvh; max-width: 480px; margin: 0 auto; padding: 0 var(--ct-margem) calc(28px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
.ct-auth-pagina.com-abas .ct-auth-tela { padding-bottom: 28px; min-height: 0; }
.ct-auth-topo { position: relative; display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 0 10px; }
.ct-auth-topo::after { content: ""; position: absolute; left: calc(-1 * var(--ct-margem)); right: calc(-1 * var(--ct-margem)); bottom: 0; height: 4px; background: repeating-linear-gradient(135deg, var(--kort) 0 14px, var(--preto) 14px 20px, var(--concreto) 20px 34px, var(--preto) 34px 40px); opacity: .85; -webkit-mask-image: linear-gradient(to right, transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(to right, transparent, #000 25%, #000 75%, transparent); }
.ct-auth-voltar { flex: none; width: 44px; height: 44px; margin-left: -6px; display: grid; place-items: center; border-radius: 14px; background: var(--sup); border: 1px solid var(--borda); color: var(--txt); transition: scale .15s ease; }
.ct-auth-voltar:active { scale: .9; }
.ct-auth-marca { min-width: 0; display: flex; align-items: center; gap: 10px; color: var(--txt); text-decoration: none; }
.ct-auth-marca .ct-logo { width: 36px; height: 36px; }
.ct-auth-marca span { font-family: var(--f-display); font-weight: 900; font-size: 22px; line-height: 1; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-top: 2px; }
.ct-auth { flex: 1; display: flex; flex-direction: column; padding-top: 26px; }
.ct-auth-hero { display: grid; justify-items: start; gap: 10px; margin-bottom: 22px; }
.ct-auth-selo { width: 60px; height: 60px; border-radius: 19px; display: grid; place-items: center; background: var(--kort); color: var(--kort-txt); box-shadow: 4px 4px 0 var(--sombra); animation: colar .55s var(--mola) .05s backwards; }
.ct-auth-selo-alerta { background: var(--sup-2); color: #f5c46a; box-shadow: 4px 4px 0 #000; }
.ct-auth-tit { margin-top: 6px; font-family: var(--f-display); font-weight: 900; font-size: clamp(50px, 15vw, 66px); line-height: .88; text-transform: uppercase; animation: colar .55s var(--mola) .12s backwards; }
.ct-auth-sub { color: var(--txt-2); font-size: 15.5px; line-height: 1.45; animation: subir .45s var(--saida) .22s backwards; }
.ct-auth-av { margin-bottom: 4px; animation: colar .55s var(--mola) backwards; }
.ct-auth-form, .ct-auth-botoes { display: grid; gap: 16px; }
/* os campos e botões entram só com opacidade (sem mexer na posição: o toque nunca pega o botão andando) */
.ct-auth-form > *, .ct-auth-botoes > * { animation: ctAparece .5s ease backwards; animation-delay: .24s; }
.ct-auth-form > :nth-child(4), .ct-auth-botoes > :nth-child(2) { animation-delay: .32s; }
.ct-auth-form > :nth-child(5), .ct-auth-botoes > :nth-child(n+3) { animation-delay: .4s; }
.ct-auth-form > :nth-child(n+6) { animation-delay: .48s; }
@keyframes ctAparece { 0% { opacity: 0; } }
.ct-auth .input { height: 56px; padding: 0 16px; border-radius: 14px; font-size: 17px; background: #121211; border-color: #2c2c2a; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; }
.ct-auth .ct-com-ico .input { padding-left: 46px; }
.ct-auth .ct-senha .input { padding-right: 56px; }
.ct-auth .input:focus { border-color: var(--kort); background: #151514; box-shadow: 0 0 0 4px color-mix(in srgb, var(--kort) 16%, transparent); }
.ct-auth .input:focus-visible { outline: none; }
.ct-auth .campo > label { font-size: 14px; }
.ct-auth .btn-grande { width: 100%; height: 58px; border-radius: 14px; font-size: 17px; }
.ct-auth .btn-fantasma { width: 100%; height: 48px; }
.ct-codigo { text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }
.ct-auth .pub-ok { margin: 0; }
.ct-auth-alt { display: grid; gap: 12px; margin-top: 26px; padding: 18px; border-radius: 22px; border: 1px solid var(--borda); background: rgb(20 20 19 / .82); animation: subir .5s var(--saida) .5s backwards; }
.ct-auth-alt-cab { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; }
.ct-auth-alt-ico { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--ct-card-2); color: var(--kort); }
.ct-auth-alt h2 { font-family: var(--f-display); font-weight: 800; font-size: 24px; line-height: 1; text-transform: uppercase; }
.ct-auth-alt p { margin-top: 4px; color: var(--txt-2); font-size: 14px; }
.ct-auth-alt p b { color: var(--kort); }
.ct-auth-alt .btn { width: 100%; }
.ct-auth-nota { color: var(--txt-2); font-size: 13.5px; }
.ct-caixa { position: relative; display: grid; gap: 10px; margin-top: 16px; padding: 16px 16px 16px 16px; border-radius: 18px; border: 1px solid var(--kort); background: linear-gradient(120deg, color-mix(in srgb, var(--kort) 12%, transparent), color-mix(in srgb, var(--kort) 4%, transparent)); }
.ct-caixa:not([hidden]) { animation: colar .45s var(--mola) both; }
.ct-caixa-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--kort); color: var(--kort-txt); }
.ct-caixa strong { font-family: var(--f-display); font-weight: 800; font-size: 27px; line-height: 1; }
.ct-caixa p { font-size: 14px; color: #cfcfc8; }
.ct-caixa .btn { width: 100%; height: 50px; }
.ct-vantagens { list-style: none; margin: -6px 0 22px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
.ct-vantagens li { display: grid; justify-items: start; gap: 3px; padding: 12px 10px; border-radius: 16px; background: var(--sup); border: 1px solid var(--borda); font-size: 12px; line-height: 1.3; color: var(--txt-2); animation: subir .45s var(--saida) backwards; animation-delay: calc(.25s + var(--i, 0) * .07s); }
.ct-vantagens b { font-family: var(--f-display); font-weight: 800; font-size: 19px; line-height: 1; color: var(--txt); text-transform: uppercase; }
.ct-vantagem-ico { width: 32px; height: 32px; margin-bottom: 4px; border-radius: 10px; display: grid; place-items: center; background: var(--kort); color: var(--kort-txt); }

/* ---------- Voucher (página do balcão e folha depois de trocar) ---------- */
.ct-vale-pagina { padding-top: 22px; }
.ct-vale { --furo: var(--fundo); position: relative; width: 100%; max-width: 420px; margin: 0 auto; padding: 22px 20px 20px; border-radius: 24px; background: var(--kort); color: var(--kort-txt); box-shadow: 6px 6px 0 var(--sombra); text-align: center; animation: ctCai .75s var(--mola) both; }
@keyframes ctCai { 0% { opacity: 0; transform: translateY(-40px) rotate(-5deg) scale(.96); } 100% { opacity: 1; transform: none; } }
.ct-vale-rot { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.ct-vale-premio { margin-top: 8px; font-family: var(--f-display); font-weight: 900; font-size: 34px; line-height: .98; text-transform: uppercase; overflow-wrap: anywhere; }
.ct-vale .ct-picote { margin: 18px -20px 16px; }
.ct-vale .ct-picote::before { left: -11px; }
.ct-vale .ct-picote::after { right: -11px; }
.ct-vale-cod { padding-left: .1em; font-family: var(--f-display); font-weight: 900; font-size: clamp(60px, 19vw, 92px); line-height: .95; letter-spacing: .1em; }
.ct-vale-qr { position: relative; width: fit-content; margin: 16px auto 0; padding: 10px; border-radius: 16px; background: #fff; border: 2px solid var(--preto); box-shadow: 3px 3px 0 rgb(8 8 8 / .35); }
.ct-vale-qr svg { width: min(58vw, 216px); height: min(58vw, 216px); }
.ct-vale-qr::before, .ct-vale-qr::after { content: ""; position: absolute; left: 10px; right: 10px; height: 3px; border-radius: 3px; background: var(--kort); box-shadow: 0 0 12px var(--kort); top: 12px; opacity: 0; pointer-events: none; }
.ct-vale:not(.inativo) .ct-vale-qr::before { animation: ctEscaneia 2.8s ease-in-out 1s infinite; }
@keyframes ctEscaneia { 0% { opacity: 0; transform: translateY(0); } 10% { opacity: .9; } 50% { opacity: .9; transform: translateY(calc(min(58vw, 216px) - 4px)); } 60%, 100% { opacity: 0; transform: translateY(calc(min(58vw, 216px) - 4px)); } }
.ct-vale dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; margin: 0; font-size: 14px; text-align: left; }
.ct-vale dt { color: rgb(8 8 8 / .64); }
.ct-vale dd { margin: 0; font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.ct-vale-dica { margin-top: 14px; font-size: 13.5px; font-weight: 700; line-height: 1.4; color: rgb(8 8 8 / .72); }
.ct-vale-dica svg { display: inline-block; margin-right: 6px; vertical-align: -3px; }
.ct-vale.inativo { background: var(--sup-2); color: var(--txt); box-shadow: 4px 4px 0 #000; }
.ct-vale.inativo .ct-picote { border-color: var(--borda); }
.ct-vale.inativo .ct-vale-cod { color: var(--txt-2); text-decoration: line-through; text-decoration-thickness: 4px; }
.ct-vale.inativo dt, .ct-vale.inativo .ct-vale-dica { color: var(--txt-2); }
.ct-vale.inativo .ct-vale-qr { opacity: .22; filter: grayscale(1); }
.ct-vale-carimbo { position: absolute; z-index: 3; top: 46%; left: 50%; padding: 6px 18px; border: 4px solid currentColor; border-radius: 12px; background: rgb(8 8 8 / .84); color: var(--ct-vermelho); font-family: var(--f-display); font-weight: 900; font-size: 44px; line-height: 1; text-transform: uppercase; white-space: nowrap; transform: translate(-50%, -50%) rotate(-12deg); animation: ctCarimboVale .6s var(--mola) .45s both; }
.ct-vale-carimbo.ok { color: var(--ct-verde); }
@keyframes ctCarimboVale { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(-30deg) scale(2.2); } 100% { opacity: 1; transform: translate(-50%, -50%) rotate(-12deg) scale(1); } }
.ct-vale-acoes { display: grid; gap: 8px; width: 100%; max-width: 420px; margin: 22px auto 0; animation: subir .45s var(--saida) .35s backwards; }
.ct-vale-acoes .btn { width: 100%; }
.ct-folha-ok .ct-vale { --furo: var(--sup); max-width: none; margin: 4px 0 0; box-shadow: 4px 4px 0 #000; }
.ct-folha-ok .ct-vale .ct-picote { margin: 16px -20px 14px; }
.ct-folha-ok .ct-vale-cod { font-size: 64px; }
.ct-folha-corpo { padding: 8px 20px calc(20px + env(safe-area-inset-bottom)); overflow-y: auto; text-align: center; }
.ct-folha-corpo h2 { margin: 6px 0 4px; font-family: var(--f-display); font-weight: 900; font-size: 44px; line-height: 1; text-transform: uppercase; animation: colar .5s var(--mola) .1s backwards; }
.ct-folha-corpo > p { color: var(--txt-2); font-size: 14.5px; margin-bottom: 14px; }
.ct-ok-selo { width: 64px; height: 64px; margin: 6px auto 0; border-radius: 50%; display: grid; place-items: center; background: var(--kort); color: var(--kort-txt); box-shadow: 3px 3px 0 #000; animation: ctPop .6s var(--mola) both; }
@keyframes ctPop { 0% { opacity: 0; transform: scale(.2) rotate(-30deg); } 100% { opacity: 1; transform: none; } }
@media (min-width: 721px) { .ct-folha-corpo { padding-top: 22px; } }

/* confete do resgate */
.ct-confete { position: fixed; inset: 0; z-index: 90; pointer-events: none; overflow: hidden; }
.ct-confete i { position: absolute; left: var(--x0, 50%); top: var(--y0, 40%); width: var(--w, 9px); height: var(--h, 14px); margin: calc(var(--h, 14px) / -2) 0 0 calc(var(--w, 9px) / -2); border-radius: 2px; background: var(--cor, var(--kort)); opacity: 0; animation: ctConfete var(--d, 1.4s) cubic-bezier(.12, .75, .3, 1) var(--atr, 0s) forwards; }
@keyframes ctConfete {
  0% { opacity: 1; transform: translate(0, 0) rotate(0); }
  26% { opacity: 1; transform: translate(var(--ux, 0px), var(--uy, -140px)) rotate(calc(var(--rot, 540deg) * .3)); animation-timing-function: cubic-bezier(.45, 0, .85, .55); }
  82% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, 300px)) rotate(var(--rot, 540deg)); }
}

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  .ct-barra::before, .ct-barra-in, .ct-ola-pre, .ct-ola-nome, .ct-barra-tit, .ct-av, .ct-abas-ind { transition: none !important; }
  .ct-selo.cheio, .ct-numero, .ct-vale-carimbo { animation: none !important; opacity: 1 !important; }
  .ct-cartao.revelar:not(.visivel) .ct-selo.cheio, .revelar:not(.visivel) .ct-numero { opacity: 1; }
  .revelar:not(.visivel) .ct-prog i { transform: none; }
  .ct-bilhete.revelar:not(.visivel), .ct-convite.revelar:not(.visivel) { transform: none; }
  .ct-vale-qr::before, .ct-prog i::after, .ct-vivo::after { display: none; }
  .ct-confete { display: none; }
}