/* HZ STUDIOS · CARTAO FREQUENCIA (o cartao do cliente no celular) · 08/out/2026
   Celular primeiro. As cores e as fontes sao as da marca (as mesmas da landing e do site). */
@font-face{font-family:'Teko';font-weight:600;font-display:swap;src:url(fontes/teko-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-weight:500;font-display:swap;src:url(fontes/space-grotesk-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-weight:700;font-display:swap;src:url(fontes/space-grotesk-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Source Sans 3';font-weight:400;font-display:swap;src:url(fontes/source-sans-3-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Source Sans 3';font-weight:700;font-display:swap;src:url(fontes/source-sans-3-latin-700-normal.woff2) format('woff2')}
:root{
  --bg:#131314; --surface:#161618; --surface-2:#212124; --line:#26262A;
  --white:#F4F6FA; --gray:#A0A0A6; --gray-2:#8C8C92; --gray-3:#7B7B82;
  --lima:#d6fd00; --teal:#4dc6c3; --menta:#4eebcb; --roxo:#9c5fdf; --coral:#f18768; --ambar:#fcc86c; --rosa:#f57cb4; --escuro:#0E0E10;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--white);font-family:'Source Sans 3',system-ui,sans-serif;font-size:17px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
.esconde{display:none!important}
.tela{max-width:520px;margin:0 auto;padding:calc(14px + env(safe-area-inset-top,0px)) 16px calc(24px + env(safe-area-inset-bottom,0px))}
.topo{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px}
.marca{display:flex;align-items:center;gap:8px;font-family:'Space Grotesk',sans-serif;font-size:17px}
.marca svg{width:26px;height:26px}
.instalar{min-height:44px;padding:8px 14px;border-radius:99px;border:1.5px solid var(--teal);background:transparent;color:var(--menta);
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:14px;cursor:pointer}
h1{font-family:'Teko',sans-serif;font-weight:600;text-transform:uppercase;font-size:44px;line-height:.9;margin:4px 0 6px}
h1 span{color:var(--menta)}
.sub{color:var(--gray);margin:0 0 18px}
.carregando{color:var(--gray);text-align:center;padding:40px 0}

/* o cartao */
.cartao{position:relative;background:linear-gradient(150deg,#1d1d21 0%,#141416 60%);border:1.5px solid rgba(78,235,203,.55);border-radius:22px;
  padding:22px 18px 18px;box-shadow:0 26px 60px -24px rgba(0,0,0,.8),0 0 40px -14px rgba(78,235,203,.35);overflow:hidden;margin-bottom:16px}
.cartao::before{content:'';position:absolute;inset:0 0 auto 0;height:5px;
  background:linear-gradient(90deg,var(--lima) 0 14%,var(--teal) 14% 28%,var(--menta) 28% 42%,var(--roxo) 42% 56%,var(--coral) 56% 70%,var(--ambar) 70% 84%,var(--rosa) 84%)}
.cartao-nome{font-family:'Teko',sans-serif;font-weight:600;font-size:32px;line-height:1;text-transform:uppercase}
.cartao-quem{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:18px;margin:6px 0 2px;overflow-wrap:anywhere}
.cartao-sub{font-size:14px;color:var(--gray);margin:0 0 16px}
.selos{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px 10px}
.casa{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.bola{width:66px;height:66px;border-radius:50%;border:2px dashed #3a3a42;display:flex;align-items:center;justify-content:center;
  font-family:'Teko',sans-serif;font-weight:600;font-size:28px;color:var(--gray-3)}
.casa.premio .bola{border-style:solid;border-color:var(--ambar);color:var(--ambar)}
.casa.cheio .bola{border:0;background:var(--menta);color:var(--escuro);transform:rotate(-12deg)}
.casa.cheio:nth-child(2) .bola{background:var(--teal)} .casa.cheio:nth-child(3) .bola{background:var(--lima)}
.casa.cheio:nth-child(4) .bola{background:var(--roxo)} .casa.cheio:nth-child(5) .bola{background:var(--coral)} .casa.cheio:nth-child(6) .bola{background:var(--ambar)}
.casa.cheio .bola svg{width:32px;height:32px;fill:var(--escuro)}
.casa.novo .bola{animation:carimba .55s cubic-bezier(.3,1.6,.5,1) both}
@keyframes carimba{from{opacity:0;transform:scale(1.8) rotate(-30deg)}to{opacity:1;transform:rotate(-12deg)}}
.casa small{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ambar);text-align:center;line-height:1.2}
.validade{margin:16px 0 0;padding-top:12px;border-top:1px solid #2e2e33;font-size:14px;color:var(--gray)}
.validade b{color:var(--white)}

/* avisos e botoes */
.aviso{border-radius:14px;padding:14px 16px;margin:0 0 14px;background:var(--surface-2);border:1px solid var(--line)}
.aviso.ok{border-color:rgba(78,235,203,.6)}
.aviso.erro{border-color:var(--coral);color:#ffd9cc}
.aviso.espera{border-color:rgba(252,200,108,.6)}
.aviso b{color:var(--white)}
.btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;padding:14px 18px;border-radius:99px;border:1.5px solid transparent;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:17px;cursor:pointer;text-decoration:none;text-align:center;margin:0 0 10px}
.btn-lima{background:var(--lima);color:var(--escuro)}
.btn-lima:disabled{opacity:.5;cursor:default}
.btn-calmo{background:transparent;color:var(--white);border-color:#38383E}
.btn-wa{background:transparent;color:var(--menta);border-color:var(--teal)}
.premios{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:10px}
.premio-item{border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--surface)}
.premio-item b{display:block;color:var(--ambar);font-family:'Space Grotesk',sans-serif}
.premio-item.fim{opacity:.6}
.premio-item span{font-size:14px;color:var(--gray)}

/* o cadastro */
.campo{display:flex;flex-direction:column;gap:6px;margin:0 0 14px}
.campo label{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--gray-2)}
.campo input{width:100%;min-height:52px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;
  color:var(--white);font-family:inherit;font-size:18px}
.campo input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(77,198,195,.18)}
.campo.falta input{border-color:var(--coral);background:#3a2528}
.campo .frase{display:none;font-size:14px;color:var(--coral)}
.campo.falta .frase{display:block}
/* 09/out: o acesso novo pelo proprio cliente */
.titulo-passo{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:21px;margin:6px 0 6px;color:var(--white)}
.passos{margin:0 0 14px;padding-left:22px}
.passos li{margin:8px 0}

.rodape{margin-top:26px;font-size:13px;color:var(--gray-2)}
.rodape p{margin:10px 0 0}
.rodape a{color:var(--gray)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}