/* ==========================================================================
   Secoes da pagina
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. MENU (38:1649)
   -------------------------------------------------------------------------- */

/* A barra mantem a mesma altura o tempo todo — ao rolar ela so ganha sombra.
   Nada de `backdrop-filter` aqui: e recalculado a cada quadro de scroll e
   custa caro, principalmente no Firefox. */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  background: var(--navy-900);
  transition:
    background var(--dur-fast) var(--ease-slow),
    box-shadow var(--dur-fast) var(--ease-slow);
}

.header.is-stuck {
  background: #021030;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

.header__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--header-h);
}

/* No desktop o nav ocupa o espaco entre a logo e o botao, com a lista
   centralizada; o botao continua no fim da linha. */
.nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.nav__list {
  flex: 1;
  justify-content: center;
}

.nav__list {
  display: flex;
  gap: clamp(16px, 2.2vw, 30px);
}

.nav__link {
  position: relative;
  display: block;
  padding: 6px 2px;
  color: #fff;
  font-size: clamp(0.8125rem, 1.05vw, 1rem);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-slow);
}

/* Sublinhado entra da esquerda; no item ativo fica fixo. */
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease-slow);
}

.nav__link:hover,
.nav__link:focus-visible,
.nav__link.is-active {
  color: var(--lime);
}

