/* ============================================================================
   Prêmios — por cima do site.css, com os mesmos tokens.
   Prefixo `pr-`. Mobile-first: quem escaneia QR na padaria está no celular.
   ============================================================================ */

/* ---- hero ---------------------------------------------------------------- */
.pr-kicker {
  margin: 0 0 .5rem;
  font-size: .8125rem;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.pr-lead { font-size: 1.125rem; color: var(--color-text-muted); margin: 0 0 1.25rem; max-width: 34rem; }

.pr-contador {
  margin: 0 0 1.25rem;
  font-size: .9375rem;
  color: var(--color-text-muted);
}
.pr-contador strong { font-size: 1.5rem; color: var(--color-text); font-weight: 750; }

.pr-aviso {
  margin: 1rem 0 0;
  padding: .6rem .8rem;
  border-left: 3px solid var(--color-warning);
  background: var(--color-bg-hover);
  border-radius: 0 .375rem .375rem 0;
  font-size: .9rem;
  color: var(--color-text-muted);
}

/* ---- como funciona -------------------------------------------------------- */
.pr-como { padding: 1.5rem 0; border-top: 1px solid var(--color-border); }
.pr-passos { list-style: none; margin: 0 0 1rem; padding: 0; }
.pr-passos li {
  display: flex; gap: .85rem; align-items: baseline;
  margin: 0 0 .85rem; font-size: 1.0625rem;
}
.pr-passo-n {
  flex: 0 0 1.75rem; height: 1.75rem; line-height: 1.75rem;
  border-radius: 50%; text-align: center;
  background: var(--color-primary); color: var(--color-primary-text);
  font-weight: 750; font-size: .9375rem;
  transform: translateY(.15rem);
}
.pr-miudo { font-size: .875rem; color: var(--color-text-muted); }

/* ---- botão --------------------------------------------------------------- */
.pr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 3rem; padding: .7rem 1.4rem;
  border: 1px solid var(--color-primary); border-radius: .625rem;
  background: var(--color-primary); color: var(--color-primary-text);
  font: inherit; font-weight: 650; font-size: 1.0625rem;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.pr-btn:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: var(--color-primary-text); }
.pr-btn:active { transform: translateY(1px); }
.pr-btn:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
.pr-btn--grande { width: 100%; min-height: 3.5rem; font-size: 1.1875rem; }
.pr-btn--ghost { background: transparent; color: var(--color-primary); }
.pr-btn--ghost:hover { background: var(--color-bg-hover); color: var(--color-primary-hover); }
.pr-btn[disabled], .pr-btn[aria-busy="true"] { opacity: .7; cursor: default; pointer-events: none; }
.pr-ico { width: 1.35em; height: 1.35em; flex: 0 0 auto; }

/* spinner no próprio botão (regra da casa): o feedback nasce onde o dedo tocou */
.pr-btn[aria-busy="true"] .pr-btn-rotulo { visibility: hidden; }
.pr-btn[aria-busy="true"]::after {
  content: ""; position: absolute;
  width: 1.15em; height: 1.15em;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%;
  animation: pr-gira .7s linear infinite;
}
.pr-btn { position: relative; }
@keyframes pr-gira { to { transform: rotate(360deg); } }

/* ---- formulário ---------------------------------------------------------- */
.pr-form h1, .pr-etapa h1 { margin: 0 0 .5rem; font-size: clamp(1.75rem, 6vw, 2.25rem); line-height: 1.15; }
.pr-form > p, .pr-etapa > p { color: var(--color-text-muted); }

.pr-campo { margin: 1.25rem 0; }
.pr-campo label { display: block; font-weight: 650; margin-bottom: .4rem; }
.pr-campo label small { font-weight: 400; color: var(--color-text-subtle); }
/* Só campo de texto/data e select: radio e checkbox têm a própria régua. */
.pr-campo input:not([type="radio"]):not([type="checkbox"]), .pr-campo select {
  width: 100%; box-sizing: border-box;
  min-height: 3rem; padding: .6rem .8rem;
  border: 1px solid var(--color-border-strong); border-radius: .5rem;
  background: var(--color-bg-card); color: var(--color-text);
  font: inherit; font-size: 1.0625rem;
}
.pr-campo input:focus-visible, .pr-campo select:focus-visible {
  outline: 3px solid var(--color-focus-ring); outline-offset: 1px; border-color: transparent;
}
/* iOS pinta <input type=date> vazio de cinza claro e estreito; força a mesma
   altura e cor dos outros campos. */
.pr-campo input[type="date"] { -webkit-appearance: none; appearance: none; min-height: 3rem; }
.pr-campo [aria-invalid="true"] { border-color: var(--color-danger); }
.pr-erro { margin: .35rem 0 0; min-height: 1.2em; font-size: .9rem; color: var(--color-danger); }
.pr-erro:empty { display: none; }
.pr-erro--geral {
  margin: 0 0 1rem; padding: .6rem .8rem;
  border-left: 3px solid var(--color-danger);
  background: var(--color-bg-hover); border-radius: 0 .375rem .375rem 0;
}
.pr-campo[hidden] { display: none; }

/* a frase: o tema à vista, a caixa generosa, a contagem discreta */
.pr-campo--frase textarea {
  width: 100%; box-sizing: border-box; resize: vertical;
  min-height: 5.5rem; padding: .7rem .85rem;
  border: 1px solid var(--color-border-strong); border-radius: .5rem;
  background: var(--color-bg-card); color: var(--color-text);
  font: inherit; font-size: 1.0625rem; line-height: 1.45;
}
.pr-campo--frase textarea:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 1px; border-color: transparent; }
.pr-campo--frase textarea[aria-invalid="true"] { border-color: var(--color-danger); }
.pr-tema {
  margin: 0 0 .6rem; padding: .7rem .9rem;
  border-left: 3px solid var(--color-primary); border-radius: 0 .5rem .5rem 0;
  background: color-mix(in srgb, var(--color-primary) 7%, var(--color-bg-card));
  font-family: var(--font-marca); font-weight: 800; font-size: 1.125rem; line-height: 1.3; letter-spacing: -.01em;
}
.pr-tema--hero { display: inline-block; margin: 0 0 1.25rem; font-size: clamp(1.125rem, 4vw, 1.375rem); background: color-mix(in srgb, var(--color-bg-card) 85%, transparent); }
.pr-contagem { margin: .3rem 0 0; text-align: right; font-size: .8125rem; color: var(--color-text-subtle); font-variant-numeric: tabular-nums; }
.pr-contagem--limite { color: var(--color-warning); }

/* dois campos lado a lado (UF + cidade) */
.pr-campo--dupla { display: grid; grid-template-columns: 6.5rem 1fr; gap: .75rem; }
.pr-campo--dupla > div { min-width: 0; }
.pr-campo--dupla .pr-erro { grid-column: 1 / -1; margin-top: 0; }

/* sexo: três opções que se tocam com o dedo, não um select */
.pr-radios { border: 0; padding: 0; margin: 1.25rem 0; }
.pr-radios legend { font-weight: 650; margin-bottom: .4rem; padding: 0; }
.pr-radios .pr-radio-grupo { display: flex; flex-wrap: wrap; gap: .5rem; }
.pr-radio {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .55rem .85rem;
  border: 1px solid var(--color-border-strong); border-radius: 2rem;
  background: var(--color-bg-card); cursor: pointer;
  font-size: .9375rem; line-height: 1.2;
  /* ⚠️ 44px é o mínimo de alvo de toque (Apple HIG e WCAG 2.5.5). Medido em
     320px de largura, estas pílulas davam 39px — e 5px é exatamente a faixa
     em que o dedo acerta a borda em vez do controle. O `min-height` resolve
     sem mexer no padding, que é o que desenha a pílula: onde ela já passava
     de 44px, nada muda. */
  min-height: 44px;
}
.pr-radio input { accent-color: var(--color-primary); width: 1.05rem; height: 1.05rem; margin: 0; }
.pr-radio:has(input:checked) { border-color: var(--color-primary); background: var(--color-bg-hover); }
.pr-radios[aria-invalid="true"] .pr-radio { border-color: var(--color-danger); }

