/**
 * Estilo clássico — a forma do site antigo sobre os Temas V2.
 *
 * Tudo aqui vive dentro de `.ur-estilo-classico` (classe do <html>, posta por
 * ur_estilo_classe()): a folha entra no fim do <head> de QUALQUER tela Blade,
 * inclusive do quadro de prévia do admin, e sem o escopo vazaria.
 *
 * Regra 2 do TOKENS.md vale igual: nenhuma cor própria. O legado era roxo com
 * verde cravado no CSS; aqui a mesma FORMA (faixa de acento no topo, conteúdo
 * com o canto arredondado por cima dela, tarja preta do herói, pílulas) sai
 * dos --ur-* do modelo escolhido. Sombras e véus em rgba() não são cor de
 * marca — são profundidade, e seguem iguais nos oito modelos.
 *
 * Só CSS enquanto a árvore de markup serve. Override de view (em
 * resources/views/estilos/classico/) é para quando ela não serve mesmo.
 *
 * Ordem: casca → campanha → home → listagem → ganhadores → meus números →
 * termos → checkout → funil → menu e rodapé.
 */

/* ══ Casca das telas de documento próprio ═════════════════════════════
   Legado: cabeçalho na cor de destaque, uma faixa de 18px da mesma cor
   logo abaixo e o conteúdo subindo por cima dela com o canto de 20px —
   é o recorte que dá a "boca" arredondada no topo da página. O conteúdo
   tem o fundo da página: o que aparece no vão do canto é o acento.

   A faixa NÃO é padding do cabeçalho. Era, e isso fazia o `header.ur-chd`
   medir 94px contra os 66px do Novo modelo — a mesma barra, 28px mais
   alta, em todas as telas da casca.

   Agora o cabeçalho tem a altura do Novo e a faixa é uma tira pintada no
   FUNDO da casca (`.ur-mn` / `.ur-win`), logo abaixo dele. O conteúdo
   também não sobe mais: ele começa onde o cabeçalho termina e a faixa
   fica ATRÁS dele, aparecendo só no vão dos cantos de 20px. O desenho na
   tela é o mesmo de antes — e o mesmo do legado, onde o conteúdo começa
   exatamente na base do cabeçalho (75px, medido) —, sem margem negativa
   e sem conteúdo passando por baixo de uma barra pregada em z-999.

   As duas medidas moram aqui porque três blocos dependem delas (o
   cabeçalho, a faixa das duas cascas e o respiro dos títulos), e a soma
   tem de fechar: separadas, um ajuste em uma deixava a emenda aberta. */

.ur-estilo-classico {
  /* Os 66px que o cabeçalho do Novo modelo mede (campanha/casca.css: 10 de
     recuo + 44 do alvo de toque + 10 + 2 da borda de baixo). Aqui não há
     borda, então o número entra cravado — é a altura a bater, não uma
     conta a refazer. */
  --ur-cl-chd-h: 66px;
  --ur-cl-faixa: 18px;
}

.ur-estilo-classico .ur-chd {
  position: sticky;
  top: 0;
  z-index: 999;
  /* Sem recuo vertical: a altura vem do min-height, e os filhos (44px de
     alvo de toque, 48px da caixa do logo) centram dentro dela. */
  min-height: var(--ur-cl-chd-h);
  padding: 0 12px;
  background: var(--ur-accent);
  color: var(--ur-accent-ink);
  border-bottom: 0;
  box-shadow: 0 20px 30px rgba(0, 0, 0, .08);
}

.ur-estilo-classico .ur-chd__btn:hover,
.ur-estilo-classico .ur-chd__btn:focus-visible {
  background: var(--ur-accent-hover);
}

/* A terceira coluna é 44px no Novo modelo; aqui ela carrega "Suporte" e
   precisa do tamanho do conteúdo, senão o texto sai da tela. */
.ur-estilo-classico .ur-chd {
  grid-template-columns: 44px 1fr auto;
}

/* "Suporte" sob o ícone, como no legado — texto de verdade, vindo do
   override (estilos/classico/campanha/header.blade.php), e não um
   ::after: a palavra precisa casar com o aria-label do link para o
   comando de voz continuar funcionando (WCAG 2.5.3). */
.ur-estilo-classico .ur-chd__sup {
  width: auto;
  min-width: 44px;
  grid-auto-flow: row;
  justify-items: end;
  gap: 2px;
  padding: 0 2px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

/* O ícone do legado era translúcido; a palavra, cheia. */
.ur-estilo-classico .ur-chd__sup svg {
  opacity: .55;
}

/* O logo do legado vinha numa caixa no meio do cabeçalho. A caixa é VÉU
   preto, como a faixa do menu lateral (mais abaixo): o logo da loja é
   quase sempre branco, e --ur-card (branco nos modelos claros) o apagava. */
.ur-estilo-classico .ur-chd__brand {
  justify-self: center;
  padding: 4px 10px;
  border-radius: 4px;
  background: rgba(0, 0, 0, .88);
  color: rgba(255, 255, 255, .92);
}

/* 40 + os 8px da caixa = 48, dentro dos 66px do cabeçalho. Antes eram 44
   + 12 = 56, e era a caixa do logo — não o alvo de toque — quem mandava
   na altura da barra. */
.ur-estilo-classico .ur-chd__brand img {
  max-height: 40px;
}

/* A faixa de acento: tira de 18px pintada no topo do fundo da casca, atrás
   do conteúdo. `background-image` sobre `.ur-mn`, e não um elemento, porque
   o markup é o do Novo modelo — aqui não há nó entre o cabeçalho e o
   conteúdo para virar faixa, e inventar um custaria override de view em
   todas as telas da casca.

   A tira desce --ur-cl-chd-h: a `.ur-mn` começa no topo da página (o
   cabeçalho é filho dela), então ela começa na base dele.

   `:has(> .ur-chd)` porque a `.ur-mn` é a casca de meia dúzia de telas e
   nem todas trazem o cabeçalho do site (perfil, contato, cadastro…). Sem
   o filtro, nessas a faixa apareceria solta no topo do conteúdo. O
   projeto já depende de `:has` nesta casca (my-numbers/shell.css:9).

   Sem exigir `.ur-mn-page` em volta: a prévia do admin (temas-v2.js:69)
   põe a classe do estilo na PRÓPRIA `.ur-mn`, sem aquele embrulho, e com
   o ancestral na regra ela ficava sem faixa — o cliente escolheria o
   estilo por um quadro que não mostra o que a loja vai ter. Ter o
   cabeçalho como filho direto já é a condição que importa. */
.ur-estilo-classico.ur-mn:has(> .ur-chd),
.ur-estilo-classico .ur-mn:has(> .ur-chd) {
  background-image: linear-gradient(var(--ur-accent), var(--ur-accent));
  background-repeat: no-repeat;
  background-size: 100% var(--ur-cl-faixa);
  background-position: 0 var(--ur-cl-chd-h);
}

.ur-estilo-classico .ur-mn-page .ur-mn > .scroll {
  margin: 0 auto;
  max-width: 600px;
  background: var(--ur-bg);
  border-radius: 20px 20px 0 0;
  /* Acima do box-shadow do cabeçalho, senão a sombra escurece a emenda. */
  position: relative;
  z-index: 1;
}

.ur-estilo-classico .ur-mn .body {
  padding: 16px 12px;
  gap: 10px;
}

/* ══ Campanha ═════════════════════════════════════════════════════════ */

/* ── Herói: selo flutuando na foto, tarja preta ABAIXO dela ────────────
   Árvore do override (estilos/classico/campanha/midia.blade.php): o selo
   saiu de dentro do bstrip para flutuar no canto da foto, e o bstrip
   desceu para o fluxo, virando a tarja que o legado tinha sob a imagem.
   As regras abaixo desfazem o posicionamento absoluto e o gradiente que
   topo.css crava para o desenho do Novo modelo. */

.ur-estilo-classico .ur-hero {
  border-radius: 10px;
  overflow: hidden;
}

/* A foto do legado não é recortada: o <img> sai com `height:auto` e fica na
   proporção do arquivo (366×202 com o placeholder, 1,81:1). O Novo modelo
   recorta em 16/11, o que deixava o herói 50px mais alto que a referência.
   16/9 é o meio-termo: bate com a foto do legado a menos de 4px.

   Esse 16/9 agora é o FALLBACK (issue 859): quando a capa é um dos formatos
   NOVOS (1:1 ou 4:5), --ur-hero-ar chega do PHP e manda — recortar um 4:5 em
   16/9 jogaria fora metade da arte. Para 16:11, para a foto do legado e sem
   medida (placeholder, imagem remota) o PHP não emite nada e o clássico
   segue exatamente como estava. O teto de altura é o de topo.css. */
.ur-estilo-classico .ur-hero__banner .SorteioTpl_imagem__2GXxI,
.ur-estilo-classico .ur-hero__banner img,
.ur-estilo-classico .ur-hero__banner video {
  aspect-ratio: var(--ur-hero-ar, 16 / 9);
}

/* O selo fica no PÉ da foto, não no topo: no legado o
   `.custom-badge-display` é absoluto com `bottom`, e o selo encosta na
   borda de baixo da imagem (y=272 numa foto que vai de 91 a 293).

   Filho DIRETO do banner, de propósito: só o override do clássico
   (estilos/classico/campanha/midia.blade.php) solta o selo ali. A prévia
   do admin (admin/temas-v2/preview.blade.php:53) monta a árvore do Novo
   modelo, com o selo DENTRO do bstrip — ancorá-lo no pé jogava o selo em
   cima do título. Com o `>` a prévia não casa e segue no fluxo. */
.ur-estilo-classico .ur-hero .ur-hero__banner > .ur-hero__badges {
  position: absolute !important;
  top: auto !important;
  bottom: 4px !important;
  left: 16px !important;
  right: auto !important;
  z-index: 3;
  margin: 0 !important;
}

.ur-estilo-classico .ur-hero .ur-hero__badges .badge {
  border-radius: 4px;
  font-size: 11px;
}

/* A tarja: no fluxo, de ponta a ponta, sem o gradiente da base.
   --ur-btn/--ur-btn-tx é o par de superfície escura com tinta por cima que
   existe nos oito modelos — o mesmo que a tarja do destaque da home usa
   (ver .ur-hm__hero-info abaixo). */
.ur-estilo-classico .ur-hero .ur-hero__bstrip {
  position: static !important;
  inset: auto !important;
  padding: 12px 14px 0 !important;
  background: var(--ur-btn);
  color: var(--ur-btn-tx);
}

.ur-estilo-classico .ur-hero .ur-hero__bstrip .ur-hero__bt {
  color: var(--ur-btn-tx) !important;
}

/* Sem véu na tinta: o par --ur-btn/--ur-btn-tx já sai justo (4,35:1 no Rosa),
   e qualquer opacidade por cima derruba o subtítulo para 2,78. A hierarquia
   contra o título vem do corpo — 14px/400 contra 17px/800 — que não custa
   contraste. */
.ur-estilo-classico .ur-hero .ur-hero__bstrip .ur-hero__bs {
  color: var(--ur-btn-tx);
  opacity: 1;
}

.ur-estilo-classico .ur-hero .ur-hero__bt {
  font-size: 17px;
  line-height: 22px;
  font-weight: 800;
  letter-spacing: .2px;
  text-transform: uppercase;
}

.ur-estilo-classico .ur-hero .ur-hero__bs {
  margin-top: 2px !important;
}

/* ── Abas "Meus Títulos | Prêmios" ─────────────────────────────────────
   Duas, lado a lado, no pé da tarja — o .ur-topo do Novo modelo tem uma
   só, de largura cheia. */

.ur-estilo-classico .ur-topo--abas {
  gap: 1px;
  margin-top: 12px;
}

.ur-estilo-classico .ur-topo--abas .ur-topo__mine {
  flex: 1 1 0;
  justify-content: center;
  min-width: 0;
  padding: 7px 8px;
  border-radius: 0;
  font-size: 14px;
  /* As abas do legado eram um degrau acima da tarja. O degrau é um FIO da
     tinta, não um véu de fundo: qualquer véu clareia a tarja sob o texto e
     nos modelos de acento claro derrubava o par --ur-btn/--ur-btn-tx
     (no Rosa, de 4.35 para 3.83). Com o fio, o texto fica sobre a tarja
     cheia e o contraste é o do token, sem desconto nenhum. */
  background: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ur-btn-tx) 22%, transparent);
  color: var(--ur-btn-tx);
}

/* A aba "Prêmios" é uma âncora para o Descrição/Regulamento que a caixa de
   compra monta (#ur-cpg-premios). Esse alvo é condicional: a campanha sem
   descrição não o imprime, e a escolha manual nem inclui a caixa de compra —
   lá a aba apontava para o nada. Sem alvo na página, a aba não sai, e a de
   "Meus Títulos" fica sozinha em largura cheia, como no Novo modelo. */