.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link.is-active::after {
  transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   2. KV (84:513 desktop / 48:1264 mobile)
   O palco tem proporcao fixa e todos os elementos sao posicionados em %,
   entao a composicao inteira escala junto com a viewport.
   -------------------------------------------------------------------------- */

/* z-index acima do fundo animado e das secoes seguintes: sem isso o plano
   de luzes passaria por cima da arte do KV. */
.kv {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  height: var(--screen-h);
  margin-top: var(--header-h);
  padding: clamp(12px, 3.5svh, 40px) 40px clamp(10px, 2svh, 24px);
  overflow: hidden;
  isolation: isolate;
}

/* Area disponivel para a arte: tudo o que sobra da tela depois da nota
   legal. E um container de tamanho para que o palco (proporcao fixa) seja
   dimensionado pelo lado que limitar primeiro — largura ou altura. */
.kv__frame {
  flex: 1 1 0;
  min-height: 0;
  container-type: size;
  display: grid;
  place-items: center;
}

.kv__bg {
  position: absolute;
  inset: -6% 0;
  z-index: -1;
  width: 100%;
  height: 112%;
  object-fit: cover;
  object-position: center;
  will-change: transform;
}

/* O palco e um container de consulta: assim as medidas internas (fontes,
   paddings, raios) sao escritas como fracao da largura do palco, exatamente
   como no Figma, e a composicao inteira escala junto. */
.kv__stage {
  --stage-ratio: 1400 / 793;
  position: relative;
  container-type: inline-size;
  width: min(100cqw, 100cqh * var(--stage-ratio));
  max-width: 1400px;
  aspect-ratio: var(--stage-ratio);
}

.kv__stage > * {
  position: absolute;
}

.kv__stage img {
  width: 100%;
  height: auto;
}

.kv__selo    { top: -5.04%;  right: 8.91%;  width: 6.76%;  z-index: 4; }
.kv__logo    { top: 0;       left: 19.62%;  width: 31.23%; z-index: 3; }
.kv__produto { top: 93.44%;  left: 11.19%;  width: 20.75%; translate: -50% -50%; z-index: 4; }

/* A Renata (84:525) e ancorada pela borda de baixo do frame e propositalmente
   estoura 14.09% abaixo dele — o `.kv{overflow:hidden}` corta esse excesso,
   entao a base fica sempre rente ao rodape do palco, sem nenhuma folga.
   Isso e o que da ao trava `data-clamp="no-up"` uma margem real para
   proteger: o parallax so pode empurra-la para dentro dessa folga, nunca
   revelar o corte de baixo da imagem. */
.kv__renata {
  left: 8.52%;
  bottom: -14.09%;
  width: 27.52%;
  aspect-ratio: 385.223 / 780.208;
  translate: -50% 0;
  overflow: hidden;
  z-index: 3;
}

.kv__renata img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* Os dois planos de prêmios (103:369 e 103:368). Cada um leva a própria arte
   e os próprios brilhos, então o parallax move o conjunto inteiro e as luzes
   nunca escorregam de cima dos produtos. */
.kv__premios { top: 8.58%;  left: 50.48%; width: 46.21%; aspect-ratio: 646.928 / 581.081; z-index: 1; }
.kv__motos   { top: 32.57%; left: 57.39%; width: 51.38%; aspect-ratio: 719.314 / 615.515; z-index: 2; overflow: hidden; }

.kv__premios img {
  position: absolute;
  top: 3.36%;
  left: 0;
  width: 96.19%;
}

/* A arte das motos é a mesma do carrossel; aqui ela sobe 11% para o
   enquadramento do KV, e o frame recorta o excedente. */
.kv__motos img {
  position: absolute;
  top: -11.05%;
  left: 0;
  width: 100%;
}

.kv__actions {
  top: 83.37%;
  left: 22.28%;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.849cqw;
}

.kv__actions .btn {
  padding: 0.756cqw 1.429cqw;
  gap: 0.714cqw;
  border-width: 0.107cqw;
  font-size: 1.516cqw;
  line-height: 2.275cqw;
}

.kv__actions .btn__icon {
  width: 1.786cqw;
  height: 1.786cqw;
}

.kv__box {
  top: 59.83%;
  left: 24.97%;
  width: 37.57%;
  translate: -50% -50%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  /* Tudo em cqw: porcentagem de padding resolveria contra o palco inteiro,
     nao contra a caixa, e a caixa inflava por cima do logo. */
  gap: 1.865cqw;
  padding: 1.865cqw;
  border: 0.093cqw solid var(--lime);
  border-radius: 2.797cqw;
}

.kv__box-main,
.kv__box-sub {
  width: 56%;
}

.kv__box-main {
  font-size: 1.678cqw;
  line-height: 1.28;
}

.kv__box-sub {
  color: var(--text-muted);
  font-size: 1.119cqw;
  line-height: 1.3;
}

.kv__box b {
  font-weight: 800;
}

/* --- Brilhos do KV -------------------------------------------------------
   Os quatro degradês do Figma (Luz JBL, Flash Celular e os dois faróis)
   refeitos em CSS: são radial-gradients puros, então animam sem custo e
   ficam ancorados na arte do plano em que vivem. Cada um pisca do seu jeito.
   ------------------------------------------------------------------------ */

.glow {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* `closest-side` é o detalhe que importa: sem ele o gradiente usa
   `farthest-corner` e só chega a zero no canto da caixa — na borda do círculo
   ainda sobram ~29% de opacidade, que aparecem como um anel recortado.
   Com `closest-side` a cor se apaga exatamente na borda. */
.glow--jbl {
  left: 15.58%;
  top: 40.63%;
  width: 18.77%;
  background: radial-gradient(circle closest-side, #ff83f3, rgba(230, 34, 25, 0));
  animation: glow-breathe 2.6s var(--ease-inout) infinite;
}

.glow--flash {
  left: 1.48%;
  top: 55.11%;
  width: 8.52%;
  background: radial-gradient(circle closest-side, #fff, rgba(189, 225, 255, 0));
  animation: glow-flash 3.1s linear infinite;
}

.glow--farol-1 {
  left: 31.1%;
  top: 29.71%;
  width: 10.32%;
  background: radial-gradient(circle closest-side, #fff, rgba(255, 255, 255, 0));
  animation: glow-farol 1.8s var(--ease-inout) infinite;
}

.glow--farol-2 {
  left: 17.5%;
  top: 33.16%;
  width: 6.46%;
  background: radial-gradient(circle closest-side, #fff, rgba(255, 255, 255, 0));
  animation: glow-farol 2.3s var(--ease-inout) infinite;
  animation-delay: -0.7s;
}

/* Farol: aceso o tempo todo, com uma trepidação de lâmpada. */
@keyframes glow-farol {
  0%, 100% { opacity: 0.55; transform: scale(0.92); }
  42%      { opacity: 1;    transform: scale(1.08); }
  56%      { opacity: 0.78; transform: scale(1); }
  70%      { opacity: 0.96; transform: scale(1.05); }
}

/* Luz da caixa de som: respiração lenta e contínua. */
@keyframes glow-breathe {
  0%, 100% { opacity: 0.5; transform: scale(0.86); }
  50%      { opacity: 1;   transform: scale(1.14); }
}

/* Flash do celular: dois estouros curtos e um intervalo apagado. */
@keyframes glow-flash {
  0%, 60%, 100% { opacity: 0.18; transform: scale(0.75); }
  64%           { opacity: 1;    transform: scale(1.18); }
  68%           { opacity: 0.3;  transform: scale(0.9); }
  73%           { opacity: 1;    transform: scale(1.1); }
  78%           { opacity: 0.18; transform: scale(0.75); }
}

/* --- Vida própria das artes ---------------------------------------------
   O wrapper leva o transform do parallax; a imagem interna fica livre para
   ter a própria animação sem que as duas briguem pela mesma propriedade.
   ------------------------------------------------------------------------ */

.kv__logo img {
  animation: logo-zoom 5.5s var(--ease-inout) infinite alternate;
}

@keyframes logo-zoom {
  from { transform: scale(0.95); }
  to   { transform: scale(1.05); }
}

.kv__produto img {
  animation: produto-float 3s var(--ease-inout) infinite alternate;
}

@keyframes produto-float {
  from { transform: translateY(0); }
  to   { transform: translateY(-5px); }
}

/* Indicador de rolagem */
.kv__scroll {
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 5;
  translate: -50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: opacity var(--dur-fast) var(--ease-slow), color var(--dur-fast) var(--ease-slow);
}

.kv__scroll:hover {
  color: var(--lime);
}

.kv__scroll-arrow {
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  animation: scroll-hint 1.8s var(--ease-inout) infinite;
}

@keyframes scroll-hint {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.5; }
  50%      { transform: rotate(45deg) translate(3px, 3px); opacity: 1; }
}

/* Nota legal no rodape do KV (131:767) — mesmo texto do fim de Premios. */
/* Fica acima da arte: com o palco limitado pela altura, a base da Renata
   (que estoura o palco de proposito) pode passar por tras do texto. */
.kv__legal {
  position: relative;
  z-index: 6;
  flex: none;
  max-width: 780px;
  margin: clamp(8px, 2svh, 20px) auto 0;
  padding-inline: 20px;
  color: #fff;
  font-size: clamp(0.625rem, 1.4svh, 0.75rem);
  line-height: 1.45;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}

/* --------------------------------------------------------------------------
   3. COMO PARTICIPAR (38:1549)
   -------------------------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  margin-top: clamp(12px, 4svh, 58px);
}

.step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4px, 1.4svh, 14px);
  padding: clamp(12px, 3svh, 30px) 27px;
  border: 1px solid transparent;
  border-radius: 30px;
  text-align: center;
  overflow: hidden;
  transition:
    border-color var(--dur-fast) var(--ease-slow),
    background var(--dur-fast) var(--ease-slow),
    transform var(--dur-fast) var(--ease-slow);
}

.step > * {
  position: relative;
}

/* Variante 77:127 do Figma. */
.step:hover {
  border-color: var(--border-blue);
  background: linear-gradient(180deg, rgba(2, 36, 88, 0.1), var(--navy-700));
  transform: translateY(-6px);
}

.step__num {
  font-family: "Inter", "Sora", sans-serif;
  font-weight: 700;
  font-size: clamp(1.75rem, min(4vw, 6svh), 3.25rem);
  line-height: 1;
  color: var(--lime);
  transition: transform var(--dur-fast) var(--ease-bouncy), text-shadow var(--dur-fast) var(--ease-slow);
}

.step:hover .step__num {
  transform: scale(1.06);
  text-shadow: 0 0 26px rgba(188, 255, 0, 0.55);
}

.step__title {
  font-weight: 700;
  font-size: clamp(0.875rem, min(1.6vw, 2.5svh), 1.375rem);
  line-height: 1.25;
  text-transform: uppercase;
}

.step__title span {
  display: block;
}

.step__text {
  color: var(--text-muted);
  font-size: clamp(0.8125rem, min(1.25vw, 2.1svh), 1.125rem);
  line-height: 1.35;
}

.section__cta {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(12px, 3svh, 30px);
  margin-top: clamp(12px, 4svh, 44px);
}

/* --------------------------------------------------------------------------
   4. PRÊMIOS (44:483)
   -------------------------------------------------------------------------- */

/* Premios e a secao mais cheia e a nota legal precisa ficar sempre visivel:
   ela ocupa no minimo uma tela, mas pode crescer quando o conteudo nao cabe
   (celulares, telas baixas) em vez de esconder algo. Com altura automatica
   ela deixa de ser container de tamanho — `size` exige altura definida. */
.section--prizes {
  height: auto;
  min-height: var(--screen-h);
  container-type: normal;
}

/* O cabecalho e o rodape da secao tem altura propria; o carrossel entre eles
   fica com o restante (ver .carousel em components.css). */
.section--prizes > .container {
  flex: none;
}

/* Com a secao podendo crescer, o carrossel tem um piso de altura para a arte
   dos premios nunca sumir; acima dele, ocupa o que sobrar da tela. */
.section--prizes .carousel {
  min-height: clamp(200px, 26svh, 300px);
}

/* Em telas largas o titulo do vendedor fica centralizado sobre os cards, que
   ficam mais estreitos — o bloco inteiro alinha pelo centro da secao. */
@media (min-width: 901px) {
  /* "Premios de verdade" numa linha so: a secao mais cheia da pagina
     devolve ao carrossel a altura de uma linha de titulo. */
  .section--prizes .display {
    display: flex;
    justify-content: center;
    gap: 0.3em;
  }

  .section--prizes .seller__title {
    margin-top: clamp(10px, 3svh, 40px);
  }
}

.seller__title {
  margin-top: clamp(10px, 3.5svh, 60px);
  font-weight: 700;
  font-size: clamp(0.875rem, min(1.9vw, 2.6svh), 1.6rem);
  text-align: center;
  text-transform: uppercase;
}

.seller__title em {
  color: var(--lime);
  font-style: normal;
}

/* Duas colunas para o vendedor, uma só para a loja — em ambos os casos o
   bloco fica centralizado e os cards mantêm a mesma largura. */
.seller {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 300px));
  justify-content: center;
  gap: clamp(10px, 2svh, 20px);
  margin-top: clamp(8px, 2svh, 30px);
}

.prizes__legal {
  max-width: 768px;
  margin: clamp(8px, 2.5svh, 40px) auto 0;
  color: var(--text-muted);
  font-size: clamp(0.625rem, 1.45svh, 0.8125rem);
  line-height: 1.4;
  text-align: center;
}

/* Telas bem baixas (celulares com a barra do navegador visivel): o subtitulo
   de Como participar sai para os passos e botoes caberem. */
@container section (max-height: 560px) {
  .section--steps .section__sub {
    display: none;
  }
}

.seller__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1.4svh, 15px);
  padding: clamp(8px, 2.2svh, 25px) clamp(12px, 2vw, 25px) clamp(8px, 1.8svh, 20px);
  border: 1px solid var(--border-navy);
  border-radius: 18px;
  background: var(--surface);
  text-align: center;
  transition:
    background var(--dur-fast) var(--ease-slow),
    transform var(--dur-fast) var(--ease-slow),
    box-shadow var(--dur-fast) var(--ease-slow);
}

/* Variante 77:153 do Figma. */
.seller__card:hover {
  background: linear-gradient(180deg, var(--navy-900), var(--navy-700));
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(4, 78, 190, 0.28);
}

.seller__value {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  color: var(--lime-2);
  font-weight: 800;
  line-height: 1;
}

/* "R$" menor colado no valor, como no Figma: R$2 MIL. */
.seller__amount   { font-size: clamp(1.5rem, min(3.4vw, 5svh), 3rem); white-space: nowrap; }
.seller__currency { font-size: 0.667em; }
.seller__mark     { font-size: 0.5em; vertical-align: super; line-height: 0; }

.seller__label {
  color: #fff;
  font-weight: 600;
  font-size: clamp(0.8rem, 1.1vw, 1.0625rem);
  line-height: 1.15;
  text-align: left;
  text-transform: uppercase;
  padding-bottom: 0.1em;
}

.seller__label span { display: block; }

.seller__note {
  color: var(--text-muted);
  font-size: clamp(0.75rem, 1.6svh, 0.875rem);
}

/* --------------------------------------------------------------------------
   5. DÚVIDAS FREQUENTES (45:573)
   -------------------------------------------------------------------------- */

/* A lista cresce ate o limite da secao e, dali em diante, rola por dentro —
   abrir uma resposta nunca empurra a secao para alem da tela. */
.section--faq > .container {
  flex: 0 1 auto;
}

.faq {
  flex: 0 1 auto;
  min-height: 0;
  margin-top: clamp(10px, 3svh, 30px);
  border: 1px solid var(--border-navy);
  border-radius: 16px;
  background: var(--surface);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--lime) transparent;
}