/* ---- data de nascimento em três campos ---------------------------------
   Larguras FIXAS no dia e no ano, e o mês ficando com o resto: o nome do mês
   é o único dos três que varia de tamanho ("maio" contra "fevereiro"), e dar
   1fr para ele é o que evita o campo apertar justo onde se digita mais.

   Em 320px sobram ~120px para o mês, e "fevereiro" cabe. */
.pr-data { border: 0; padding: 0; margin: 1.25rem 0; }
.pr-data legend { font-weight: 650; margin-bottom: .4rem; padding: 0; }

.pr-data-grupo {
  display: grid;
  /* Três <select>: o do mês é o único que varia ("maio" contra "fevereiro"),
     e leva o resto. Dia e ano têm largura fixa porque o conteúdo é fixo. */
  grid-template-columns: 5rem minmax(0, 1fr) 6rem;
  gap: .5rem;
  align-items: end;
}
.pr-data-campo { display: block; min-width: 0; }
.pr-data-campo label {
  display: block;
  font-size: .75rem; font-weight: 600; letter-spacing: .02em;
  color: var(--color-text-muted);
  margin-bottom: .2rem;
}
.pr-data-campo select { width: 100%; }

.pr-data .pr-miudo { margin: .4rem 0 0; }

/* ---- estado + cidade: o combobox próprio -----------------------------------
   Lista desenhada por nós, e não <datalist>: no Safari do iOS o datalist não
   mostra lista nenhuma (04/09, capturas do Marcos). Aqui ela aparece igual em
   todo celular, embaixo do campo, com linhas de 44px para o dedo. */
.pr-campo--local { grid-template-columns: 7rem minmax(0, 1fr); }
.pr-combo { position: relative; min-width: 0; }
.pr-combo input { width: 100%; }

.pr-sugestoes {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 20;
  margin: .25rem 0 0; padding: .25rem; list-style: none;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-strong);
  border-radius: .625rem;
  box-shadow: 0 12px 32px -12px rgb(0 0 0 / .28);
  max-height: 16rem; overflow-y: auto;
  transition: opacity .15s ease;
}
/* A cidade tem a lista mais larga que o campo: nome de município é comprido, e
   a lista pode escapar para a esquerda por cima do campo de estado. */
[data-combo="cidade"] .pr-sugestoes { left: calc(-7rem - .75rem); }
@media (max-width: 400px) { [data-combo="cidade"] .pr-sugestoes { left: calc(-7rem - .75rem); } }

.pr-sugestoes--buscando { opacity: .55; }   /* esmaece; não vira osso */

.pr-sugestao {
  display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
  min-height: 44px; padding: .6rem .8rem;
  border-radius: .45rem; cursor: pointer;
  line-height: 1.3;
}
.pr-sugestao:hover, .pr-sugestao--ativa { background: var(--color-bg-hover); }
.pr-sugestao__nome { font-weight: 600; }
.pr-sugestao__meta { font-size: .75rem; color: var(--color-text-muted); white-space: nowrap; }
.pr-sugestao--vazio { color: var(--color-text-muted); cursor: default; font-size: .875rem; }
.pr-sugestao--vazio:hover { background: transparent; }

/* ---- o comunicado: o destaque que a lei pede ---------------------------- */
.pr-comunicado {
  margin: 1.75rem 0 1.25rem; padding: 1rem;
  border: 1px solid var(--color-border-strong); border-left: 4px solid var(--color-primary);
  border-radius: .625rem;
  background: var(--color-bg-card);
}
.pr-comunicado-img {
  display: block; width: 100%; height: auto;
  border-radius: .375rem; margin: 0 0 .85rem;
}
.pr-comunicado-selo {
  display: flex; align-items: center; gap: .5rem;
  margin: 0 0 .6rem;
  font-size: .8125rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.pr-comunicado-selo img { border-radius: .25rem; }
.pr-comunicado-texto {
  margin: 0 0 .85rem;
  font-size: .9375rem; line-height: 1.55;
  color: var(--color-text);
}
.pr-aceite {
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem .85rem;
  border: 1px solid var(--color-border); border-radius: .5rem;
  background: var(--color-bg-hover);
  font-weight: 650; cursor: pointer;
}
.pr-aceite input { accent-color: var(--color-primary); width: 1.35rem; height: 1.35rem; margin: 0; flex: 0 0 auto; }
.pr-aceite:has(input:checked) { border-color: var(--color-primary); }
.pr-comunicado .pr-erro { margin-top: .5rem; }

/* ---- passo 2: a espera --------------------------------------------------- */
.pr-etapa { padding: 1rem 0; }
.pr-btn--wa { margin: .5rem 0 1.25rem; }

.pr-codigo-legenda { margin: 0 0 .35rem; font-size: .9rem; color: var(--color-text-muted); }
.pr-codigo {
  margin: 0 0 1.5rem; padding: .7rem 1rem;
  border: 1px dashed var(--color-border-strong); border-radius: .5rem;
  background: var(--color-bg-card);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 1.5rem; font-weight: 700; letter-spacing: .12em; text-align: center;
  user-select: all;
}

.pr-espera {
  display: flex; align-items: center; gap: .6rem;
  margin: 0 0 .75rem; color: var(--color-text-muted);
}
.pr-pulso {
  width: .7rem; height: .7rem; border-radius: 50%;
  background: var(--color-primary);
  animation: pr-pulsa 1.6s ease-in-out infinite;
}
@keyframes pr-pulsa { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } }

/* ---- passo 3: o número --------------------------------------------------- */
.pr-etapa--pronto { animation: pr-surge .45s ease-out both; }
@keyframes pr-surge { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: none; } }