.ur-estilo-classico:not(:has(#ur-cpg-premios)) .ur-topo__premios {
  display: none;
}

/* Sozinha, ela arredonda dos dois lados — senão ficava com o canto reto
   virado para o vazio que a aba escondida deixou. */
.ur-estilo-classico:not(:has(#ur-cpg-premios)) .ur-topo--abas .ur-topo__mine {
  border-radius: 4px;
}

.ur-estilo-classico .ur-topo--abas .ur-topo__mine:first-child {
  border-radius: 4px 0 0 4px;
}

.ur-estilo-classico .ur-topo--abas .ur-topo__mine:last-child {
  border-radius: 0 4px 4px 0;
}

/* Herói e barra de progresso são blocos separados no legado — casca.css
   os cola com um -8px !important para o bloco contínuo do Novo modelo. */
.ur-estilo-classico .ur-cpg .body > .ur-topo-bloco + .ur-topo-progresso {
  margin-top: 0 !important;
}

/* ── Progresso: trilho claro, número centrado na barra inteira ─────────
   O legado tinha 24px de altura, trilho branco e o percentual no meio,
   sobre os dois fundos. O override do markup tirou o número de dentro do
   preenchimento (ele não acompanha mais a largura); aqui ele se centra na
   barra, e o contraste vem do trilho, que é sempre o fundo de card. */

.ur-estilo-classico .ur-cp-progress {
  position: relative;
  height: 24px;
  border-radius: 6px;
  background: var(--ur-card);
  border: 1px solid var(--ur-line);
}

/* O min-width de 3.25rem da base existia para o número caber DENTRO do
   preenchimento em 0%. Aqui o número saiu de lá, então aquele mínimo vira
   só um toco colorido à esquerda de uma barra vazia — some com ele. */
.ur-estilo-classico .ur-cp-progress__fill {
  min-width: 0;
  padding: 0;
  border-radius: 6px;
}

/* Centrado na barra inteira e NÃO no preenchimento: com 0% o número
   precisa continuar legível, e o preenchimento tem largura zero. A tinta é
   a do texto comum porque o fundo que domina é o do trilho. */
.ur-estilo-classico .ur-cp-progress__label {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--ur-tx);
  /* O número cruza preenchimento e trilho, e precisa sobreviver aos dois.
     O legado cravava um halo branco; aqui o halo é o PRÓPRIO trilho
     (--ur-card), que é claro no Claro e escuro no Escuro — branco fixo
     borrava a tinta clara do modo Escuro. */
  text-shadow: 0 0 4px var(--ur-card), 0 0 8px var(--ur-card);
}

/* ── "por apenas R$ X": pílula na cor de destaque ──────────────────── */

.ur-estilo-classico .ur-cpr {
  margin: 4px 0;
  font-size: 15px;
  font-weight: 500;
}

.ur-estilo-classico .ur-cpr__box {
  padding: 8px 14px;
  border: 0;
  border-radius: 8px;
  background: var(--ur-accent);
  color: var(--ur-accent-ink);
  font-size: 16px;
  font-weight: 700;
}

/* ── "Quanto mais cotas…" ──────────────────────────────────────────── */

.ur-estilo-classico .ur-cpg .app-card.tema-mais-cotas {
  border-radius: 10px;
}

/* ── Chips de desconto: cabeçalho de seção + pílulas num cartão ────────
   A seção vem do override (estilos/classico/campanha/descontos.blade.php);
   aqui ela ganha o cartão branco que o legado punha em volta das pílulas. */

.ur-estilo-classico .ur-offs-sec {
  display: grid;
  gap: 8px;
}

.ur-estilo-classico .ur-offs-sec .ur-cx__title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

.ur-estilo-classico .ur-offs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
  border-radius: 10px;
  background: var(--ur-card);
}

.ur-estilo-classico .ur-off {
  border-radius: 999px;
  padding: 9px 14px;
  background: var(--ur-accent);
  color: var(--ur-accent-ink);
  text-transform: uppercase;
}

.ur-estilo-classico .ur-off:last-child:nth-child(odd) {
  grid-column: auto;
}

.ur-estilo-classico .ur-off__pct {
  border-radius: 999px;
  background: var(--ur-accent-ink);
  color: var(--ur-accent);
}

/* ── Ordem dos blocos ──────────────────────────────────────────────────
   No legado a caixa de compra vem logo depois do preço e da promoção, e
   TUDO o mais (caixinhas, roletas, maior/menor, top compradores, cotas
   premiadas) vem abaixo dela. O corpo é um flex em coluna, então basta a
   ordem — a montagem da tela (helpers/ur_campanha.php) serve aos dois
   estilos e não muda.

   Empates de `order` preservam a ordem do DOM, então os blocos do topo e a
   caixa de compra, todos em 0, saem na sequência em que já estão. */
.ur-estilo-classico .ur-cpg .body > * {
  order: 1;
}

.ur-estilo-classico .ur-cpg .body > .ur-topo-bloco,
.ur-estilo-classico .ur-cpg .body > .ur-topo-progresso,
.ur-estilo-classico .ur-cpg .body > .ur-cpr,
.ur-estilo-classico .ur-cpg .body > .app-vendas-express {
  order: 0;
}

/* Dentro do grupo de baixo o legado ainda tinha uma sequência própria, que
   a montagem do Novo modelo não segue: as Caixas Instantâneas vinham
   DEPOIS das roletas (e não antes de tudo), o Top Compradores depois
   delas, e as Cotas premiadas fechavam a tela. Os degraus abaixo recolocam
   só esses três; o resto fica no 1, na ordem do DOM. */
/* Prefixo: as Caixas Instantâneas são DUAS seções irmãs no clássico
   (ofertas e ganhadores, com o sufixo -premios), e as duas descem juntas.

   Os chips de desconto entram no MESMO degrau: no legado eles são aquele
   mesmo bloco (automatic.php:960 imprime "📣 Promoção" ou "🎁 Caixas
   Instantâneas" conforme o caso), e ele vinha depois das roletas, não
   acima da grade de pacotes. */
.ur-estilo-classico .ur-cpg .body > [data-ur-cx^="caixas-instantaneas"] {
  order: 2;
}

/* Só quando a tela NÃO tem Caixas Instantâneas. Onde o legado imprime um
   bloco, o V2 imprime dois com o mesmo dado — os chips e a seção de
   caixas dizem ambos "10 Títulos por R$ 5,00". Separados pela tela
   inteira isso não incomodava; vizinhos, lê-se como repetição. Então o
   degrau vale onde há um bloco só (maior-menor, conferido contra o
   legado), e a campanha com os dois fica como estava. */
.ur-estilo-classico .ur-cpg .body:not(:has([data-ur-cx^="caixas-instantaneas"])) > .ur-offs-sec {
  order: 2;
}

.ur-estilo-classico .ur-cpg .body > .ur-mc,
.ur-estilo-classico .ur-cpg .body > .ur-tg__abrir,
.ur-estilo-classico .ur-cpg .body > .ur-tg {
  order: 3;
}

.ur-estilo-classico .ur-cpg .body > [data-ur-cx="premiadas"] {
  order: 4;
}

.ur-estilo-classico .ur-cpg .body > .ur-cft {
  order: 5;
}

/* ── Caixa de compra: ± e botão LADO A LADO ────────────────────────────
   No legado os dois dividem a última linha. O .ur-cmp é um grid de uma
   coluna; vira flex porque o <span id="add_to_cart"> (contrato do fluxo
   de visitante) fica entre eles e, no grid, empurraria o botão para a
   linha seguinte. */

.ur-estilo-classico .ur-cmp {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
}

.ur-estilo-classico .ur-cmp > * {
  flex: 0 0 100%;
}

/* Âncora vazia do fluxo de visitante, sem tamanho: a margem negativa come o
   gap que ela criaria. Casa por `span`, não por #add_to_cart — com o
   visitante logado esse id está no PRÓPRIO botão (campanha/compra.blade),
   e a regra o deixava com zero de largura. */
.ur-estilo-classico .ur-cmp > span#add_to_cart {
  flex: 0 0 0;
  margin-right: -8px;
}

/* min-width:0 porque todo item de flex nasce com min-width:auto: o campo da
   quantidade e o texto do botão pediam mais que 45% e a linha quebrava. */
.ur-estilo-classico .ur-cmp__qty,
.ur-estilo-classico .ur-cmp__cta {
  flex: 1 1 45%;
  min-width: 0;
}

/* ── Pacotes: três tiles preenchidos, com o selo saindo por cima ────── */

.ur-estilo-classico .ur-cmp__packs {
  gap: 8px;
}

.ur-estilo-classico .ur-cmp__pack {
  gap: 2px;
  min-height: 95px;
  align-content: center;
  padding: 10px 4px;
  border: 0;
  border-radius: 6px;
  /* --ur-pkg-sel-* só existe quando a loja escolheu um modelo em Temas V2;
     sem ele o tile sairia transparente, já que aqui a borda também sai. O
     par de recuo é o mesmo do herói: superfície escura dos tokens.css, que
     os oito modelos e o CSS base declaram sempre. */
  background: var(--ur-pkg-sel-bg, var(--ur-btn));
  color: var(--ur-pkg-sel-tx, var(--ur-btn-tx));
}

.ur-estilo-classico .ur-cmp__pack b {
  font-size: 28px;
  line-height: 32px;
}

.ur-estilo-classico .ur-cmp__sel {
  font-size: 12px;
  letter-spacing: .4px;
  /* "SELECIONAR" em caixa alta, como a grade antiga. Pelo CSS e não pela
     view: a string é a mesma, muda só a forma. */
  text-transform: uppercase;
  /* O .85 da folha base punha o rótulo em 4,01:1 no Rosa Claro e 3,75 no
     Rosa Escuro — abaixo de AA. No legado ele era branco cheio sobre o
     tile. A hierarquia já vem do corpo: 12px/400 contra o +N em 28px/700. */
  opacity: 1;
}

.ur-estilo-classico .ur-cmp__pack.is-popular {
  border: 2px solid var(--ur-accent);
}

.ur-estilo-classico .ur-cmp__pop {
  top: -10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
}

/* ── ± e "Participar" ──────────────────────────────────────────────── */

.ur-estilo-classico .ur-cmp__qty {
  grid-template-columns: 36px 1fr 36px;
  padding: 10px;
  border-radius: 10px;
}

/* Legado: seta à esquerda, "Participar" e o valor empilhados à direita.
   Grid por área porque o ícone ocupa as duas linhas e os dois irmãos de
   texto são elementos soltos — não dá para envolvê-los sem mexer na view. */
.ur-estilo-classico .ur-cmp__cta {
  grid-template-columns: 40px 1fr;
  grid-template-areas:
    "ic txt"
    "ic tot";
  gap: 2px 10px;
  padding: 10px 12px;
  border-radius: 10px;
  text-align: center;
}

.ur-estilo-classico .ur-cmp__cta-ic { grid-area: ic; align-self: center; }
.ur-estilo-classico .ur-cmp__cta-txt { grid-area: txt; align-self: end; }
.ur-estilo-classico .ur-cmp__cta-tot { grid-area: tot; align-self: start; }

/* Quadrado com a seta, não círculo — é a marca do botão antigo. */
.ur-estilo-classico .ur-cmp__cta-ic {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  background: var(--ur-accent-ink);
  color: var(--ur-accent);
}

/* "Participar" numa linha só: o botão divide a largura com o seletor ±, e
   a palavra quebrada no meio era o que mais destoava da referência. */
.ur-estilo-classico .ur-cmp__cta-txt b {
  font-size: 17px;
  line-height: 21px;
  white-space: nowrap;
}

/* O total, sob "Participar". O peso 400 contra o 700 da palavra já marca a
   hierarquia; a opacidade por cima punha o valor da compra em 2.9 de razão
   sobre o acento Rosa. */
.ur-estilo-classico .ur-cmp__cta-tot {
  font-size: 13px;
  font-weight: 400;
}

/* ── Blocos premiados: título solto na página, cartão só no conteúdo ───
   No legado (`.sb-wrap`) o título é uma seção da PÁGINA — fora de qualquer
   cartão — e o cartão envolve só as linhas abaixo dele. Os widgets do Novo
   modelo são um cartão único com o título dentro. */

.ur-estilo-classico .ur-cx {
  gap: 10px;
  padding: 0;
  background: none;
}

.ur-estilo-classico .ur-cx__head {
  gap: 8px;
  padding: 6px 0 0;
  align-items: baseline;
  /* Item de grid nasce com min-width:auto e não encolhe abaixo do próprio
     min-content — com o subtítulo em nowrap isso estourava a largura da
     tela. O zero devolve o encolhimento a quem sabe ceder (o subtítulo). */
  min-width: 0;
}

/* Ofertas e ganhadores apenas empilhados: no legado (`.combo-box` e
   `.sb-section-card`) não há cartão em volta — o que se vê preenchido é
   cada cartão de oferta, e as pílulas de ganhador ficam soltas no fundo
   da página. */
.ur-estilo-classico .ur-cx__combos,
.ur-estilo-classico .ur-cx__lista {
  display: grid;
  gap: 6px;
}

.ur-estilo-classico .ur-cx__combos {
  gap: 10px;
}

/* ── Cartão alto de oferta (`.combo-item` / `.rl-combo`) ───────────────
   Largura total, preenchido, cantos de 14px: "A cada / A partir de" e a
   quantidade em corpo grande à esquerda, "Recebe" + o prêmio à direita, e
   a linha de contemplação no pé.

   O legado separava os grupos por cor (roxo nas caixas, verde nas
   roletas), fora do tema. Aqui são dois tons do MESMO acento: as Caixas
   no acento diluído no cartão, as Roletas no acento cheio (logo abaixo).
   Não serve --ur-btn para as Caixas: no modo Escuro ele já é o acento, e
   os dois grupos saíam idênticos. */