.faq::-webkit-scrollbar {
  width: 6px;
}

.faq::-webkit-scrollbar-thumb {
  background: var(--lime);
  border-radius: 999px;
}

.faq__item + .faq__item {
  border-top: 1px solid var(--border-navy);
}

.faq__item[hidden] { display: none; }

.faq__heading { font: inherit; }

.faq__trigger {
  display: grid;
  grid-template-columns: 56px 1fr 24px;
  align-items: center;
  gap: 24px;
  width: 100%;
  padding: clamp(12px, 3svh, 30px) 30px;
  text-align: left;
  transition: background var(--dur-fast) var(--ease-slow);
}

.faq__trigger:hover {
  background: rgba(31, 115, 240, 0.1);
}

.faq__num {
  font-family: "Inter", "Sora", sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--lime-2);
}

.faq__q {
  font-weight: 600;
  font-size: clamp(0.95rem, 1.4vw, 1.25rem);
  color: var(--text-soft);
  line-height: 1.3;
}

.faq__q mark {
  background: rgba(188, 255, 0, 0.25);
  color: #fff;
  border-radius: 3px;
}

/* Chevron exportado do Figma (84:486). O glifo aponta para a direita; a
   rotacao define fechado (para baixo) e aberto (para cima). */
.faq__icon {
  justify-self: end;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
}

.faq__icon img {
  width: 11px;
  height: 22px;
  transform: rotate(90deg);
  transition: transform var(--dur-fast) var(--ease-slow);
}

.faq__trigger:hover .faq__icon img {
  transform: rotate(90deg) translateX(3px);
}

.faq__trigger[aria-expanded="true"] .faq__icon img {
  transform: rotate(-90deg);
}

/* Item aberto: gradiente 45:577. */
.faq__item.is-open {
  background: linear-gradient(90deg, var(--navy-700) 0%, var(--navy-900) 75.601%);
}

.faq__item.is-open .faq__trigger:hover {
  background: none;
}

/* grid-template-rows anima a altura automatica sem medir nada em JS. */
.faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-fast) var(--ease-slow);
}