.pr-numero-legenda { margin: 1.25rem 0 .25rem; font-size: .9rem; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.pr-numero {
  margin: 0 0 1.25rem; padding: 1rem;
  border-radius: .75rem;
  background: var(--color-primary); color: var(--color-primary-text);
  font-family: var(--font-marca); font-weight: 800;
  font-size: clamp(3rem, 18vw, 4.5rem); line-height: 1; letter-spacing: .08em;
  text-align: center;
  box-shadow: 0 10px 30px -12px var(--color-primary);
}
.pr-acoes { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.pr-acoes .pr-btn { flex: 1 1 10rem; }

/* ---- toast: rodapé, centralizado (regra da casa) ------------------------- */
.pr-toast {
  position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%);
  max-width: min(92vw, 28rem); padding: .75rem 1rem;
  border-radius: .625rem;
  background: var(--color-text); color: var(--color-bg);
  font-size: .9375rem; line-height: 1.4;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,.35);
  z-index: 50;
  animation: pr-surge .25s ease-out both;
}
.pr-toast--erro { background: var(--color-danger); color: #fff; }
.pr-toast[hidden] { display: none; }

/* ---- regulamento --------------------------------------------------------- */
.pr-regulamento h2 { margin-top: 1.75rem; }

/* ---- movimento reduzido -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pr-pulso, .pr-etapa--pronto, .pr-toast, .pr-btn[aria-busy="true"]::after { animation: none; }
  .pr-btn { transition: none; }
}

/* ============================================================================
 * A CASA DO PRÊMIOS — home, mural, regulamento, e o funil por cima
 * ============================================================================
 * Bonito por poucas decisões: a fonte da marca (Manrope ExtraBold) nos
 * títulos, muito ar, cards com borda fina que sobem no hover, duas formas
 * suaves em paralaxe atrás do hero, e blocos que entram com fade-e-sobe.
 * Zero biblioteca; tudo morre com prefers-reduced-motion.
 */

/* ⚠️ NO `html` TAMBÉM, e não só no `body`. As seções de sangria usam `100vw`,
   e `100vw` INCLUI a barra de rolagem: numa tela com barra clássica (desktop
   no Windows) elas ficam ~8px mais largas que a área visível. Com `clip` só no
   `body`, o transbordo escapava para o elemento RAIZ, que é quem rola — e
   medido em 1280px de largura dava para rolar 8px na horizontal, com a página
   inteira balançando de lado.

   `clip` e não `hidden`: `hidden` cria contexto de rolagem e quebraria
   `position: sticky` de qualquer coisa que venha a existir dentro. */
html, body { overflow-x: clip; }

/* sangria: sai da medida de leitura (38rem) e volta para ela por dentro */
.pr-bleed {
  /* O recuo vira variável para quem precisa ESCAPAR dele — a arte do herói,
     que é de borda a borda. Sem isto, a expressão seria repetida com o sinal
     trocado e as duas divergiriam no primeiro ajuste de medida. */
  /* 36rem, e não 30: o conteúdo do `main` nas páginas de Prêmios tem 72rem, e
     a sangria tem de devolver o conteúdo EXATAMENTE nessa margem — senão o
     texto do herói nasce 6rem à direita das seções de baixo, e a página ganha
     um segundo eixo. Foi esse segundo eixo que fez o mural parecer torto. */
  --bleed-pad: max(1.5rem, calc(50vw - 36rem));
  margin-inline: calc(50% - 50vw);
  padding-inline: var(--bleed-pad);
}

/* títulos na fonte da marca */
.pr-titulo {
  margin: 0 0 .85rem;
  font-family: var(--font-marca);
  font-weight: 800;
  font-size: clamp(2.25rem, 8vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.pr-h2 {
  margin: 0 0 1.1rem;
  font-family: var(--font-marca);
  font-weight: 800;
  font-size: clamp(1.5rem, 5vw, 1.9rem);
  letter-spacing: -.025em;
  line-height: 1.12;
}
.pr-h2--sem-margem { margin-bottom: .5rem; }
.pr-h3 { margin: 2rem 0 .75rem; font-size: .8125rem; color: var(--color-text-muted); letter-spacing: .06em; text-transform: uppercase; }
.pr-h2-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.pr-link-mais { font-weight: 650; text-decoration: none; white-space: nowrap; }
.pr-link-mais:hover { text-decoration: underline; }
.pr-muted { color: var(--color-text-muted); font-weight: 400; }

/* ---- O EIXO DA PÁGINA ----------------------------------------------------
   UM eixo, e não dois. A medida de 38rem do site (`--medida`) é medida de
   LEITURA: existe para parágrafo não passar de ~70 caracteres. Nas páginas de
   Prêmios o `main` passa a 72rem de conteúdo (75 com o recuo, box-sizing
   border-box), e TODA seção nasce na mesma margem esquerda. O parágrafo
   continua limitado (`.pr-lead` tem 34rem; `.pr-texto` abaixo tem 44rem), mas
   encostado nesse eixo — não centralizado num corredor no meio da tela.

   O eixo em si (`--medida: 75rem`) mora no `site.css`, para valer no SITE
   INTEIRO e não só aqui (Marcos, 05/09). Este arquivo só usa. */
.pr-texto { max-width: var(--leitura); }

/* ---- hero -------------------------------------------------------------- */
.pr-hero {
  position: relative;
  isolation: isolate;
  /* ⚠️ O -3rem existia para o hero ENCOSTAR num cabeçalho que estava no fluxo.
     Com a barra flutuante ele sai (ver `.tem-topo-flutuante` abaixo): a barra
     já não ocupa espaço, e continuar subtraindo empurraria o hero para fora da
     tela. */
  margin-top: -3rem;
  padding-top: clamp(3rem, 9vw, 6rem);
  padding-bottom: clamp(2.5rem, 7vw, 4.5rem);
  overflow: hidden;
}
/* Com a barra flutuando, o hero começa em zero e a arte passa por baixo dela —
   que é o efeito. O que NÃO pode passar por baixo é o TEXTO, então o recuo de
   cima passa a contar a altura da barra (≈62px + folga). */
.tem-topo-flutuante .pr-hero { margin-top: 0; }
.tem-topo-flutuante .pr-hero-int { padding-top: 4.25rem; }
@media (min-width: 900px) {
  /* No desktop o conteúdo é centrado numa banda de 100svh e não chega perto da
     barra; o recuo só desequilibraria a centralizagem. */
  .tem-topo-flutuante .pr-hero-int { padding-top: 0; }
}

.pr-hero-int { position: relative; z-index: 1; max-width: 38rem; }
.pr-hero-cabeca, .pr-hero-corpo { min-width: 0; }

/* ---- a arte do herói: o padrão do Marcup, adaptado à arte clara -------
   Lá a banda é `background-image` + overlay navy + `min-height: 100svh`, e o
   texto é branco por cima. O CHASSI é esse mesmo aqui; o que muda é o
   overlay, e muda porque a arte é outra:

   ⚠️ OVERLAY CLARO E HORIZONTAL, e não escuro e vertical. A arte do Marcup é
      escura, então o gradiente navy sobre ela dá texto branco legível. A nossa
      é comida sobre BRANCO, e o texto é tinta escura: overlay escuro deixaria
      a comida cinzenta E o texto ilegível. Então o gradiente é off-white
      opaco do lado do texto, sumindo até transparente do lado da comida. */

.pr-hero-arte { margin: 0; }
.pr-hero-arte img {
  display: block; width: 100%; height: auto;
  /* ⚠️ `aspect-ratio` para a página NÃO PULAR enquanto a arte carrega. Sem
     isto o botão "Participar" desce 200px no meio do carregamento, e o dedo
     que ia acertá-lo acerta outra coisa — salto de layout, e o mais cruel
     deles, porque acontece no toque. */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--color-bg-hover);
}

/* ---- CELULAR E TABLET: faixa de sangria no topo da banda -------------------------
   ⚠️ AQUI A ARTE NÃO É `cover` DA BANDA INTEIRA, e isso é decisão. Uma peça
      16:9 cobrindo uma banda de ~800px de altura sobra 300% na horizontal:
      restaria o miolo, sem a pizza e sem a batata. Como o briefing da arte
      pede *os três inteiros dentro do quadro*, cortar seria desfazer o
      pedido. Então no celular ela é faixa: 16:9 inteiro, de borda a borda. */
@media (max-width: 899px) {
  .pr-hero--com-arte {
    display: flex;
    flex-direction: column;
    /* Zero: com a barra flutuante e transparente, a arte sobe até o topo da
       tela e passa por baixo dela. É o que faz a faixa ler como herói no
       celular em vez de banner abaixo de uma barra. */
    padding-top: 0;
  }
  /* ⚠️ E o TEXTO não passa por baixo da barra: no celular a arte é faixa no
     topo, então quem vem depois dela já nasce longe. O recuo de
     `.pr-hero-int` acima cobre o caso sem arte. */
  .tem-topo-flutuante .pr-hero--com-arte .pr-hero-int { padding-top: 0; }
  .pr-hero--com-arte .pr-hero-arte {
    order: -1;
    /* Escapa o recuo da sangria e vai de borda a borda — é o que faz a arte
       LER como herói em vez de miniatura com margem. */
    margin-inline: calc(-1 * var(--bleed-pad));
    /* ⚠️ MARGEM NEGATIVA: o texto SOBE por cima do rabo desvanecido da arte.
       É o mesmo efeito que o Marcos pediu no desktop — *"deixar a imagem
       entrar um pouquinho atrás do texto"* — aplicado aqui, e é o que costura
       a faixa à página em vez de deixar as duas empilhadas.

       O texto paira acima porque `.pr-hero-int` já é `position: relative` com
       `z-index: 1`. E são 24px, não mais: onde o kicker cai, a arte está em
       menos de 10% (ver a máscara abaixo), e mais sobreposição levaria o
       título para cima da tábua escura da pizza, onde o contraste cai. */
    margin-bottom: -1.5rem;
  }
  /* ⚠️ A FAIXA DERRETE NO FUNDO, não termina numa linha reta. A arte tem
     fundo quase branco e a página é off-white: sem a máscara aparece um degrau
     de tom atravessando a tela, e degrau reto é o que faz uma imagem parecer
     colada em cima da página em vez de fazer parte dela. */
  .pr-hero--com-arte .pr-hero-arte img {
    /* Desvanecimento LONGO, começando na metade: fade curto no último quinto
       ainda deixa uma linha de tom visível, porque a diferença entre o branco
       da arte e o off-white da página é pequena e o olho pega justo as
       transições curtas. E é esse fade que deixa o texto passar por cima
       depois, na margem negativa. */
    -webkit-mask-image: linear-gradient(180deg,
      #000 0%, #000 52%, rgba(0,0,0,.55) 82%, rgba(0,0,0,.08) 100%);
            mask-image: linear-gradient(180deg,
      #000 0%, #000 52%, rgba(0,0,0,.55) 82%, rgba(0,0,0,.08) 100%);
  }
  /* As formas suaves CONTINUAM: a arte cobre só os 211px de cima da banda, e
     abaixo dela a lista de prêmios e o botão ficariam sobre nada. */
}

/* ---- DESKTOP: a arte É O FUNDO, e fica parada enquanto o conteúdo sobe ---
   Marcos, 04/09: *"minha ideia era a imagem preencher todo o fundo"* e *"e o
   paralax, a imagem fica, sobe o conteúdo, igual o marcup gente"*.

   É o `.parallax` + `.hero-parallax` do Marcup, letra por letra:
   `background-attachment: fixed` prende a imagem à JANELA, e o conteúdo
   desliza por cima; `min-height: 100svh` dá a banda de tela cheia; o overlay
   em gradiente garante o texto sobre qualquer arte.

   ⚠️ AS TRÊS GUARDAS SÃO AS DE LÁ, e cada uma tem um motivo:
      · `min-width: 1024px` — abaixo disso a banda é mais alta que larga e o
        `cover` sobre a janela recorta demais;
      · `pointer: fine` — no toque, `bg-fixed` é repintado a cada pixel de
        rolagem no iOS e no Android, e a página engasga;
      · `prefers-reduced-motion` — imagem parada com conteúdo deslizando é
        movimento, e quem pediu para reduzir movimento pediu isto também.

      Fora das guardas o background continua lá, só rolando junto (`scroll`).
      Degrada para uma foto de fundo comum, que é o certo. */
@media (min-width: 900px) {
  .pr-hero--com-arte {
    display: flex;
    align-items: center;
    /* `svh` e não `vh`, como no Marcup: no celular `100vh` conta a altura sem a
       barra de endereço e o conteúdo nasce cortado. */
    min-height: 100svh;

    background-image: var(--heroi-arte);
    background-size: cover;
    background-repeat: no-repeat;
    /* ⚠️ `center`, e a PEÇA é que foi ajustada — não o contrário. Com
       `background-attachment: fixed`, o `cover` dimensiona pela JANELA e não
       pela banda: nas janelas comuns de laptop a razão fica entre 1.54 e 1.78,
       e uma peça 16:9 (1.777) tinha o excedente recortado da LARGURA, que é
       justo onde moram a pizza (esquerda) e a cumbuca (direita).

       A peça de desktop foi reexportada com uma faixa de respiro em cima,
       ficando em 1.63. Agora o recorte sai da ALTURA — o vazio de cima e a
       mesa de baixo — que é o lado bom de cortar. E o respiro resolve um
       segundo defeito: o cabeçalho do site é opaco e cobre os 74px de cima da
       janela, e antes ele comia o topo da logo do parceiro.

       Medido em 1440x860: eu tinha posto 72%, e o recorte de 88px saía 63px
       pela direita, cortando a cumbuca. */
    background-position: center;
    /* Cor por baixo, para a banda funcionar ANTES de a imagem chegar — mesma
       precaução do Marcup, que tem fallback escuro porque as artes dele nascem
       depois do código. */
    background-color: var(--color-bg);
  }

  /* O `<figure>` sai: ele é o herói do celular. Mesma URL, uma requisição. */
  .pr-hero--com-arte .pr-hero-arte { display: none; }

  /* As formas suaves e o número-fantasma saem também: quando há foto, eles
     viram sujeira sobre ela. Eles existem para o dia em que NÃO houver arte. */
  .pr-hero--com-arte .pr-hero-fundo { display: none; }

  /* O OVERLAY. ⚠️ Claro e horizontal, e não escuro e vertical como no Marcup:
     lá a arte é escura e o texto é branco, aqui a arte é comida sobre BRANCO e
     o texto é tinta escura. Gradiente escuro deixaria a comida cinzenta E o
     texto ilegível.

     ⚠️ E ELE NÃO CHEGA A 100% NA ESQUERDA: para em 88%, a pedido do Marcos —
        *"parece que está 100% transparente, podia diminuir para ela aparecer um
        pouco"*. Os 12% que passam são presença de cor no nível de marca
        d'água, e o texto continua acima de 4.5:1 de contraste. Mais que isso e
        as partes escuras da foto (a calabresa, a carne) comem o contraste. */
  .pr-hero--com-arte::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--color-bg) 88%, transparent) 0%,
      color-mix(in srgb, var(--color-bg) 86%, transparent) 30%,
      color-mix(in srgb, var(--color-bg) 56%, transparent) 48%,
      color-mix(in srgb, var(--color-bg) 14%, transparent) 66%,
      transparent 80%);
  }

  .pr-hero--com-arte .pr-hero-int { max-width: 34rem; }
}