.ur-estilo-classico .ur-cx__combo {
  display: grid;
  /* A pílula do Novo modelo é uma grade de três colunas; aqui o cartão
     empilha. Sem redeclarar isto, as duas faixas caíam lado a lado nas
     colunas herdadas e o texto espremia. */
  grid-template-columns: 1fr;
  gap: 7px;
  min-height: 0;
  padding: 16px 18px;
  border-radius: 14px;
  text-align: left;
  background: color-mix(in srgb, var(--ur-accent) 38%, var(--ur-card));
  color: var(--ur-tx);
}

.ur-estilo-classico .ur-cx__combo-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}

.ur-estilo-classico .ur-cx__combo-esq {
  min-width: 0;
}

.ur-estilo-classico .ur-cx__combo-qty {
  display: block;
  font-size: 20px;
  line-height: 1.1;
  font-weight: 800;
}

/* O valor do pacote, sob a quantidade. Mesma razão do pé do cartão: sem
   opacidade, porque o fundo preenchido não dá margem para ela. */
.ur-estilo-classico .ur-cx__combo-vl {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
}

.ur-estilo-classico .ur-cx__combo-dir {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 1 auto;
  min-width: 0;
  text-align: right;
}

.ur-estilo-classico .ur-cx__combo-rec {
  display: grid;
  gap: 2px;
  justify-items: end;
}

.ur-estilo-classico .ur-cx__combo-pr {
  font-size: 17px;
  line-height: 1.25;
  font-weight: 800;
  overflow-wrap: anywhere;
}

/* "N chances de contemplação nas …", no pé do cartão.
   Sem opacidade: dentro do cartão preenchido ela derrubava o contraste
   abaixo de 4.5 nos modelos Escuros (o fundo é o acento diluído, já
   próximo da tinta). A hierarquia de miúdo fica no corpo de 11px contra
   os 20px/17px das figuras, que é o que o legado também fazia. */
.ur-estilo-classico .ur-cx__combo-pe {
  font-size: 11px;
  line-height: 1.45;
  font-weight: 600;
}

/* O rótulo pequeno ("A cada", "Recebe") é o mesmo nos dois lados. O
   opacity: .8 da base (caixinhas.css:97) é desfeito aqui pela mesma razão
   dos outros textos do cartão: sobre o acento ele não cabe. */
.ur-estilo-classico .ur-cx__combo .ur-cx__pre {
  font-size: 11px;
  font-weight: 600;
  opacity: 1;
}

/* As Roletas eram o outro grupo de cor do legado. O acento as separa das
   Caixas sem sair do modelo. */
.ur-estilo-classico [data-ur-cx="roletas"] .ur-cx__combo {
  background: var(--ur-accent);
  color: var(--ur-accent-ink);
}

/* Só nas Roletas a linha de contemplação era uma tarja no pé, separada por
   um fio e centrada (`.rl-combo-foot`). Nas Caixas ela segue miúda, no
   corpo do cartão. */
.ur-estilo-classico [data-ur-cx="roletas"] .ur-cx__combo-pe {
  padding-top: 8px;
  border-top: 1px solid currentColor;
  text-align: center;
}

/* Seções premiadas seguidas: o legado as separa como blocos irmãos, e sem
   isto o par "combos / ganhadores" colava um no outro. */
.ur-estilo-classico .ur-cx--sec + .ur-cx--sec {
  margin-top: 6px;
}

/* O contador x/y vai para a direita do cabeçalho, como no legado — o
   .ur-cx__title ocupa o vão e o empurra. */
.ur-estilo-classico .ur-cx--sec .ur-cx__head .ur-cx__ct {
  margin-left: auto;
  padding: 3px 12px;
  border: 1px solid var(--ur-accent);
  border-radius: 999px;
  /* Vazado sobre o fundo da página, como no legado — o cheio do Novo
     modelo pesava demais ao lado do título. O aro é o acento; a tinta é a
     do texto, não --ur-accent-link: o link em 12px sobre o fundo claro dá
     4.47 no modelo Verde, abaixo do mínimo. O aro já carrega a cor. */
  background: none;
  color: var(--ur-tx);
}

/* Contador x/y numa linha só: sem isto o título espremia a pílula e o
   "0 / 4" quebrava em duas linhas no celular. */
.ur-estilo-classico .ur-cx__head .ur-cx__ct {
  white-space: nowrap;
  flex-shrink: 0;
}

.ur-estilo-classico .ur-cx--sec .ur-cx__title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

/* Linhas de ganhador: pílula clara com o nome do prêmio à esquerda e o
   status à direita, sem o troféu que o Novo modelo põe ao lado. */
.ur-estilo-classico .ur-cx--sec .ur-cx__pz {
  padding: 5px 10px 5px 5px;
  border-radius: 6px;
  font-size: 13px;
}

.ur-estilo-classico .ur-cx--sec .ur-cx__nm {
  padding: 3px 12px;
  border-radius: 999px;
}

.ur-estilo-classico .ur-cx--sec .ur-cx__st {
  font-weight: 700;
}

/* O emoji volta a ser só emoji: sem a caixa de 40px do Novo modelo. */
.ur-estilo-classico .ur-cx__ico {
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  font-size: 22px;
}

/* Título e subtítulo lado a lado, como "🔥 Cotas premiadas  Encontre e
   ganhe" no legado — com a ressalva de que o subtítulo do Novo modelo é
   mais longo ("Receba seu prêmio na hora!") e ainda divide a linha com o
   contador: em 390px ele não cabe ao lado e desce, pelo flex-wrap. Trocar
   o texto seria mexer em conteúdo, e truncar com reticências lê pior que
   a segunda linha — fica a quebra. */
.ur-estilo-classico .ur-cx__title--duas {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.ur-estilo-classico .ur-cx__title b {
  font-size: 21px;
  line-height: 26px;
}

.ur-estilo-classico .ur-cx__tk {
  gap: 10px;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  background: var(--ur-accent);
  color: var(--ur-accent-ink);
  font-size: 13px;
}

.ur-estilo-classico .ur-cx__tk-num {
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--ur-card);
  color: var(--ur-tx);
}

/* O chip do número mede o próprio conteúdo: a coluna fixa de 72px da base
   não cabe 7+ dígitos com o padding da pílula, e o número vazava. O prêmio
   (1fr, com reticências) é quem cede espaço. */
.ur-estilo-classico .ur-cx__tk {
  grid-template-columns: max-content minmax(0, 1fr) auto;
}

.ur-estilo-classico .ur-cx__tk-num {
  white-space: nowrap;
}

.ur-estilo-classico .ur-cx__tk .ur-cx__st {
  font-weight: 700;
}

/* ══ Ganhadores da campanha (campanha encerrada) ═════════════════════
   O cartão verde que anuncia quem levou cada prêmio, logo abaixo da
   barra de progresso. É o único componente da campanha encerrada que
   ainda estava no desenho V2.

   Legado (pages/products/automatic.php, echo com style="" por nó):
   cartão de canto 10px com a sombra rasa do `.app-card`, corpo de 10px,
   foto redonda de 56px, o vão de 24px da calha do Bootstrap e o nome em
   20px/24 peso 500 em caixa alta, com a cota em 14px na linha de baixo.
   O V2 apertou o corpo para 12px, o vão para 12 e o nome para 16/700.

   CSS e não override de view: `campanha.ganhadores` é a MESMA view de
   automatic, farm e numbers (ur_ganhadores_markup), e um override do
   nome pegaria as quatro telas — é o que testOverrideNaoSequestraParcial
   DeOutrasTelas cobra. A árvore do V2 já serve: o que muda é medida. */

/* `.app-card.card` no seletor para VENCER `.ur-cpg .app-card.ur-gw`
   (campanha/casca.css). Com três classes seria empate, e um empate se
   decide pela ordem dos `<link>` — que ninguém revisa. As duas vêm do
   markup da view (`app-card card bg-success ur-gw`), então o seletor não
   depende do `.ur-cpg` da casca para casar.

   Quem monta o componente hoje e CHEGA aqui é só a campanha em documento
   próprio. `farm.php`, `numbers.php` e `automatic.php` também o montam,
   mas saem pelo header do legado, que não emite esta folha nem a classe
   de escopo — lá estas regras não têm onde casar.

   O véu preto sobre --ur-ok: branco sobre o verde cru dá 3,30:1 — abaixo
   de AA para o nome (20px/500) e pior ainda para a cota. O véu não é cor
   de marca, é profundidade; a cor continua a do token, e o cartão fica
   legível nos seis modelos. Mesmo defeito mora no Novo modelo, e a
   correção NÃO sobe para a folha compartilhada: ela moveria o pixel do
   Novo, que este escopo trava. */
.ur-estilo-classico .app-card.card.ur-gw {
  margin: 0;
  border-radius: 10px;
  background: color-mix(in srgb, var(--ur-ok) 76%, black);
  box-shadow: 0 4px 3px rgba(0, 0, 0, .08);
}

.ur-estilo-classico .ur-gw .ur-gw__body {
  gap: 24px;
  padding: 10px;
}

.ur-estilo-classico .ur-gw__nome {
  font-size: 20px;
  line-height: 24px;
  font-weight: 500;
}

/* Colada no nome, como no legado: lá a cota mora num `<div>` irmão sem
   margem nenhuma, e o V2 abriu 2px.

   O branco a .92 não é cor de marca — é o MESMO branco da tinta do
   cartão, mais translúcido, como o `.ur-chd__brand` lá em cima. O .85
   da folha base daria 4,30:1 sobre o véu, abaixo de AA; .92 dá 4,75:1.
   (O legado usava .5 aqui: 2,02:1 sobre o verde dele.) */
.ur-estilo-classico .ur-gw__cota {
  margin-top: 0;
  font-size: 14px;
  line-height: 16.8px;
  color: rgba(255, 255, 255, .92);
}

/* O ✓ do legado era `text-white-50` — 2,00:1 sobre o verde dele. Fica o
   .75 da folha base (3,71:1): um ícone que carrega sentido precisa de
   3:1 (WCAG 1.4.11), e a diferença visual entre os dois é miúda. */

/* ══ Promoção Cota ════════════════════════════════════════════════════
   Legado: cartão com borda na cor de destaque, título e subtítulo
   centrados, o contador em quatro caixinhas escuras e as duas colunas
   com o número em bloco cheio. A árvore é outra (caixinhas no lugar da
   barra da TELA 03, sem os chips de data) — por isso override de view,
   com estas regras só para o que o CSS base não cobre. */

.ur-estilo-classico .ur-pc--leg {
  gap: 10px;
  padding: 16px 14px;
  border: 2px solid var(--ur-accent);
  border-radius: 12px;
}

.ur-estilo-classico .ur-pc--leg .ur-pc__title {
  font-size: 19px;
  line-height: 24px;
}

.ur-estilo-classico .ur-pc--leg .ur-pc__sub {
  font-size: 13px;
  line-height: 18px;
}

.ur-estilo-classico .ur-pc__clock {
  display: flex;
  justify-content: center;
  gap: 8px;
  /* .ur-pz dá a ela fundo e barra de prazo; aqui ela é só o invólucro
     que o relógio procura — quem se pinta são as caixinhas. */
  padding: 0;
  background: none;
}

/* Caixinha mais funda que o cartão, como no legado. Véu da tinta, não
   token de fundo: --ur-btn é o acento no modo Escuro, e aí as quatro
   caixinhas brigavam com o número da cota, que também é o acento. */
.ur-estilo-classico .ur-pc__cl {
  min-width: 56px;
  padding: 7px 10px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--ur-tx) 12%, transparent);
}

.ur-estilo-classico .ur-pc__cl-n {
  display: block;
  font-size: 20px;
  line-height: 1.1;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.ur-estilo-classico .ur-pc__cl-l {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .78;
}

/* As colunas perdem o cartão interno: no legado elas ficam soltas sobre
   o fundo do próprio cartão. */
.ur-estilo-classico .ur-pc--leg .ur-pc__col {
  padding: 4px 0;
  background: none;
  gap: 7px;
}

.ur-estilo-classico .ur-pc--leg .ur-pc__lb {
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ur-accent-link);
}

.ur-estilo-classico .ur-pc--leg .ur-pc__num {
  padding: 8px 20px;
  border-radius: 4px;
  font-size: 28px;
  line-height: 1.15;
}

.ur-estilo-classico .ur-pc--leg .ur-pc__nome {
  font-size: 15px;
}

/* ══ Top compradores ══════════════════════════════════════════════════
   Legado (milestone-ranking.css): o cartão INTEIRO é a cor de destaque,
   e as linhas de dentro são véus sobre ela — não cartões claros. O
   botão de disputa fica cheio, no mesmo tom.

   A árvore do Novo modelo já serve; só a pintura muda, então isto é CSS,
   sem override de view.

   Os véus são PRETO sobre o acento, não a tinta: no modelo Rosa a tinta é
   branca, e véu de branco clareava o fundo justamente sob o texto branco —
   as linhas caíam para 3.13–3.83 de razão. Véu escuro só afunda, então o
   contraste com a tinta nunca piora: o mesmo 10/18/26% dá de 5.2 (Rosa) a
   11.9 (Verde) nos três acentos. É profundidade, como a sombra de um
   cartão, e não cor de marca — por isso rgba fixo serve aqui.

   E nenhum texto daqui leva opacidade: o par acento/tinta dos modelos já
   nasce na borda do mínimo (4.35 no Rosa), então o secundário em .78 ia a
   3.06 — e o que fica dentro de uma linha velada somava dois descontos.
   --ur-mu também não serve, porque é pensado contra o fundo da página e
   não contra o acento. A hierarquia é corpo e peso, como no cartão de
   oferta.

   As chaves --mr-* (cor por campanha, do Personalizar Temas) deixam de
   valer aqui — no clássico a cor é a do modelo escolhido, e misturar as
   duas deixava o cartão com fundo de uma e tinta de outra. */

