/* ═══════════════════════════════════════════════════
   PAGUE COM SLIDES — Canva
   Base: layout do artifact (1024px de referência; o rem é fluido).
   Da v1 ficam o header com a barra de progresso, a setinha do cursor,
   o FAQ e a cortina de login — tudo em px, para não escalar com o rem.
   Sem drop shadow em lugar nenhum (pedido do cliente).
   ═══════════════════════════════════════════════════ */

@font-face{ font-family:"Canva Sans"; font-weight:400; font-style:normal; font-display:swap;
  src:url("fonts/canva-sans-regular.woff2") format("woff2"); }
@font-face{ font-family:"Canva Sans"; font-weight:500 600; font-style:normal; font-display:swap;
  src:url("fonts/canva-sans-medium.woff2") format("woff2"); }
@font-face{ font-family:"Canva Sans"; font-weight:700 900; font-style:normal; font-display:swap;
  src:url("fonts/canva-sans-bold.woff2") format("woff2"); }

/* Canva Sans Display — PENDENTE (arquivos não enviados). Salvar em assets/fonts/ e descomentar:
@font-face{ font-family:"Canva Sans Display"; font-weight:400; font-style:normal; font-display:swap;
  src:url("fonts/canva-sans-display-regular.woff2") format("woff2"); }
@font-face{ font-family:"Canva Sans Display"; font-weight:500 600; font-style:normal; font-display:swap;
  src:url("fonts/canva-sans-display-medium.woff2") format("woff2"); }
@font-face{ font-family:"Canva Sans Display"; font-weight:700 900; font-style:normal; font-display:swap;
  src:url("fonts/canva-sans-display-bold.woff2") format("woff2"); }
*/

:root{
  --purple:      #7A2AE9;
  --purple-lit:  #8C52FF;
  --purple-neon: #992AFE;
  --violet:      #5736FA;
  --blue:        #4853F9;
  --cyan:        #0CC0DF;
  --cyan-lit:    #50D4EB;
  --cyan-text:   #29D8F2;
  --green:       #00BF63;
  --green-tag:   #2A9B3B;                 /* verde do cursor de colaboração do Canva (referência do cliente, 15/10) */
  --orange:      #FF6105;
  --red:         #FF3B4B;
  --teal:        #13A3B5;
  --sky:         #138EFF;
  --night:       #050514;
  --ink:         #111111;
  --gray:        #737373;
  --white:       #FFFFFF;

  /* ── brand relift (Canva, out/2026): gradiente claro/médio/escuro, texto azul sobre fundo claro,
        caixas brancas com contorno, cantos de 30px (a escala acompanha o rem) ── */
  --bl-sky:      #53ADE9;
  --bl-blue:     #3955FF;
  --bl-violet:   #652DF2;
  --text-blue:   #4853FA;                 /* texto sobre fundo claro (medido na proposta) */
  --line-blue:   #4853FA;                 /* contorno das caixas claras */
  --tint:        #F1F5FF;                 /* fundo suave das seções claras */
  --brand-btn:   #E84FF6;                 /* CTA e estrelas dos cards (magenta da proposta de diagramação) */
  --h-grad:      linear-gradient(95deg, #19B8FF 0%, #4F6BFA 48%, #7A2AE9 100%);   /* título em gradiente: ciano → azul → violeta */

  --bar-h: 3px;
  --nav-h: 67px;                          /* header (64) + barra de progresso (3) logo abaixo */
  --radius-card: 1.5rem;                  /* 30px a partir de 1280px */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.22,1,.36,1);  /* curva usada nas peças que vieram da v1 */
  --font: "Canva Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* A proposta usa Canva Sans DISPLAY (Regular/Medium/Bold) nos títulos, menu, nomes e preços dos prêmios.
     Os arquivos da Display ainda não estão no projeto: enquanto isso os títulos usam a Canva Sans.
     Quando chegarem, declarar o @font-face (ver bloco comentado no topo) e trocar esta linha para
     --font-display: "Canva Sans Display", var(--font); */
  --font-display: var(--font);
}

/* escala fluida: no layout de 1024px, 1rem = 16px; trava em 20px a partir de 1280px */
html{ font-size:clamp(14px, 1.5625vw, 20px); scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (max-width:900px){ html{ font-size:16px; } }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

*,*::before,*::after{ box-sizing:border-box; }
body{
  margin:0; font-family:var(--font); color:var(--white); background:var(--night);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
body.modal-open{ overflow:hidden; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; padding:0; }
h1,h2,h3,p{ margin:0; }
.h2, .hero__title, .prize__name, .step h3, .qa__name{ font-family:var(--font-display); }
ol,ul{ margin:0; padding:0; list-style:none; }
svg{ display:block; }
:focus-visible{ outline:3px solid var(--cyan-lit); outline-offset:3px; border-radius:.4rem; }
.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.anchor{ position:relative; top:calc(-1 * var(--nav-h) - 1rem); display:block; height:0; }
section{ scroll-margin-top:var(--nav-h); }

.wrap{ width:min(86.5%, 55.4rem); margin:0 auto; }
.center{ text-align:center; }

/* setinha personalizada: some o cursor nativo em telas com ponteiro fino */
@media (hover:hover) and (pointer:fine){
  body.has-cursor,
  body.has-cursor *{ cursor:none !important; }
}

/* ═══════════ TIPOGRAFIA ═══════════ */
.eyebrow{ font-weight:700; font-size:1.07rem; letter-spacing:.02em; text-transform:uppercase; text-align:center; }
.h2{
  font-weight:500; font-size:3rem; line-height:.8; letter-spacing:-.03em; text-align:center;   /* 60 pt, entrelinha 0,8 (medido na proposta) */
  margin-top:1.5rem; text-wrap:balance;
}
.lede{ font-size:1.07rem; text-align:center; margin-top:2.2rem; opacity:.95; }
.prizes .lede{ margin-top:1.1rem; }   /* subtítulo colado ao título: metade do espaço padrão */

/* ═══════════ BOTÕES ═══════════ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:700; font-size:1rem; letter-spacing:.02em; text-transform:uppercase;
  height:3rem; padding:0 2rem; border-radius:.6rem; color:var(--white);
  transition:transform .35s var(--ease), filter .35s var(--ease);
  will-change:transform;
}
.btn:hover{ transform:translateY(-2px); filter:brightness(1.06); }
.btn:active{ transform:translateY(0) scale(.98); }
.btn--cyan{ background:var(--cyan); }
.btn--green{ background:var(--green); min-width:14.8rem; }
/* nome histórico (o CTA já foi laranja): agora segue --brand-btn, a cor do layout proposto.
   Para voltar ao laranja do doctype Apresentações, troque só o valor de --brand-btn. */
.btn--orange{ background:var(--brand-btn); }
.btn--ghost{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22); }
.btn svg{ width:1.1em; height:1.1em; }

/* ═══════════ BARRA DE PROGRESSO (v1) ═══════════ */
/* a barra mora dentro do header e acompanha a altura dele (inclusive compacto) */
.scroll-progress{
  position:absolute; top:100%; left:0; right:0; height:var(--bar-h); z-index:1;
  background:transparent;
}
.scroll-progress i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--purple-neon), var(--sky), var(--cyan));
}