/* A imagem presa à janela: o conteúdo sobe, ela fica. */
@media (min-width: 1024px) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .pr-hero--com-arte { background-attachment: fixed; }
}

.pr-hero-fundo { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* as duas formas: a cor primária, muito diluída, esmaecendo até sumir.
   Gradiente radial e não `filter: blur()`: o desfoque de 64px numa forma de
   34rem é a coisa mais cara que uma página pode pedir a um celular fraco — e
   o gradiente dá o mesmo brilho macio de graça. */
.pr-forma {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(closest-side,
              color-mix(in srgb, var(--color-primary) 16%, transparent),
              color-mix(in srgb, var(--color-primary) 6%, transparent) 55%,
              transparent 100%);
}
.pr-forma--a { width: 40rem; height: 40rem; right: -14rem; top: -18rem; }
.pr-forma--b { width: 26rem; height: 26rem; left: -12rem; bottom: -14rem; opacity: .8; }
html.dark .pr-forma { opacity: 1.2; }

/* o número-fantasma: o artefato do produto, quase invisível */
.pr-fantasma {
  position: absolute;
  right: -.05em;
  bottom: -.28em;
  font-family: var(--font-marca);
  font-weight: 800;
  font-size: clamp(9rem, 28vw, 19rem);
  line-height: 1;
  letter-spacing: -.06em;
  color: var(--color-primary);
  opacity: .06;
  user-select: none;
}
html.dark .pr-fantasma { opacity: .08; }

.pr-contador {
  display: flex; align-items: baseline; gap: .5rem;
  margin: 0 0 1.25rem;
  color: var(--color-text-muted);
}
.pr-contador strong {
  font-family: var(--font-marca); font-weight: 800;
  font-size: clamp(2rem, 6vw, 2.75rem); line-height: 1; letter-spacing: -.03em;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.pr-btn--hero { max-width: 22rem; box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--color-primary) 55%, transparent); }
.pr-btn--hero:hover { transform: translateY(-1px); box-shadow: 0 14px 34px -12px color-mix(in srgb, var(--color-primary) 65%, transparent); }
.pr-hero-nota { margin: .85rem 0 0; }

/* ---- seções e cards ---------------------------------------------------- */
.pr-secao { padding: clamp(2rem, 6vw, 3.5rem) 0 0; }
.pr-cabeca { padding: .5rem 0 1.5rem; }

.pr-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: .875rem;
  padding: 1.25rem 1.25rem 1.1rem;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
@media (hover: hover) {
  .pr-card:hover {
    transform: translateY(-3px);
    border-color: var(--color-border-strong);
    box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .35);
  }
  html.dark .pr-card:hover { box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .8); }
}
.pr-card h3 { margin: 0 0 .3rem; font-size: 1.0625rem; color: var(--color-text); }
.pr-card p:last-child { margin-bottom: 0; }
/* A faixa: card na largura do eixo, texto na medida de leitura, ícone na ponta.
   O `margin-left: auto` é o que leva o ícone para a direita quando sobra
   espaço — sem ele, texto e ícone ficam colados no meio de uma faixa vazia. */