.ur-estilo-classico .ur-mc {
  padding: 14px 12px 16px;
  background: var(--ur-accent);
  color: var(--ur-accent-ink);
}

.ur-estilo-classico .ur-mc .mr-title,
.ur-estilo-classico .ur-mc .mr-sub,
.ur-estilo-classico .ur-mc .mr-tag,
.ur-estilo-classico .ur-mc .mr-sub strong,
.ur-estilo-classico .ur-mc .mr-cta-title span,
.ur-estilo-classico .ur-mc .mr-count span,
.ur-estilo-classico .ur-mc .mr-list-title,
.ur-estilo-classico .ur-mc .mr-cta-sub,
.ur-estilo-classico .ur-mc .mr-foot,
.ur-estilo-classico .ur-mc .mr-row-name.empty,
.ur-estilo-classico .ur-mc .mr-name.empty,
.ur-estilo-classico .ur-mc .mr-prize {
  color: inherit;
}

/* Linhas translúcidas: o líder mais fundo que o resto, como no legado. */
.ur-estilo-classico .ur-mc .mr-leader,
.ur-estilo-classico .ur-mc .mr-row,
.ur-estilo-classico .ur-mc .mr-cta {
  background: rgba(0, 0, 0, .10);
}

.ur-estilo-classico .ur-mc .mr-leader {
  background: rgba(0, 0, 0, .26);
}

.ur-estilo-classico .ur-mc .mr-trophy,
.ur-estilo-classico .ur-mc .mr-pos,
.ur-estilo-classico .ur-mc .mr-row-count {
  background: rgba(0, 0, 0, .18);
  color: inherit;
}

.ur-estilo-classico .ur-mc .mr-row-count strong {
  color: inherit;
}

/* A medalha é o ponto claro do cartão: inverte acento e tinta. */
.ur-estilo-classico .ur-mc .mr-medal {
  background: var(--ur-card);
  color: var(--ur-tx);
}

/* O selo AO VIVO/ENCERRADO sai do verde de estado para o mesmo véu: o
   --ur-ok-soft é quase transparente e sumia sobre o acento. */
.ur-estilo-classico .ur-mc .mr-live,
.ur-estilo-classico .ur-mc .mr-live.closed {
  background: rgba(0, 0, 0, .18);
  color: inherit;
}

/* "Disputar o topo" cheio, como no legado — sobre o cartão já no acento,
   o botão vira o claro. */
.ur-estilo-classico .ur-mc .mr-btn {
  background: var(--ur-card);
  color: var(--ur-tx);
}

/* O brilho corria sobre o cartão; sem cartão, não há o que varrer. */
.ur-estilo-classico .ur-cx--brilho::after {
  display: none;
}

/* ══ Cores fixas dos widgets promocionais ════════════════════════════
   A ÚNICA exceção à regra 2 do TOKENS.md nesta folha, e de propósito.
   No site antigo cada promoção tinha a SUA cor, e era por ela que o
   cliente as distinguia numa página com seis blocos empilhados: roxo nas
   cotas, laranja no top do horário, verde nos marcos, roxo-escuro nas
   caixinhas, azul nas roletas. Pintar todas com o acento do modelo —
   como as regras acima faziam — devolve a forma do legado e perde essa
   leitura: viram seis retângulos da mesma cor.

   Vale SÓ para os blocos promocionais. O resto da tela (herói, compra,
   pacotes, progresso, menu, rodapé) segue nos --ur-* do modelo escolhido,
   e o Novo modelo não vê um byte disto: tudo nasce em .ur-estilo-classico.

   Tons, não os hex do legado: o laranja #f59e0b dava 2,15:1 com texto
   branco e o verde #198754, 4,53:1 — o primeiro é ilegível e o segundo
   não sobra para o véu claro das linhas. Cada base aqui fica em 6,2:1 ou
   mais com o branco, de modo que a linha clara (véu de 12%) ainda passe
   de 4,5:1 e a escura (26%) nunca piore. Os véus são pretos e brancos
   fixos pela mesma razão do Top compradores abaixo: são profundidade, e
   não mudam com o tema.

   Os pares são (base → fim do gradiente), em 135deg como no legado. */

.ur-estilo-classico {
  /* Cotas: maior, menor e cota premiada — o roxo/violeta do legado. */
  --ur-cl-promo-cota: #4f46e5;
  --ur-cl-promo-cota-f: #3730a3;
  /* Top comprador do horário — o laranja/âmbar, escurecido até caber. */
  --ur-cl-promo-top: #a0450a;
  --ur-cl-promo-top-f: #7c2d12;
  /* Top compradores aos 50% / 50–100% — o verde. */
  --ur-cl-promo-marco: #166534;
  --ur-cl-promo-marco-f: #14532d;
  /* Caixinhas e caixas instantâneas premiadas — o roxo-escuro. */
  --ur-cl-promo-caixa: #2d1b4e;
  --ur-cl-promo-caixa-f: #3b2566;
  /* Roletas instantâneas — o azul-marinho. */
  --ur-cl-promo-roleta: #00307a;
  --ur-cl-promo-roleta-f: #1b4a9c;

  /* Tinta e véus, iguais nos cinco blocos: a hierarquia sai do véu, não
     de opacidade (que somaria desconto sobre fundo já cheio). */
  --ur-cl-promo-tx: #ffffff;
  --ur-cl-promo-escura: rgba(0, 0, 0, .26);
  --ur-cl-promo-media: rgba(0, 0, 0, .18);
  --ur-cl-promo-clara: rgba(255, 255, 255, .12);
  --ur-cl-promo-clara-forte: rgba(255, 255, 255, .2);
  /* Chip claro: número preto, como o .ur-psh__pzq da base. */
  --ur-cl-promo-chip: rgba(255, 255, 255, .88);
  --ur-cl-promo-chip-tx: #111111;
}

/* ── Prêmios por horário: roxo nas cotas, laranja no top ──────────────
   A paleta a/b/c/d da base gira por POSIÇÃO do card; no clássico quem
   manda é o que a promoção disputa, que é o que .ps-bg-quota /
   .ps-bg-top já carregam desde o legado. Daí o seletor ser a classe de
   disputa, e não a de posição.

   `background-image` e não `background`: a base pinta `background-color`
   com o token, e a abreviação o zeraria junto. */
.ur-estilo-classico .ur-psh.ps-bg-quota,
.ur-estilo-classico .ur-psh.ps-bg-top {
  color: var(--ur-cl-promo-tx);
  --ur-psh-tx: var(--ur-cl-promo-tx);
  --ur-psh-pill: var(--ur-cl-promo-media);
  --ur-psh-tag: var(--ur-cl-promo-chip);
}

.ur-estilo-classico .ur-psh.ps-bg-quota {
  background-color: var(--ur-cl-promo-cota);
  background-image: linear-gradient(135deg, var(--ur-cl-promo-cota), var(--ur-cl-promo-cota-f));
}

.ur-estilo-classico .ur-psh.ps-bg-top {
  background-color: var(--ur-cl-promo-top);
  background-image: linear-gradient(135deg, var(--ur-cl-promo-top), var(--ur-cl-promo-top-f));
}

/* A MENOR cota é a exceção dentro do grupo: verde, o mesmo do Top
   compradores, e não o roxo das demais cotas. As duas disputas moram no
   mesmo `.ps-bg-quota` e só o texto do título as separava — daí a classe
   de direção no markup, que CSS não lê conteúdo de texto.

   Depois de `.ps-bg-quota` de propósito: mesma especificidade, então
   quem vem por último vence, e a maior cota segue no roxo acima. */
.ur-estilo-classico .ur-psh.ps-dir-menor {
  background-color: var(--ur-cl-promo-marco);
  background-image: linear-gradient(135deg, var(--ur-cl-promo-marco), var(--ur-cl-promo-marco-f));
}

/* Encerrado continua vencendo: a base já zera a cor em cinza e aplica o
   zebrado, e o `filter: grayscale(1)` de lá também lava este gradiente —
   mas só se a imagem sair do caminho, senão ela cobre o cinza. */
.ur-estilo-classico .ur-psh.is-ended {
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .07) 0 10px, transparent 10px 20px);
}

/* As linhas de prêmio e de posição, sobre o cartão cheio. */
.ur-estilo-classico .ur-psh.ps-bg-quota .ur-psh__pz,
.ur-estilo-classico .ur-psh.ps-bg-top .ur-psh__pz,
.ur-estilo-classico .ur-psh.ps-bg-quota .ur-psh__win,
.ur-estilo-classico .ur-psh.ps-bg-top .ur-psh__win {
  background: var(--ur-cl-promo-clara);
}

.ur-estilo-classico .ur-psh.ps-bg-quota .ur-psh__pz.is-taken,
.ur-estilo-classico .ur-psh.ps-bg-top .ur-psh__pz.is-taken {
  background: var(--ur-cl-promo-clara-forte);
}

/* ── Cota premiada (Promoção Cota) ────────────────────────────────────
   O cartão do legado era o roxo das cotas com as quatro caixinhas do
   relógio afundadas nele e o número em bloco cheio. A borda de 2px que
   o `.ur-pc--leg` acima tira do acento passa ao fim do gradiente, que é
   o mesmo desenho um tom abaixo. */
.ur-estilo-classico .ur-pc--leg {
  border-color: var(--ur-cl-promo-cota-f);
  background-color: var(--ur-cl-promo-cota);
  background-image: linear-gradient(135deg, var(--ur-cl-promo-cota), var(--ur-cl-promo-cota-f));
  color: var(--ur-cl-promo-tx);
}

/* Subtítulo, rótulo das colunas e chips de data saem dos tokens da
   página (--ur-mu, --ur-row), pensados contra o fundo dela e não contra
   o roxo. Sobre o cartão cheio eles sumiam. */
.ur-estilo-classico .ur-pc--leg .ur-pc__sub,
.ur-estilo-classico .ur-pc--leg .ur-pc__lb,
.ur-estilo-classico .ur-pc--leg .ur-pc__val,
.ur-estilo-classico .ur-pc--leg .ur-pc__empty {
  color: inherit;
}

/* As caixinhas do relógio e os chips de data, afundados no cartão. */
.ur-estilo-classico .ur-pc--leg .ur-pc__cl {
  background: var(--ur-cl-promo-escura);
}

.ur-estilo-classico .ur-pc--leg {
  --ur-pz-bg: var(--ur-cl-promo-media);
  --ur-pz-tx: var(--ur-cl-promo-tx);
}

/* O número da cota é o dado que o widget existe para mostrar: inverte,
   como a medalha do Top compradores faz. */
.ur-estilo-classico .ur-pc--leg .ur-pc__num {
  background: var(--ur-cl-promo-chip);
  color: var(--ur-cl-promo-chip-tx);
}

/* ── Top compradores aos 50% / 50–100% e ranking geral ────────────────
   O bloco acima pinta `.ur-mc` com o acento do modelo; aqui ele passa ao
   verde fixo. Os véus e a inversão da medalha seguem os de lá — só a
   base muda, então basta trocar fundo e tinta. */
.ur-estilo-classico .ur-mc {
  background-color: var(--ur-cl-promo-marco);
  background-image: linear-gradient(135deg, var(--ur-cl-promo-marco), var(--ur-cl-promo-marco-f));
  color: var(--ur-cl-promo-tx);
}

.ur-estilo-classico .ur-mc .mr-medal,
.ur-estilo-classico .ur-mc .mr-btn {
  background: var(--ur-cl-promo-chip);
  color: var(--ur-cl-promo-chip-tx);
}

/* `.mr-card.is-ended` da base lava o cartão com grayscale e zebra; como
   nos Prêmios por horário, a imagem precisa ser a do zebrado para o
   gradiente não cobri-la. */
.ur-estilo-classico .ur-mc.is-ended {
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .07) 0 10px, transparent 10px 20px);
}

/* ── Caixinhas, caixas instantâneas e roletas ─────────────────────────
   Os dois grupos de cor do legado. O bloco de ofertas acima os separa em
   dois tons do acento; aqui voltam ao roxo-escuro e ao azul. */
.ur-estilo-classico .ur-cx__combo {
  background-color: var(--ur-cl-promo-caixa);
  background-image: linear-gradient(135deg, var(--ur-cl-promo-caixa), var(--ur-cl-promo-caixa-f));
  color: var(--ur-cl-promo-tx);
}

.ur-estilo-classico [data-ur-cx="roletas"] .ur-cx__combo {
  background-color: var(--ur-cl-promo-roleta);
  background-image: linear-gradient(135deg, var(--ur-cl-promo-roleta), var(--ur-cl-promo-roleta-f));
  color: var(--ur-cl-promo-tx);
}