.faq__item.is-open .faq__panel {
  grid-template-rows: 1fr;
}

.faq__panel-inner {
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-slow);
}

.faq__item.is-open .faq__panel-inner {
  opacity: 1;
}

/* Resposta em HTML: paragrafos, listas, tabela e links, no mesmo ritmo. */
.faq__answer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 30px 30px 110px;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.4;
}

.faq__answer ul,
.faq__answer ol {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 1.3em;
}

.faq__answer ul { list-style: disc; }
.faq__answer ol { list-style: decimal; }

.faq__answer li::marker {
  color: var(--lime);
  font-weight: 700;
}

.faq__answer strong {
  color: var(--text-soft);
  font-weight: 600;
}

.faq__answer a {
  color: var(--lime);
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
  transition: color var(--dur-fast) var(--ease-slow);
}

.faq__answer a:hover,
.faq__answer a:focus-visible {
  color: var(--lime-2);
}

.faq__answer table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375em;
}

.faq__answer th,
.faq__answer td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-navy);
  text-align: left;
  vertical-align: top;
}

.faq__answer th {
  color: var(--lime-2);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.8125em;
  letter-spacing: 0.04em;
}

.faq__answer th:first-child,
.faq__answer td:first-child {
  padding-left: 0;
}

.faq__answer th:last-child,
.faq__answer td:last-child {
  width: 1%;
  text-align: center;
  white-space: nowrap;
}

.faq__answer td:last-child {
  color: #fff;
  font-weight: 700;
}

.faq__empty {
  margin-top: clamp(10px, 3svh, 26px);
  color: var(--text-muted);
  text-align: center;
}

/* --------------------------------------------------------------------------
   6. GANHADORES (45:626)
   -------------------------------------------------------------------------- */

/* Duas colunas: lista de sorteios (busca + linha do tempo) e o mapa. O
   bloco ocupa toda a altura que sobra na secao; o mapa se ajusta a ela e a
   linha do tempo rola por dentro quando a API retorna muitos ganhadores. */
.section--winners > .container {
  flex: 1 1 0;
}

.winners__layout {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  gap: 50px;
  margin-top: clamp(10px, 3svh, 40px);
}

.winners__list {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.winners__list > * {
  flex: none;
}

/* .search traz seu proprio margin-top (pensado para ficar logo abaixo do
   titulo da secao); aqui quem define esse espaco e o `.winners__layout`,
   entao o da busca seria um segundo gap empilhado por cima. */
.winners__list .search {
  margin-top: 0;
}

.winners__tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.winners__tab {
  padding: 8px 18px;
  border: 1px solid var(--border-navy);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.875rem;
  transition:
    background var(--dur-fast) var(--ease-slow),
    color var(--dur-fast) var(--ease-slow),
    border-color var(--dur-fast) var(--ease-slow);
}

.winners__tab:hover,
.winners__tab:focus-visible {
  border-color: var(--lime);
  color: #fff;
}

.winners__tab.is-active {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--lime-ink);
}

.winners__filter {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding: 10px 20px;
  border: 1px solid var(--border-navy);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.875rem;
}

.winners__filter b {
  color: var(--lime-2);
}

.winners__filter-clear {
  color: var(--lime);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--dur-fast) var(--ease-slow);
}

.winners__filter-clear:hover,
.winners__filter-clear:focus-visible {
  color: var(--lime-2);
}

.winners__empty {
  margin-top: clamp(10px, 3svh, 26px);
  color: var(--text-muted);
  text-align: center;
}

/* --- Mapa do Brasil ------------------------------------------------------- */

.winners__map {
  flex: none;
  width: min(100%, 632px);
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 2svh, 20px);
}

.winners__map > * {
  flex: none;
}

/* O mapa fica com a altura que a legenda deixar livre; o SVG preenche a
   caixa mantendo a proporcao (`preserveAspectRatio` padrao, centralizado). */
.winners__map > .map {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
}

.map svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* `transform-box:fill-box` centra a escala/realce no proprio estado, nao no
   canto do viewBox inteiro do mapa. */
.map__state {
  stroke: var(--border-navy);
  stroke-width: 1.6;
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center;
  transition:
    filter var(--dur-fast) var(--ease-slow),
    stroke var(--dur-fast) var(--ease-slow),
    stroke-width var(--dur-fast) var(--ease-slow);
}

.map__state:hover,
.map__state:focus-visible {
  filter: brightness(1.3);
  stroke: var(--lime);
  outline: none;
}

.map__state.is-active {
  stroke: var(--lime);
  stroke-width: 2.5;
  filter: brightness(1.15) drop-shadow(0 0 10px rgba(188, 255, 0, 0.55));
}

.map__caption {
  color: #fff;
  font-size: 0.9375rem;
  line-height: 1.4;
}

.map__caption strong {
  display: block;
  margin-bottom: 4px;
  font-size: 1.125rem;
  color: var(--lime);
}

.map__legend {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.8125rem;
}

.map__legend-bar {
  flex: 1;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), var(--lime));
}

.winners__list > .timeline {
  flex: 0 1 auto;
  min-height: 0;
}

.timeline {
  position: relative;
  margin-top: clamp(10px, 3svh, 30px);
  overflow-y: auto;
  overscroll-behavior: contain;
  overflow-x: hidden;
  padding-right: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--lime) transparent;
}

.timeline::-webkit-scrollbar {
  width: 6px;
}

.timeline::-webkit-scrollbar-track {
  background: transparent;
}

.timeline::-webkit-scrollbar-thumb {
  background: var(--lime);
  border-radius: 999px;
}

.timeline__rail {
  position: absolute;
  left: 11px;
  top: 26px;
  bottom: 60px;
  width: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.22);
  overflow: hidden;
}

/* Preenchida conforme o scroll (scaleY controlado por motion.js). Sem
   motion o trilho ja nasce inteiro, em vez de ficar invisivel para sempre. */
.timeline__rail i {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, var(--lime), rgba(188, 255, 0, 0.35));
  transform-origin: top;
}

html.has-motion .timeline__rail i {
  transform: scaleY(0);
}

.timeline__list {
  display: flex;
  flex-direction: column;
}

.draw {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 30px;
  padding-bottom: 40px;
}

/* Especificidade: sem isto, `display:grid` acima venceria o `[hidden]` do
   navegador e o bloco filtrado continuaria visivel. */
.draw[hidden] {
  display: none;
}