.pr-card--faixa { display: flex; align-items: center; gap: 2rem; padding: 1.75rem 2rem; }
.pr-card--faixa > div { max-width: var(--leitura); }
.pr-card--faixa p { margin: 0; color: var(--color-text-muted); }
.pr-confianca-ico { flex: 0 0 4.5rem; width: 4.5rem; height: 4.5rem; margin-left: auto; color: var(--color-primary); }
@media (max-width: 560px) { .pr-confianca-ico { display: none; } }
.pr-vazio { color: var(--color-text-muted); }

/* os três passos */
.pr-passos-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: .875rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.pr-passo { position: relative; padding-top: 1.1rem; }
.pr-passo p { margin: 0; color: var(--color-text-muted); font-size: .9375rem; }
.pr-passo-num {
  display: block; margin-bottom: .6rem;
  font-family: var(--font-marca); font-weight: 800;
  font-size: 2.25rem; line-height: 1; letter-spacing: -.04em;
  color: var(--color-primary);
}

/* prêmios */
.pr-premios { list-style: none; margin: 0; padding: 0; display: grid; gap: .875rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.pr-premio--1 { grid-column: 1 / -1; border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border)); }
.pr-premio-pos { display: inline-block; margin-bottom: .6rem; padding: .2rem .6rem; border-radius: 2rem; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--color-primary); color: var(--color-primary-text); }
.pr-premio-valor { margin: .1rem 0 .4rem; font-family: var(--font-marca); font-weight: 800; font-size: 1.75rem; letter-spacing: -.03em; line-height: 1; }
.pr-premio-desc { color: var(--color-text-muted); font-size: .9375rem; }
.pr-premio-meta { margin: 0; font-size: .875rem; color: var(--color-text-muted); }

/* mural */
.pr-mural { list-style: none; margin: 0; padding: 0; display: grid; gap: .875rem; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); }
.pr-parceiro { display: flex; gap: .9rem; align-items: center; }
.pr-parceiro--completo { flex-direction: column; align-items: stretch; }
.pr-parceiro-topo { display: flex; gap: .9rem; align-items: center; }
.pr-parceiro-logo { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 14px; object-fit: cover; }
.pr-parceiro-iniciais { display: grid; place-items: center; background: color-mix(in srgb, var(--color-primary) 12%, var(--color-bg-card)); color: var(--color-primary); font-family: var(--font-marca); font-weight: 800; font-size: 1.25rem; letter-spacing: -.03em; }
.pr-parceiro-meta { margin: 0; font-size: .875rem; color: var(--color-text-muted); }
.pr-parceiro-desc { margin: .75rem 0 0; font-size: .9375rem; }
.pr-parceiro-end { margin: .35rem 0 0; font-size: .875rem; color: var(--color-text-muted); }
.pr-parceiro-acoes { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
/* O nome não corre por baixo do selo do canto (cidade já está em linha própria). */
.pr-parceiro--completo .pr-parceiro-topo { padding-right: 3.25rem; }
.pr-parceiro--destaque { border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border)); }
.pr-tag { display: inline-block; margin-top: .35rem; padding: .1rem .5rem; border-radius: 2rem; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: color-mix(in srgb, var(--color-primary) 12%, var(--color-bg-card)); color: var(--color-primary); }
.pr-btn--mini { min-height: 2.25rem; padding: .35rem .8rem; font-size: .875rem; width: auto; }

.pr-filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; }
.pr-filtros select { min-height: 2.75rem; padding: .4rem .7rem; border: 1px solid var(--color-border-strong); border-radius: .5rem; background: var(--color-bg-card); color: var(--color-text); font: inherit; }

/* ganhadores */
.pr-ganhadores { list-style: none; margin: 0; padding: 0; display: grid; gap: .875rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.pr-ganhador-numero { margin: 0 0 .35rem; font-family: var(--font-marca); font-weight: 800; font-size: 1.75rem; letter-spacing: .04em; color: var(--color-primary); line-height: 1; }
.pr-ganhador-premio { margin: 0 0 .25rem; }

/* o convite ao comércio: faixa na cor da marca */
.pr-convite { margin-top: clamp(2.5rem, 7vw, 4rem); padding-top: clamp(2.5rem, 6vw, 3.5rem); padding-bottom: clamp(2.5rem, 6vw, 3.5rem); background: var(--color-primary); color: var(--color-primary-text); }
.pr-convite-int { max-width: 38rem; }
.pr-convite p { color: inherit; opacity: .92; max-width: 30rem; }
.pr-kicker--inverso { color: inherit; opacity: .8; }
.pr-titulo--convite { font-size: clamp(1.75rem, 6vw, 2.5rem); }
.pr-btn--inverso { width: auto; background: var(--color-primary-text); color: var(--color-primary); border-color: transparent; }
.pr-btn--inverso:hover { background: var(--color-bg-card); color: var(--color-primary-hover); }

.pr-rodape-links { display: flex; flex-wrap: wrap; gap: 1.25rem; padding: 1.75rem 0 0; font-size: .9375rem; }
.pr-rodape-links a { text-decoration: none; font-weight: 600; }
.pr-rodape-links a:hover { text-decoration: underline; }

/* regulamento como documento */
.pr-regulamento { padding: 1.5rem 1.5rem 1.25rem; line-height: 1.7; }
.pr-regulamento h2 { margin: 1.5rem 0 .5rem; font-size: 1.125rem; }
.pr-regulamento h2:first-child { margin-top: 0; }
.pr-regulamento ol, .pr-regulamento ul { padding-left: 1.25rem; }
@media (hover: hover) { .pr-regulamento:hover { transform: none; box-shadow: none; } }

/* ---- o funil: progresso dos três passos -------------------------------- */
.pr-progresso { display: flex; gap: .4rem; margin: 0 0 1.25rem; list-style: none; padding: 0; }
.pr-progresso li { flex: 1; height: 4px; border-radius: 2px; background: var(--color-border); transition: background .3s ease; }
.pr-progresso li.pr-feito { background: var(--color-primary); }
.pr-form .pr-titulo, .pr-etapa .pr-titulo { font-size: clamp(1.9rem, 7vw, 2.5rem); }

/* ---- revelar ao rolar --------------------------------------------------- */
/* Sem JS a classe nunca chega e nada fica escondido: o `html.pr-js` só existe
   quando o script rodou. */
html.pr-js [data-revelar] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .55s ease;
  transition-delay: calc(var(--i, 0) * 70ms);
}
html.pr-js [data-revelar].pr-visivel { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 70ms); }
/* cards que também sobem no hover: depois de revelado, o hover volta a mandar */
html.pr-js .pr-card[data-revelar].pr-visivel { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, opacity .55s ease; transition-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
  html.pr-js [data-revelar] { opacity: 1; transform: none; transition: none; }
  .pr-card, .pr-btn--hero { transition: none; }
  .pr-card:hover, .pr-btn--hero:hover { transform: none; }
  .pr-forma, .pr-fantasma { transform: none !important; }
}

/* ============================================================================
 * PRÊMIO À VISTA E PATROCINADOR EM DESTAQUE (direção do Marcos, 03/09)
 * ============================================================================ */

/* o 1º prêmio dentro do hero: um cartão pequeno, clicável, antes do botão */
/* ---- os TRÊS prêmios no herói --------------------------------------------
   Marcos, 04/09: *"logo na primeira visão tem que ter os 3 prêmios, quem olha
   só isso não sabe que são 3 prêmios."*

   ⚠️ COMPACTOS DE PROPÓSITO. Três cópias do cartão antigo (1rem de padding,
      valor em 1.5rem) somariam perto de 270px e empurrariam o botão
      "Participar" para baixo da dobra no celular. A página ganharia
      informação e perderia a ação, o que é troca ruim: quem não vê o botão
      não se inscreve.

      Então: uma linha por prêmio, o 1º com valor e cor maiores, e uma borda só
      na caixa inteira. O detalhe completo está logo abaixo, em "O que está em
      jogo", e cada linha leva até lá. */