/* ── Cotas premiadas: as linhas de cota ───────────────────────────────
   Mesma família das outras cotas (roxo), com o número no chip claro —
   é a forma que o legado dava à linha "número · prêmio · status". */
.ur-estilo-classico .ur-cx__tk {
  background-color: var(--ur-cl-promo-cota);
  background-image: linear-gradient(135deg, var(--ur-cl-promo-cota), var(--ur-cl-promo-cota-f));
  color: var(--ur-cl-promo-tx);
}

.ur-estilo-classico .ur-cx__tk-num {
  background: var(--ur-cl-promo-chip);
  color: var(--ur-cl-promo-chip-tx);
}

/* As pílulas de ganhador das seções premiadas acompanham o grupo a que
   pertencem, como no legado — claras sobre o fundo da página é o que o
   Novo modelo faz, e aqui elas voltam a ser parte do bloco colorido. */
.ur-estilo-classico .ur-cx--sec .ur-cx__pz {
  background: var(--ur-cl-promo-caixa);
  color: var(--ur-cl-promo-tx);
}

.ur-estilo-classico [data-ur-cx="roletas-premios"] .ur-cx__pz {
  background: var(--ur-cl-promo-roleta);
}

.ur-estilo-classico .ur-cx--sec .ur-cx__nm {
  background: var(--ur-cl-promo-chip);
  color: var(--ur-cl-promo-chip-tx);
}

/* ══ Escolha manual de cotas ══════════════════════════════════════════
   A tela de `type_of_draw = 2` (pages/products/manual_choice.php) é a
   única campanha cujo CORPO não passa por Blade: os blocos são PHP puro
   em pages/products/manual_choice/, então o finder de views não tem onde
   prepender — aqui é CSS, e só.

   O topo já é o do clássico (hero_v2.php chama os mesmos widgets da
   campanha: mídia, progresso, "Por apenas", chips). O que falta é tudo o
   que vem abaixo dele, com o prefixo `mc-`.

   Antes da forma, a legibilidade. `manual-choice.css` nasceu numa tela
   ESCURA fixa e dez textos ficaram com a tinta cravada em hex claro
   (#fff, #dedcd5, #c9cbd1…). Quando os `--mc-*` passaram a sair dos
   tokens, o fundo virou o do modelo e esses hex continuaram claros: no
   Claro o cliente digitava branco sobre branco no campo de busca
   (1,00:1), a descrição do prêmio sumia (1,37:1) e as abas de filtro não
   ligadas pareciam desabilitadas (1,62:1). Falha em SILÊNCIO — o texto
   está no DOM e nada quebra.

   A correção fica AQUI, e não na folha compartilhada, porque ela serve
   aos dois estilos: mexer lá mudaria o pixel do Novo modelo, que este
   passo trava como intocado (o pixdiff pegou, 0,148% da tela). Fica
   anotado que o defeito existe igual no Novo — é dele a próxima rodada,
   onde mudar o pixel for permitido. */

.ur-estilo-classico .app-main:not(.mc-theme-sds) .mc-search__box input { color: var(--ur-tx); }
.ur-estilo-classico .app-main:not(.mc-theme-sds) .mc-search__box input::placeholder { color: var(--ur-mu); }
.ur-estilo-classico .app-main:not(.mc-theme-sds) .mc-desc { color: var(--ur-tx); }
.ur-estilo-classico .app-main:not(.mc-theme-sds) .mc-filter { color: var(--ur-tx) !important; }
/* `:not(.is-on)` não é enfeite: sem ele esta regra tem a mesma
   especificidade de `.mc-filter.is-on em` e vence por vir depois, pintando
   também o selo da aba LIGADA — que fica sobre o acento cheio, não sobre o
   cartão. Medido no modelo Escuro: 1,77:1, contra os 13,19 de antes. */
.ur-estilo-classico .app-main:not(.mc-theme-sds) .mc-filter:not(.is-on) em { color: var(--ur-mu); }
.ur-estilo-classico .app-main:not(.mc-theme-sds) .mc-progress__txt,
.ur-estilo-classico .app-main:not(.mc-theme-sds) .mc-winner b,
.ur-estilo-classico .app-main:not(.mc-theme-sds) .mc-closed b,
.ur-estilo-classico .app-main:not(.mc-theme-sds) .mc-promo b,
.ur-estilo-classico .app-main:not(.mc-theme-sds) .mc-rank__name,
.ur-estilo-classico .app-main:not(.mc-theme-sds) .mc-rank__qty {
  color: var(--ur-tx);
}

/* "Selecione suas cotas" é o estado em que o cliente mais olha o botão. */
.ur-estilo-classico .app-main:not(.mc-theme-sds) .mc-cart .mc-cta:disabled { color: var(--ur-mu) !important; }
.ur-estilo-classico .app-main:not(.mc-theme-sds) .mc-cart__foot { color: var(--ur-mu); }

/* Prata e bronze do pódio davam 1,66:1 e 3,30:1 sobre o cartão claro. O
   lugar não precisa de cor de medalha para se ler: o 1º já é o acento, e
   os outros dois passam a ser a tinta e a tinta secundária — a mesma
   escada de ênfase que o Top Compradores do clássico usa, e sem hex
   (regra 2 do TOKENS.md). */
.ur-estilo-classico .app-main:not(.mc-theme-sds) .mc-rank__row--p2 .mc-rank__pos {
  color: var(--ur-tx);
}

.ur-estilo-classico .app-main:not(.mc-theme-sds) .mc-rank__row--p3 .mc-rank__pos {
  color: var(--ur-mu);
}

/* Ordem dos blocos. No legado o cartão "PRÊMIO · Ver detalhes" vinha
   LOGO abaixo do herói, e a Promoção depois dele; aqui os chips de
   desconto são um widget do topo da campanha e saíam antes. A montagem é
   PHP (manual_choice.php), compartilhada com o Novo modelo — então a
   troca é por `order` no flex, como na campanha, e não mexendo no
   arquivo que serve aos dois estilos.

   O `:has(#mc)` prende a regra a ESTA tela: `.container.app-main` é um
   invólucro do legado, e hoje nenhuma outra tela Blade do clássico o usa
   — mas a próxima que usasse herdaria o flex sem pedir. Navegador sem
   `:has()` (anterior a 2022) simplesmente não casa: a tela fica na ordem
   do Novo modelo, que é o que ele já mostrava antes deste passo. */
.ur-estilo-classico .container.app-main:not(.mc-theme-sds):has(#mc) {
  display: flex;
  flex-direction: column;
}

.ur-estilo-classico .container.app-main:not(.mc-theme-sds):has(#mc) > * {
  order: 3;
}