.draw__dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--lime-2);
  transition:
    transform var(--dur-slow) var(--ease-bouncy),
    opacity var(--dur-fast) var(--ease-slow),
    box-shadow var(--dur-fast) var(--ease-slow);
}

html.has-motion .draw__dot {
  transform: scale(0.4);
  opacity: 0.35;
}

.draw.is-lit .draw__dot {
  transform: scale(1);
  opacity: 1;
  box-shadow: 0 0 18px rgba(188, 255, 0, 0.65);
}

.draw__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.draw__head {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.draw__name {
  font-weight: 600;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
}

.draw__date {
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--lime-2);
  color: var(--lime-ink);
  font-weight: 600;
  font-size: 0.8125rem;
  transition: box-shadow var(--dur-fast) var(--ease-slow);
}

.draw:hover .draw__date {
  box-shadow: 0 0 16px rgba(188, 255, 0, 0.5);
}

.draw__tipo {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-navy);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.draw__tipo--pintor {
  border-color: var(--lime);
  color: var(--lime);
}

.draw__tipo--consumidor {
  border-color: #1f73f0;
  color: #1f73f0;
}

.draw__people {
  border: 1px solid var(--border-navy);
  border-radius: 22px;
  background: var(--surface);
  overflow: hidden;
}

/* Coluna unica (nome/cpf + premio empilhados) em vez de reservar uma faixa
   fixa de 320px pro nome e espremer o premio real numa terceira coluna
   estreita — a descricao do premio vindo da API costuma ser bem mais longa
   que o "Lorem ipsum" do placeholder e quebrava/cortava nessa faixa. */
.winner {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: start;
  gap: 24px;
  row-gap: 6px;
  padding: 20px 28px;
  transition: background var(--dur-fast) var(--ease-slow);
}

.winner[hidden] {
  display: none;
}

.winner + .winner {
  border-top: 1px solid var(--border-navy);
}

.winner:hover {
  background: rgba(31, 115, 240, 0.12);
}

/* Disco lime com o vetor de pessoa dentro, exportado do Figma (110:373). */
.winner__avatar {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  transition: box-shadow var(--dur-fast) var(--ease-slow), transform var(--dur-fast) var(--ease-bouncy);
}

.winner:hover .winner__avatar {
  transform: scale(1.08);
  box-shadow: 0 0 16px rgba(188, 255, 0, 0.6);
}

.winner__id {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  transition: transform var(--dur-fast) var(--ease-slow);
}

.winner:hover .winner__id {
  transform: translateX(4px);
}

.winner__name {
  font-weight: 600;
  font-size: 1.125rem;
  overflow-wrap: break-word;
}

.winner__cpf {
  color: var(--text-muted);
  font-size: 0.875rem;
}

.winner__prize {
  grid-column: 2;
  min-width: 0;
  color: var(--text-muted);
  font-size: 1rem;
  overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   7. RODAPÉ (36:1114)
   -------------------------------------------------------------------------- */

.footer {
  position: relative;
  z-index: 1;
  padding-block: 70px 40px;
  background: #fff;
  color: var(--ink);
}

.footer__top {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 60px;
}

/* As tres colunas de links entram direto na grade do rodape em vez de
   formarem uma coluna unica dentro de um wrapper. */
.footer__cols {
  display: contents;
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 26px;
  align-items: flex-start;
}

.footer__logo {
  width: 199px;
  height: auto;
  transition: transform var(--dur-fast) var(--ease-slow);
}

.footer__logo:hover {
  transform: scale(1.04);
}

.footer__col-title {
  margin-bottom: 12px;
  color: var(--lime-ink);
  font-weight: 700;
  font-size: 1rem;
}

.footer__col li + li {
  margin-top: 12px;
}

.footer__link {
  position: relative;
  display: inline-block;
  color: var(--ink);
  font-size: 0.9375rem;
  transition: color var(--dur-fast) var(--ease-slow), transform var(--dur-fast) var(--ease-slow);
}

.footer__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1.5px;
  background: var(--lime-ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease-slow);
}

.footer__link:hover,
.footer__link:focus-visible {
  color: var(--lime-ink);
  transform: translateX(4px);
}

.footer__link:hover::after,
.footer__link:focus-visible::after {
  transform: scaleX(1);
}

.footer__rule {
  margin: 30px 0;
  border: 0;
  border-top: 1px solid var(--rule-light);
}

.footer__legal {
  color: var(--ink);
  font-size: 0.75rem;
  line-height: 1.35;
}

.footer__credits {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 30px;
  color: var(--ink-soft);
  font-size: 0.75rem;
}

.footer__credits img {
  width: 200px;
  height: auto;
}

/* ==========================================================================
   Responsivo
   ========================================================================== */

@media (max-width: 1180px) {
  .logo { --logo-w: 150px; }

  .btn-login {
    gap: 10px;
    padding: 10px 18px;
    font-size: 0.875rem;
  }

  .btn-login img { width: 20px; height: 20px; }
}

@media (max-width: 1120px) {
  .winner {
    grid-template-columns: 44px minmax(0, 1fr);
    row-gap: 6px;
  }

  .winner__prize {
    grid-column: 2;
  }

  /* Lista e mapa empilham: o mapa sobe, compacto, com a legenda ao lado, e a
     lista fica com o resto da altura, rolando por dentro. */
  .winners__layout {
    flex-direction: column;
    gap: clamp(10px, 2.5svh, 30px);
  }

  .winners__map {
    order: -1;
    width: 100%;
    max-width: 640px;
    /* Minimo, e nao altura fixa: se a legenda quebrar em muitas linhas o
       bloco cresce e quem cede e a lista, que rola por dentro. */
    min-height: clamp(110px, 28svh, 380px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto 1fr;
    column-gap: 16px;
    row-gap: 10px;
  }

  .winners__map > .map {
    grid-row: 1 / -1;
    height: 100%;
  }

  .map__caption { grid-row: 2; }
  .map__legend  { grid-row: 3; }

  .winners__list {
    flex: 1 1 0;
  }

  .footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
  }
}

/* Faixa intermediaria (tablet retrato): a pagina ainda usa o modelo de uma
   secao por tela, entao os blocos encolhem para caber. O mobile de verdade
   (<=768px) segue o frame 47:987 do Figma e esta no fim do arquivo. */