.pr-hero-premios {
  list-style: none; margin: 0 0 .6rem; padding: 0;
  max-width: 27rem;
  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
  border-radius: .75rem;
  background: color-mix(in srgb, var(--color-bg-card) 88%, transparent);
  overflow: hidden;
}
.pr-hero-premio + .pr-hero-premio { border-top: 1px solid var(--color-border); }

.pr-hero-premio > a {
  display: grid;
  grid-template-columns: 2.1rem auto 1fr;
  column-gap: .7rem; align-items: center;
  /* ⚠️ 44px é alvo de toque, não sugestão (WCAG 2.5.5 / Apple HIG). */
  min-height: 44px; padding: .55rem .9rem;
  color: var(--color-text); text-decoration: none;
  transition: background .18s ease;
}
.pr-hero-premio > a:hover,
.pr-hero-premio > a:focus-visible { background: var(--color-bg-hover); color: var(--color-text); }

.pr-hpr-pos {
  font-family: var(--font-marca); font-weight: 800; font-size: .95rem;
  color: var(--color-primary); letter-spacing: -.02em;
}
.pr-hpr-valor {
  font-family: var(--font-marca); font-weight: 800; font-size: 1.15rem;
  line-height: 1.05; letter-spacing: -.03em; white-space: nowrap;
}
.pr-hpr-titulo {
  font-size: .85rem; color: var(--color-text-muted);
  /* Uma linha, cortada: título longo quebrando em duas faria as três fileiras
     terem alturas diferentes, e aí a lista deixa de ler como uma escada de
     valores — que é exatamente o que ela precisa comunicar. */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* O 1º pesa mais: é ele que decide se a pessoa continua lendo. */
.pr-hero-premio--1 { background: color-mix(in srgb, var(--color-primary) 7%, transparent); }
.pr-hero-premio--1 .pr-hpr-valor { font-size: 1.4rem; }
.pr-hero-premio--1 .pr-hpr-pos { font-size: 1.05rem; }

.pr-hero-premios-nota {
  margin: 0 0 1.1rem; max-width: 27rem;
  font-size: .8rem; color: var(--color-text-muted); line-height: 1.45;
}
.pr-hero-premios-nota strong { color: var(--color-text); }

/* ---- a arte do herói -----------------------------------------------------
   Marcos, 04/09: *"acho que essa página precisava de uma imagem hero (que
   destacasse com o desktop e celular)."* */
.pr-hero-arte { margin: 0 0 1.25rem; }
.pr-hero-arte img {
  display: block; width: 100%; height: auto;
  border-radius: .875rem;
  /* ⚠️ `aspect-ratio` para a página NÃO PULAR enquanto a arte carrega. Sem
     isto o botão "Participar" desce 200px no meio do carregamento, e o dedo
     que ia acertar ele acerta outra coisa — salto de layout, e o mais cruel
     deles, porque acontece no toque.

     16:9 no celular, e não um enquadramento alto: uma arte de 4:5 ocuparia 58%
     da tela de um 375x812 e não sobraria dobra para os prêmios e o botão. */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--color-bg-hover);
}

/* ---- a etiqueta: imagem ilustrativa --------------------------------------
   ⚠️ DISCRETA, MAS LEGÍVEL — e a segunda parte manda. A tentação é deixar
      cinza-claro de 10px, e aí a etiqueta existe para o jurídico e não para a
      pessoa. Fica em .72rem no cinza de texto secundário, que passa o
      contraste de 4.5:1 nas duas superfícies. */
.pr-ilustrativa {
  display: inline-block;
  font-size: .72rem; line-height: 1.3; color: var(--color-text-muted);
  letter-spacing: .01em;
}
.pr-ilustrativa::before { content: "\2139\FE0E"; margin-right: .3rem; opacity: .75; }

/* ---- a imagem do card de prêmio ---------------------------------------- */
.pr-premio-arte { margin: -.25rem 0 .75rem; }
.pr-premio-arte img {
  display: block; width: 100%; height: auto;
  border-radius: .625rem;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--color-bg-hover);
}
.pr-premio-arte figcaption { margin-top: .35rem; }

.pr-lead--curta { margin-top: -.5rem; font-size: 1rem; }
.pr-premio-valor--menor { font-size: 1.25rem; }
.pr-premio .pr-premio-valor { margin-top: .35rem; }

/* o selo: SVG em CSS, quatro pontas — o gesto do "S" do selo da marca */
.pr-selo {
  display: inline-flex; align-items: center; gap: .35rem;
  margin: .6rem 0 .45rem; padding: .22rem .6rem .22rem .5rem;
  border-radius: 2rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
.pr-selo::before {
  content: ""; width: .7em; height: .7em; flex: 0 0 auto;
  background: currentColor;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
.pr-selo--patrocinador { background: var(--color-primary); color: var(--color-primary-text); }
.pr-selo--parceiro     { background: color-mix(in srgb, var(--color-primary) 14%, var(--color-bg-card)); color: var(--color-primary); }
.pr-selo--cliente      { background: var(--color-bg-hover); color: var(--color-text-muted); }

/* os cards do mural na home: logo em azulejo, selo, nome */
.pr-patros { list-style: none; margin: 0 0 .875rem; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
.pr-patros--grandes { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.pr-patro { display: flex; flex-direction: column; align-items: flex-start; padding: 1rem; }
.pr-patro h3 { margin: 0 0 .15rem; font-size: 1rem; line-height: 1.25; }
.pr-patro-meta { margin: 0; font-size: .8125rem; color: var(--color-text-muted); }
.pr-patro-desc { margin: .6rem 0 0; font-size: .9375rem; color: var(--color-text-muted); }
.pr-patro--grande {
  padding: 1.25rem;
  border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
  background: linear-gradient(160deg, color-mix(in srgb, var(--color-primary) 7%, var(--color-bg-card)), var(--color-bg-card) 60%);
}
.pr-patro--grande h3 { font-size: 1.25rem; }

/* o azulejo do logo: fundo macio, o PNG transparente senta em cima */
.pr-logo-tile {
  display: grid; place-items: center;
  width: 72px; height: 72px; border-radius: 18px;
  background: var(--color-bg-hover);
  overflow: hidden;
}
.pr-logo-tile img { width: 56px; height: 56px; object-fit: contain; }
.pr-patro--grande .pr-logo-tile { width: 88px; height: 88px; border-radius: 22px; background: var(--color-bg-card); box-shadow: inset 0 0 0 1px var(--color-border); }
.pr-patro--grande .pr-logo-tile img { width: 70px; height: 70px; }
.pr-logo-tile--iniciais { color: var(--color-primary); font-family: var(--font-marca); font-weight: 800; font-size: 1.5rem; letter-spacing: -.03em; background: color-mix(in srgb, var(--color-primary) 12%, var(--color-bg-card)); }

/* a vitrine: clientes de outra praça, em chips */
.pr-vitrine { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.pr-vitrine a { display: inline-block; padding: .4rem .8rem; border: 1px solid var(--color-border); border-radius: 2rem; background: var(--color-bg-card); color: var(--color-text); font-size: .875rem; text-decoration: none; }
.pr-vitrine a:hover { border-color: var(--color-border-strong); }

/* o mural completo (/premios/parceiros) usa o mesmo azulejo */
.pr-parceiro-logo.pr-logo-tile, .pr-parceiro .pr-logo-tile { flex: 0 0 auto; }

/* ---- a galeria de frases ------------------------------------------------ */
.pr-ordem { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 1rem; }
.pr-ordem a { padding: .4rem .85rem; border: 1px solid var(--color-border); border-radius: 2rem; text-decoration: none; color: var(--color-text); font-size: .9rem; font-weight: 600; }
.pr-ordem a.pr-ordem--ativa { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-text); }
.pr-ordem-nota { flex-basis: 100%; font-size: .875rem; color: var(--color-text-muted); }

.pr-frases { list-style: none; margin: 0; padding: 0; display: grid; gap: .875rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.pr-frase { position: relative; padding: 1.25rem 1.25rem 1rem; }
.pr-frase-texto {
  margin: 0 0 .75rem; padding: 0 0 0 1.1rem;
  font-size: 1.125rem; line-height: 1.45;
  border-left: 3px solid color-mix(in srgb, var(--color-primary) 50%, var(--color-border));
  text-wrap: pretty;
}
.pr-frase-autor { margin: 0 0 .85rem; font-size: .875rem; }
.pr-frase--minha { border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border)); }
.pr-frase--saiu .pr-frase-texto { opacity: .55; }
.pr-tag--cinza { background: var(--color-bg-hover); color: var(--color-text-muted); }

.pr-curtir-form { margin: 0; }
.pr-curtir {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 2.5rem; padding: .4rem .9rem;
  border: 1px solid var(--color-border-strong); border-radius: 2rem;
  background: var(--color-bg-card); color: var(--color-text-muted);
  font: inherit; font-size: .9375rem; font-weight: 650; cursor: pointer;
  transition: transform .15s ease, color .15s ease, border-color .15s ease, background-color .15s ease;
}
.pr-curtir .pr-ico { width: 1.1em; height: 1.1em; color: var(--color-border-strong); transition: color .15s ease, transform .2s ease; }
.pr-curtir:hover { border-color: var(--color-primary); color: var(--color-primary); }
.pr-curtir:hover .pr-ico { color: var(--color-primary); }
.pr-curtir[aria-pressed="true"] { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg-card)); color: var(--color-primary); }
.pr-curtir[aria-pressed="true"] .pr-ico { color: var(--color-primary); transform: scale(1.15); }
.pr-curtir[disabled] { opacity: .5; cursor: default; }
.pr-curtir-n { font-variant-numeric: tabular-nums; }
.pr-curtir--pulso .pr-ico { animation: pr-bate .35s ease; }
@keyframes pr-bate { 0% { transform: scale(1); } 40% { transform: scale(1.4); } 100% { transform: scale(1.15); } }
/* o spinner do botão (regra da casa) precisa de position:relative — .pr-btn já tem; este não é .pr-btn */
.pr-curtir { position: relative; }
.pr-curtir[aria-busy="true"] .pr-curtir-rotulo { visibility: hidden; }
.pr-curtir[aria-busy="true"]::after { content: ""; position: absolute; right: .8rem; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: pr-gira .7s linear infinite; }
@media (prefers-reduced-motion: reduce) { .pr-curtir--pulso .pr-ico { animation: none; } }

/* o carimbo: o selo raster no canto do card do patrocinador, levemente torto
   como carimbo é. Só enfeite — o selo em CSS é o que se lê. */
.pr-patro--grande, .pr-parceiro--completo { position: relative; }
.pr-carimbo {
  position: absolute; top: .75rem; right: .75rem;
  width: 64px; height: 64px;
  transform: rotate(9deg);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .12));
  pointer-events: none;
}
.pr-carimbo--parceiro { width: 52px; height: 52px; opacity: .92; }
@media (max-width: 420px) { .pr-carimbo { width: 56px; height: 56px; } }