.ur-estilo-classico .container.app-main:not(.mc-theme-sds):has(#mc) > .ur-topo-bloco,
.ur-estilo-classico .container.app-main:not(.mc-theme-sds):has(#mc) > .ur-topo-progresso,
.ur-estilo-classico .container.app-main:not(.mc-theme-sds):has(#mc) > .ur-cpr {
  order: 0;
}

.ur-estilo-classico .container.app-main:not(.mc-theme-sds):has(#mc) > #mc {
  order: 1;
}

.ur-estilo-classico .container.app-main:not(.mc-theme-sds):has(#mc) > .ur-offs-sec {
  order: 2;
}

/* As seções do legado não têm o cartão de 24px em volta: o `.mc` é um
   invólucro de agrupamento, e o conteúdo corre no fundo da página, como
   todos os outros blocos do clássico (ganhadores, top compradores). */
.ur-estilo-classico .app-main:not(.mc-theme-sds) .mc {
  background: none;
  border-radius: 0;
  margin-bottom: 0;
  overflow: visible;
}

/* Sem o cartão, as laterais de 16px do `.mc-sec` duplicariam o recuo que
   o `.app-main` já dá. O legado alinhava os blocos pela mesma margem dos
   widgets da campanha logo acima. */
.ur-estilo-classico .app-main:not(.mc-theme-sds) .mc-sec {
  padding-left: 0;
  padding-right: 0;
  padding-top: 18px;
}

/* Cabeçalho de seção na forma do legado: o mesmo par título + frase ao
   lado que `.ur-cx__head` já usa nas Caixinhas e na Promoção. */
.ur-estilo-classico .app-main:not(.mc-theme-sds) .mc-sh h2,
.ur-estilo-classico .app-main:not(.mc-theme-sds) .mc-fold__head h2 {
  font-family: inherit;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

/* O acento cheio sobre o cartão claro dá 1,43:1 — é cor de botão, não de
   texto. `--ur-accent-link` é a versão do acento feita para ler sobre o
   fundo (5,31 no Claro, 8,73 no Escuro).

   O pódio em 1º e a nota do ranking entram aqui pelo mesmo motivo: é o
   MESMO amarelo no MESMO cartão, e vestir um seletor e deixar o vizinho
   era inconsistência dentro da própria tela. Esse bloco só sai com
   `enable_ranking` ligado, que a ação de teste (id 937) não tem — por
   isso não aparece nos prints. */
.ur-estilo-classico .app-main:not(.mc-theme-sds) .mc-sh__aside,
.ur-estilo-classico .app-main:not(.mc-theme-sds) .mc-fold__hint,
.ur-estilo-classico .app-main:not(.mc-theme-sds) .mc-rank__note,
.ur-estilo-classico .app-main:not(.mc-theme-sds) .mc-rank__row--p1 .mc-rank__pos {
  color: var(--ur-accent-link);
}

/* Cartões do clássico: canto de 8px e o fio do tema, como o cartão de
   regulamento e o de Top Compradores. */
.ur-estilo-classico .app-main:not(.mc-theme-sds) .mc-card,
.ur-estilo-classico .app-main:not(.mc-theme-sds) .mc-search__box,
.ur-estilo-classico .app-main:not(.mc-theme-sds) .mc-cta,
.ur-estilo-classico .app-main:not(.mc-theme-sds) .mc-empty {
  border-radius: 8px;
}

/* Pílulas de filtro: o legado as tinha redondas (999px), e foi o único
   lugar da tela em que o canto reto do V2 se afastou da forma antiga. */
.ur-estilo-classico .app-main:not(.mc-theme-sds) .mc-filter,
.ur-estilo-classico .app-main:not(.mc-theme-sds) .mc-cart__act {
  border-radius: 999px;
}

/* Grade: as células do legado eram quadradas de canto 13px e número
   grande condensado; no V2 viraram retângulos de 6px com texto de UI.
   Aqui volta a forma antiga — a cor continua a do modelo. */
.ur-estilo-classico .app-main:not(.mc-theme-sds) .mc-grid {
  gap: 8px;
}

.ur-estilo-classico .app-main:not(.mc-theme-sds) .mc-cell {
  min-height: 52px;
  border-radius: 12px;
  font: 700 20px/1 var(--mc-f-disp);
  letter-spacing: .04em;
}

/* Chips do carrinho e carrinho em si: o legado tinha o mesmo canto do
   bloco (20px em cima), não os 10px do V2.

   A margem negativa de -16px existia para o carrinho sangrar até a borda
   do `.mc-sec`, que tinha 16px de recuo. Sem aquele recuo ela passa a
   sangrar para FORA da página: medido, 4px de rolagem lateral em 390px
   (scrollWidth 394). O legado não rolava de lado. */
.ur-estilo-classico .app-main:not(.mc-theme-sds) .mc-cart {
  border-radius: 16px 16px 8px 8px;
  margin-left: 0;
  margin-right: 0;
}

.ur-estilo-classico .app-main:not(.mc-theme-sds) .mc-chipnum {
  border-radius: 10px;
}

/* O total do CTA no legado era o número grande condensado, à direita —
   a mesma tipografia do "R$" do bloco de compra da campanha clássica. */
.ur-estilo-classico .app-main:not(.mc-theme-sds) .mc-cta__total b {
  font: 800 22px/1 var(--mc-f-disp);
}

@media (max-width: 480px) {
  .ur-estilo-classico .app-main:not(.mc-theme-sds) .mc-grid {
    gap: 6px;
  }

  .ur-estilo-classico .app-main:not(.mc-theme-sds) .mc-cell {
    min-height: 46px;
    font-size: 18px;
    border-radius: 12px;
  }

  .ur-estilo-classico .app-main:not(.mc-theme-sds) .mc-cta__total b {
    font-size: 21px;
  }
}

/* ══ Home ═════════════════════════════════════════════════════════════
   Legado: título da página, o destaque com a foto alta e a tarja preta,
   a fila de cartões de 98px e os ganhadores EMPILHADOS (não em carrossel).
   Tudo em cartão branco com a mesma sombra rasa.

   A ORDEM e a presença dos blocos são de view (estilos/classico/home/) —
   aqui fica só a forma. */

/* O legado separa os blocos por 8px (.mb-2), não pelos 10px do Novo. */
.ur-estilo-classico .ur-hm .body {
  gap: 8px;
}

/* ── Destaque: foto alta, selo por cima dela, tarja com o nome ──────── */

/* `.ur-hm` no seletor: home/page.css declara o raio em `.ur-hm .ur-hm__hero`,
   mesma especificidade — sem o ancestral a folha do estilo perde por ordem. */
.ur-estilo-classico .ur-hm .ur-hm__hero {
  position: relative;
  border-radius: 10px;
  box-shadow: 0 4px 3px rgba(0, 0, 0, .08);
}

/* 366x350 no legado — quase quadrada, bem mais alta que os 16/11 do Novo.
   Fallback: só com a foto num formato NOVO (1:1 ou 4:5) o --ur-hero-ar
   chega e manda (issue 859). Campanha antiga não emite a var e fica aqui. */
.ur-estilo-classico .ur-hm__hero-foto img {
  aspect-ratio: var(--ur-hero-ar, 366 / 350);
}

/* O selo sai do fluxo da tarja e volta para o canto da foto. */
.ur-estilo-classico .ur-hm__hero-selo {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  margin: 0;
}

.ur-estilo-classico .ur-hm .ur-hm__hero-selo .badge {
  border-radius: 4px;
  font-size: 11px;
}

/* A tarja preta do legado. --ur-btn/--ur-btn-tx é o par de superfície
   escura com tinta por cima que existe nos oito modelos; --ur-chip sairia
   preto sobre preto no Claro/Dourado e no Claro/Verde. */
.ur-estilo-classico .ur-hm__hero-info {
  padding: 16px 16px 12px;
  background: var(--ur-btn);
  color: var(--ur-btn-tx);
}

.ur-estilo-classico .ur-hm__hero-nome {
  margin: 0 0 4px;
  color: var(--ur-btn-tx);
  font-size: 16px;
  line-height: 19px;
}

.ur-estilo-classico .ur-hm__hero-sub {
  margin: 0;
  color: var(--ur-btn-tx);
  font-size: 13px;
  line-height: 16px;
  opacity: .85;
}

/* ── Cabeçalho de seção: "⚡ Campanhas  Escolha sua sorte" ────────────
   `.app-title` do legado: título e descrição na mesma linha, o segundo
   alinhado pela base e mais apagado. Sem "Ver todas" à direita — o legado
   não tinha, e o corpo do clássico não passa o link. */

.ur-estilo-classico .ur-hm__sec {
  justify-content: flex-start;
  padding: 6px 0 0;
}

.ur-estilo-classico .ur-hm__sec-tit {
  font-size: 21px;
  line-height: 25px;
  font-weight: 600;
}

/* ── Cartão de campanha (vale também para /campanhas) ──────────────── */

.ur-estilo-classico .ur-cl__item {
  gap: 10px;
  padding: 4px;
  border-radius: 10px;
  background: var(--ur-card);
  box-shadow: 0 4px 3px rgba(0, 0, 0, .08);
}

.ur-estilo-classico .ur-cl__foto {
  border-radius: 10px;
}

/* `contain`, como `.SorteioTpl_imagem__2GXxI`: a foto do prêmio na tela
   antiga aparece inteira na caixa de 90, não cortada no centro. */
.ur-estilo-classico .ur-cl__foto img {
  object-fit: contain;
}

/* Uma linha só, como no legado: o cartão tem altura fixa de 98px e um nome
   comprido não pode empurrá-la. */
.ur-estilo-classico .ur-cl__nome {
  font-size: 16px;
  line-height: 19px;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ur-estilo-classico .ur-cl__sub {
  margin: 1px 0 0;
  font-size: 12px;
  line-height: 15px;
  -webkit-line-clamp: 1;
}

.ur-estilo-classico .ur-cl__selo {
  margin-top: 4px;
}

/* O status do legado é uma PÍLULA cheia, nunca texto solto — e TODOS os seis
   status saem na mesma cor de marca, inclusive "Concluído" e "Corre que está
   acabando!", que no markup carregam `bg-dark` (medido no legado: os três
   badges em rgb(34,197,94)).

   O `!important` é para vencer o do componente, que no Novo modelo tinge o
   `bg-dark` de neutro (assets/css/campanha/lista.css) — sem ele a listagem
   clássica saía com dois tons de selo e o legado tem um só.

   Serve às duas telas: na home a raiz é `.ur-hm`, na listagem `.ur-cl`, e o
   card é o mesmo componente. */
.ur-estilo-classico .ur-cl__selo .badge,
.ur-estilo-classico .ur-cl__selo .badge.bg-dark {
  display: inline-block;
  padding: 4px 7px;
  border-radius: 4px;
  background: var(--ur-accent) !important;
  color: var(--ur-accent-ink) !important;
  font-size: 11px;
  font-weight: 700;
  /* Altura 19px, como a do legado: o `line-height: 16px` do Novo modelo
     deixava a pílula em 24 e empurrava o nome do card para cima. */
  line-height: 1;
}

/* O 🔥 é enfeite do Novo modelo (lista.css); a tela antiga não o tinha. */
.ur-estilo-classico .ur-cl__selo .badge::after {
  content: none;
}

/* ── Data do sorteio ──────────────────────────────────────────────────
   No legado era `.SorteioTpl_dtSorteio`, absoluta no canto inferior
   direito do card. Aqui é uma linha no fluxo alinhada à direita: o card
   do Novo modelo não tem altura fixa, e o absoluto sobreporia o selo
   quando o nome quebra em duas linhas. */

.ur-estilo-classico .ur-cl__dt {
  margin-top: 4px;
  color: var(--ur-tx);
  font-size: 12px;
  line-height: 16px;
  text-align: right;
}

.ur-estilo-classico .ur-cl__dt i {
  margin-right: 4px;
}

/* ── Últimos ganhadores: fila vertical, não carrossel ──────────────────
   O legado empilha os cartões de ganhador em largura cheia. O carrossel do
   Novo modelo é o mesmo markup — basta desfazer o arranjo horizontal. */

.ur-estilo-classico .ur-hm__wrow {
  flex-direction: column;
  gap: 8px;
  overflow: visible;
  margin: 0;
  padding: 0;
}

.ur-estilo-classico .ur-hm__wrow-item {
  width: auto;
}

/* O cartão de ganhador em si é o mesmo das duas telas: a forma está no
   bloco de /ganhadores, que já traz o seletor da home junto. Aqui fica só
   o que é do carrossel — e o corte de uma linha que a home impõe ao nome
   e ao prêmio (ellipsis), que no empilhado não faz sentido. */
.ur-estilo-classico .ur-hm__wrow-item .ur-win-card-main > b,
.ur-estilo-classico .ur-hm__wrow-item .ur-win-prize {
  white-space: normal;
}

/* ── "Dúvidas / Fale conosco" ─────────────────────────────────────────
   O legado centrava o conteúdo e deixava o cartão translúcido sobre o
   fundo da página (bg-white bg-opacity-25). Aqui o véu é da tinta, para
   clarear no Claro e escurecer no Escuro sem cravar branco. */

.ur-estilo-classico .ur-hm .ur-hm__duvidas {
  justify-content: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--ur-tx) 8%, transparent);
  box-shadow: 0 4px 3px rgba(0, 0, 0, .08);
}

.ur-estilo-classico .ur-hm__duvidas-ic {
  flex-basis: 34px;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--ur-tx) 10%, transparent);
}

.ur-estilo-classico .ur-hm__duvidas-tx {
  text-align: center;
}

/* ── Perguntas frequentes ─────────────────────────────────────────────
   O acordeão é o componente `ui.faq`, que só a tela de suporte carrega
   com a sua folha — a home não inclui assets/css/ui/faq.css. Em vez de
   mandar o arquivo inteiro para todo visitante da home por causa de um
   bloco que só o Estilo clássico mostra, a forma dele vem aqui.

   As duas primeiras regras são do collapse do Bootstrap (esta tela carrega
   o JS dele, não o CSS): sem elas as respostas saem todas abertas. */

.ur-estilo-classico .ur-faq .collapse:not(.show) {
  display: none;
}

.ur-estilo-classico .ur-faq .collapsing {
  height: 0;
  overflow: hidden;
  transition: height .25s ease;
}

.ur-estilo-classico .ur-faq {
  display: grid;
  gap: 8px;
}

.ur-estilo-classico .ur-faq__item {
  border-radius: 10px;
  overflow: hidden;
  background: var(--ur-card);
  box-shadow: 0 4px 3px rgba(0, 0, 0, .08);
}

.ur-estilo-classico .ur-faq__bt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 8px;
  border: 0;
  background: transparent;
  color: var(--ur-tx);
  font-family: inherit;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}

/* A seta do legado aponta para a direita (bi-arrow-right, antes do texto)
   e não gira; a daqui é um chevron depois do texto, que o CSS base gira ao
   abrir. Mantê-la girando é o que diz, sem texto, que o item abriu. */
.ur-estilo-classico .ur-faq__seta {
  flex: 0 0 auto;
  color: var(--ur-accent-link, var(--ur-accent));
  transition: transform .2s ease;
}

.ur-estilo-classico .ur-faq__bt:not(.collapsed) .ur-faq__seta {
  transform: rotate(180deg);
}

.ur-estilo-classico .ur-faq__tx {
  padding: 0 8px 8px;
  font-size: 13px;
  line-height: 19px;
  color: var(--ur-mu);
}

.ur-estilo-classico .ur-faq__tx p:last-child {
  margin-bottom: 0;
}

/* ══ Listagem de campanhas ════════════════════════════════════════════
   Legado: título e descrição na MESMA linha (`.app-title` é flex com
   align-items:self-end) e os filtros dentro de um cartão branco, com a
   palavra "Listar" antes de um grupo de botões emendados — não as três
   pílulas soltas do Novo modelo. O cartão de campanha já está acima, no
   bloco da home: é o mesmo componente nas duas telas. */

.ur-estilo-classico .ur-cl__topo {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 0 0;
}

.ur-estilo-classico .ur-cl__titulo {
  font-size: 21px;
  line-height: 26px;
  font-weight: 600;
}

.ur-estilo-classico .ur-cl__desc {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
}

/* ── Filtros: "Listar" + grupo emendado dentro do cartão ───────────── */

/* A pilha da listagem respira 8px, como o `.mb-2` entre os cartões da tela
   antiga — o 10px é o passo das telas de campanha, que ficam como estão. */
.ur-estilo-classico .ur-cl .body {
  gap: 8px;
}

.ur-estilo-classico .ur-cl__filtros {
  align-items: center;
  /* Centrado: no legado é `justify-content-center` no corpo do cartão. */
  justify-content: center;
  gap: 0;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--ur-card);
  box-shadow: 0 4px 3px rgba(0, 0, 0, .08);
}

/* O rótulo do legado é texto solto no cartão, sem nó próprio no markup
   novo — vem por ::before para a view servir aos dois estilos. */
.ur-estilo-classico .ur-cl__filtros::before {
  content: "Listar";
  margin-right: 8px;
  color: var(--ur-mu);
  font-size: 14px;
  text-transform: uppercase;
}

/* Emendados: o raio sobra só nas pontas do grupo, como no .btn-group. */
.ur-estilo-classico .ur-cl__pill {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ur-mu);
  font-size: 14px;
  font-weight: 600;
}

.ur-estilo-classico .ur-cl__pill:first-of-type { border-radius: 3px 0 0 3px; }
.ur-estilo-classico .ur-cl__pill:last-of-type { border-radius: 0 3px 3px 0; }

/* A aba marcada é um preenchimento neutro no legado (cinza claro), não o
   acento: --ur-row é a superfície um tom fora do cartão nos oito modelos. */
.ur-estilo-classico .ur-cl__pill.is-on {
  background: var(--ur-row);
  color: var(--ur-tx);
}

.ur-estilo-classico .ur-cl__pill:hover,
.ur-estilo-classico .ur-cl__pill:focus-visible {
  border-color: transparent;
  color: var(--ur-tx);
}

/* ── Nenhuma campanha: o aviso do legado, não um cartão ───────────────
   Lá era um `.alert.alert-info`: caixa de 16px com fio em volta, raio
   pequeno e o texto à esquerda. O azul cravado do Bootstrap não vem — a
   cor é um véu da tinta do modelo, que serve aos seis. */

.ur-estilo-classico .ur-cl__vazio {
  padding: 16px;
  border: 1px solid var(--ur-line);
  border-radius: 4px;
  background: color-mix(in srgb, var(--ur-tx) 5%, var(--ur-card));
  color: var(--ur-tx);
  font-size: 16px;
  text-align: left;
}

/* ══ Ganhadores ═══════════════════════════════════════════════════════
   Legado: o cabeçalho do SITE, o `.app-title` "🏆 Ganhadores · confira os
   sortudos" numa linha só e, abaixo, os cartões de 100px com a foto de 90
   à esquerda e três linhas de texto (nome em caixa alta, número da sorte,
   data) até o rodapé. Sem números do mês, sem abas de filtro e sem
   "Carregar mais" — nada disso existia lá, e os três saem pelo MARKUP dos
   overrides em estilos/classico/winners/, não escondidos por CSS.

   A tela é documento próprio com casca própria (.ur-win-*), não a casca
   .ur-mn das outras: daí a "boca" arredondada do topo precisar ser
   remontada aqui, com a mesma faixa de --ur-cl-faixa. */

/* A faixa, igual à da `.ur-mn` lá em cima. Na PRÓPRIA `.ur-win`, não na
   `.ur-win-page` de fora: a `.ur-win` tem fundo opaco e apagaria uma faixa
   pintada atrás dela. No mesmo elemento, a imagem fica por cima da cor.
   Ela perde o `max-width` na regra seguinte, então pega a tela toda.
   O `:has` pelo mesmo motivo da `.ur-mn`: faixa só onde há cabeçalho. */
