/* ─────────────────────────────────────────────────────────────────────────
   Roleta de descontos — o modal que abre por cima do site.

   ⚠️ Esta folha é carregada DENTRO de uma página do site (hoje só no preview).
   Por isso **não existe nenhuma regra global aqui**: nada de `body`, `*`,
   `:root` ou `a:focus-visible` soltos — eles repintariam a página inteira.
   Tudo pende de `.rlm` (o modal) ou de `#rlConfete`.

   Era uma página standalone até 19/10/2026; quando virou componente, o reset
   e a tipografia dela foram removidos justamente por isso.

   ⚠️ Nada de `padding` abreviado numa classe que divide elemento com outra:
   o atalho zera o padding lateral da vizinha. Já mordeu duas vezes no catálogo.
   ───────────────────────────────────────────────────────────────────────── */

.rlm{
  color-scheme:dark;
  --rl-ouro:#f3c775; --rl-ouro2:#cf9440; --rl-ouro3:#b77a2f;
  --rl-bg:#0b0b0e; --rl-painel:#16171c;
  --rl-ink:#f8f6f1; --rl-ink2:#c7c3c0; --rl-ink3:#8f8e94;
  --rl-linha:rgba(255,255,255,.12);
}
.rlm *{box-sizing:border-box}

/* ── O modal ───────────────────────────────────────────────────────────── */
.rlm{
  border:0;padding:0;margin:auto;background:none;overflow:visible;
  width:min(1120px,calc(100vw - 32px));max-width:none;max-height:none;
  color:var(--rl-ink);
  font-family:Montserrat,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
.rlm::backdrop{background:rgba(6,6,8,.82);backdrop-filter:blur(8px)}
.rlm[open]{animation:rl-sobe .32s cubic-bezier(.2,.9,.3,1)}
@keyframes rl-sobe{from{opacity:0;transform:translateY(18px) scale(.975)}to{opacity:1;transform:none}}

.rlm__caixa{
  position:relative;border-radius:26px;overflow:hidden;
  border:1px solid rgba(186,135,78,.45);
  box-shadow:0 40px 120px rgba(0,0,0,.8);
  background:
    radial-gradient(ellipse at 72% 18%,rgba(51,39,25,.95) 0%,rgba(21,19,23,.98) 42%,#0a0b0e 78%),
    #0b0b0e;
}
/* Poeira dourada — a mesma do desenho original, agora presa ao modal. */
.rlm__caixa::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.3;
  background-image:radial-gradient(#a57c42 .65px,transparent .65px);background-size:28px 28px;
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 72%);
          mask-image:linear-gradient(to bottom,#000,transparent 72%);
}

.rlm__x{
  position:absolute;top:14px;right:14px;z-index:12;width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.14);background:rgba(10,10,12,.6);color:#e9e3d9;
  font-size:21px;line-height:1;cursor:pointer;backdrop-filter:blur(6px);
  transition:background-color .18s,color .18s}
.rlm__x:hover{background:rgba(255,255,255,.14);color:#fff}

.rlm__grade{
  position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.04fr;
  align-items:center;gap:30px;padding:44px 42px 42px;
}

/* Coluna que troca de tela. A altura é fixa pela maior das telas para o modal
   não pular de tamanho a cada passo — quem está no formulário não vê a caixa
   encolher ao receber o resultado. */
.rlm__lado{min-width:0;min-height:470px;max-height:min(78vh,620px);overflow-y:auto;
  padding-right:6px;scrollbar-width:thin;scrollbar-color:rgba(243,199,117,.35) transparent}
.rlm__lado::-webkit-scrollbar{width:7px}
.rlm__lado::-webkit-scrollbar-thumb{background:rgba(243,199,117,.3);border-radius:99px}

.rlm__tela{animation:rl-tela .28s ease both}
.rlm__tela[hidden]{display:none}
.rlm__tela--centro{text-align:center;display:flex;flex-direction:column;justify-content:center;
  min-height:420px}
.rlm__tela--centro .rl-intro{margin-left:auto;margin-right:auto}
@keyframes rl-tela{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.rlm__h{font-size:clamp(28px,2.6vw,42px);letter-spacing:-1.4px;line-height:1.1;
  margin:20px 0 14px;font-weight:800}
.rlm__h--pequeno{font-size:clamp(23px,2vw,30px);letter-spacing:-.9px;margin-top:4px}
.rlm__h em{font-style:normal;background:linear-gradient(110deg,#fff3c9,#f7c36a 45%,#bd792a);
  -webkit-background-clip:text;background-clip:text;color:transparent}

.rlm__voltar{border:0;background:none;color:var(--rl-ink3);font:inherit;font-size:12px;
  cursor:pointer;padding:0;margin-bottom:10px}
.rlm__voltar:hover{color:#e9e3d9}

/* ── Peças de conteúdo ─────────────────────────────────────────────────── */
.rlm .rl-selo{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(211,168,94,.38);
  background:rgba(216,163,73,.08);color:#f9d48e;border-radius:30px;
  padding:8px 14px;text-transform:uppercase;font-size:10.5px;letter-spacing:2px;font-weight:800}
.rlm .rl-selo__p{height:7px;width:7px;border-radius:50%;background:#ffdb89;box-shadow:0 0 13px #f8bc5e;
  animation:rl-pisca 2.4s ease-in-out infinite}
@keyframes rl-pisca{0%,100%{opacity:1}50%{opacity:.35}}

.rlm .rl-intro{font-size:15.5px;line-height:1.75;color:var(--rl-ink2);max-width:470px;margin:0 0 22px}
.rlm .rl-intro--curto{margin-bottom:18px}
.rlm .rl-intro strong{color:#fff}
.rlm .rl-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.rlm .rl-chip{border-radius:10px;border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.03);
  padding:10px 13px;font-size:11.5px;color:#c6c3bc}
.rlm .rl-chip b{color:var(--rl-ouro)}

.rlm .rl-botao{
  appearance:none;border:0;cursor:pointer;width:min(100%,380px);
  padding:16px 20px;border-radius:13px;font-family:inherit;
  background:linear-gradient(115deg,#ffe4a3 0%,#edb95f 49%,#b77a2f 100%);
  box-shadow:0 12px 35px rgba(212,148,56,.25),inset 0 1px #fff9d8;
  color:#201407;font-weight:800;font-size:14.5px;letter-spacing:.3px;
  display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;
  transition:transform .2s,filter .2s}
.rlm .rl-botao:hover:not(:disabled){transform:translateY(-3px);filter:brightness(1.08)}
.rlm .rl-botao:disabled{cursor:not-allowed;opacity:.65}
.rlm .rl-botao--fantasma{background:none;border:1px solid var(--rl-linha);color:var(--rl-ink2);
  box-shadow:none;font-weight:600}
.rlm .rl-botao--fantasma:hover{color:#fff;border-color:rgba(243,199,117,.5)}
/* `[hidden]` do navegador e `.rl-botao` têm a MESMA especificidade, e folha de
   autor ganha da do navegador — sem esta linha o botão "pegar meu voucher"
   continua visível na tela de quem não ganhou. Mesmo tropeço do `.hidden`. */
.rlm .rl-botao[hidden]{display:none}
/* Foco visível SÓ dentro do modal: solto, isto repintaria o site inteiro. */
.rlm a:focus-visible,.rlm button:focus-visible,.rlm input:focus-visible,.rlm select:focus-visible{
  outline:2px solid #ffe6b0;outline-offset:3px}

.rlm .rl-fine{color:var(--rl-ink3);font-size:11.5px;margin-top:14px;max-width:460px;line-height:1.7}
.rlm .rl-fine strong{color:#c9c6c1}
.rlm .rl-fine--centro{margin-left:auto;margin-right:auto;text-align:center}
/* O link do regulamento tem de ser achável sem roubar a cena do botão: ouro
   discreto, sublinhado afastado. É letra miúda que a lei manda existir. */
.rlm .rl-regulamento{color:var(--rl-ouro);text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:rgba(243,199,117,.45)}
.rlm .rl-regulamento:hover{text-decoration-color:var(--rl-ouro)}

.rlm .rl-passos{list-style:none;display:grid;gap:10px;margin:22px 0 0;padding:0;max-width:430px}
.rlm .rl-passos li{display:flex;align-items:center;gap:11px}
.rlm .rl-passos span{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(243,199,117,.4);background:rgba(243,199,117,.09);
  color:#f3c775;font-size:11.5px;font-weight:800}
.rlm .rl-passos div{font-size:11.5px;color:var(--rl-ink3);line-height:1.45}
.rlm .rl-passos strong{display:block;color:#ddd8d1;font-size:12.5px;font-weight:600;margin-bottom:1px}

/* ── A roda ────────────────────────────────────────────────────────────── */
.rlm__roda{display:flex;justify-content:center;align-items:center;position:relative;min-width:0}
.rl-halo{position:absolute;width:98%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(214,163,78,.28),transparent 66%);filter:blur(46px)}
.rl-frame{width:min(100%,610px);aspect-ratio:1;position:relative;
  filter:drop-shadow(0 26px 60px rgba(0,0,0,.72))}

/* Aro: bisel escuro por fora, metal dourado, e um fio claro por dentro.
   O conic-gradient anterior era um arco-íris de dourados girando sozinho —
   com poucos pontos de parada e um brilho só, parece metal de verdade. */
.rl-anel{position:absolute;inset:0;border-radius:50%;z-index:1;
  background:
    radial-gradient(circle at 50% 8%,rgba(255,255,255,.5),transparent 42%),
    conic-gradient(from 210deg,#6d4718,#d8ab62 18%,#f6e2b0 26%,#b8853c 42%,
                   #5f3f16 58%,#c99a51 74%,#f3dca8 82%,#7a5220 96%,#6d4718);
  box-shadow:
    0 0 0 1px rgba(255,241,210,.5),
    inset 0 0 0 1px rgba(0,0,0,.35),
    inset 0 2px 5px rgba(255,255,255,.35),
    inset 0 -6px 14px rgba(0,0,0,.5);}
/* Sulco interno do aro: separa o metal da área das fatias. */
.rl-anel::before{content:"";position:absolute;inset:4.6%;border-radius:50%;
  background:#0c0c10;
  box-shadow:inset 0 0 0 2px rgba(255,238,195,.32),inset 0 6px 18px rgba(0,0,0,.85)}

/* O canvas NÃO gira por CSS: quem gira são as fatias desenhadas dentro dele,
   para os rótulos poderem ficar sempre em pé (ver roleta.js). */
#rlCanvas{position:absolute;inset:6%;width:88%;height:88%;border-radius:50%;z-index:2}

/* Lâmpadas do aro: luz correndo devagar, mais rápida enquanto a roda gira. */
.rl-luzes{position:absolute;inset:0;border-radius:50%;z-index:4;pointer-events:none}
/* `left`/`top` vêm do JS em %; aqui só o deslocamento de meio ponto. */
.rl-luz{position:absolute;transform:translate(-50%,-50%);height:7px;width:7px;border-radius:50%;
  background:#fff3cd;box-shadow:0 0 7px #ffd98b,0 0 15px rgba(196,141,79,.85);
  animation:rl-pisca-luz 1.6s linear infinite}
/* ⚠️ Só opacidade e brilho: a POSIÇÃO de cada lâmpada vive no `transform`
   inline que o JS calcula. Animar transform aqui jogaria todas para o centro. */
@keyframes rl-pisca-luz{
  0%,100%{opacity:.3;box-shadow:0 0 5px rgba(255,217,139,.5)}
  45%{opacity:1;box-shadow:0 0 8px #ffd98b,0 0 18px rgba(196,141,79,.9)}}
.rl-frame.is-girando .rl-luz{animation-duration:.55s}

/* Ponteiro: agulha de metal com ponta fina. O triângulo gordo anterior era a
   peça mais barata da tela. */
/* O ponteiro entra sobre o aro e aponta para dentro: solto lá em cima ele
   parecia um enfeite, não a peça que marca o resultado. */
/* Ponteiro (o desenho vive no SVG da view, em `.rl-seta svg`).
   O `transform` aqui é o do "tique" a cada divisória: a peça gira a partir do
   topo e volta, por isso o `transform-origin` no alto. */
.rl-seta{position:absolute;z-index:9;top:2.4%;left:50%;width:10.2%;
  transform:translateX(-50%);transform-origin:50% 12%;pointer-events:none;
  transition:transform .09s cubic-bezier(.2,.9,.3,1);
  filter:drop-shadow(0 9px 11px rgba(0,0,0,.72))}
.rl-seta svg{display:block;width:100%;height:auto}

/* Cubo central: o chevron da marca, não a palavra "sorte". */
.rl-eixo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  height:17.5%;width:17.5%;border-radius:50%;z-index:6;display:grid;place-items:center;
  background:
    radial-gradient(circle at 34% 28%,#fff6d8,#e0b36c 46%,#9a6a2c 100%);
  box-shadow:
    0 0 0 3.5% #0b0b0e,
    0 0 0 4.6% rgba(243,199,117,.95),
    0 10px 26px rgba(0,0,0,.65),
    inset 0 -6px 14px rgba(94,60,16,.55),
    inset 0 4px 10px rgba(255,255,255,.55)}
.rl-eixo svg{width:52%;height:auto;display:block;color:#3a2609;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.45))}
.rl-eixo span,.rl-eixo small{display:none}   /* texto antigo do cubo */

/* Etiqueta "até X% OFF" */
.rl-etiqueta{position:absolute;right:-2%;bottom:6%;border:1px solid rgba(211,166,93,.45);
  border-radius:14px;background:rgba(17,13,16,.93);padding:12px 16px;z-index:8;
  box-shadow:0 16px 34px rgba(0,0,0,.55);transform:rotate(-5deg);
  backdrop-filter:blur(6px)}
.rl-etiqueta strong{color:#f6d28b;font-size:21px;letter-spacing:-.5px}
.rl-etiqueta small{color:#a89b89;display:block;font-size:9.5px;letter-spacing:1.4px;
  text-transform:uppercase;margin-top:3px}

/* Assentou: um pulso curto de luz quando a roda para. */
.rl-frame.is-parada .rl-anel{animation:rl-assentou .9s ease-out}
@keyframes rl-assentou{
  0%{box-shadow:0 0 0 1px rgba(255,241,210,.5),0 0 0 0 rgba(243,199,117,.55),
     inset 0 0 0 1px rgba(0,0,0,.35),inset 0 2px 5px rgba(255,255,255,.35),inset 0 -6px 14px rgba(0,0,0,.5)}
  100%{box-shadow:0 0 0 1px rgba(255,241,210,.5),0 0 0 46px rgba(243,199,117,0),
     inset 0 0 0 1px rgba(0,0,0,.35),inset 0 2px 5px rgba(255,255,255,.35),inset 0 -6px 14px rgba(0,0,0,.5)}
}

/* ── Restos dos antigos modais, agora dentro das telas ─────────────────── */
/* O ícone é SVG (ver ICONES em roleta.js): emoji muda de desenho em cada
   sistema e some em máquina sem fonte de emoji. */
.rlm .rl-medalha{display:flex;justify-content:center;margin-bottom:14px;line-height:1;color:#f3c775}
.rlm .rl-medalha svg{width:52px;height:52px;filter:drop-shadow(0 6px 14px rgba(243,199,117,.35))}
.rlm .rl-acoes{display:grid;gap:10px;justify-items:center;margin-top:4px}
.rlm .rl-acoes .rl-botao{width:100%;max-width:380px}

/* Formulário */
.rl-form{display:grid;gap:11px;text-align:left;min-width:0}
/* `min-width:0` em toda a corrente: item de grid nasce com `min-width:auto` e
   não encolhe abaixo do conteúdo. Com um curso de 149 caracteres escolhido, a
   coluna inteira ia a 1131px dentro de um modal de 438px e o modal ganhava
   barra horizontal. */
.rl-form label{display:grid;gap:6px;min-width:0;font-size:12px;font-weight:600;
  letter-spacing:.4px;color:#d6d2cc}
.rl-form input[type=text],.rl-form input[type=email],.rl-form input[type=tel],.rl-form select{
  width:100%;height:44px;border-radius:11px;border:1px solid var(--rl-linha);
  background:rgba(255,255,255,.04);color:#fff;font:inherit;font-size:14px;font-weight:400;
  padding-left:14px;padding-right:14px}
.rl-form select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23c6a978' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.rl-form option{background:#17151a;color:#fff}
.rl-form input:focus,.rl-form select:focus{outline:none;border-color:rgba(243,199,117,.6);
  background:rgba(255,255,255,.07)}
.rl-form input::placeholder{color:#7c7a80}

/* ── Seletor de curso (casca do select-custom.js) ───────────────────────
   O componente injeta o CSS dele em tempo de execução, ou seja, DEPOIS desta
   folha: regra de uma classe só perderia. Por isso tudo aqui tem duas
   (`.rl-form .sc-…`). Mesmo truque usado no catálogo. */
.rl-form .sc{display:block;width:100%;min-width:0;max-width:100%}
/* A folha geral acima veste `select` do formulário — e acertava em cheio o
   `<select>` nativo que o componente esconde, devolvendo altura e largura a
   ele. Aqui ele volta a ser invisível (continua no formulário e continua
   sendo a fonte da verdade). */
.rl-form select.sc-nativo{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;background:none}
.rl-form .sc-botao{min-width:0;max-width:100%;height:44px;border-radius:12px;padding-left:14px;padding-right:14px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);
  color:#fff;font-family:inherit;font-size:14px;font-weight:400}
.rl-form .sc-botao:hover{background:rgba(255,255,255,.07);border-color:rgba(243,199,117,.35)}
.rl-form .sc.is-aberto .sc-botao,
.rl-form .sc-botao:focus-visible{border-color:rgba(243,199,117,.6);
  background:rgba(255,255,255,.07);box-shadow:0 0 0 3px rgba(243,199,117,.16)}
.rl-form .sc.is-vazio .sc-rotulo{color:#7c7a80}
.rl-form .sc-seta{color:#c6a978}

/* O menu precisa de mais largura que a coluna: nome de curso tem 100+
   caracteres e cortava quase metade. Ele é `position:absolute` dentro do
   campo, então pode extravasar — desde que ninguém o corte (ver regra do
   `:has` logo abaixo). */
.rl-form .sc-menu{min-width:min(560px,86vw);max-width:min(620px,88vw);border-radius:14px;border:1px solid rgba(226,183,106,.3);
  background:#17151a;box-shadow:0 22px 50px rgba(0,0,0,.6);
  /* Menor de propósito: o componente abre para CIMA quando o menu não cabe
     embaixo do campo, e aí ele cobria o formulário inteiro num notebook.
     Com 236px ele cabe abaixo e os campos continuam à vista. */
  max-height:min(236px,38vh)}
.rl-form .sc-busca{background:#17151a;border-bottom:1px solid rgba(255,255,255,.07)}
.rl-form .sc-busca input{height:38px;border-radius:10px;font-size:13px;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:#fff}
.rl-form .sc-busca input:focus{border-color:rgba(243,199,117,.55);outline:none}
.rl-form .sc-opt{border-radius:10px;font-size:13px;color:#cfcac3;padding-top:10px;padding-bottom:10px}
/* ⚠️ A coluna rola (`overflow-y:auto`) e a caixa esconde o que extravasa para
   arredondar os cantos — as duas cortavam o menu aberto, embaixo e na direita.
   Enquanto ele está aberto, as duas param de cortar. Fora isso, nada muda. */
.rlm__lado:has(.sc.is-aberto){overflow:visible}
.rlm__caixa:has(.sc.is-aberto){overflow:visible}
/* No COMPUTADOR, abre sempre para baixo. O componente decide pelo espaço
   livre na janela e, num notebook, escolhia para cima — cobrindo nome,
   e-mail e telefone, que a pessoa acabou de preencher e quer conferir.
   Para baixo ele passa do fim do modal, e tudo bem: desde a regra acima
   ninguém mais o corta.
   No CELULAR a escolha do componente continua valendo: lá a tela é curta e
   forçar para baixo jogaria metade da lista para fora do visor. */
@media (min-width:981px){
  .rl-form .sc.is-acima .sc-menu{top:calc(100% + 6px);bottom:auto}
}
.rl-form .sc-opt:hover,
.rl-form .sc-opt.is-ativa{background:rgba(243,199,117,.14);color:#fff}
.rl-form .sc-opt.is-marcada{color:#f3c775}
.rl-form .sc-menu::-webkit-scrollbar-thumb{background:rgba(243,199,117,.3)}

.rl-alerta{margin:0;font-size:11.5px;line-height:1.55;color:#f0d9b4;
  border:1px solid rgba(226,170,80,.35);background:rgba(226,170,80,.08);border-radius:11px;
  padding:10px 12px}
.rl-alerta strong{color:#ffe1ad}
.rl-check{display:flex !important;align-items:flex-start;gap:10px;font-size:11px;line-height:1.55;
  color:var(--rl-ink3);font-weight:400;cursor:pointer}
/* Caixa desenhada por nós: `accent-color` no quadrado nativo pinta o fundo mas
   deixa o visto quase invisível no tema escuro — quem marcava não via que
   tinha marcado. Aqui o estado ligado é dourado cheio com o visto escuro. */
.rl-check input{appearance:none;-webkit-appearance:none;margin:1px 0 0;flex:none;
  width:19px;height:19px;border-radius:6px;cursor:pointer;position:relative;
  border:1.5px solid rgba(255,255,255,.3);background:rgba(255,255,255,.05);
  transition:background-color .15s ease,border-color .15s ease}
.rl-check input:hover{border-color:rgba(243,199,117,.6)}
.rl-check input:checked{background:linear-gradient(135deg,#ffe4a3,#e0ae5c);border-color:#e0ae5c}
.rl-check input:checked::after{content:"";position:absolute;left:6px;top:2.5px;
  width:5px;height:10px;border:solid #241704;border-width:0 2.4px 2.4px 0;
  transform:rotate(45deg)}
.rl-check input:focus-visible{outline:2px solid #ffe6b0;outline-offset:2px}
.rl-check a{color:#d9b57c}
.rl-erro{margin:0;font-size:13px;color:#ffb4a8;background:rgba(255,80,60,.1);
  border:1px solid rgba(255,120,100,.3);border-radius:10px;padding:10px 12px;text-align:left}

/* ── Voucher ───────────────────────────────────────────────────────────── */
.rl-vch{
  border-radius:18px;border:1px solid rgba(226,183,106,.45);text-align:left;
  background:linear-gradient(150deg,#1d1710,#100f13 60%);
  padding:20px 22px 18px;margin-bottom:20px;position:relative;overflow:hidden;
}
.rl-vch::after{content:"";position:absolute;right:-40px;top:-40px;width:170px;height:170px;
  border-radius:50%;background:radial-gradient(circle,rgba(243,199,117,.18),transparent 65%)}
.rl-vch__topo{display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:#c3a677;font-weight:700}
.rl-vch__cod{color:#ffe1ad;background:rgba(255,255,255,.05);border:1px dashed rgba(226,183,106,.5);
  border-radius:8px;padding:5px 9px;letter-spacing:1.2px}
.rl-vch__valor{display:flex;align-items:baseline;gap:4px;margin-top:14px;line-height:1}
.rl-vch__valor b{font-size:62px;font-weight:900;letter-spacing:-3px;
  background:linear-gradient(120deg,#fff3c9,#f3c775 45%,#c08536);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.rl-vch__valor span{font-size:22px;font-weight:800;color:#f3c775}
.rl-vch__sobre{font-size:12.5px;color:#cfc7bb;margin-top:4px}
.rl-vch__sobre strong{color:#fff}
.rl-vch__dados{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin:18px 0 0}
.rl-vch__dados dt{font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase;color:#8e8779;margin:0}
.rl-vch__dados dd{margin:2px 0 0;font-size:13px;color:#ece7df;word-break:break-word}
.rl-vch__pe{font-size:10.5px;line-height:1.6;color:#8e8779;margin:16px 0 0;
  border-top:1px solid rgba(255,255,255,.07);padding-top:11px}

/* Botão discreto no canto, para quem fechou ou já participou. Fica FORA do
   `.rlm` (o modal está fechado quando ele aparece), por isso repete a fonte e
   as cores em vez de herdar as variáveis. */
/* Selo de pré-visualização: a página é a home pública, então sem isto nada
   diria que a roleta ainda não está no ar. */
.rlm-selo-teste{
  position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:41;
  padding:7px 16px;border-radius:999px;pointer-events:none;white-space:nowrap;
  font:700 11px/1 Montserrat,system-ui,-apple-system,sans-serif;letter-spacing:.06em;
  text-transform:uppercase;color:#0b0f1a;background:#e2b772;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.8)}
/* No celular o selo sobe: embaixo dele passam a bolinha de cookies e o botão
   de voltar à roleta, e os três na mesma linha viram sopa de letrinhas. */
@media (max-width:560px){.rlm-selo-teste{font-size:9.5px;padding:6px 12px;bottom:62px;
  max-width:calc(100vw - 24px);overflow:hidden;text-overflow:ellipsis}}

/* Canto ESQUERDO, ao LADO da bolinha de cookies — não acima dela.
   O canto direito é do chat do EB Beto, com o aviso de matrícula empilhado
   em cima dele; o esquerdo é dos cookies: a bolinha de reabrir preferências
   (42px em `left:16 bottom:16`) e, antes do aceite, a faixa inteira.
   Este botão fica à direita da bolinha, na mesma linha. Quando a faixa está
   aberta ela toma o canto todo, e aí o JS sobe o botão para cima dela. */
.rlm-volta{
  position:fixed;left:70px;bottom:18px;z-index:9989;display:inline-flex;align-items:center;gap:8px;
  border:1px solid rgba(226,183,106,.45);border-radius:999px;cursor:pointer;
  padding:11px 17px;font:700 12.5px/1 Montserrat,system-ui,-apple-system,sans-serif;
  letter-spacing:.3px;color:#2a1b08;
  background:linear-gradient(115deg,#ffe4a3,#edb95f 52%,#cf9440);
  box-shadow:0 12px 30px rgba(0,0,0,.45),inset 0 1px rgba(255,255,255,.6);
  animation:rlm-volta-entra .4s ease both;
  transition:transform .18s ease,filter .18s ease}
.rlm-volta:hover{transform:translateY(-2px);filter:brightness(1.06)}
.rlm-volta span{font-size:13px}
@keyframes rlm-volta-entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (max-width:560px){.rlm-volta{left:62px;bottom:14px;padding:9px 13px;font-size:11px}}
@media (prefers-reduced-motion:reduce){.rlm-volta{animation:none;transition:none}}

#rlConfete{position:fixed;inset:0;pointer-events:none;z-index:30;width:100%;height:100%}

/* ── Telas BAIXAS (MacBook Air e afins) ────────────────────────────────────
   Num notebook de 1440x789 o formulário não cabia inteiro e o botão de enviar
   aparecia pela metade, parecendo flutuar. Em vez de deixar a coluna rolar —
   ninguém rola um formulário de 4 campos — o modal inteiro encolhe: menos
   respiro, roda menor, títulos menores. Todos os campos cabem. */
@media (min-width:981px) and (max-height:860px){
  .rlm__grade{gap:22px;padding:26px 30px 26px}
  .rlm__lado{min-height:0;max-height:none;overflow:visible}
  .rlm__tela--centro{min-height:0}
  .rlm__h{font-size:clamp(24px,2.1vw,32px);margin:12px 0 10px}
  .rlm__h--pequeno{font-size:clamp(20px,1.7vw,25px)}
  .rlm .rl-intro{font-size:14px;line-height:1.6;margin-bottom:14px}
  .rlm .rl-chips{margin-bottom:16px}
  .rlm .rl-chip{padding:8px 11px;font-size:11px}
  .rlm .rl-botao{padding:13px 18px;font-size:13.5px}
  .rlm .rl-passos{gap:7px;margin-top:14px}
  .rlm .rl-fine{margin-top:10px;font-size:11px;line-height:1.6}
  .rl-form{gap:9px}
  .rl-form input[type=text],.rl-form input[type=email],.rl-form input[type=tel],
  .rl-form select,.rl-form .sc-botao{height:40px}
  .rl-alerta{padding:8px 11px;font-size:11px;line-height:1.5}
  .rl-vch{padding:14px 16px 13px;margin-bottom:14px}
  .rl-vch__valor b{font-size:46px}
  .rl-vch__dados{gap:7px 14px;margin-top:12px}
}
/* Ainda mais baixo (1280x720 e netbooks): a roda cede espaço ao conteúdo. */
@media (min-width:981px) and (max-height:760px){
  .rlm__grade{grid-template-columns:1fr .82fr;gap:18px;padding:20px 26px 22px}
  .rlm .rl-passos{display:none}          /* o essencial é o formulário */
  .rl-vch__pe{display:none}
}

/* ── Telas estreitas ───────────────────────────────────────────────────── */
@media (max-width:980px){
  .rlm{width:min(560px,calc(100vw - 20px))}
  .rlm__grade{grid-template-columns:1fr;gap:18px;padding:34px 26px 30px;text-align:center}
  /* A roda sobe: no celular ela é o convite, e o texto vem depois. */
  .rlm__roda{order:-1}
  .rlm__lado{min-height:0;max-height:none;overflow:visible;padding-right:0}
  .rlm__tela--centro{min-height:0}
  .rlm .rl-intro,.rlm .rl-fine,.rlm .rl-passos{margin-left:auto;margin-right:auto}
  .rlm .rl-passos li{text-align:left}
  .rlm .rl-chips{justify-content:center}
  .rlm .rl-botao{margin-left:auto;margin-right:auto}
  .rl-frame{width:min(70vw,330px)}
  .rl-etiqueta{right:0;bottom:2%}
  .rl-form{text-align:left}
}
@media (max-width:560px){
  /* Folha quase cheia: num celular, caixa pequena com roda dentro não funciona. */
  .rlm{width:100vw;height:100dvh;max-height:100dvh}
  .rlm__caixa{height:100%;border-radius:0;border:0;overflow-y:auto}
  .rlm__grade{padding:26px 18px 30px;align-items:start}
  .rl-frame{width:min(78vw,300px)}
  /* Preenchendo o formulário ou lendo o voucher, a roda cede espaço: no
     celular ela é o convite, não o conteúdo. (`data-tela` vem do roleta.js.) */
  .rlm[data-tela=form] .rl-frame,
  .rlm[data-tela=voucher] .rl-frame{width:min(50vw,190px)}
  .rlm[data-tela=form] .rl-etiqueta,
  .rlm[data-tela=voucher] .rl-etiqueta{display:none}
  .rlm__h{font-size:clamp(24px,7vw,32px);letter-spacing:-1px;margin-top:14px}
  .rlm .rl-intro{font-size:14.5px}
  .rl-luz{width:5px;height:5px}
  .rl-etiqueta{padding:8px 11px}
  .rl-etiqueta strong{font-size:15px}
  .rl-vch__dados{grid-template-columns:1fr}
  .rl-vch__valor b{font-size:50px}
}

/* Quem pediu menos movimento no sistema não leva animação nenhuma — a roleta
   troca o giro por um salto direto ao resultado (ver roleta.js). */
@media (prefers-reduced-motion:reduce){
  .rlm .rl-botao,.rlm[open],.rlm__tela{transition:none;animation:none}
  .rlm .rl-selo__p{animation:none}
}