/* ═══════════ NAVBAR (brand relift) ═══════════
   Transparente sobre o banner: texto azul, aba ativa só com contorno e logo em gradiente.
   Ao rolar ganha fundo branco para continuar legível sobre as demais seções. */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:transparent;
  transition:background .35s var(--ease-out);
}
.nav.is-stuck{ background:rgba(255,255,255,.93); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.nav__inner{
  width:min(100% - 40px, 1340px); margin-inline:auto;
  display:flex; align-items:center; gap:32px;
  height:64px;
  transition:height .5s var(--ease-out);
}
.nav.is-stuck .nav__inner{ height:56px; }

/* logo já com o gradiente da marca no PNG (antes era máscara CSS, que o Chrome bloqueia
   quando a página é aberta direto do disco, file://, e o logo sumia) */
.nav__logo{ display:block; transition:transform .5s var(--ease-out); }
.nav__logo img{ display:block; height:26px; width:auto; }
.nav__logo:hover{ transform:scale(1.06) rotate(-2deg); }

.nav__links{ position:relative; display:flex; align-items:center; gap:6px; margin-right:auto; }
.nav__links a{
  position:relative; z-index:2;
  padding:8px 15px; border-radius:999px;
  font-size:14px; font-weight:500; line-height:1.55; color:var(--text-blue);
  transition:color .28s var(--ease-out), transform .28s var(--ease-out);
}
.nav__links a:hover{ color:var(--bl-violet); transform:translateY(-1px); }
.nav__links a.is-active{ color:var(--text-blue); }

/* aba ativa: só contorno */
.nav__pill{
  position:absolute; z-index:1; top:50%; left:0; height:34px; width:0;
  transform:translateY(-50%);
  background:transparent; border:1.5px solid var(--text-blue);
  border-radius:999px;
  opacity:0;
  transition:transform .45s var(--ease-out), width .45s var(--ease-out), opacity .3s var(--ease-out);
}
.nav__pill.is-on{ opacity:1; }

.nav__burger{ display:none; margin-left:auto; width:29px; height:22px; flex-direction:column; justify-content:space-between; }   /* mesma altura do logo no mobile (22px) */
.nav__burger span{
  display:block; height:3px; border-radius:2px; background:var(--text-blue);
  transition:transform .28s var(--ease-out), opacity .28s var(--ease-out);
}
.nav__burger.is-open span:nth-child(1){ transform:translateY(9.5px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2){ opacity:0; }
.nav__burger.is-open span:nth-child(3){ transform:translateY(-9.5px) rotate(-45deg); }

/* ═══════════ HERO / BANNER ═══════════
   Prancheta 1440×810 da proposta: tudo em % e cqw, então escala igual em qualquer largura.
   Camadas: título (atrás) → base com as mãos → tela do notebook → elementos 3D → CTA. */
.hero{
  position:relative; overflow:hidden; color:var(--white);
  /* gradiente único do brand relift (cores medidas na proposta): branco → ciano → azul → violeta */
  background:linear-gradient(180deg, #FEFEFE 0%, #E8FAFE 10%, #A1EEFE 20%, #2CD9FE 30%, #19C1FF 40%,
    #209EFF 50%, #277DFF 60%, #325EFD 70%, #484AF9 80%, #5F35F5 90%, #7323F2 100%);
}
.hero__stage{
  position:relative; width:min(100%, 72rem); margin:0 auto; aspect-ratio:16 / 9;
  container-type:inline-size; overflow:hidden;
}
.hero__title{
  position:absolute; inset:0; margin:0; z-index:1; pointer-events:none;
  font-weight:500; line-height:1; letter-spacing:-.035em; color:var(--white);
}
/* título centralizado na vertical com a tela do notebook (centro da tela a 31,3% da prancheta). Título grande: "Pague" à esquerda e "com Slides" à direita da tampa (a moldura vai de ~32,5% a ~67,5% da prancheta;
   as pontas dos polegares sobem até ~31% e ~69%). "Pague" termina em 30,5%; "com Slides" é ancorado pela direita
   (3% de margem): se a fonte do navegador for um pouco mais larga, ele cresce para dentro, nunca sai da prancheta. */
.hero__w{ position:absolute; top:31.3%; transform:translateY(-50%); white-space:nowrap; font-size:6.7cqw; }
.hero__w--l{ right:69.5%; }
.hero__w--r{ right:3%; }
.hero__w small{ font-size:.5em; letter-spacing:-.02em; }

/* base: a MESMA arte da equipe (mãos, notebook e posição idênticos), só com os dedos corrigidos (cada mão mostra o dedo indicador
   apontando para cima e três dedos no teclado; o polegar fica escondido; antes o desenho tinha seis). Recortada simétrica em torno da tela: o centro do notebook cai no meio
   da prancheta (15,05% + 69,9%/2 = 50%). A caixa tem 1479×1284 px. */
.hero__laptop{ position:absolute; left:15.05%; top:8.5%; width:69.9%; z-index:2;   /* grande: a tampa ocupa 44% da largura da prancheta; os braços saem pela borda de baixo (cortados pelo overflow) */ }
/* a base (mãos + notebook) nunca se mexe */
.hero__frame{ display:block; width:100%; height:auto; pointer-events:none; user-select:none; }
/* a tela fica DENTRO da moldura do notebook: a área preta da imagem tem 741×510 px e a janela do slide é um
   16:10 exato de 712×445 px dentro dela (sobra a moldura preta em volta). Todas as capas têm essa proporção
   (1280×800): nenhuma é cortada nem ganha tarja. */
.hero__screen{
  position:absolute; z-index:1; left:25.93%; top:3.43%; width:48.14%; height:34.66%;
  overflow:hidden; border-radius:.3cqw; background:#050505;
}
.hero__screen img, .hero__screen video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;
  opacity:0; transition:opacity .3s var(--ease-out);   /* troca seca: o ritmo é de 1,8 s por prêmio */
}
/* um slide por vez na tela do notebook */
.hero__screen .is-on{ opacity:1; }
/* elementos 3D do prêmio em volta da base: o conjunto da vez entra (com um pulinho escalonado)
   e o anterior sai. Posição e tamanho em % da base, vindos de HERO_ELEMENTS. */
.hero__elements{
  /* camada com a geometria da caixa antiga da base: as posições x/y/w dos elementos (medidas no PDF)
     seguem valendo mesmo com a base nova */
  position:absolute; left:2.2%; top:10.6%; width:99.2%; height:93.8%; z-index:3; pointer-events:none;   /* mesma posição na prancheta de antes: as peças continuam em volta, agora com o notebook maior no meio */
}
.hero__set{ position:absolute; inset:0; opacity:0; transition:opacity .25s var(--ease); }
.hero__set.is-on{ opacity:1; }
.hero__el{
  position:absolute; left:var(--x); top:var(--y); width:var(--w);
  opacity:0; transform:translate(-50%,-50%) rotate(var(--r)) scale(.6);
  /* entrada escalonada no transform; o empurrão do mouse (translate/rotate/scale, via main.js) tem transição própria */
  transition:transform .5s var(--ease-out) calc(var(--k) * 70ms), opacity .25s var(--ease) calc(var(--k) * 70ms),
             translate .26s cubic-bezier(.22,1,.36,1), rotate .26s cubic-bezier(.22,1,.36,1), scale .26s cubic-bezier(.22,1,.36,1);
}
.hero__set.is-on .hero__el{ opacity:1; transform:translate(-50%,-50%) rotate(var(--r)) scale(1); }
/* flutuação contínua (igual ao Snapdragon Insiders Club): sobe e desce ~8% da altura da peça e balança ±2°,
   cada uma no seu ritmo. Só o conjunto visível anima. */
.hero__img{
  display:block; width:100%; height:auto;
  animation:heroFloat var(--fd, 8s) ease-in-out var(--fl, 0s) infinite alternate;
}
.hero__set:not(.is-on) .hero__img{ animation-play-state:paused; }
@keyframes heroFloat{
  from{ translate:0 -8%; rotate:-2deg; }
  to  { translate:0 8%;  rotate:2deg; }
}
@media (prefers-reduced-motion:reduce){ .hero__img{ animation:none; } }

/* CTA do banner: branco com texto azul, sobre as mãos */
.hero__cta{
  position:absolute; z-index:4; left:41.65%; top:83%; width:16.7%; height:7%;   /* centrado: 41,65% + 16,7%/2 = 50% */
  background:var(--white); color:var(--text-blue);
  border-radius:.9cqw; font-size:1.8cqw; font-weight:400; text-transform:none; letter-spacing:0; padding:0;
}

/* ═══════════ FUNDO (brand relift) ═══════════
   O gradiente único da proposta (branco → ciano → azul → violeta) começa no banner e recomeça
   em Prêmios: cada seção carrega a sua fatia e as pontas se encontram na mesma cor
   (Prêmios termina em #209EFF, Detalhes em #325EFD, FAQ fecha em #7323F2). */
.body-grad{ position:relative; background:#fff; }

/* texto sobre fundo claro: azul da marca; títulos em gradiente (Canva Sans Display Medium no brand) */
.steps, .prizes{ color:var(--text-blue); }
.steps .eyebrow, .prizes .eyebrow{ color:var(--text-blue); }
.steps .h2, .prizes .h2{
  /* o gradiente corre só pela largura do texto (começa no ciano) e a folga embaixo
     impede que o recorte do gradiente corte a perna do "p" com o entrelinha apertado */
  width:fit-content; margin-inline:auto; padding-bottom:.24em; margin-bottom:-.24em;
  background:var(--h-grad); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.steps .lede, .prizes .lede{ color:var(--text-blue); opacity:1; }
.prizes .lede{ font-size:1.23rem; }
/* a proposta usa quase a largura toda (94%) nestas duas seções */
.steps .wrap, .prizes .wrap{ width:min(94%, 67.6rem); }

/* ═══════════ COMO PARTICIPAR ═══════════ */
.steps{ --u:1.217rem; padding:4.4rem 0 5.4rem; background:#fff; }
.steps__grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:1.55rem; margin-top:5.6rem;
}
.step{
  position:relative; border-radius:2.6rem;
  padding:calc(1.6 * var(--u)) calc(1.25 * var(--u)) calc(80% + .3 * var(--u));
  overflow:hidden; isolation:isolate;
  transition:transform .5s var(--ease);
}
.step:hover{ transform:translateY(calc(-.4 * var(--u))); }
.steps__grid .step{ overflow:visible; }
.step::before{ content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1; }
.step > *{ position:relative; }
/* caixa branca com contorno azul (brand relift): a arte de cada passo tem fundo branco ou transparente e assenta direto nela */
.step::before{ background:var(--white); border:2px solid var(--line-blue); }

.step__num{
  position:absolute; top:calc(-1.125 * var(--u)); left:50%; transform:translateX(-50%);
  width:calc(2.25 * var(--u)); height:calc(2.25 * var(--u)); border-radius:50%; background:var(--white);
  border:2px solid var(--line-blue); color:var(--line-blue);
  display:grid; place-items:center; font-weight:700; font-size:calc(1.1 * var(--u)); line-height:1;
}
.step h3{ font-weight:700; font-size:calc(.9 * var(--u)); line-height:1.2; letter-spacing:-.01em; color:var(--text-blue); }
.step p{ font-size:calc(.64 * var(--u)); line-height:1.4; margin-top:calc(.5 * var(--u)); color:var(--text-blue); }
.step p b{ font-weight:700; }

/* mídia de cada passo: as quatro artes têm a mesma moldura (largura do card x 80%), presas ao pé do card e
   recortadas pelos cantos dele; o card reserva embaixo a altura da arte (padding em % = % da largura do card),
   então o texto nunca cobre a imagem e a composição é a mesma em qualquer tela */
.step__media{
  /* 2px de recuo para a arte não cobrir o contorno azul do card */
  position:absolute; left:2px; right:2px; bottom:2px; aspect-ratio:100 / 80; overflow:hidden;
  border-radius:0 0 calc(2.6rem - 2px) calc(2.6rem - 2px); z-index:-1; pointer-events:none;
}
.step__media img{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 100%; }
/* Passo 3: moldura de gravação por cima da foto */
.step__rec{
  position:absolute; right:12%; top:7%; display:inline-flex; align-items:center; gap:calc(.25 * var(--u));
  font-weight:700; font-size:calc(.5 * var(--u)); letter-spacing:.06em; color:var(--text-blue);
}
.step__rec i{ width:calc(.42 * var(--u)); height:calc(.42 * var(--u)); border-radius:50%; background:#FF1212; animation:blink 1.2s steps(2) infinite; }
@keyframes blink{ to{ opacity:.25; } }
.step__corner{ position:absolute; width:calc(1.3 * var(--u)); height:calc(1.3 * var(--u)); border:2px solid var(--line-blue); }
.step__corner--tl{ left:6%; top:5%; border-right:0; border-bottom:0; }
.step__corner--tr{ right:6%; top:5%; border-left:0; border-bottom:0; }
.step__corner--bl{ left:6%; bottom:10%; border-right:0; border-top:0; }
.step__corner--br{ right:6%; bottom:10%; border-left:0; border-top:0; }

/* ═══════════ PRÊMIOS ═══════════ */
.prizes{
  padding:0 0 5.5rem;
  background:linear-gradient(180deg, #FEFEFE 0%, #E8FAFE 8%, #A1EEFE 18%, #2CD9FE 30%, #19C1FF 52%, #209EFF 100%);
}
.prizes__more{ margin-top:2.6rem; text-align:center; font-size:.85rem; color:var(--white); }
.prizes__more a{ font-weight:700; border-bottom:1px solid currentColor; }
.prizes__grid{
  /* 13 prêmios: as linhas são centralizadas, então a última (sozinha) fica no meio */
  display:flex; flex-wrap:wrap; justify-content:center; gap:1.4rem 1.05rem; margin-top:3.6rem;
}
.prize{
  width:calc((100% - 3 * 1.05rem) / 4);
  background:var(--white); color:var(--ink); border-radius:2.1rem; padding:.4rem .4rem 1.4rem;
  display:flex; flex-direction:column;
  transition:transform .5s var(--ease), opacity .5s var(--ease);
}
.prize:hover{ transform:translateY(-.4rem); }
.prize[hidden]{ display:none; }
.prize__media{ border-radius:1.7rem; overflow:hidden; aspect-ratio:1.37; }
.prize__media img, .prize__media video{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.prize:hover .prize__media img, .prize:hover .prize__media video{ transform:scale(1.05); }
.prize__body{ padding:.95rem 1.15rem 0; display:flex; flex-direction:column; align-items:flex-start; gap:.45rem; flex:1; }
.prize__cta{ flex:none; }
.prize__row + .prize__cta{ margin-top:auto; }
.prize__name{ font-weight:400; font-size:1.12rem; line-height:1.15; letter-spacing:-.02em; }
.stars{ --star:.78rem; display:flex; gap:.12rem; color:var(--brand-btn); }
.stars svg{ width:var(--star); height:var(--star); }
.prize__row{ align-self:stretch; display:flex; align-items:baseline; justify-content:space-between; gap:.6rem; }
.prize__price{ font-size:.8rem; color:var(--gray); }
.prize__price--partner{ color:var(--gray); font-weight:700; }   /* mesma cor dos valores */
/* parceiras: faixa branca com o(s) logo(s) por cima da imagem do prêmio (card e modal) */
.prize__media, .modal__media{ position:relative; }
.prize__badge{
  position:absolute; left:.7rem; top:.7rem; z-index:2;
  display:inline-flex; align-items:center; gap:.75rem;
  padding:.38rem .85rem; border-radius:999px;
  background:rgba(255,255,255,.95); box-shadow:0 .25rem 1rem rgba(20,20,70,.22);
  font-size:.72rem; font-weight:700; color:var(--text-blue);
}
.prize__badge img + img{ padding-left:.75rem; border-left:1px solid #D9DEF3; box-sizing:content-box; }
/* tamanhos que equilibram logos de proporções diferentes (altura em rem) */
.prize__badge img[data-p]{ display:block; width:auto; object-fit:contain; }
.prize__badge img[data-p="burger-king"]{ height:1.75rem; }
.prize__badge img[data-p="serasa"]{ height:1.35rem; }
.prize__badge img[data-p="whirlpool"]{ height:1.2rem; }
.prize__badge img[data-p="consul"]{ height:1rem; }
#modal-badge .prize__badge{ left:1.1rem; top:1.1rem; }
#modal-badge .prize__badge img[data-p]{ height:auto; }
#modal-badge .prize__badge img[data-p="burger-king"]{ height:2rem; }
#modal-badge .prize__badge img[data-p="serasa"]{ height:1.5rem; }
#modal-badge .prize__badge img[data-p="whirlpool"]{ height:1.3rem; }
#modal-badge .prize__badge img[data-p="consul"]{ height:1.1rem; }
.prize__info{
  font-size:.7rem; font-weight:700; color:var(--text-blue); white-space:nowrap;
  border-bottom:1px solid transparent; transition:border-color .25s var(--ease);
}
.prize__info:hover{ border-bottom-color:currentColor; }
s{ text-decoration-thickness:1px; }
/* botão magenta da proposta: retângulo arredondado, ícone de Slides à esquerda do texto */
.prize__cta{
  align-self:stretch; margin-top:auto; height:2.2rem; padding:0 .8rem; border-radius:.65rem;
  font-size:.82rem; text-transform:none; letter-spacing:0; gap:.55rem;
}
.prize__cta svg{ width:1.05rem; height:1.05rem; flex:none; }
/* ═══════════ DETALHES DOS PRÊMIOS (página premios.html) ═══════════
   Caixas claras com contorno azul (mesma linguagem do Como participar). O fundo é o mesmo gradiente da
   loja: branco no topo (sob o menu), ciano, azul e fechamento em violeta junto do rodapé. */
.details{
  padding:calc(var(--nav-h) + 4.2rem) 0 5.6rem; min-height:100vh;
  background:linear-gradient(180deg, #FEFEFE 0%, #E8FAFE 9%, #A1EEFE 20%, #2CD9FE 33%, #19C1FF 46%,
    #209EFF 60%, #277DFF 70%, #325EFD 80%, #484AF9 88%, #5F35F5 94%, #7323F2 100%);
}
/* cabeçalho sobre a parte clara: azul da marca, título em gradiente (igual à loja) */
.details .eyebrow{ color:var(--text-blue); }
.details .h2{
  width:fit-content; margin-inline:auto; padding-bottom:.24em; margin-bottom:-.24em;
  background:var(--h-grad); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.details .lede{ color:var(--text-blue); font-size:1.23rem; }
.details__facts{
  max-width:50rem; margin:2.2rem auto 0;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:.8rem;
}
.details__facts li{
  background:var(--white); border-radius:1.4rem;
  padding:1.1rem 1.2rem; font-size:.74rem; line-height:1.45; color:var(--text-blue);
}
.details__facts b{ display:block; margin-bottom:.2rem; font-size:.82rem; }
.details__list{ max-width:46rem; margin:2.4rem auto 0; display:flex; flex-direction:column; gap:12px; }
.detail{ scroll-margin-top:calc(var(--nav-h) + 1rem); }
.details__foot{ margin-top:2rem; text-align:center; font-size:.82rem; color:var(--white); }
.details__foot a{ font-weight:700; border-bottom:1px solid currentColor; }

.qa__thumb{ width:46px; height:46px; flex:none; border-radius:12px; object-fit:cover; }
.qa__main{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.qa__name{ font-size:16.6px; font-weight:700; line-height:1.25; }
.qa__tags{ display:flex; flex-wrap:wrap; gap:6px; }
.tag{
  font-size:11.5px; font-weight:700; line-height:1.5; letter-spacing:.02em; padding:1px 10px; border-radius:999px;
  background:#EEF2FF; border:1px solid #D2DBFF; color:var(--text-blue);
}
.tag--del{ background:#F6ECFF; border-color:#E3C9FA; color:#8A2FC9; }
.tag--partner{ display:inline-flex; align-items:center; gap:8px; background:#fff; border-color:#D9DEF3; padding:2px 10px; }
.tag--partner img[data-p]{ height:.95rem !important; }
.tag--partner img[data-p="burger-king"]{ height:1.3rem !important; }

/* lista "o que é / como é entregue / é em dinheiro? / prazo" */
.dl{ margin:0; display:grid; gap:14px; }
.dl > div{ display:grid; grid-template-columns:150px 1fr; gap:14px; }
.dl dt{ font-weight:700; color:var(--text-blue); }
.dl dd{ margin:0; }
.dl--sm{ gap:8px; }
.dl--sm > div{ grid-template-columns:7.4rem 1fr; gap:10px; }
.qa mark.tbd, .modal mark.tbd{ background:#FFF3C4; color:#6B5300; border-radius:4px; padding:0 .35em; font-weight:700; }
/* mesmo botão dos cards da home: rosa, texto branco, ícone à esquerda (o seletor duplo vence o .qa__body a) */
.qa__body .qa__pay{ margin-top:18px; height:2.2rem; padding:0 1.6rem; font-size:.82rem; text-transform:none; letter-spacing:0;
  border-radius:.65rem; border-bottom:0; color:var(--white); }
.qa__body .qa__pay svg{ width:1.05rem; height:1.05rem; flex:none; }

/* ═══════════ FAQ (visual da v1, em px) ═══════════
   Gradiente médio do brand relift (azul → violeta) com caixas brancas. */
.faq{
  padding:2.5rem 0 110px;
  background:linear-gradient(180deg, #325EFD 0%, #484AF9 24%, #5F35F5 60%, #7323F2 100%);
}
.faq .eyebrow{ font-size:1rem; letter-spacing:.02em; color:var(--white); }
.faq .h2{ color:var(--white); font-weight:400; }   /* Display Regular na proposta */
.faq__list{ max-width:46rem; margin:48px auto 0; display:flex; flex-direction:column; gap:14px; }
.qa{
  background:var(--white); color:var(--text-blue);
  border:1.5px solid var(--white);
  border-radius:14px; overflow:hidden;
  transition:border-color .5s var(--ease-out), transform .5s var(--ease-out);
}
.qa:hover{ border-color:#C3D0FF; transform:translateY(-2px); }
.qa.is-open{ border-color:#C3D0FF; }
.qa__h{ margin:0; font:inherit; }
.qa__q{
  width:100%; display:flex; align-items:center; gap:16px;
  padding:18px 22px; text-align:left;
  font-size:16.6px; font-weight:700; line-height:1.45; color:var(--text-blue);
}
.qa__ico{
  margin-left:auto; flex:none; width:26px; height:26px; display:grid; place-items:center;
  border-radius:50%; background:var(--line-blue); color:#fff; font-size:17.6px; line-height:1;
  transition:transform .5s var(--ease-out), background .5s var(--ease-out);
}
.qa.is-open .qa__ico{ transform:rotate(135deg); background:var(--bl-violet); }
.qa__a{ height:0; overflow:hidden; transition:height .46s cubic-bezier(.4,0,.2,1); }
.qa__body{ padding:0 22px 21px; color:#4A4F7E; font-size:15.8px; line-height:1.55; max-width:66ch; }
.qa__body b{ font-weight:700; }
.qa__body a{ color:var(--text-blue); font-weight:700; border-bottom:1px solid rgba(59,71,224,.4); transition:border-color .28s var(--ease-out); }
.qa__body a:hover{ border-color:var(--text-blue); }
.faq__foot{ margin-top:42px; text-align:center; color:rgba(255,255,255,.88); font-size:15.2px; }
.faq__foot a{ color:#fff; font-weight:700; border-bottom:1px solid rgba(255,255,255,.5); transition:border-color .28s var(--ease-out); }
.faq__foot a:hover{ border-color:#fff; }
/* "Ainda com dúvida?" em destaque, na própria linha (rodapé da página de prêmios) */
.foot-q{ display:block; margin-bottom:.35rem; font-size:1.3em; font-weight:700; color:#fff; }

/* ═══════════ RODAPÉ ═══════════ */
.foot{ background:var(--night); padding:2.4rem 0 1.6rem; color:#C9C9DA; }
.foot__row{ display:grid; grid-template-columns:1.4fr auto 1fr; align-items:start; gap:2rem; }
.foot__brand img{ width:4rem; height:auto; }
.foot__brand p{ margin-top:.9rem; font-size:.7rem; line-height:1.5; color:#9A9AB0; max-width:12rem; }
.foot__nav{ display:flex; gap:1.4rem; padding-top:.3rem; }
.foot__nav a{ font-size:.68rem; color:#D0D0E0; transition:color .25s; }
.foot__nav a:hover{ color:var(--white); }
.foot__meta{ display:flex; flex-direction:column; align-items:flex-start; gap:.5rem; padding-top:.3rem; justify-self:end; }
.foot__meta > a{ font-weight:700; font-size:.68rem; color:var(--cyan-text); }
.foot__social{ display:flex; gap:.6rem; margin-top:.6rem; }
.foot__social a{
  width:1.7rem; height:1.7rem; border-radius:50%; display:grid; place-items:center;
  background:#15152A; border:1px solid #2A2A44; color:var(--white); transition:background .25s, transform .25s;
}
.foot__social a:hover{ background:#23233E; transform:translateY(-2px); }
.foot__social svg{ width:.85rem; height:.85rem; }
.foot__bottom{
  margin-top:2.2rem; padding-top:1.1rem; border-top:1px solid rgba(255,255,255,.1);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.6rem; color:#7C7C96;
}

/* texto legal dos prêmios entregues em cartão (main.js, LEGAL_IMG): bem pequeno no pé da tela do notebook do hero */
.legal-img{
  position:absolute; left:0; right:0; bottom:0; z-index:2; pointer-events:none;
  padding:2.2em 1.2em .8em; font-size:7px; line-height:1.3; font-weight:400; letter-spacing:0; text-transform:none;
  color:rgba(255,255,255,.95); text-shadow:0 1px 2px rgba(0,0,0,.35); text-align:left;
  background:linear-gradient(to top, rgba(0,0,0,.5) 0%, rgba(0,0,0,.3) 55%, rgba(0,0,0,0) 100%);
  zoom:.6;   /* bem pequeno (~4px): o zoom passa por baixo do tamanho mínimo de fonte do navegador */
}
.legal-img[hidden]{ display:none; }
.legal-img--hero{ font-size:clamp(6px, .48vw, 8px); padding:1.8em 1.1em .7em; }
.hero__legal{ display:none; }
/* nos detalhes do prêmio (premios.html e janela do prêmio) o texto legal vai por extenso, logo abaixo da ficha */
.dl-legal{ margin-top:12px; font-size:11.5px; line-height:1.45; color:var(--gray); }
@media (max-width:900px){
  .legal-img--hero{ display:none; }
  /* no celular a tela do notebook é pequena demais: o texto vai logo abaixo do botão */
  .hero__legal{ display:block; position:relative; z-index:3; max-width:34rem; margin:0 auto 1rem; padding:0 1rem;
    font-size:7px; line-height:1.35; text-align:center; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.45);
    background:rgba(30,20,90,.42); border-radius:.8rem; padding:.55rem .8rem; width:calc(100% - 2rem); }
}

/* texto legal da promoção (aprovado com o certificado da SPA/ME) */
.foot__legal{ margin-top:2.2rem; max-width:62rem; font-size:.62rem; line-height:1.6; color:#9A9AB2; }
.foot__legal + .foot__bottom{ margin-top:1.1rem; }

/* ═══════════ VOLTAR AO TOPO ═══════════ */
.totop{
  position:fixed; right:1.5rem; bottom:1.5rem; z-index:40; width:1.9rem; height:1.9rem; border-radius:50%;
  background:var(--cyan); color:var(--white); display:grid; place-items:center;
  opacity:0; transform:translateY(1rem); pointer-events:none;
  transition:opacity .35s var(--ease), transform .35s var(--ease), background .25s;
}
.totop.is-on{ opacity:1; transform:none; pointer-events:auto; }
.totop:hover{ background:var(--cyan-lit); }
.totop svg{ width:1rem; height:1rem; }

/* ═══════════ MODAL ═══════════ */
/* acima do header fixo (1000) e da barra (1001) */
.modal{ position:fixed; inset:0; z-index:1100; display:grid; place-items:center; padding:1rem; }
.modal[hidden]{ display:none; }
.modal__backdrop{ position:absolute; inset:0; background:rgba(5,5,20,.72); backdrop-filter:blur(6px); opacity:0; transition:opacity .25s; }
.modal__card{
  position:relative; width:min(100%, 26rem); background:var(--white); color:var(--ink); border-radius:1.4rem;
  padding:1.2rem 1.5rem 1.5rem; max-height:calc(100vh - 2rem); overflow-y:auto;
  opacity:0; transform:translateY(1rem) scale(.97); transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.modal.is-on .modal__backdrop{ opacity:1; }
.modal.is-on .modal__card{ opacity:1; transform:none; }
.modal__close{ position:absolute; right:.8rem; top:.6rem; width:2rem; height:2rem; border-radius:50%; font-size:1.4rem; line-height:1; color:var(--white); background:rgba(0,0,0,.45); z-index:1; }
.modal__media{ margin:-.9rem -1.2rem 0; border-radius:1.1rem; overflow:hidden; aspect-ratio:16/9; }
.modal__media img{ width:100%; height:100%; object-fit:cover; }
.modal__eyebrow{ margin-top:1.1rem; font-weight:700; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brand-btn); }
.modal__title{ font-weight:400; font-size:1.6rem; line-height:1.1; letter-spacing:-.02em; margin-top:.2rem; }
.modal__text{ margin-top:.7rem; font-size:.82rem; line-height:1.5; color:#333; }
/* resumo do prêmio (vem de PRIZE_INFO): o que é, como recebo, se é dinheiro */
.modal__info{ margin-top:.9rem; padding:.8rem .9rem; border-radius:1rem; background:var(--tint); border:1px solid #D9E1FF; }
.modal__info-t{ margin-bottom:.5rem; font-weight:700; font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-blue); }
.modal__info .dl{ font-size:.7rem; line-height:1.4; color:#333; }
.modal__info-a{ display:inline-block; margin-top:.6rem; font-size:.7rem; font-weight:700; color:var(--text-blue); border-bottom:1px solid currentColor; }
.modal__actions{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.1rem; }
.modal__actions .btn{ height:2.5rem; padding:0 1.1rem; font-size:.78rem; text-transform:none; letter-spacing:0; border-radius:999px; }
.modal__actions .btn--ghost{ color:var(--ink); background:#F1F1F6; border-color:#E2E2EC; }

/* ═══════════ CORTINA DE LOGIN (v1, em px) ═══════════ */
.gate{
  position:fixed; inset:0; z-index:99999;
  place-items:center; padding:24px;
  background:
    radial-gradient(120% 90% at 80% 20%, rgba(124,42,231,.5) 0%, transparent 60%),
    linear-gradient(120deg, #000003 0%, #0A0A2A 40%, #201E9E 78%, #3432C9 100%);
  transition:opacity .4s var(--ease-out);
}
.gate.is-open{ opacity:0; pointer-events:none; }
.gate__box{
  width:min(100%, 380px);
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:42px 32px 35px;
  background:rgba(255,255,255,.06);
  border:1.5px solid rgba(255,255,255,.16);
  border-radius:26px;
  backdrop-filter:blur(10px);
}
.gate__logo{ width:118px; margin-bottom:22px; }
.gate__title{ font-size:22px; font-weight:800; letter-spacing:-.01em; }
.gate__hint{ margin-top:8px; margin-bottom:14px; font-size:14.7px; color:rgba(255,255,255,.62); max-width:26ch; }
.gate__input{
  width:100%; margin-top:11px;
  padding:14px 18px; border-radius:999px;
  background:rgba(255,255,255,.09);
  border:1.5px solid rgba(255,255,255,.22);
  color:#fff; font:inherit; font-size:16px; text-align:center;
  transition:border-color .28s var(--ease-out), background .28s var(--ease-out);
}
.gate__input::placeholder{ color:rgba(255,255,255,.4); }
.gate__input:focus{ outline:none; border-color:var(--cyan); background:rgba(255,255,255,.13); }
.gate__btn{
  width:100%; margin-top:16px;
  padding:14px 19px; border-radius:999px;
  background:var(--cyan); color:#fff;
  font-weight:800; letter-spacing:.06em; text-transform:uppercase; font-size:13.4px;
  transition:transform .28s var(--ease-out), background .28s var(--ease-out);
}
.gate__btn:hover{ transform:translateY(-2px); background:var(--cyan-lit); }
.gate__btn:active{ transform:translateY(0); }
.gate__btn:disabled{ opacity:.6; cursor:progress; transform:none; }
.gate__error{ margin-top:14px; font-size:13.8px; color:#FF8DA1; font-weight:700; }
.gate__ask{ margin-top:21px; font-size:13.4px; line-height:1.5; color:rgba(255,255,255,.5); }
.gate__ask a{
  color:var(--cyan-text); font-weight:700;
  border-bottom:1px solid transparent;
  transition:border-color .28s var(--ease-out), color .28s var(--ease-out);
}
.gate__ask a:hover{ color:#fff; border-color:#fff; }
.gate.is-wrong .gate__box{ animation:gateShake .42s cubic-bezier(.4,0,.2,1); }
@keyframes gateShake{
  0%,100%{ transform:none; }
  20%{ transform:translateX(-9px); }
  40%{ transform:translateX(8px); }
  60%{ transform:translateX(-5px); }
  80%{ transform:translateX(3px); }
}
@media (max-width:480px){
  .gate__box{ padding:35px 24px 30px; }
  .gate__logo{ width:98px; }
}

/* ═══════════ SETINHA DO CURSOR (v1, só o usuário) ═══════════ */
/* acima da cortina de login (99999): a setinha acompanha o usuário lá também */
#cursor-layer{ position:fixed; inset:0; z-index:100000; pointer-events:none; }
.cursor{
  position:absolute; top:0; left:0; will-change:translate, scale;
  display:flex; align-items:flex-start; gap:0;
  transform-origin:6.4px 3.75px;   /* ponta da seta: cresce a partir do ponteiro */
  transition:opacity .35s var(--ease-out), scale .22s var(--ease-out);
}
.cursor__arrow{
  width:30px; height:30px; flex:none;
  color:var(--green-tag);
}
.cursor__tag{
  /* igual à referência do Canva: etiqueta ~29px de altura, cantos 7px (~24%), texto regular, borda branca 2px,
     sem sombra; a quina de cima à esquerda encaixa no recorte da seta */
  margin-top:20px; margin-left:-11px;
  background:var(--green-tag); color:#fff;
  font-size:14px; font-weight:400; letter-spacing:0; line-height:1.4;
  padding:3px 9px; border-radius:7px;
  border:2px solid #fff;
  white-space:nowrap;
}
.cursor.is-hover{ scale:1.12; }   /* hover: o conjunto (seta + etiqueta) cresce um pouco, sem inclinar */
.cursor.is-down{ scale:.94; }
.cursor.is-hidden{ opacity:0; }

/* ═══════════ REVEALS ═══════════ */
.js [data-reveal], .js .prize{
  opacity:0; transform:translateY(1.6rem);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.js [data-reveal].in, .js .prize.in{ opacity:1; transform:none; }
[data-delay="1"]{ transition-delay:.1s; } [data-delay="2"]{ transition-delay:.2s; }
[data-delay="3"]{ transition-delay:.3s; } [data-delay="4"]{ transition-delay:.4s; }
.prize.in:hover{ transform:translateY(-.4rem); }
.prizes__grid .prize:nth-child(4n+2){ transition-delay:.08s; }
.prizes__grid .prize:nth-child(4n+3){ transition-delay:.16s; }
.prizes__grid .prize:nth-child(4n+4){ transition-delay:.24s; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition-duration:.01ms !important; }
  [data-reveal], .prize{ opacity:1; transform:none; }
  #cursor-layer{ display:none; }
  body.has-cursor, body.has-cursor *{ cursor:auto !important; }
}

/* ═══════════ RESPONSIVO ═══════════ */
@media (max-width:1100px){
  .h2{ font-size:2.6rem; }
}
@media (max-width:900px){
  /* em tela de toque o cursor do sistema volta a mandar */
  #cursor-layer{ display:none; }
  body.has-cursor, body.has-cursor *{ cursor:auto !important; }

  /* header da v1 no mobile */
  .nav__inner{ gap:14px; }
  .nav__logo img{ height:22px; }
  .nav__links{
    position:fixed; inset:var(--nav-h) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    padding:16px 24px 26px;
    background:#fff; border-bottom:1px solid rgba(72,83,250,.15);
    clip-path:inset(0 0 100% 0);
    transition:clip-path .5s var(--ease-out);
  }
  .nav__links.is-open{ clip-path:inset(0 0 0 0); }
  .nav__links a{ padding:14px 6px; font-size:16px; border-radius:0; border-bottom:1px solid rgba(72,83,250,.12); }
  .nav__pill{ display:none; }
  .nav__burger{ display:flex; }

  /* banner no celular: sem prancheta 16:9 — título em cima, notebook embaixo, CTA sobre as mãos */
  .hero__stage{
    aspect-ratio:auto; container-type:normal; overflow:hidden;
    display:flex; flex-direction:column; align-items:center;
    padding:calc(var(--nav-h) + 1.4rem) 0 0;
  }
  .hero__title{ position:static; inset:auto; display:flex; flex-direction:column; align-items:center; font-size:3.9rem; line-height:.95; pointer-events:auto; }
  .hero__w{ position:static; transform:none; font-size:inherit; }
  .hero__w small{ font-size:.55em; }
  .hero__laptop{ position:relative; left:auto; top:auto; width:112%; margin-top:1.2rem; }
  .hero__screen{ border-radius:.8vw; }
  .hero__elements{ left:0; top:0; width:100%; height:100%; }
  .hero__cta{ position:relative; left:auto; top:auto; width:auto; height:3rem; padding:0 2.2rem; margin-top:calc(-3.8rem - 24px); margin-bottom:24px; font-size:1rem; border-radius:.7rem; }   /* 24px de folga até o fim do hero (antes encostava); a altura do hero não muda */
  .h2{ font-size:2.5rem; line-height:.92; }
  .steps{ --u:1rem; }
  .steps__grid{ grid-template-columns:repeat(2, 1fr); gap:2rem 1rem; margin-top:4rem; }
  .prizes__grid{ gap:1rem .8rem; }
  .prize{ width:calc((100% - .8rem) / 2); }
  .prize__name{ font-size:1rem; }
  .prize__cta{ height:2rem; font-size:.8rem; }
  .details{ padding-bottom:4rem; }
  .details__facts{ grid-template-columns:1fr; }
  .dl > div{ grid-template-columns:1fr; gap:2px; }
  .qa__name{ font-size:15px; }
  .foot__row{ grid-template-columns:1fr; gap:1.6rem; }
  .foot__nav{ flex-wrap:wrap; gap:.8rem 1.2rem; }
  .foot__meta{ justify-self:start; }
  .totop{ right:1rem; bottom:1rem; width:2.4rem; height:2.4rem; }
}
@media (max-width:560px){
  .h2{ font-size:2.2rem; line-height:.94; }
  .hero__title{ font-size:3.4rem; }
  .steps__grid{ grid-template-columns:1fr; }
  .btn{ font-size:.9rem; padding:0 1.5rem; }
  .btn--green{ min-width:0; width:100%; }
  .foot__bottom{ flex-direction:column; gap:.3rem; }
}

/* ═══════════════════════════════════════════════════
   REGULAMENTO
   Página de texto longo: o conteúdo vai num "papel" branco para leitura
   confortável, sobre o mesmo fundo contínuo da home.
   ═══════════════════════════════════════════════════ */

/* aviso de placeholder: segunda linha do header, fixa junto com ele */
.nav__alert{
  margin:0; padding:9px 20px;
  background:#C8102E; color:#fff;
  font-size:13px; font-weight:500; line-height:1.4; text-align:center;
}

.reg{
  padding:calc(var(--nav-h) + 56px) 0 96px;
  background:linear-gradient(172deg, #7A2AE9 0%, #6A2EF1 18%, #5736FA 40%, #4853F9 68%, #2E7CE8 84%, #0BB0D4 100%);
}
.reg__wrap{ width:min(100% - 40px, 1120px); margin:0 auto; }

.reg__head{ text-align:center; margin-bottom:44px; }
.reg__title{ margin-top:0; font-weight:800; font-size:clamp(28px, 4vw, 46px); line-height:1.1; letter-spacing:-.015em; }
.reg__sub{ margin-top:12px; font-size:18px; color:rgba(255,255,255,.8); }
/* regulamento aprovado: selo de verificação + download do PDF oficial */
.reg__official{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 18px; margin-top:22px; }
.reg__seal{ display:inline-flex; align-items:center; gap:10px; padding:8px 16px 8px 10px; border-radius:999px;
  background:#fff; color:#0E1318; text-align:left; font-size:13px; line-height:1.3; box-shadow:0 6px 20px rgba(20,30,80,.12); }
.reg__seal svg{ width:30px; height:30px; flex:none; color:#12A150; }
.reg__seal b{ display:block; font-size:14px; }
.reg__pdf{ height:2.75rem; padding:0 1.4rem; border-radius:999px; text-transform:none; letter-spacing:0; }

/* PDF oficial embutido; no celular o navegador não mostra PDF dentro da página, então ficam os botões */
.reg__actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.reg__pdf svg{ width:18px; height:18px; flex:none; }
.btn--white{ background:var(--white); color:var(--text-blue); box-shadow:0 6px 20px rgba(20,30,80,.12); }
.reg__viewer{ width:min(100%, 960px); margin:0 auto; }
.reg__frame{
  display:block; width:100%; height:80vh; min-height:560px; border:0; border-radius:20px;
  background:var(--white); box-shadow:0 10px 30px rgba(40,60,190,.14);
}
.reg__mobile{ display:none; }

.foot__nav a[aria-current="page"]{ color:var(--white); }

@media (max-width:900px){
  .reg{ padding-top:calc(var(--nav-h) + 36px); }
  .reg__frame{ display:none; }
  .reg__mobile{
    display:block; padding:18px 20px; border-radius:16px; background:var(--white);
    color:var(--text-blue); font-size:15px; line-height:1.5; text-align:center;
  }
  .reg__mobile b{ font-weight:700; }
}

/* ═══════════ REGULAMENTO NAS CORES DA HOME (08/10/2026) ═══════════
   Mesmo fundo da página de prêmios (branco → ciano → azul → violeta) e título em gradiente.
   Fica no fim do arquivo para valer também sobre as regras de celular acima. */
.reg{
  background:linear-gradient(180deg, #FEFEFE 0%, #E8FAFE 4%, #A1EEFE 10%, #2CD9FE 18%, #19C1FF 30%,
    #209EFF 45%, #277DFF 60%, #325EFD 75%, #484AF9 86%, #5F35F5 94%, #7323F2 100%);
}
.reg__title{
  width:fit-content; margin-inline:auto; padding-bottom:.18em; margin-bottom:-.18em;
  background:var(--h-grad); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.reg__sub{ color:var(--text-blue); }


/* ═══════════ HERO NO CELULAR (08/10/2026) ═══════════
   No celular a camada dos emojis mede só o notebook, que ocupava 112% da tela: 5 dos 7 emojis ficavam fora.
   Notebook um pouco menor e emojis aproximados do centro (e 15% menores), para todos aparecerem inteiros. */
@media (max-width:560px){
  .hero__laptop{ width:92%; }
}

/* ═══════════ LEITURA E TOQUE NO CELULAR (08/10/2026) ═══════════
   Textos dos passos (10px) e do rodapé (10-11px) estavam pequenos demais; menu, logo e "Ver detalhes"
   tinham área de toque de ~20px. A área de toque cresce por um ::before invisível, sem mexer no layout. */
@media (max-width:900px){
  .step h3{ font-size:1.1rem; }
  .step p{ font-size:.82rem; }
  .nav__burger, .nav__logo, .prize__info{ position:relative; }
  .nav__burger::before{ content:""; position:absolute; inset:-11px -8px; }
  .nav__logo::before{ content:""; position:absolute; inset:-11px -6px; }
  .prize__info::before{ content:""; position:absolute; inset:-14px -8px; }
  .foot__nav a, .foot__meta > a{ font-size:.82rem; }
  .foot__nav{ gap:.9rem 1.3rem; }
  .foot__bottom{ font-size:.75rem; }
  .foot__legal{ font-size:.75rem; }
  .foot__nav a, .foot__meta > a{ padding-block:.45rem; }
  .foot__brand p{ font-size:.85rem; }
  .foot__social a{ width:2.4rem; height:2.4rem; }
  .prize__info{ font-size:.8rem; }
}
@media (max-width:560px){
  .step h3{ font-size:1.2rem; }
  .step p{ font-size:.92rem; }
}

/* ═══════════ PRÊMIOS 2 POR LINHA NO CELULAR (09/10/2026) ═══════════
   Antes era 1 por linha (~5.000px de rolagem). Card de ~165px: preço e "Ver detalhes" empilham,
   botão e selo das parceiras ficam mais compactos para caber sem quebrar. */
@media (max-width:560px){
  .prizes__grid{ gap:.8rem .7rem; }
  .prize{ width:calc((100% - .7rem) / 2); border-radius:1.4rem; padding:.3rem .3rem .9rem; }
  .prize__media{ border-radius:1.15rem; aspect-ratio:1.37; }   /* mesma proporção do desktop: as capas do Canva (26/10) foram estendidas para 1.37 */
  .prize__body{ padding:.7rem .55rem 0; gap:.35rem; }
  .prize__name{ font-size:.95rem; }
  .stars{ --star:.66rem; }
  .prize__row{ flex-direction:column; align-items:flex-start; gap:.25rem; }
  .prize__price{ font-size:.75rem; }
  .prize__info{ font-size:.75rem; }
  .prize__cta{ height:2.1rem; padding:0 .4rem; gap:.3rem; font-size:.72rem; white-space:nowrap; }
  .prize__cta svg{ width:.9rem; height:.9rem; }
  .prize__badge{ left:.45rem; top:.45rem; gap:.45rem; padding:.28rem .55rem; }
  .prize__badge img + img{ padding-left:.45rem; }
  .prize__badge img[data-p="burger-king"]{ height:1.3rem; }
  .prize__badge img[data-p="serasa"]{ height:1rem; }
  .prize__badge img[data-p="whirlpool"]{ height:.85rem; }
  .prize__badge img[data-p="consul"]{ height:.72rem; }
}
@media (max-width:360px){
  .prize__cta{ font-size:.66rem; gap:.22rem; }
  .prize__cta svg{ width:.8rem; height:.8rem; }
}

/* ═══════════ BANNER: TEXTO MAIOR, NOTEBOOK MENOR (15/10/2026, feedback do cliente) ═══════════
   "Pague com Slides" +16% e mais perto das bordas; notebook -10% (continua centrado: 18,55% + 62,9%/2 = 50%).
   O título acompanha o novo centro vertical da tela do notebook (28,7%). Só no desktop. */
@media (min-width:901px){
  .hero__laptop{ left:18.55%; width:62.9%; }
  .hero__w{ top:30.5%; font-size:7.8cqw; }
  .hero__w--l{ right:66.7%; }
  .hero__w--r{ right:1.8%; }
}

/* ═══════════ HERO NO CELULAR: LEITURA DO TÍTULO (15/10/2026) ═══════════
   O "Pague" branco ficava sobre a faixa branca/ciano-claro. No celular o título fica a uma distância fixa do topo,
   então o degradê usa px no começo: branco só atrás do menu (~50px) e já ciano forte/azul atrás do "Pague"
   (100-150px). O "com" sobe até o topo do "Slides" e chega mais perto da palavra. */
@media (max-width:900px){
  .hero{
    background:linear-gradient(180deg, #FEFEFE 0, #E8FAFE 22px, #A1EEFE 46px, #2CD9FE 70px, #19C1FF 98px, #209EFF 140px,
      #277DFF 40%, #325EFD 55%, #484AF9 70%, #5F35F5 85%, #7323F2 100%);
  }
  .hero__w small{ display:inline-block; transform:translateY(-.83em); margin-right:-.23em; }
  .hero__w--r{ margin-top:4px; }   /* afasta "com Slides" do g de "Pague" */
}

/* ═══════════ CARDS DE PRÊMIO: ESPAÇAMENTO IGUAL (22/10/2026, feedback 20/10) ═══════════
   Quando um nome quebrava em 2 linhas, os outros cards da linha esticavam e o vão entre o preço e o botão
   crescia só neles. Agora preço e botão ficam sempre juntos no pé do card; a sobra vai para cima do preço. */
.prize__row{ margin-top:auto; }
.prize__row + .prize__cta, .prize__cta{ margin-top:.7rem; }