.ur-estilo-classico .ur-win:has(> .ur-chd) {
  background-image: linear-gradient(var(--ur-accent), var(--ur-accent));
  background-repeat: no-repeat;
  background-size: 100% var(--ur-cl-faixa);
  background-position: 0 var(--ur-cl-chd-h);
}

/* A coluna de 640/720px do Novo modelo some: no legado quem limita a
   largura é o conteúdo, e a faixa do cabeçalho atravessa a tela inteira
   (é assim na home e na listagem clássicas). Sem os 28px do fim, porque
   aqui a página termina no rodapé do site, não no último cartão. */
.ur-estilo-classico .ur-win {
  max-width: none;
  padding: 0;
}

/* O título e o corpo são irmãos, então os dois entram no recorte: o
   primeiro sobe por cima da faixa do cabeçalho e arredonda; o segundo
   continua a mesma coluna. */
.ur-estilo-classico .ur-win-pgt,
.ur-estilo-classico .ur-win-body {
  width: 100%;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  background: var(--ur-bg);
  /* Acima do box-shadow do cabeçalho, senão a sombra escurece a emenda. */
  position: relative;
  z-index: 1;
}

/* O `.app-title`: título e descrição na MESMA linha, o segundo alinhado
   pela base e mais apagado. `flex-wrap` porque em 320px as duas partes
   não cabem lado a lado — quebrar lê melhor que estourar a coluna. */
.ur-estilo-classico .ur-win-pgt {
  padding: 16px 12px 2px;
  border-radius: 20px 20px 0 0;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px;
  font-weight: 600;
  letter-spacing: normal;
}

.ur-estilo-classico .ur-win-pgt-tit {
  margin: 0;
  font-size: 21px;
  line-height: 26px;
  font-weight: 600;
}

.ur-estilo-classico .ur-win-pgt-sub {
  color: var(--ur-mu);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}

/* Os cartões respiram 8px, como o `.mb-2` entre os itens da tela antiga. */
.ur-estilo-classico .ur-win-body {
  padding: 10px 12px 0;
  gap: 8px;
}

/* ── Cartão: foto de 90px e o texto empilhado, como o .ganhadorItem ──
   O mesmo cartão aparece no carrossel da home, onde o CSS base o reduz a
   34px por `.ur-hm__wrow-item .ur-win-*` — daí o seletor da home vir em
   cada regra, e não num bloco repetido. */

.ur-estilo-classico .ur-win-card,
.ur-estilo-classico .ur-hm__wrow-item .ur-win-card {
  grid-template-columns: 90px 1fr;
  gap: 15px;
  align-items: center;
  padding: 5px;
  border-radius: 10px;
  box-shadow: 0 4px 3px rgba(0, 0, 0, .08);
}

.ur-estilo-classico .ur-win-av,
.ur-estilo-classico .ur-hm__wrow-item .ur-win-av {
  width: 90px;
  height: 90px;
  border-radius: 10px;
  font-size: 26px;
  box-shadow: 0 4px 3px rgba(0, 0, 0, .08);
}

/* Nome em caixa alta, o traço mais visível do cartão antigo. */
.ur-estilo-classico .ur-win-card-main > b,
.ur-estilo-classico .ur-hm__wrow-item .ur-win-card-main > b {
  font-size: 18px;
  line-height: 21px;
  font-weight: 500;
  text-transform: uppercase;
}

.ur-estilo-classico .ur-win-prize,
.ur-estilo-classico .ur-hm__wrow-item .ur-win-prize {
  font-size: 14px;
  line-height: 17px;
  text-transform: uppercase;
}

.ur-estilo-classico .ur-win-card-main small,
.ur-estilo-classico .ur-hm__wrow-item .ur-win-card-main small {
  font-size: 13px;
  line-height: 17px;
}

/* As linhas rotuladas do legado ("Número da sorte 427"): o rótulo na tinta
   apagada do cartão e o valor em negrito, coladas uma na outra como os
   <p class="mb-0"> do `.ganhadorItem_ganhadorDescricao`. */
.ur-estilo-classico .ur-win-ln,
.ur-estilo-classico .ur-hm__wrow-item .ur-win-ln {
  margin-top: 0;
  color: var(--ur-tx);
  opacity: .85;
}

.ur-estilo-classico .ur-win-ln b {
  font-weight: 700;
}

.ur-estilo-classico .ur-win-meta {
  margin-top: 4px;
}

.ur-estilo-classico .ur-win-badge {
  border-radius: 4px;
  font-size: 11px;
}

.ur-estilo-classico .ur-win-num {
  border-radius: 4px;
  font-size: 12px;
}

/* ══ Meus números ═════════════════════════════════════════════════════
   Legado: cabeçalho do site, a linha "🛒 Meus títulos" e a lista de
   pedidos em cartões altos — foto de 72px à esquerda, cinco linhas de
   texto ao lado (data, nome em caixa alta, estado em TEXTO colorido,
   quantidade, total) e a seta de detalhe à direita. O cartão inteiro é
   um link para /compra/{token}.

   A árvore do cabeçalho e do cartão vem dos overrides em
   estilos/classico/numbers/; aqui está só o acabamento. Os chips de
   número, as pílulas de filtro e o cartão "Olá" são função do Novo
   modelo e ficam — o estilo muda a forma, não o que a tela faz. */

/* Os 24px que o `.ur-mn` reserva no pé sobram: aqui quem fecha a página é
   o rodapé do site, que já traz o seu espaço. `.ur-mn-titulos` (classe do
   override) e não `.ur-mn`, que é a casca de meia dúzia de telas. */
.ur-estilo-classico .ur-mn-titulos {
  padding-bottom: 0;
}

/* 14px entre cartões, o `gap` da `.mt-lista` do legado. */
.ur-estilo-classico .ur-mn-titulos .body {
  gap: 14px;
  padding-bottom: 10px;
}

/* ── A linha do título ────────────────────────────────────────────── */

/* O recuo lateral e o tamanho valem para toda tela com esta casca (Termos,
   oferta): é o `.app-title` do legado, igual em todas. */
.ur-estilo-classico .ur-mn .pgt {
  font-size: 21px;
  font-weight: 600;
}

/* O respiro do topo é só desta tela. São os 16px que o legado dá entre a
   base do cabeçalho e o topo do título (75 → 91, medido), os mesmos de
   /ganhadores e dos Termos — o conteúdo já não sobe por cima da faixa,
   então aqui não há mais recorte a compensar. */
.ur-estilo-classico .ur-mn-titulos .pgt {
  padding: 16px 12px 4px;
}

/* O mesmo papel nas duas telas de documento próprio com cabeçalho do site:
   a linha de título da seção, com o ícone à esquerda. Um nome por papel —
   regra 1 do TOKENS.md —, por isso o seletor é duplo e não a regra. */
.ur-estilo-classico .ur-mn-pgt-tit,
.ur-estilo-classico .ur-termos-pgt-tit {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1.2;
  color: var(--ur-tx);
}

/* ── Cartão do pedido ─────────────────────────────────────────────── */

.ur-estilo-classico .ur-mn .hello,
.ur-estilo-classico .ur-mn .ord {
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}

.ur-estilo-classico .ur-mn .chips button {
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
}

/* Foto de 72px à esquerda das cinco linhas, e a seta na terceira coluna.
   `align-items: center` porque é assim que o cartão antigo alinhava foto
   e texto; a seta vem junto, centrada na altura. */
.ur-estilo-classico .ur-mn .oh {
  grid-template-columns: 72px 1fr auto;
  gap: 12px;
  align-items: center;
  color: inherit;
}

.ur-estilo-classico .ur-mn .oh > .thumb {
  width: 72px;
  height: 72px;
  border-radius: 12px;
}

.ur-estilo-classico .ur-mn .ord-linhas {
  display: block;
  /* Sem isto a coluna do texto não encolhe abaixo do conteúdo (default
     `min-width: auto` do grid) e, em 320px, "Aguardando pagamento" passava
     por baixo da seta. */
  min-width: 0;
  line-height: 1.35;
}

.ur-estilo-classico .ur-mn .oh b {
  font-size: 16px;
  line-height: 19px;
  font-weight: 700;
  text-transform: uppercase;
  /* O nome do legado era uma linha só, cortada com reticências. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ur-estilo-classico .ur-mn .oh small {
  display: block;
  font-size: 13px;
  line-height: 17px;
  color: var(--ur-mu);
}

.ur-estilo-classico .ur-mn .ord-seta {
  font-size: 18px;
  line-height: 1;
  color: var(--ur-mu);
}

/* Estado em texto, como no legado: o selo vira a própria palavra. A cor
   continua sendo a do status (--ok/--wait/--off), só o fundo sai. */
.ur-estilo-classico .ur-mn .st2 {
  display: block;
  justify-self: start;
  padding: 0;
  background: none;
  font-size: 14px;
  line-height: 19px;
  font-weight: 600;
  text-transform: none;
  /* "Aguardando pagamento" é a linha mais longa do cartão: sem o
     `white-space` do componente (que o selo tinha para não quebrar) ela
     cabe em duas linhas em 320px, em vez de invadir a seta. */
  white-space: normal;
}

/* Sem o fundo claro do selo, as três cores de estado caem para 3,2–3,5:1
   sobre o cartão branco — abaixo dos 4,5 que a WCAG AA pede para texto
   deste tamanho. Um quarto da cor do texto da tela (--ur-tx) as puxa para
   ≥4,9 no claro e ≥6,7 no escuro, e cada uma continua reconhecível: verde,
   âmbar e cinza. É mistura SOBRE token, não cor nova — a regra 2 do
   TOKENS.md continua de pé, e no escuro o --ur-tx é claro, então a mesma
   linha serve aos dois temas. */
.ur-estilo-classico .ur-mn .st2.ok { color: color-mix(in srgb, var(--ok) 75%, var(--ur-tx)); }
.ur-estilo-classico .ur-mn .st2.wt { color: color-mix(in srgb, var(--wait) 75%, var(--ur-tx)); }
.ur-estilo-classico .ur-mn .st2.off { color: color-mix(in srgb, var(--off) 75%, var(--ur-tx)); }

/* ══ Termos de uso ════════════════════════════════════════════════════
   Legado: texto corrido na própria página, sem cartão nem moldura, com
   os títulos grandes do navegador (h1 27.85px, h2 24.71px em peso 500) e
   entrelinha 1.2. A tela antiga não tinha CSS nenhum para este bloco —
   reproduzi-la é tirar a caixa, não acrescentar enfeite. */

/* Os 16px que o legado dá entre a base do cabeçalho e o topo do título, os
   mesmos de /ganhadores e de Meus títulos. Só o recuo: o tamanho e o peso já
   vêm do `.ur-mn .pgt` acima, que vale para toda tela com esta casca. */
.ur-estilo-classico .ur-terms .pgt {
  padding: 16px 12px 4px;
}

/* Os 10px do legado entre a base do título e o topo do texto (medido: 116 →
   126). São 10 no total, e o `.pgt` acima já gasta 4 no seu `padding-bottom`
   — daí 6 aqui, não 10. Sem os 40px do pé: quem fecha a página é o rodapé do
   site, que já traz o seu espaço, e os 24px que o `.ur-mn` reserva saem
   junto, como em /ganhadores e em Meus títulos. */
.ur-estilo-classico .ur-terms .body {
  padding-top: 6px;
  padding-bottom: 0;
}

.ur-estilo-classico .ur-terms {
  padding-bottom: 0;
}

.ur-estilo-classico .ur-terms__doc {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 16px;
  line-height: 1.2;
}

.ur-estilo-classico .ur-terms__doc p {
  margin: 0 0 16px;
}

.ur-estilo-classico .ur-terms__doc b,
.ur-estilo-classico .ur-terms__doc strong {
  font-weight: 700;
}

.ur-estilo-classico .ur-terms__doc h1,
.ur-estilo-classico .ur-terms__doc h2,
.ur-estilo-classico .ur-terms__doc h3,
.ur-estilo-classico .ur-terms__doc h4 {
  margin: 0 0 8px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
}

/* Os títulos do legado não eram fixos: vinham do `h1..h4` do Bootstrap, que
   cresce com a viewport até travar em 1200px (style.css:390-427). Com px
   cravado, o documento batia no mobile e ficava ~30% menor que a tela antiga
   no desktop — 28px contra 40px em 1366. É a mesma escala, copiada: tamanho
   de texto não é cor, não sai de token. */
.ur-estilo-classico .ur-terms__doc h1 { font-size: calc(1.375rem + 1.5vw); }
.ur-estilo-classico .ur-terms__doc h2 { font-size: calc(1.325rem + 0.9vw); }
.ur-estilo-classico .ur-terms__doc h3 { font-size: calc(1.3rem + 0.6vw); }
.ur-estilo-classico .ur-terms__doc h4 { font-size: calc(1.275rem + 0.3vw); }

@media (min-width: 1200px) {
  .ur-estilo-classico .ur-terms__doc h1 { font-size: 2.5rem; }
  .ur-estilo-classico .ur-terms__doc h2 { font-size: 2rem; }
  .ur-estilo-classico .ur-terms__doc h3 { font-size: 1.75rem; }
  .ur-estilo-classico .ur-terms__doc h4 { font-size: 1.5rem; }
}

/* ══ Checkout ═════════════════════════════════════════════════════════
   Legado: modal CENTRADO de 540px com os quatro cantos arredondados, não
   a gaveta que sobe do pé da tela. O contrato do JS é a classe .is-open
   no .ur-drawer — ele não sabe de onde o diálogo vem, então basta mudar
   o alinhamento e a entrada. */

.ur-estilo-classico .ur-drawer {
  align-items: center;
  padding: 0 10px;
}

.ur-estilo-classico .ur-drawer .ur-drawer__dialog,
.ur-estilo-classico .ur-sheet .ur-sheet__dialog {
  max-width: 540px;
  /* Entra crescendo, como o modal do Bootstrap antigo: o translate de
     100% é o que fazia a gaveta subir. */
  transform: translate3d(0, 16px, 0);
}

.ur-estilo-classico .ur-sheet__content,
.ur-estilo-classico .ur-sheet .modal-content {
  border-radius: 16px !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .4);
  max-height: calc(100vh - 24px);
}

