/* =============================================================================
   GESLUCK — PÁGINAS DE ENTRADA
   Entrar, criar conta, confirmar o email e segunda verificação. Depende de tokens.css.
   ============================================================================= */

body.gl-pagina-entrada { min-height: 100vh; min-height: 100dvh; background: var(--gl-superficie); }

.gl-entrada-grelha { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }

/* ── O palco ────────────────────────────────────────────────────────────────── */
.gl-palco {
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: clamp(32px, 4.5vw, 64px);
    color: #eaf6ef;
    /* As luzes descem por patamares: com só dois pontos via-se a orla onde terminavam. */
    background:
        radial-gradient(760px 520px at 88% 8%, rgba(168, 225, 12, .20) 0%, rgba(168, 225, 12, .135) 24%, rgba(168, 225, 12, .07) 44%, rgba(168, 225, 12, .022) 62%, rgba(168, 225, 12, 0) 78%),
        radial-gradient(640px 520px at 0% 100%, rgba(68, 194, 176, .22) 0%, rgba(68, 194, 176, .15) 24%, rgba(68, 194, 176, .075) 44%, rgba(68, 194, 176, .024) 64%, rgba(68, 194, 176, 0) 82%),
        linear-gradient(155deg, #0a3b37 0%, #082f2c 52%, #06211e 100%);
}
.gl-palco::before {
    content: ''; position: absolute; inset: 0; z-index: -1; opacity: .5;
    background-image: radial-gradient(rgba(234, 246, 239, .13) 1px, transparent 1.2px);
    background-size: 26px 26px;
    mask-image: radial-gradient(700px 500px at 60% 40%, #000 30%, transparent 80%);
}

/* O trevo ocupa o espaço livre entre o texto e a roleta: fica inteiro, nunca por baixo
   de nenhum dos dois, e o brilho apaga-se antes de chegar à borda do painel. */
.gl-palco-espaco { position: relative; flex: 1 1 0; min-height: 0; max-height: 480px; width: 72%; margin: 6px 0 6px auto; }
.gl-palco-trevo {
    position: absolute; inset: 0; z-index: -1;
    width: 100%; height: 100%;
    overflow: visible; /* O brilho passa da caixa do desenho. */
    opacity: .96;
    transform: translate3d(var(--px, 0), var(--py, 0), 0);
    transition: transform .6s var(--gl-curva);
}
.gl-trevo-folha { fill: url(#glTrevoGrad); }
.gl-trevo-folha-sorte { fill: url(#glTrevoLima); }
.gl-trevo-halo { animation: gl-trevo-pulso 3.4s ease-in-out infinite; }
.gl-trevo-grupo { transform-origin: 0 0; animation: gl-trevo-roda 90s linear infinite; }
@keyframes gl-trevo-pulso { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes gl-trevo-roda { to { transform: rotate(360deg); } }

.gl-palco-sobre { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gl-lima); }
:root[data-tema="escuro"] .gl-palco-sobre { color: #bdef3a; }

.gl-palco-titulo {
    margin: 16px 0 0; max-width: 15ch;
    font: 700 clamp(36px, 4.3vw, 60px)/1.06 var(--gl-fonte-titulo);
    letter-spacing: -.04em;
    color: #fff;
}
.gl-palco-texto { max-width: 42ch; margin: 18px 0 0; font-size: 16px; line-height: 1.6; color: rgba(234, 246, 239, .78); }

/* A roleta de demonstração */
.gl-roleta {
    width: min(100%, 390px);
    padding: 16px 18px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: var(--gl-r-xl);
    backdrop-filter: blur(14px);
}
.gl-roleta-cabeca { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: rgba(234, 246, 239, .68); margin-bottom: 10px; }
.gl-roleta-vivo { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--gl-lima); }
.gl-roleta-vivo::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: gl-pulso-lima 1.6s ease-out infinite; }
@keyframes gl-pulso-lima { 0% { box-shadow: 0 0 0 0 rgba(168, 225, 12, .6); } 80%, 100% { box-shadow: 0 0 0 7px rgba(168, 225, 12, 0); } }
.gl-roleta-janela { position: relative; height: 44px; overflow: hidden; }
.gl-roleta-nome { position: absolute; inset: 0; display: flex; align-items: center; font: 700 25px/1 var(--gl-fonte-titulo); letter-spacing: -.03em; color: #fff; white-space: nowrap; }
.gl-roleta.is-vencedor .gl-roleta-nome { color: var(--gl-lima); }
.gl-roleta-nota { margin-top: 8px; display: flex; justify-content: space-between; font-size: 12.5px; color: rgba(234, 246, 239, .62); font-variant-numeric: tabular-nums; }

.gl-palco-provas { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px; font-size: 13px; color: rgba(234, 246, 239, .75); }
.gl-palco-provas span { display: inline-flex; align-items: center; gap: 7px; }
.gl-palco-provas i { color: var(--gl-lima); font-size: 14px; }

/* ── O formulário ───────────────────────────────────────────────────────────── */
.gl-lado-form { position: relative; display: flex; flex-direction: column; min-height: 100%; padding: 26px clamp(24px, 5vw, 72px) 22px; background: var(--gl-superficie); }
.gl-lado-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 26px; }
.gl-marca { display: inline-flex; background: #fff; border-radius: var(--gl-r-md); padding: 6px 8px; }
.gl-marca img { display: block; height: 46px; width: auto; }

.gl-form-caixa { width: 100%; max-width: 410px; margin: auto; padding: 8px 0 22px; }
.gl-form-caixa.gl-larga { max-width: 500px; }
.gl-form-titulo { margin: 0; font: 700 31px/1.15 var(--gl-fonte-titulo); letter-spacing: -.035em; }
.gl-form-sub { margin: 8px 0 26px; font-size: 14.5px; color: var(--gl-tinta-3); }

.gl-duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

.gl-form-rodape { margin-top: 18px; text-align: center; font-size: 14px; color: var(--gl-tinta-3); }
.gl-form-rodape a { font-weight: 700; text-decoration: none; }
.gl-form-acao-pe { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; min-height: 22px; }

.gl-lado-pe { display: flex; align-items: center; justify-content: space-between; gap: 10px 18px; flex-wrap: wrap; font-size: 12px; color: var(--gl-tinta-3); }
.gl-lado-pe a { color: var(--gl-tinta-3); text-decoration: none; }
.gl-lado-pe a:hover { color: var(--gl-petroleo); }
.gl-lado-pe nav { display: flex; gap: 14px; flex-wrap: wrap; }
.gl-lado-pe img { height: 16px; width: auto; vertical-align: middle; }
:root[data-tema="escuro"] .gl-lado-pe img { filter: brightness(0) invert(.75); }

.gl-aviso-maiusculas { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 12px; font-weight: 500; color: var(--gl-aviso); }
.gl-aviso-maiusculas[hidden] { display: none; }

.gl-espera { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-bottom: 16px; font-size: 13.5px; color: var(--gl-aviso); background: var(--gl-aviso-fundo); border: 1px solid var(--gl-aviso-linha); border-radius: var(--gl-r-md); }
.gl-espera b { font-variant-numeric: tabular-nums; }

/* Passos do registo */
.gl-passos { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; }
.gl-passo { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--gl-tinta-3); }
.gl-passo span { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-size: 12px; background: var(--gl-superficie-3); transition: all var(--gl-t); }
.gl-passo.is-atual { color: var(--gl-tinta); }
.gl-passo.is-atual span { background: var(--gl-petroleo); color: #fff; }
:root[data-tema="escuro"] .gl-passo.is-atual span { color: #06211d; }
.gl-passo.is-feito span { background: var(--gl-ok-fundo); color: var(--gl-ok); }
.gl-passo-linha { flex: 1; height: 2px; background: var(--gl-linha); border-radius: 2px; }

/* ── Estado (confirmação do email) ──────────────────────────────────────────── */
.gl-estado-grande { text-align: center; }
.gl-estado-icone { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 92px; height: 92px; margin-bottom: 22px; border-radius: 30px; font-size: 38px; color: var(--gl-petroleo); background: var(--gl-petroleo-claro); animation: gl-pop-suave .5s var(--gl-curva-mola); }
.gl-estado-icone.tom-ok { color: var(--gl-ok); background: var(--gl-ok-fundo); }
.gl-estado-icone.tom-aviso { color: var(--gl-aviso); background: var(--gl-aviso-fundo); }
.gl-estado-icone.tom-perigo { color: var(--gl-perigo); background: var(--gl-perigo-fundo); }
.gl-estado-icone.a-rodar::after { content: ''; position: absolute; inset: -6px; border-radius: 36px; border: 2px solid transparent; border-top-color: var(--gl-petroleo); animation: gl-roda 1s linear infinite; }
@keyframes gl-pop-suave { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
.gl-estado-grande .gl-form-sub { margin-bottom: 24px; }
.gl-email-destaque { font-weight: 700; color: var(--gl-tinta); }

.gl-abrir-correio { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }

.gl-dicas-lista { list-style: none; padding: 14px 16px; margin: 18px 0 0; text-align: left; font-size: 13px; color: var(--gl-tinta-2); background: var(--gl-superficie-2); border: 1px solid var(--gl-linha); border-radius: var(--gl-r-md); }
.gl-dicas-lista li { display: flex; gap: 8px; padding: 3px 0; }
.gl-dicas-lista i { flex: none; color: var(--gl-petroleo); }

/* ── Código de seis algarismos ──────────────────────────────────────────────── */
.gl-codigo { position: relative; margin-bottom: 18px; }
.gl-codigo input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; font-size: 16px; cursor: text; caret-color: transparent; }
.gl-codigo-celas { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; pointer-events: none; }
.gl-codigo-cela { display: flex; align-items: center; justify-content: center; height: 60px; font: 700 26px/1 var(--gl-fonte-titulo); color: var(--gl-tinta); background: var(--gl-superficie-2); border: 1.5px solid var(--gl-linha-forte); border-radius: var(--gl-r-md); transition: border-color var(--gl-t-rapido), box-shadow var(--gl-t-rapido), transform var(--gl-t-rapido) var(--gl-curva-mola); }
.gl-codigo-cela.is-cheia { background: var(--gl-superficie); transform: scale(1.03); }
.gl-codigo input:focus ~ .gl-codigo-celas .gl-codigo-cela.is-atual { border-color: var(--gl-petroleo); box-shadow: var(--gl-anel); }

.gl-codigo-recurso[hidden], .gl-codigo[hidden] { display: none; }
.gl-ligacao-botao { all: unset; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--gl-petroleo); }
.gl-ligacao-botao:hover { text-decoration: underline; }
.gl-ligacao-botao:focus-visible { outline: 2px solid var(--gl-petroleo); outline-offset: 2px; border-radius: 3px; }

/* Configurar a app */
.gl-qr { display: flex; justify-content: center; margin: 4px 0 16px; }
.gl-qr img { width: 196px; height: 196px; padding: 10px; background: #fff; border-radius: var(--gl-r-lg); border: 1px solid var(--gl-linha); }
.gl-segredo { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; padding: 10px 12px; font: 600 13px/1.4 var(--gl-fonte-mono); word-break: break-all; background: var(--gl-superficie-2); border: 1px solid var(--gl-linha); border-radius: var(--gl-r-md); }
.gl-segredo span { flex: 1; min-width: 0; }

.gl-codigos-recurso { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 18px; padding: 16px; list-style: none; font: 600 15px/1 var(--gl-fonte-mono); background: var(--gl-superficie-2); border: 1px solid var(--gl-linha); border-radius: var(--gl-r-lg); text-align: center; }
.gl-codigos-recurso li { padding: 6px 0; }

/* ── Adaptação ──────────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
    .gl-entrada-grelha { grid-template-columns: minmax(0, 1fr); }
    .gl-palco { display: none; }
    .gl-lado-form { min-height: 100vh; min-height: 100dvh; padding: 18px 20px 18px; }
}
@media (max-width: 460px) {
    .gl-duas-colunas { grid-template-columns: minmax(0, 1fr); }
    .gl-form-titulo { font-size: 27px; }
    .gl-codigo-cela { height: 52px; font-size: 22px; }
    .gl-codigo-celas { gap: 6px; }
    .gl-lado-pe { justify-content: center; text-align: center; }
}