@media (min-width: 769px) and (max-width: 900px) {
  .steps {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 520px;
    margin-inline: auto;
  }

  /* Empilhados, os tres passos centralizados nao cabem numa tela: o numero
     vai para a esquerda e titulo + texto ficam ao lado dele. */
  .step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 18px;
    align-items: center;
    padding: clamp(8px, 2svh, 24px) 20px;
    text-align: left;
  }

  .step__num {
    grid-row: span 2;
  }

  /* As linhas do Figma viram uma frase so; o espaco entre elas vem daqui. */
  .step__title span,
  .seller__label span {
    display: inline;
  }

  .step__title span + span::before,
  .seller__label span + span::before {
    content: " ";
  }

  /* Dois cartoes lado a lado, com o valor sobre o rotulo. */
  .seller {
    grid-template-columns: repeat(2, minmax(0, 260px));
    gap: 10px;
  }

  .seller--single {
    grid-template-columns: minmax(0, 260px);
  }

  .seller__value {
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }

  .seller__label {
    text-align: center;
  }
}

/* --- Menu mobile --------------------------------------------------------- */

/* Abaixo de 1024px logo + 5 itens + botao nao cabem lado a lado: o menu
   vira painel e o botao de login passa a morar dentro dele. */
@media (max-width: 1024px) {
  .burger { display: block; }

  .btn-login {
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity var(--dur-slow) var(--ease-slow),
      transform var(--dur-slow) var(--ease-slow);
  }

  .nav.is-open .btn-login {
    opacity: 1;
    transform: none;
    transition-delay: 380ms;
  }

  .nav {
    position: fixed;
    inset: 0;
    z-index: 2;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 38px;
    background: rgba(2, 16, 44, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    opacity: 0;
    visibility: hidden;
    transform: translateX(12%);
    transition:
      opacity var(--dur-fast) var(--ease-slow),
      transform var(--dur-slow) var(--ease-slow),
      visibility 0s linear var(--dur-slow);
  }

  .nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }

  .nav__list {
    flex: none;
    flex-direction: column;
    align-items: center;
    gap: 26px;
  }

  .nav__item {
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity var(--dur-slow) var(--ease-slow),
      transform var(--dur-slow) var(--ease-slow);
  }

  .nav.is-open .nav__item {
    opacity: 1;
    transform: none;
    transition-delay: calc(var(--i, 0) * 60ms + 80ms);
  }

  .nav__link {
    font-size: 1.35rem;
  }
}

/* ==========================================================================
   MOBILE — frame 47:987 do Figma (360px de largura)

   O desktop trabalha com "uma secao por tela" (`--screen-h`) e mede tudo em
   `svh`. O mobile do Figma nao e assim: e uma pagina que rola de ponta a
   ponta, com cada secao do tamanho do proprio conteudo e medidas fixas.

   Para reproduzir isso sem congelar a pagina em 360px, `--u` vale 1px do
   frame: tudo abaixo e escrito com o numero que esta no Figma, multiplicado
   por `--u`. Em 360px de viewport a conta bate exatamente; acima disso a
   composicao cresce junto, com teto em 1.2px por unidade para que aparelhos
   largos (e tablets em 768px) nao estiquem tipografia e espacos alem do que
   o desenho pede.
   ========================================================================== */