/* Alça é gesto de gaveta: num modal centrado ela não significa nada. */
.ur-estilo-classico .ur-sheet__handle {
  display: none;
}

.ur-estilo-classico .ur-sheet__head {
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--ur-line);
}

.ur-estilo-classico .ur-sheet__title,
.ur-estilo-classico .ur-sheet .modal-title {
  font-size: 18px;
  letter-spacing: normal;
}

.ur-estilo-classico .ur-sheet__body {
  padding: 14px 16px 18px !important;
}

/* O .scroll da casca vira pilha própria (z-1) e o cabeçalho fica em z-999:
   a gaveta mora dentro do .scroll, então abria por BAIXO do cabeçalho, que
   ficava aceso por cima do véu. Com a gaveta aberta (classe que
   assets/js/ur-drawer.js põe no body), a pilha do conteúdo sobe acima dele. */
.ur-estilo-classico body.ur-drawer-open .ur-mn-page .ur-mn > .scroll {
  z-index: 1000;
}

/* O véu do legado é mais fechado e desfocado que o 55% do Novo. */
.ur-estilo-classico .ur-drawer__scrim {
  opacity: .78;
  backdrop-filter: blur(10px);
}

.ur-estilo-classico .ur-user {
  border-radius: 12px;
  padding: 12px 14px;
}

/* ── CTA: barra cheia com a seta num círculo de contorno ───────────── */

.ur-estilo-classico .ur-cta,
.ur-estilo-classico .ur-sheet button.ur-cta,
.ur-estilo-classico #place_order.ur-cta {
  grid-template-columns: auto 1fr auto;
  min-height: 50px;
  border-radius: 10px !important;
  padding: 12px 16px !important;
}

.ur-estilo-classico .ur-cta__title,
.ur-estilo-classico .ur-cta b {
  font-size: 16px;
  text-align: center;
}

/* Círculo só de contorno, na própria tinta do botão — no legado a seta
   não tem disco preenchido. */
.ur-estilo-classico .ur-cta__icon {
  width: 22px;
  height: 22px;
  border: 1.6px solid currentColor;
  background: none;
  color: var(--ur-accent-ink) !important;
}

.ur-estilo-classico .ur-cta__icon .ph,
.ur-estilo-classico .ur-cta__icon * {
  color: var(--ur-accent-ink) !important;
  font-size: 13px;
}

.ur-estilo-classico .ur-co-switch {
  font-size: 12px;
}

.ur-estilo-classico .ur-safe {
  margin-top: 14px;
  font-size: 11px;
  letter-spacing: .14em;
}

/* ══ Funil de oferta (upsell e cross-sell) ════════════════════════════
   Legado: bloco de 640px centrado, título de 1.45rem, o cartão da oferta
   com um véu diagonal por cima da cor e um fio claro de contorno, e o
   "Não, obrigado" bem separado dele.

   O verde do cartão é pedido do cliente (não segue o modelo de cor) e
   vem do CSS base — aqui só mudam a forma e o véu, que são rgba. */

.ur-estilo-classico .ur-fn .body {
  max-width: 640px;
  margin: 0 auto;
  padding: 18px 14px 42px;
}

.ur-estilo-classico .ur-fn-hero {
  margin: 4px 0 18px;
}

.ur-estilo-classico .ur-fn-title {
  font-size: 23px;
  line-height: 1.25;
  margin: 0 0 6px;
}

.ur-estilo-classico .ur-fn-sub {
  font-size: 15px;
}

@media (max-width: 420px) {
  .ur-estilo-classico .ur-fn-title { font-size: 20px; }
}

/* O selo pulsante do cross-sell: no legado é uma pílula vermelha, cor que
   não existe nos tokens (--ur-off é estado, não marketing). Fica no
   acento; o que muda é o tamanho da pílula. */
.ur-estilo-classico .ur-fn-badge {
  padding: 5px 14px;
  font-size: 12.5px;
  margin-bottom: 10px;
}

.ur-estilo-classico .ur-fn-video {
  border-radius: 14px;
  margin-bottom: 18px;
}

.ur-estilo-classico .ur-fn-prize {
  gap: 14px;
  padding: 14px;
  margin-bottom: 16px;
}

.ur-estilo-classico .ur-fn-prize img {
  width: 84px;
  height: 84px;
}

.ur-estilo-classico .ur-fn-prize__name {
  font-size: 17px;
  line-height: 1.3;
}

.ur-estilo-classico .ur-fn-prize__when {
  font-size: 14px;
  margin-top: 3px;
}

.ur-estilo-classico .ur-fn-card {
  gap: 14px;
  border: 1px solid rgba(255, 255, 255, .1);
  padding: 16px 18px;
}

/* No legado o cartão tem um véu diagonal PARADO sobre a cor, não o
   brilho que varre. É o mesmo ::after — vira a camada estática. */
.ur-estilo-classico .ur-fn-card::after {
  inset: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(0, 0, 0, .16) 0%, rgba(255, 255, 255, .16) 100%);
  animation: none;
}

.ur-estilo-classico .ur-fn-card__txt {
  font-size: 16px;
}

.ur-estilo-classico .ur-fn-card__go {
  font-size: 22px;
}

.ur-estilo-classico .ur-fn-skip {
  margin-top: 18px;
  font-size: 16px;
}

/* ══ Menu lateral e rodapé ════════════════════════════════════════════
   Legado: o menu não é gaveta de 390px — é a tela inteira na cor de
   destaque, com uma faixa escura no topo (logo + "x" em círculo), o
   cartão do usuário translúcido e os itens separados por um fio. O
   contrato do JS é o #mobileMenu com .modal/.show e os data-bs-*: nada
   aqui toca nisso, só a forma.

   Os véus saem do PRÓPRIO acento via color-mix sobre --ur-accent-ink:
   no Dourado dá um véu escuro sobre o amarelo, no Bordô um véu claro
   sobre o vinho — rgba fixo só serviria a metade dos modelos. */

/* A casca clássica põe o cabeçalho em z-999 e o .scroll em z-1; o drawer
   é irmão deles e, sem pilha própria, abria ATRÁS da página. */
.ur-estilo-classico #mobileMenu .ur-menu__dialog,
.ur-estilo-classico #mobileMenu.modal .modal-dialog.ur-menu__dialog {
  width: 100%;
  max-width: 100%;
  z-index: 1060;
}

.ur-estilo-classico #mobileMenu .ur-menu__panel,
.ur-estilo-classico #mobileMenu .modal-content.ur-menu__panel {
  background: var(--ur-accent) !important;
  color: var(--ur-accent-ink);
  box-shadow: none;
}

/* Faixa escura do topo. Aqui ela é VÉU preto sobre o acento, não token:
   quem mora nela é o logo da loja, quase sempre em branco, e qualquer
   token claro em algum dos oito modelos (ink branco do Rosa, bege do
   Bordô) o apagaria. Véu é profundidade, não cor de marca. */
.ur-estilo-classico #mobileMenu .ur-menu__dh {
  padding: 18px 16px;
  border-bottom: 0;
  background: rgba(0, 0, 0, .88);
  color: rgba(255, 255, 255, .92);
}

.ur-estilo-classico #mobileMenu .ur-menu__brand {
  color: inherit;
}

.ur-estilo-classico #mobileMenu .ur-menu__logo,
.ur-estilo-classico #mobileMenu .ur-menu__logo.img-fluid {
  max-height: 35px;
}

/* "x" em círculo vazado, na própria tinta da faixa. */
.ur-estilo-classico #mobileMenu .ur-menu__x {
  width: 38px;
  height: 38px;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: none;
  /* Herda a tinta da faixa: --ur-tx é a do card e sumiria no escuro dela. */
  color: inherit;
  font-size: 19px;
}

.ur-estilo-classico #mobileMenu .ur-menu__x .ph {
  font-size: 19px;
}

/* Coluna central no desktop: no legado o conteúdo não se espalha pela
   largura toda da tela cheia. */
.ur-estilo-classico #mobileMenu .ur-menu__who,
.ur-estilo-classico #mobileMenu .ur-menu__list {
  width: 100%;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.ur-estilo-classico #mobileMenu .ur-menu__who {
  margin-top: 16px;
  margin-bottom: 8px;
  width: calc(100% - 32px);
  padding: 16px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--ur-accent-ink) 12%, transparent);
}

.ur-estilo-classico #mobileMenu .ur-menu__who b {
  color: var(--ur-accent-ink);
  font-size: 16px;
  font-weight: 400;
}

.ur-estilo-classico #mobileMenu .ur-menu__who small {
  color: var(--ur-accent-ink);
  opacity: .75;
}

/* Botão cheio sobre o campo de acento = o negativo dele: fundo na tinta,
   texto no acento. É o único par com contraste garantido nos 8 modelos. */
.ur-estilo-classico #mobileMenu .ur-menu__cta,
.ur-estilo-classico #mobileMenu .ur-menu__cta.btn,
.ur-estilo-classico #mobileMenu .modal-content .ur-menu__cta {
  background: var(--ur-accent-ink) !important;
  color: var(--ur-accent) !important;
  border-radius: 6px;
  padding: 12px;
}

.ur-estilo-classico #mobileMenu .ur-menu__cta:hover,
.ur-estilo-classico #mobileMenu .ur-menu__cta:focus,
.ur-estilo-classico #mobileMenu .ur-menu__cta:active {
  background: var(--ur-accent-ink) !important;
  color: var(--ur-accent) !important;
  opacity: .9;
}

.ur-estilo-classico #mobileMenu .ur-menu__cta-2 {
  border: 1.5px solid var(--ur-accent-ink);
  color: var(--ur-accent-ink);
  border-radius: 6px;
}

.ur-estilo-classico #mobileMenu .ur-menu__list {
  padding: 0;
}

/* Linha de item: fio embaixo de cada uma, ícone sem chip e 20px até o
   rótulo — o desenho do <li> antigo. */
.ur-estilo-classico #mobileMenu .ur-menu__item {
  gap: 20px;
  height: 56px;
  min-height: 56px;
  max-height: 56px;
  flex: 0 0 56px !important;
  padding: 0 16px;
  border-radius: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ur-accent-ink) 15%, transparent);
  color: var(--ur-accent-ink);
  font-size: 14.4px;
}

.ur-estilo-classico #mobileMenu .ur-menu__item:last-child {
  border-bottom: 0;
}

.ur-estilo-classico #mobileMenu .ur-menu__item:hover,
.ur-estilo-classico #mobileMenu .ur-menu__item.is-active {
  background: color-mix(in srgb, var(--ur-accent-ink) 10%, transparent);
  color: var(--ur-accent-ink);
}

.ur-estilo-classico #mobileMenu .ur-menu__ic {
  background: none;
  color: var(--ur-accent-ink);
}

.ur-estilo-classico #mobileMenu .ur-menu__ic .ph {
  font-size: 20px;
}

/* Com fio em todo item o separador vira um segundo traço no mesmo lugar. */
.ur-estilo-classico #mobileMenu .ur-menu__sep,
.ur-estilo-classico #mobileMenu .ur-menu__list hr {
  display: none;
}

.ur-estilo-classico #mobileMenu .ur-menu__tag {
  background: var(--ur-accent-ink);
  color: var(--ur-accent);
  border-radius: 4px;
}

.ur-estilo-classico #mobileMenu .ur-menu__foot {
  padding: 14px 16px;
  border-top: 1px solid color-mix(in srgb, var(--ur-accent-ink) 15%, transparent);
  color: var(--ur-accent-ink);
  opacity: .7;
  text-align: center;
}

/* ── Rodapé ───────────────────────────────────────────────────────────
   No legado ele não é cartão: é o crédito discreto no próprio fundo da
   página, no fim da rolagem. Os links de contato ficam (o antigo não os
   tinha, mas tirá-los esconderia caminho de suporte do cliente). */
.ur-estilo-classico .ur-cft {
  margin-top: 0;
  padding: 26px 16px 28px;
  background: none;
  gap: 8px;
}

.ur-estilo-classico .ur-cft__logo {
  max-height: 28px;
  opacity: .55;
}

.ur-estilo-classico .ur-cft__dir {
  font-size: 12px;
  line-height: 18px;
  opacity: .6;
}

.ur-estilo-classico .ur-cft__tit {
  font-size: 12px;
  letter-spacing: .04em;
  opacity: .75;
}

.ur-estilo-classico .ur-cft__link {
  font-size: 12px;
}