/* ---- a apuração: critérios, ranking e as três avaliações abertas ------- */
.pr-criterios { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .4rem; }
.pr-criterios li { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; }
.pr-peso { padding: .1rem .5rem; border-radius: 2rem; background: var(--color-primary); color: var(--color-primary-text); font-size: .75rem; font-weight: 700; }
.pr-apuracao { list-style: none; margin: 0; padding: 0; display: grid; gap: .875rem; }
.pr-apuracao-item--topo { border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border)); }
.pr-apuracao-cabeca { display: grid; grid-template-columns: auto 1fr auto; gap: .9rem; align-items: start; }
.pr-apuracao-pos { font-family: var(--font-marca); font-weight: 800; font-size: 1.5rem; letter-spacing: -.03em; color: var(--color-primary); line-height: 1; padding-top: .2rem; }
.pr-apuracao-nota { font-family: var(--font-marca); font-weight: 800; font-size: 1.5rem; letter-spacing: -.03em; line-height: 1; padding-top: .2rem; font-variant-numeric: tabular-nums; }
.pr-apuracao-cabeca .pr-frase-texto { margin-bottom: .35rem; font-size: 1.0625rem; }
.pr-apuracao-cabeca .pr-frase-autor { margin: 0; }
.pr-apuracao-detalhe { margin-top: .75rem; }
.pr-apuracao-detalhe summary { cursor: pointer; font-weight: 650; color: var(--color-primary); }
.pr-tabela { width: 100%; border-collapse: collapse; margin-top: .6rem; font-size: .9rem; }
.pr-tabela th, .pr-tabela td { padding: .4rem .5rem; border-bottom: 1px solid var(--color-border-subtle); text-align: left; vertical-align: top; }
.pr-tabela th:not(:first-child), .pr-tabela td:not(:first-child) { text-align: center; font-variant-numeric: tabular-nums; }
.pr-tabela-just td { color: var(--color-text-muted); font-size: .875rem; border-bottom-width: 2px; }
.pr-tabela-mediana td { font-weight: 700; }
@media (max-width: 560px) { .pr-apuracao-cabeca { grid-template-columns: auto 1fr; } .pr-apuracao-nota { grid-column: 2; justify-self: start; } }

/* ---- trocar a frase: o aviso é o centro da tela ------------------------- */
.pr-alerta-troca {
  margin: 1.25rem 0 1.75rem; padding: 1.15rem 1.25rem;
  border: 2px solid var(--color-warning); border-radius: .75rem;
  background: color-mix(in srgb, var(--color-warning) 8%, var(--color-bg-card));
}
.pr-alerta-troca__titulo {
  margin: 0 0 .6rem;
  font-family: var(--font-marca); font-weight: 800;
  font-size: clamp(1.375rem, 5.5vw, 1.75rem); line-height: 1.15; letter-spacing: -.02em;
  color: var(--color-text);
}
.pr-alerta-troca__texto { margin: 0 0 .5rem; font-size: 1rem; line-height: 1.5; }
.pr-alerta-troca__texto:last-child { margin-bottom: 0; }
.pr-aceite--troca { border-color: var(--color-warning); }
.pr-aceite--troca:has(input:checked) { border-color: var(--color-primary); }


/* A lede quando ela vem DEPOIS da ação (ver a nota da ordem em home.php):
   um pouco mais de ar acima, para não colar no botão e virar legenda dele. */