@media (max-width: 768px) {
  :root {
    --u: min(0.2778vw, 1.2px);

    /* MENU (47:988): 54.628 de altura, 21.851 de respiro lateral. */
    --header-h: 55px;
    --gutter: calc(var(--u) * 21.851);
    --section-pad: calc(var(--u) * 43.702);
  }

  /* --- Modelo de secao -------------------------------------------------- */

  /* Altura pelo conteudo. `container-type: size` exige altura definida —
     mantido assim, cada secao viraria uma faixa de altura zero. */
  .section {
    height: auto;
    min-height: 0;
    justify-content: flex-start;
    container-type: inline-size;
  }

  /* Nada mais disputa a altura da secao: listas e carrossel deixam de rolar
     por dentro e passam a empurrar a pagina, como no Figma. */
  .section > .container,
  .section--prizes > .container,
  .section--faq > .container,
  .section--winners > .container {
    flex: none;
  }

  .section__head {
    gap: calc(var(--u) * 16.388);
  }

  .display {
    font-size: calc(var(--u) * 39.332);
    line-height: 1;
  }

  .section__sub {
    font-size: calc(var(--u) * 10.379);
    line-height: 1.48;
  }

  .logo {
    --logo-w: calc(var(--u) * 112.832);
    height: 50px;
  }

  /* --- Botao "Link" (98:130) -------------------------------------------- */

  .btn {
    padding: calc(var(--u) * 6.42) calc(var(--u) * 14.154);
    gap: calc(var(--u) * 7.077);
    border-width: calc(var(--u) * 1.062);
    font-size: calc(var(--u) * 15.02);
    line-height: calc(var(--u) * 22.537);
  }

  .btn__icon {
    width: calc(var(--u) * 12.521);
    height: calc(var(--u) * 12.521);
  }

  /* No Figma os dois botoes ficam empilhados e centralizados em todas as
     secoes, nunca lado a lado. */
  .section__cta {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    gap: calc(var(--u) * 16.388);
    margin-top: calc(var(--u) * 16.388);
  }

  .section__cta .btn {
    min-width: 0;
  }

  /* --- KV (48:1264) ------------------------------------------------------
     O bloco inteiro tem 929 de altura no frame de 360, e todo elemento e
     posicionado em % desse palco — inclusive a nota legal, que no Figma fica
     por cima da arte, e nao depois dela. */

  .kv {
    height: auto;
    padding: 0;
  }

  .kv__frame {
    flex: none;
    container-type: inline-size;
  }

  .kv__stage {
    --stage-ratio: 360 / 929;
    width: 100cqw;
    max-width: none;
  }

  .kv__bg {
    object-position: 62% center;
  }

  /* Os frames de premios so mudam de posicao e tamanho: as porcentagens
     internas (arte e brilhos) sao identicas as do desktop. */
  .kv__selo    { top: 0;      left: 79.86%; right: auto; width: 11.02%; }
  .kv__logo    { top: 12.45%; left: 52.39%; width: 74.63%; translate: -50% -50%; }
  .kv__premios { top: 22.54%; left: 5.66%;  width: 83.57%; }
  .kv__motos   { top: 32.06%; left: 18.16%; width: 92.91%; }

  /* A caixa de texto (84:552) ocupa 73.68% do palco, mas so a metade direita
     leva texto (`align-items: flex-end` + 50% de largura): a metade esquerda
     e vazada de proposito, para a Renata aparecer por tras. */
  .kv__box {
    top: 58.83%;
    left: 54.04%;
    width: 73.68%;
    translate: -50% 0;
    gap: 3.657cqw;
    padding: 3.657cqw;
    border-width: 0.183cqw;
    border-radius: 5.486cqw;
  }

  .kv__box-main,
  .kv__box-sub {
    width: 50%;
  }

  .kv__box-main { font-size: 3.29cqw; }
  .kv__box-sub  { font-size: 2.194cqw; }

  /* Ela nasce em 53.63% e termina exatamente na base do palco (929). */
  .kv__renata  { top: 53.63%; bottom: auto; left: 17.82%; width: 59.08%; }
  .kv__produto { top: 83.41%; left: 26.75%; width: 41.21%; }

  .kv__actions {
    top: 81.2%;
    left: 50.2%;
    translate: -50% 0;
    align-items: center;
    gap: 2.333cqw;
  }

  .kv__actions .btn {
    padding: 1.784cqw 3.932cqw;
    gap: 1.966cqw;
    border-width: 0.295cqw;
    font-size: 4.172cqw;
    line-height: 6.26cqw;
  }

  .kv__actions .btn__icon {
    width: 3.478cqw;
    height: 3.478cqw;
  }

  /* 131:766 — dentro do palco, sobre a arte. */
  .kv__legal {
    position: absolute;
    top: 92.28%;
    left: 50%;
    translate: -50% 0;
    width: 87.86%;
    max-width: none;
    margin: 0;
    padding-inline: 0;
    font-size: calc(var(--u) * 7);
    line-height: 1.25;
  }

  .kv__scroll { display: none; }

  /* --- COMO PARTICIPAR (47:1021) ---------------------------------------- */

  /* Os tres cards ficam empilhados, encostados e centralizados (84:981). */
  .steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    width: 100%;
    max-width: calc(var(--u) * 309.107);
    margin: calc(var(--u) * 16.388) auto 0;
  }

  .step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--u) * 10.064);
    padding: calc(var(--u) * 21.566) calc(var(--u) * 19.409);
    text-align: center;
  }

  .step__num   { font-size: calc(var(--u) * 37.38); }
  .step__title { font-size: calc(var(--u) * 15.81); }
  .step__text  { font-size: calc(var(--u) * 12.94); }

  /* --- PREMIOS (47:1043) ------------------------------------------------- */

  /* Sem uma tela inteira para preencher, o carrossel passa a ter a altura do
     card do Figma: 39.4 do selo + titulos + a arte. A arte e dimensionada
     pela altura da caixa (ver `.prize__media img`), entao os dois numeros
     crescem juntos: 221/293 do Figma, com ~18% a mais de arte por pedido do
     cliente — no celular o produto pedia mais presenca. */
  .carousel,
  .section--prizes .carousel {
    --dots-h: calc(var(--u) * 28);
    --item-w: calc(var(--u) * 260);
    flex: none;
    height: calc(var(--u) * 460 + var(--dots-h));
    min-height: 0;
    gap: 0;
    margin-top: calc(var(--u) * 16.388);
  }

  .prize { gap: calc(var(--u) * 11.042); }

  .prize__badge {
    width: calc(var(--u) * 39.436);
    font-size: calc(var(--u) * 16.744);
  }

  .prize__title { font-size: calc(var(--u) * 18.929); }
  .prize__sub   { font-size: calc(var(--u) * 14.197); }

  /* As setas encostam nas bordas e passam por cima da arte (47:1048). */
  .carousel__arrow {
    position: absolute;
    top: 45%;
    width: calc(var(--u) * 31.329);
    height: calc(var(--u) * 31.329);
  }

  .carousel__arrow--prev { left: calc(var(--u) * 6); }
  .carousel__arrow--next { right: calc(var(--u) * 6); }

  .seller__title {
    margin-top: calc(var(--u) * 16.388);
    font-size: calc(var(--u) * 19.609);
    line-height: 1.2;
  }

  /* Um card por linha, com valor e rotulo lado a lado (103:321). */
  .seller,
  .seller--single {
    grid-template-columns: minmax(0, calc(var(--u) * 260.143));
    gap: calc(var(--u) * 13.073);
    margin-top: calc(var(--u) * 16.388);
  }

  .seller__card {
    gap: calc(var(--u) * 9.804);
    padding: calc(var(--u) * 16.341) calc(var(--u) * 16.341) calc(var(--u) * 13.073);
    border-radius: calc(var(--u) * 18);
  }

  .seller__value {
    flex-direction: row;
    align-items: flex-end;
    gap: calc(var(--u) * 10.458);
  }

  .seller__amount { font-size: calc(var(--u) * 31.37); }

  .seller__label {
    font-size: calc(var(--u) * 11.11);
    text-align: left;
  }

  .seller__label span { display: block; }
  .seller__label span + span::before { content: none; }

  .seller__note { font-size: calc(var(--u) * 9.15); }

  .prizes__legal {
    margin-top: calc(var(--u) * 21.851);
    font-size: calc(var(--u) * 7);
    line-height: 1.25;
  }

  /* --- Busca (47:1081) --------------------------------------------------- */

  .search {
    gap: calc(var(--u) * 10);
    margin-top: calc(var(--u) * 16.388);
    padding: calc(var(--u) * 9.833) calc(var(--u) * 10.926) calc(var(--u) * 9.833) calc(var(--u) * 14.203);
    border-width: calc(var(--u) * 1.093);
    border-radius: calc(var(--u) * 48.073);
  }

  .search__icon {
    width: calc(var(--u) * 12.018);
    height: calc(var(--u) * 12.018);
  }

  .search__input { font-size: calc(var(--u) * 9.287); }

  /* --- DUVIDAS FREQUENTES (47:1084) -------------------------------------- */

  /* A lista deixa de rolar por dentro: ela cresce e empurra a pagina. */
  .faq {
    flex: none;
    overflow: visible;
    margin-top: calc(var(--u) * 16.388);
    border-width: calc(var(--u) * 1.093);
    border-radius: calc(var(--u) * 16.388);
  }

  .faq__trigger {
    grid-template-columns: calc(var(--u) * 30.592) minmax(0, 1fr) calc(var(--u) * 13.111);
    gap: calc(var(--u) * 13.111);
    padding: calc(var(--u) * 16.388);
  }

  .faq__num { font-size: calc(var(--u) * 9.833); }
  .faq__q   { font-size: calc(var(--u) * 12.018); }

  .faq__answer {
    padding: 0 calc(var(--u) * 16.388) calc(var(--u) * 16.388) calc(var(--u) * 43.702);
    gap: calc(var(--u) * 7.648);
    font-size: calc(var(--u) * 9.833);
  }

  .faq__answer th,
  .faq__answer td {
    padding: 8px 6px;
  }

  /* No mobile o Figma usa + / - no lugar do chevron (47:1084). */
  .faq__icon {
    position: relative;
    width: calc(var(--u) * 13.111);
    height: calc(var(--u) * 13.111);
  }

  .faq__icon img { display: none; }

  .faq__icon::before,
  .faq__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    margin-top: -1px;
    border-radius: 2px;
    background: var(--lime);
    transition: transform var(--dur-fast) var(--ease-slow);
  }

  .faq__icon::after {
    transform: rotate(90deg);
  }

  .faq__trigger[aria-expanded="true"] .faq__icon::after {
    transform: rotate(0deg);
  }

  /* --- GANHADORES (47:1130) ---------------------------------------------- */

  /* Mapa em cima, busca e linha do tempo embaixo, tudo em fluxo (131:650).

     `flex: none` aqui e nos filhos e o que segura a secao: no desktop estes
     blocos usam `flex: 1 1 0` para dividir a altura da tela, mas numa coluna
     de altura automatica a base 0 faz o conteudo nao contar para a altura da
     secao — ela fecha antes da lista terminar e o rodape sobe por cima. */
  .winners__layout {
    flex: none;
    flex-direction: column;
    min-height: 0;
    gap: calc(var(--u) * 32.341);
    margin-top: calc(var(--u) * 16.388);
  }

  .winners__list {
    flex: none;
  }

  .winners__map {
    order: -1;
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    width: 100%;
    max-width: calc(var(--u) * 300.538);
    min-height: 0;
    margin-inline: auto;
    gap: calc(var(--u) * 10.7);
  }

  .winners__map > .map {
    flex: none;
    height: auto;
    aspect-ratio: 300.538 / 307.196;
  }

  .map__caption { font-size: calc(var(--u) * 8.56); }

  .map__caption strong {
    margin-bottom: calc(var(--u) * 2.14);
    font-size: calc(var(--u) * 8.56);
  }

  .winners__list .search {
    gap: calc(var(--u) * 10.349);
    padding: calc(var(--u) * 11.643) calc(var(--u) * 12.936) calc(var(--u) * 11.643) calc(var(--u) * 16.817);
    border-width: calc(var(--u) * 1.294);
    border-radius: calc(var(--u) * 56.92);
  }

  .winners__list .search__icon {
    width: calc(var(--u) * 19.351);
    height: calc(var(--u) * 19.351);
  }

  .winners__list .search__input { font-size: calc(var(--u) * 10.349); }

  .winners__filter {
    width: 100%;
    justify-content: space-between;
    padding: calc(var(--u) * 8) calc(var(--u) * 16);
    font-size: calc(var(--u) * 10.349);
  }

  .winners__list > .timeline {
    flex: none;
  }

  /* A quantidade de ganhadores vem da API e nao tem teto: em vez de esticar
     a secao inteira, so a listagem rola, limitada a uma fracao da tela. */
  .timeline {
    max-height: 70svh;
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: calc(var(--u) * 12.936);
    padding-right: calc(var(--u) * 8);
  }

  .timeline__rail {
    left: calc(var(--u) * 7.115);
    top: calc(var(--u) * 19.4);
    bottom: calc(var(--u) * 38);
    width: calc(var(--u) * 1.294);
  }

  .draw {
    grid-template-columns: calc(var(--u) * 15.524) minmax(0, 1fr);
    gap: calc(var(--u) * 19.405);
    padding-bottom: calc(var(--u) * 25.873);
  }

  .draw__dot {
    width: calc(var(--u) * 15.524);
    height: calc(var(--u) * 15.524);
  }

  .draw__body { gap: calc(var(--u) * 10.349); }
  .draw__head { gap: calc(var(--u) * 10.349); }
  .draw__name { font-size: calc(var(--u) * 15.524); }

  .draw__date {
    padding: calc(var(--u) * 3.881) calc(var(--u) * 7.762);
    border-radius: calc(var(--u) * 5.175);
    font-size: calc(var(--u) * 8.409);
  }

  .draw__people { border-radius: calc(var(--u) * 14.23); }

  .winner {
    grid-template-columns: calc(var(--u) * 28.46) minmax(0, 1fr);
    gap: calc(var(--u) * 15.524);
    row-gap: calc(var(--u) * 1.94);
    padding: calc(var(--u) * 12.936) calc(var(--u) * 18.111);
  }

  .winner__avatar {
    width: calc(var(--u) * 28.46);
    height: calc(var(--u) * 28.46);
  }

  .winner__id    { gap: calc(var(--u) * 1.94); }
  .winner__name  { font-size: calc(var(--u) * 11.643); }
  .winner__cpf   { font-size: calc(var(--u) * 9.056); }
  .winner__prize { grid-column: 2; font-size: calc(var(--u) * 10.349); }

  /* --- RODAPE (47:1208) --------------------------------------------------
     O rodape tem respiro proprio (35.468), maior que o das secoes. */

  .footer {
    padding-block: calc(var(--u) * 62.069) calc(var(--u) * 35.468);
  }

  .footer > .container {
    padding-inline: calc(var(--u) * 35.468);
  }

  .footer__top {
    grid-template-columns: minmax(0, 1fr);
    gap: calc(var(--u) * 53.202);
  }

  .footer__brand { gap: calc(var(--u) * 23.054); }
  .footer__logo  { width: calc(var(--u) * 176.665); }

  .social { gap: calc(var(--u) * 25.714); }

  .social__link {
    width: calc(var(--u) * 28.378);
    height: calc(var(--u) * 28.378);
  }

  .footer__col-title {
    margin-bottom: calc(var(--u) * 10.64);
    font-size: calc(var(--u) * 14.187);
  }

  .footer__col li + li { margin-top: calc(var(--u) * 10.64); }
  .footer__link        { font-size: calc(var(--u) * 13.3); }

  .footer__rule  { margin-block: calc(var(--u) * 26.601); }
  .footer__legal { font-size: calc(var(--u) * 10.64); }

  .footer__credits {
    flex-direction: column;
    gap: calc(var(--u) * 7.98);
    margin-top: calc(var(--u) * 26.601);
    font-size: calc(var(--u) * 10.64);
  }

  .footer__credits img { width: calc(var(--u) * 177.164); }
}