.pr-lead--depois { margin-top: 1.5rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   AS GRADES: colunas pelo número de itens que elas têm, não por `auto-fit`
   ═══════════════════════════════════════════════════════════════════════════
   Regra da skill de design, ao pé da letra: *"pick a column count the items
   fill, so nothing stretches over dead space or sits alone in a row"*. O
   `auto-fit/minmax` decidia sozinho e decidia mal nos dois extremos: com um
   item, um card esticado até a borda; com 72rem, oito chips minúsculos.

   Celular é sempre uma coluna. */

/* ---- os prêmios: o 1º deitado na linha de cima, 2º e 3º dividindo a de baixo */
.pr-premios { grid-template-columns: 1fr; }
@media (min-width: 600px) {
  .pr-premios { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .pr-premio--1 {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: 1.5rem;
    align-items: center;
  }
  .pr-premio--1 .pr-premio-arte { margin: 0; }
  .pr-premio--1 .pr-premio-valor { font-size: 2.25rem; }
  .pr-premio--1 h3 { font-size: 1.25rem; }
}
/* brindes dos parceiros: são pequenos, cabem três */
@media (min-width: 900px) { .pr-premios--brindes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- o mural da home: patrocinador em duas colunas, parceiro na terceira */
.pr-mural-home { list-style: none; margin: 0; padding: 0; display: grid; gap: .875rem; grid-template-columns: 1fr; }
@media (min-width: 600px) {
  .pr-mural-home { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-mural-home .pr-patro--grande { grid-column: span 2; }
}
@media (min-width: 900px) {
  .pr-mural-home { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* O card grande, deitado: logo à esquerda, texto à direita. Em pé ele
   desperdiça as duas colunas que ganhou. */
@media (min-width: 600px) {
  .pr-mural-home .pr-patro--grande {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1.25rem;
    align-items: center;
  }
  .pr-mural-home .pr-patro--grande .pr-logo-tile { grid-row: 1 / span 4; }
}

/* ---- a página de parceiros: três colunas, patrocinador em duas */
.pr-mural--pagina { grid-template-columns: 1fr; }
@media (min-width: 600px)  { .pr-mural--pagina { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .pr-mural--pagina { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 600px)  { .pr-mural--pagina .pr-parceiro--destaque { grid-column: span 2; } }

/* ---- como funciona (três passos) e ganhadores (três) */
.pr-passos-cards, .pr-ganhadores { grid-template-columns: 1fr; }
@media (min-width: 600px) { .pr-passos-cards, .pr-ganhadores { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .pr-passos-cards, .pr-ganhadores { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ═══════════════════════════════════════════════════════════════════════════
   REVISÃO DAS SETE TELAS (Marcos, 05/09: "revise tudo, tudo que é do prêmios")
   ═══════════════════════════════════════════════════════════════════════════
   O eixo da página passou a 72rem, e isso expôs o que era largura de página
   disfarçada de largura de conteúdo: formulário, regulamento e cabeças de
   página passaram a esticar até 1152px — campo de texto com um metro. A regra
   da skill: texto corrido e formulário vivem na medida de leitura, encostados
   no eixo; só GRADE ocupa o eixo inteiro. */

/* ---- o que é leitura ou formulário fica na medida de leitura ---- */
.pr-cabeca,
.pr-form,
.pr-etapa,
.pr-progresso,
.pr-regulamento,
.pr-vazio,
.pr-convite-int { max-width: var(--leitura); }

/* A cabeça de página é um bloco só: kicker, título, tema e lede na mesma
   medida. O tema (`.pr-tema--hero`) era `inline-block` sem teto e saía mais
   largo que a lede logo abaixo — dois comprimentos num bloco que devia ser um. */
.pr-cabeca { padding: 1rem 0 2rem; }
.pr-cabeca .pr-tema--hero { display: block; }

/* ---- a galeria de frases: 1 / 2 / 3 colunas, e não `auto-fill` ---- */
.pr-frases { grid-template-columns: 1fr; }
@media (min-width: 600px) { .pr-frases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .pr-frases { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* A ordem: pílula SÓ nos dois botões de ordenação. O link "confirme sua
   inscrição" dentro da frase de aviso herdava a pílula, e virava um botão no
   meio de uma sentença — que é o que parecia quebrado na captura. */
.pr-ordem a { padding: 0; border: 0; border-radius: 0; font-weight: inherit; font-size: inherit; color: var(--color-primary); text-decoration: underline; }
.pr-ordem > a { padding: .4rem .85rem; border: 1px solid var(--color-border); border-radius: 2rem; text-decoration: none; color: var(--color-text); font-size: .9rem; font-weight: 600; }
.pr-ordem > a.pr-ordem--ativa { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-text); }
.pr-ordem-nota { margin-top: .25rem; }

/* ---- apuração: quatro critérios em quatro colunas; o ranking numa medida
   larga de leitura (56rem), porque cada linha tem frase, nota e detalhe ---- */
.pr-criterios { gap: .75rem; grid-template-columns: 1fr; }
.pr-criterios li { display: block; padding: .9rem 1rem; border: 1px solid var(--color-border); border-radius: .625rem; background: var(--color-bg-card); }
.pr-criterios li strong { display: block; margin-bottom: .2rem; }
.pr-criterios .pr-peso { display: inline-block; margin: 0 0 .35rem; padding: .1rem .5rem; border-radius: 2rem; background: color-mix(in srgb, var(--color-primary) 12%, transparent); color: var(--color-primary); font-weight: 700; font-size: .8rem; }
.pr-criterios .pr-peso::after { content: "%"; }
@media (min-width: 600px) { .pr-criterios { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .pr-criterios { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pr-apuracao { max-width: 56rem; }

/* ---- o painel do voto pelo WhatsApp (030) -------------------------------
   Card na largura do eixo, texto na medida de leitura (a regra da faixa). */
.pr-voto-painel { margin: 0 0 1rem; padding: 1.5rem 1.75rem; border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border)); }
.pr-voto-painel__texto { max-width: var(--leitura); color: var(--color-text-muted); margin: .5rem 0 1rem; }
.pr-voto-painel .pr-btn--wa { margin-bottom: .75rem; }
.pr-voto-painel[hidden] { display: none; }

/* Alvo de toque: 44px, como o rádio do formulário (medido 40 no celular, 05/09). */
.pr-curtir { min-height: 44px; }

/* ---- participar conta: a faixa da cor da marca (036) ---------------------
   Fundo cheio de `--color-primary`, que é a cor de SER CLICADA — aqui ela é a
   cor de SER LIDA, e por isso nada mais na página usa fundo cheio. */
.pr-fidelidade {
  margin: clamp(2rem, 6vw, 3.5rem) 0 0; padding: 1.5rem 1.75rem 1.6rem;
  border-radius: .875rem; background: var(--color-primary); color: var(--color-primary-text);
}
.pr-fidelidade__tarja { display: flex; align-items: center; gap: .5rem; margin: 0 0 .6rem; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.pr-fidelidade__titulo { margin: 0 0 .6rem; font-family: var(--font-marca); font-weight: 800; font-size: clamp(1.3rem, 3.2vw, 1.75rem); line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
.pr-fidelidade__texto { max-width: var(--leitura); margin: 0; font-size: 1.0625rem; line-height: 1.5; }
.pr-fidelidade__nota { max-width: var(--leitura); margin: .8rem 0 0; font-size: .8125rem; opacity: .82; }
.pr-fidelidade a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---- spoiler de dezembro (036) ------------------------------------------
   Fundo escuro e tarja quente: parece aviso de filme, e é a única coisa escura
   da página — o olho vai nela sem competir com a faixa da marca acima. */
.pr-spoiler {
  margin: 1rem 0 0; padding: 1.4rem 1.75rem 1.5rem;
  border-radius: .875rem;
  background: #1B1114; color: #F5EDEF;
  border: 1px solid color-mix(in srgb, var(--color-primary) 45%, #1B1114);
}
.pr-spoiler__tarja {
  display: inline-block; margin: 0 0 .7rem; padding: .2rem .6rem;
  border-radius: .3rem; background: #F0B429; color: #1B1114;
  font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.pr-spoiler__titulo { margin: 0 0 .9rem; font-family: var(--font-marca); font-weight: 800; font-size: clamp(1.2rem, 3vw, 1.6rem); line-height: 1.15; letter-spacing: -.02em; }
.pr-spoiler__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.pr-spoiler__lista li { display: flex; align-items: center; gap: .8rem; font-size: 1.0625rem; }
.pr-spoiler__ico { display: grid; place-items: center; flex: 0 0 auto; width: 2.5rem; height: 2.5rem; border-radius: .625rem; background: color-mix(in srgb, #F0B429 16%, transparent); color: #F0B429; }
.pr-spoiler__det { display: block; font-size: .8125rem; opacity: .7; }
.pr-spoiler__por { display: flex; align-items: center; gap: .8rem; margin: 1.1rem 0 0; padding-top: 1rem; border-top: 1px solid rgba(245,237,239,.14); font-size: .875rem; opacity: .9; }
.pr-spoiler__por img { flex: 0 0 auto; border-radius: .5rem; background: #fff; padding: 2px; }
.pr-spoiler__por a { color: #F0B429; }
@media (min-width: 48rem) { .pr-spoiler__lista { grid-template-columns: 1fr 1fr; } }
@media (max-width: 30rem) {
  .pr-fidelidade, .pr-spoiler { padding-left: 1.25rem; padding-right: 1.25rem; }
}