/* ==========================================================================
   Hélder Sorteios — landing pública
   Sistema visual: "bilhete perfurado"
   - tinta esverdeada quase preta como base
   - verde #21e676 racionado: ação, confirmação e as bordas do bilhete
   - dourado exclusivo para prêmio e números
   Mobile-first: o estilo base é o do celular; media queries usam min-width.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
	/* Tinta e superfícies */
	--ink: #05090a;          /* fundo da pagina */
	--ink-1: #101a1b;        /* secao rebaixada */
	--ink-2: #18262a;        /* card: precisa LER como superficie */
	--ink-3: #22343a;        /* input e superficie elevada */
	--line: #2b4147;         /* borda visivel, nao fio de cabelo */
	--line-strong: #3d5a62;

	/* Ação */
	--vip: #21e676;
	--vip-bright: #4cf396;
	--vip-deep: #0f9d4e;
	--vip-ink: #04140b;
	--vip-glow: rgba(33, 230, 118, 0.3);
	--vip-veil: rgba(33, 230, 118, 0.12);

	/* Texto */
	--paper: #f4f9f6;
	--paper-dim: #b3c6c0;    /* era escuro demais para texto de apoio */
	--paper-faint: #8399948;
	--paper-faint: #869a94;

	/* Sinalização */
	--gold: #ffc24b;
	--alert: #ff6b35;
	--alert-veil: rgba(255, 107, 53, 0.12);

	/* Tipografia */
	--font-display: "Archivo", "Arial Narrow", "Helvetica Neue", system-ui, sans-serif;
	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-mono: "Space Mono", ui-monospace, "SFMono-Regular", "Courier New", monospace;

	--fs-xs: clamp(0.75rem, 0.73rem + 0.1vw, 0.8rem);
	--fs-sm: clamp(0.85rem, 0.82rem + 0.15vw, 0.94rem);
	--fs-base: clamp(1rem, 0.97rem + 0.15vw, 1.06rem);
	--fs-md: clamp(1.05rem, 0.99rem + 0.3vw, 1.2rem);
	--fs-lg: clamp(1.2rem, 1.08rem + 0.6vw, 1.5rem);
	--fs-xl: clamp(1.5rem, 1.24rem + 1.3vw, 2.2rem);
	--fs-2xl: clamp(1.9rem, 1.44rem + 2.3vw, 3rem);
	--fs-prize: clamp(2.3rem, 1.3rem + 5.4vw, 4.4rem);
	--fs-digit: clamp(1.7rem, 1.2rem + 2.4vw, 2.6rem);

	/* Espaçamento */
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.5rem;
	--sp-6: 1.75rem;
	--sp-7: 2.25rem;
	--sp-8: 2.75rem;
	--sp-9: 3.25rem;

	/* Raio */
	--r-sm: 7px;
	--r-md: 11px;
	--r-lg: 14px;
	--r-pill: 10px;   /* o botao deixa de ser pilula */

	/* Sombra */
	--sh-1: 0 1px 0 rgba(255, 255, 255, 0.03), 0 8px 24px -12px rgba(0, 0, 0, 0.9);
	--sh-2: 0 18px 48px -22px rgba(0, 0, 0, 0.95);
	--sh-vip: 0 12px 34px -12px var(--vip-glow);

	/* Camadas */
	--z-base: 1;
	--z-header: 100;
	--z-bar: 900;
	--z-modal: 1000;

	/* Métrica */
	--wrap: 1120px;
	--tap: 48px;
	--bar-h: 92px;
}

/* --------------------------------------------------------------------------
   2. Reset e base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	margin: 0;
	padding: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: var(--sp-6);
}

body {
	background: var(--ink);
	color: var(--paper);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: 1.6;
	min-height: 100vh;
	overflow-x: hidden;
	padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
	-webkit-font-smoothing: antialiased;
}

img,
video,
iframe {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

a {
	color: var(--vip);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

ul,
ol {
	list-style: none;
}

button,
input {
	font: inherit;
	color: inherit;
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-display);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-stretch: 88%;
	text-wrap: balance;
}

/* Foco sempre visível, em tudo que é operável */
:where(a, button, input, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--vip);
	outline-offset: 3px;
	border-radius: var(--r-sm);
}

::selection {
	background: var(--vip);
	color: var(--vip-ink);
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   3. Layout: wrap e section
   -------------------------------------------------------------------------- */
.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--sp-4);
}

.section {
	display: block;
	position: relative;
	padding-block: var(--sp-7);
}

.section--tight {
	padding-block: var(--sp-5);
}

.section--sunken {
	background: var(--ink-1);
	border-block: 1px solid var(--line);
}

.section__head {
	text-align: center;
	margin-bottom: var(--sp-6);
}

.section__title {
	font-size: var(--fs-xl);
	color: var(--paper);
}

.section__sub {
	margin-top: var(--sp-2);
	color: var(--paper-dim);
	font-size: var(--fs-sm);
}

.eyebrow {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--vip);
}

/* --------------------------------------------------------------------------
   4. Cabeçalho
   -------------------------------------------------------------------------- */
.site-header {
	position: relative;
	z-index: var(--z-header);
	border-bottom: 1px solid var(--line);
	background: var(--ink);
	padding-block: var(--sp-3);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
}

.brand {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
}

.brand img {
	width: auto;
	height: 42px;
}

.site-nav {
	display: flex;
	gap: var(--sp-1);
}

.site-nav a {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
	padding-inline: var(--sp-3);
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--paper-dim);
	border-radius: var(--r-pill);
}

.site-nav a:hover {
	color: var(--paper);
	background: var(--ink-2);
	text-decoration: none;
}

@media (min-width: 700px) {
	.brand img {
		height: 54px;
	}
}

/* --------------------------------------------------------------------------
   5. Botões
   -------------------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55em;
	min-height: 52px;
	min-width: var(--tap);
	padding: 0.85em 1.6em;
	border: 1px solid transparent;
	border-radius: var(--r-md);
	background: none;
	font-family: var(--font-display);
	font-size: var(--fs-md);
	font-weight: 700;
	font-stretch: 92%;
	line-height: 1.15;
	letter-spacing: 0.01em;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease,
		border-color 0.16s ease, color 0.16s ease;
}

.btn:hover {
	text-decoration: none;
}

.btn:active {
	transform: translateY(1px);
}

.btn[disabled] {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

.btn--block {
	width: 100%;
}

.btn--sm {
	min-height: 44px;
	font-size: var(--fs-sm);
	padding: 0.6em 1.1em;
}

.btn--lg {
	min-height: 60px;
	font-size: var(--fs-lg);
	padding: 0.9em 1.6em;
}

/* O botão do grupo VIP.
   Antes era um gradiente neon em pílula, repetido três vezes por tela (hero,
   pós-vídeo e barra fixa) — de tão repetido, deixava de chamar atenção e dava
   aparência de template. Agora é uma cor chapada, com peso vindo do tamanho e
   do contraste, não de brilho. */
.btn--vip {
	background: var(--vip);
	color: var(--vip-ink);
	border-radius: var(--r-pill);
	box-shadow: 0 6px 18px -8px rgba(33, 230, 118, 0.55);
}

.btn--vip:hover {
	background: var(--vip-bright);
	box-shadow: 0 10px 24px -8px rgba(33, 230, 118, 0.7);
}

.btn--primary {
	background: var(--vip);
	color: var(--vip-ink);
}

.btn--primary:hover {
	background: var(--vip-bright);
}

.btn--ghost {
	/* Ação secundária: some para trás do CTA principal em vez de disputar com
	   ele. Sem contorno grosso, sem pílula. */
	background: var(--ink-3);
	color: var(--paper-dim);
	border-color: var(--line);
	min-height: 44px;
	font-size: var(--fs-sm);
	padding: 0.6em 1.1em;
}

.btn--ghost:hover {
	background: var(--line);
	color: var(--paper);
	border-color: var(--line-strong);
}

.btn--gold {
	background: var(--gold);
	color: #2a1c00;
}

.btn--gold:hover {
	background: #ffd47a;
}

/* Bloco de CTA reutilizável */
.vipcta {
	display: grid;
	justify-items: center;
	gap: var(--sp-3);
	text-align: center;
}

.vipcta .btn {
	width: 100%;
	max-width: 30rem;
}

.vipcta__note {
	max-width: 36ch;
	font-size: var(--fs-sm);
	color: var(--paper-dim);
}

.vipcta__note strong {
	color: var(--paper);
}

/* --------------------------------------------------------------------------
   6. Bilhete — o elemento assinatura
   -------------------------------------------------------------------------- */
.ticket {
	position: relative;
	background: var(--ink-1);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-2);
	text-align: center;
}

/* impressão de segurança, como no papel de um bilhete real */
.ticket::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: repeating-linear-gradient(
		-45deg,
		rgba(33, 230, 118, 0.05) 0 1px,
		transparent 1px 9px
	);
	pointer-events: none;
}

.ticket > * {
	position: relative;
	z-index: var(--z-base);
}

.ticket__body {
	padding: var(--sp-6) var(--sp-4) var(--sp-5);
}

.ticket__stub {
	padding: var(--sp-5) var(--sp-4);
	border-radius: 0 0 var(--r-lg) var(--r-lg);
	background: rgba(33, 230, 118, 0.04);
}

/* linha de destaque, com os furos nas laterais */
.ticket__perf {
	position: relative;
	height: 1px;
	border-top: 2px dashed var(--line-strong);
	margin-inline: var(--sp-5);
}

.ticket__perf::before,
.ticket__perf::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 28px;
	height: 28px;
	border: 1px solid var(--line-strong);
	border-radius: 50%;
	background: var(--ink);
	transform: translateY(-50%);
}

.ticket__perf::before {
	left: calc(-1 * var(--sp-5) - 14px);
}

.ticket__perf::after {
	right: calc(-1 * var(--sp-5) - 14px);
}

@media (min-width: 700px) {
	.ticket__body {
		padding: var(--sp-8) var(--sp-7) var(--sp-6);
	}

	.ticket__stub {
		padding: var(--sp-5) var(--sp-7);
	}
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
	padding-top: var(--sp-6);
	text-align: center;
}

.hero__lead {
	max-width: 48ch;
	margin-inline: auto;
	margin-bottom: var(--sp-5);
}

.hero__kicker {
	display: block;
	margin-top: var(--sp-3);
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	font-weight: 700;
	line-height: 1.2;
	color: var(--paper);
}

.hero__ticket {
	max-width: 40rem;
	margin-inline: auto;
	margin-bottom: var(--sp-6);
}

.ticket__label {
	display: block;
	margin-bottom: var(--sp-3);
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--paper-faint);
}

/* O prêmio: o maior tipo da página */
.prize-highlight {
	display: block;
	font-family: var(--font-display);
	font-size: var(--fs-prize);
	font-weight: 900;
	font-stretch: 82%;
	line-height: 0.95;
	letter-spacing: -0.03em;
	color: var(--gold);
	text-transform: uppercase;
	overflow-wrap: anywhere;
	text-wrap: balance;
}

.ticket__stub-text {
	font-size: var(--fs-sm);
	color: var(--paper-dim);
}

.ticket__stub-text strong {
	color: var(--paper);
}

/* Valores em dinheiro.
   Antes era monoespaçada: dentro de uma frase, o "R$" ficava com um vão
   visível antes do número e parecia defeito de renderização. */
.bonus-amount {
	font-weight: 700;
	color: var(--gold);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   8. Vídeo
   -------------------------------------------------------------------------- */
.video-frame {
	/* Acompanha a largura do vídeo: com o vertical, a moldura encolhe junto em
	   vez de deixar faixa escura sobrando dos dois lados. */
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
}

.video-frame.custom-video-border {
	/* A borda verde pulsante competia com os botões e dava aparência de anúncio.
	   Moldura neutra: quem tem que brilhar na página é o CTA. */
	padding: 1px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--ink-1);
}

.video-mount {
	position: relative;
	/* Proporção padrão até o JS decidir. Vertical é o formato que mais circula
	   no WhatsApp, então é o palpite mais seguro enquanto a config não chega —
	   assim a moldura não "pula" de 16:9 para 9:16 na frente do usuário. */
	aspect-ratio: 9 / 16;
	width: min(380px, 78vw);
	margin-inline: auto;
	border-radius: calc(var(--r-lg) - 2px);
	overflow: hidden;
	background: #000;
	transition: max-width 0.2s ease;
}

.video-mount.is-vertical {
	aspect-ratio: 9 / 16;
	width: min(380px, 78vw);
	max-width: none;
}

.video-mount.is-horizontal {
	aspect-ratio: 16 / 9;
	/* Largura em px, não porcentagem: com o pai em fit-content, um valor
	   percentual não tem de que resolver e a moldura colapsava para ~300px. */
	width: min(640px, 92vw);
	max-width: none;
}

@media (min-width: 700px) {
	.video-mount.is-vertical {
		/* No desktop um 9:16 de largura cheia viraria uma coluna altíssima. */
		width: 330px;
	}
}

.video-el {
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
	display: block;
}

/* Autoplay com áudio é bloqueado em todo navegador: pedimos o toque. */
.video-unmute {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--sp-3);
	width: 100%;
	padding: var(--sp-4);
	border: 0;
	background: linear-gradient(180deg, rgba(4, 12, 8, 0.3) 0%, rgba(4, 12, 8, 0.78) 100%);
	color: var(--paper);
	cursor: pointer;
	opacity: 1;
	transition: opacity 0.35s ease, visibility 0.35s ease;
}

.video-unmute__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 66px;
	height: 66px;
	border-radius: 50%;
	background: var(--vip);
	color: var(--vip-ink);
	font-size: 1.9rem;
	animation: pulse-ring 1.8s ease-in-out infinite;
}

.video-unmute__label {
	max-width: 18ch;
	font-family: var(--font-display);
	font-size: var(--fs-md);
	font-weight: 700;
	line-height: 1.2;
	text-wrap: balance;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
}

.video-unmute.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}


@keyframes pulse-ring {
	0%,
	100% {
		box-shadow: 0 0 0 8px var(--vip-veil);
	}
	60% {
		box-shadow: 0 0 0 20px rgba(33, 230, 118, 0);
	}
}

/* --------------------------------------------------------------------------
   9. Cards e grades
   -------------------------------------------------------------------------- */
.card {
	display: flex;
	flex-direction: column;
	padding: var(--sp-5);
	background: var(--ink-1);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	box-shadow: var(--sh-1);
	text-align: left;
}

.card__icon {
	margin-bottom: var(--sp-3);
	font-size: 2rem;
	line-height: 1;
}

.card__title {
	margin-bottom: var(--sp-1);
	font-size: var(--fs-lg);
	color: var(--paper);
}

.card__meta {
	margin-bottom: var(--sp-3);
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--vip);
}

.card__text {
	margin-bottom: var(--sp-4);
	font-size: var(--fs-sm);
	color: var(--paper-dim);
}

/* o chip encosta no rodapé do card, alinhando os três da grade */
.card__chip {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	min-height: 44px;
	margin-top: auto;
	padding: 0 var(--sp-4);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-pill);
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--paper);
}

.card__chip:hover {
	border-color: var(--vip);
	color: var(--vip);
	text-decoration: none;
}

.grid {
	display: grid;
	gap: var(--sp-4);
}

@media (min-width: 700px) {
	.grid--2,
	.grid--3,
	.grid--4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1000px) {
	.grid {
		gap: var(--sp-5);
	}

	.grid--3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.grid--4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* --------------------------------------------------------------------------
   10. Formulários
   -------------------------------------------------------------------------- */
.forms-grid {
	display: grid;
	gap: var(--sp-4);
	max-width: 62rem;
	margin-inline: auto;
}

@media (min-width: 860px) {
	.forms-grid {
		grid-template-columns: 1.15fr 0.85fr;
		gap: var(--sp-5);
		align-items: start;
	}
}

.form-card {
	padding: var(--sp-5);
	background: var(--ink-1);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-1);
}

.form-card--quiet {
	background: transparent;
	border-style: dashed;
	box-shadow: none;
}

.form-card__title {
	margin-bottom: var(--sp-1);
	font-size: var(--fs-lg);
}

.form-card__sub {
	margin-bottom: var(--sp-5);
	font-size: var(--fs-sm);
	color: var(--paper-dim);
}

.field {
	display: grid;
	gap: var(--sp-2);
	margin-bottom: var(--sp-4);
}

.field__label {
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--paper);
}

.field__input {
	width: 100%;
	min-height: var(--tap);
	padding: 0.8rem 1rem;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-sm);
	background: var(--ink);
	color: var(--paper);
	/* 16px é o mínimo que impede o iOS de dar zoom ao focar o campo */
	font-size: 16px;
	transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.field__input::placeholder {
	color: var(--paper-faint);
}

.field__input:focus {
	outline: none;
	border-color: var(--vip);
	box-shadow: 0 0 0 3px var(--vip-veil);
}

.field__hint {
	font-size: var(--fs-xs);
	color: var(--paper-faint);
}

.form-foot {
	margin-top: var(--sp-3);
	font-size: var(--fs-xs);
	color: var(--paper-faint);
	text-align: center;
}

@media (min-width: 700px) {
	.form-card {
		padding: var(--sp-6);
	}
}

/* --------------------------------------------------------------------------
   11. Como funciona
   -------------------------------------------------------------------------- */
.step {
	padding: var(--sp-5);
	background: var(--ink-1);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
}

.step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 32px;
	margin-bottom: var(--sp-3);
	padding-inline: var(--sp-2);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-sm);
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--vip);
}

.step__title {
	margin-bottom: var(--sp-2);
	font-size: var(--fs-md);
	color: var(--paper);
}

.step__text {
	font-size: var(--fs-sm);
	color: var(--paper-dim);
}

.how-cta {
	margin-top: var(--sp-6);
}

/* --------------------------------------------------------------------------
   12. Rankings
   -------------------------------------------------------------------------- */
.ranks {
	display: grid;
	gap: var(--sp-4);
	max-width: 46rem;
	margin-inline: auto;
}

@media (min-width: 860px) {
	.ranks {
		grid-template-columns: repeat(2, 1fr);
		max-width: none;
		align-items: start;
	}
}

.rank {
	background: var(--ink-1);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	overflow: hidden;
}

.rank__toggle {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	width: 100%;
	min-height: var(--tap);
	padding: var(--sp-3) var(--sp-4);
	border: 0;
	background: var(--ink-2);
	color: var(--paper);
	font-family: var(--font-display);
	font-size: var(--fs-md);
	font-weight: 700;
	text-align: left;
	cursor: pointer;
	transition: background-color 0.16s ease;
}

.rank__toggle:hover {
	background: var(--ink-3);
}

.rank__toggle-icon {
	font-size: 1.15rem;
}

.rank__toggle-text {
	flex: 1 1 auto;
}

.rank__arrow {
	flex: 0 0 auto;
	font-size: 0.8rem;
	color: var(--vip);
	transition: transform 0.2s ease;
}

.rank__toggle[aria-expanded="true"] .rank__arrow {
	transform: rotate(180deg);
}

.rank__panel {
	display: none;
	padding: var(--sp-4);
}

.rank__panel.is-open {
	display: block;
}

.rank__note {
	margin-bottom: var(--sp-3);
	padding: var(--sp-2);
	border-radius: var(--r-sm);
	background: var(--ink);
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	color: var(--paper-faint);
	text-align: center;
}

.rank__status {
	padding: var(--sp-5) 0;
	font-size: var(--fs-sm);
	color: var(--paper-dim);
	text-align: center;
}

.rank__list {
	display: grid;
	gap: var(--sp-2);
}

.rank-row {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-3);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: var(--ink);
}

.rank-row__pos {
	flex: 0 0 auto;
	width: 34px;
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--paper-faint);
	text-align: center;
}

.rank-row__pos--medal {
	font-size: 1.35rem;
}

.rank-row__name {
	flex: 1 1 auto;
	min-width: 0;
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--paper);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.rank-row__count {
	flex: 0 0 auto;
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--gold);
}

/* --------------------------------------------------------------------------
   13. Countdown
   -------------------------------------------------------------------------- */
.countdown-section {
	text-align: center;
}

.countdown {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-2);
	max-width: 34rem;
	margin-inline: auto;
}

.countdown-item {
	flex: 1 1 68px;
	max-width: 110px;
	padding: var(--sp-3) var(--sp-2);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-md);
	background: var(--ink-1);
}

.countdown-number {
	display: block;
	font-family: var(--font-mono);
	font-size: var(--fs-digit);
	font-weight: 700;
	line-height: 1;
	color: var(--paper);
	font-variant-numeric: tabular-nums;
}

.countdown-label {
	display: block;
	margin-top: var(--sp-2);
	font-size: var(--fs-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--paper-faint);
}

#sorteioDataRegra {
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
	color: var(--gold);
}

/* --------------------------------------------------------------------------
   14. Regras
   -------------------------------------------------------------------------- */
.rule-list {
	display: grid;
	gap: var(--sp-2);
}

.rule-list li {
	position: relative;
	padding-left: 1.6rem;
	font-size: var(--fs-sm);
	color: var(--paper-dim);
}

.rule-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--vip);
	font-weight: 700;
}

/* Quando a data do sorteio está oculta, o item some junto com o marcador.
   Navegadores sem :has() ignoram a regra e mantêm o comportamento antigo. */
.rule-list li:has(#sorteioDataRegra:empty) {
	display: none;
}

/* --------------------------------------------------------------------------
   15. CTA final, rodapé e barra fixa
   -------------------------------------------------------------------------- */
.final-cta {
	background: var(--ink-1);
	border-top: 1px solid var(--vip);
	text-align: center;
}

.final-cta__title {
	margin-bottom: var(--sp-3);
	font-size: var(--fs-2xl);
}

.final-cta__text {
	max-width: 46ch;
	margin-inline: auto;
	margin-bottom: var(--sp-6);
	color: var(--paper-dim);
}

.final-cta__text .prize-highlight {
	display: inline;
	font-family: inherit;
	font-size: inherit;
	font-weight: 700;
	font-stretch: normal;
	letter-spacing: normal;
	text-transform: none;
	color: var(--gold);
}

.site-footer {
	padding-block: var(--sp-5);
	border-top: 1px solid var(--line);
	font-size: var(--fs-xs);
	color: var(--paper-faint);
	text-align: center;
}

/* Barra fixa do celular. Mobile-first: existe por padrão, some no desktop. */
.vipbar {
	/* Escondida enquanto o CTA do hero está visível: os dois na mesma tela
	   davam dois botões verdes idênticos empilhados, um colado no outro. */
	transform: translateY(110%);
	visibility: hidden;
	transition: transform 0.25s ease, visibility 0.25s ease;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--z-bar);
	padding: var(--sp-3) var(--sp-4);
	padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
	background: rgba(7, 16, 12, 0.94);
	border-top: 1px solid var(--line-strong);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

.vipbar.is-visible {
	transform: translateY(0);
	visibility: visible;
}

.vipbar .btn {
	width: 100%;
}

.vipbar__note {
	margin-top: var(--sp-1);
	font-size: 0.72rem;
	color: var(--paper-faint);
	text-align: center;
}

@media (min-width: 769px) {
	.vipbar {
		display: none;
	}

	body {
		padding-bottom: 0;
	}
}

/* --------------------------------------------------------------------------
   16. Modais
   -------------------------------------------------------------------------- */
.modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: var(--z-modal);
	padding: var(--sp-5) var(--sp-3);
	background: rgba(3, 8, 6, 0.86);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.modal-content {
	position: relative;
	width: 100%;
	max-width: 34rem;
	margin: 0 auto;
	padding: var(--sp-6) var(--sp-4) var(--sp-5);
	background: var(--ink-1);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-2);
}

.modal-content h3 {
	margin-bottom: var(--sp-4);
	padding-right: var(--sp-7);
	font-size: var(--fs-lg);
	text-align: center;
}

.close {
	position: absolute;
	top: var(--sp-3);
	right: var(--sp-3);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--line-strong);
	border-radius: 50%;
	background: var(--ink);
	color: var(--paper-dim);
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
}

.close:hover {
	color: var(--paper);
	border-color: var(--vip);
}

@media (min-width: 700px) {
	.modal {
		padding: var(--sp-8) var(--sp-5);
	}

	.modal-content {
		padding: var(--sp-7) var(--sp-6) var(--sp-6);
	}
}

/* --------------------------------------------------------------------------
   17. Conteúdo montado pelo script.js dentro dos modais
   -------------------------------------------------------------------------- */
.dlg {
	text-align: center;
}

.dlg > * + * {
	margin-top: var(--sp-4);
}

.dlg-emoji {
	font-size: 2.6rem;
	line-height: 1;
}

.dlg-lead {
	font-size: var(--fs-md);
	font-weight: 600;
	color: var(--paper);
}

.dlg-text {
	font-size: var(--fs-sm);
	color: var(--paper-dim);
}

.dlg-text strong {
	color: var(--paper);
}

.dlg-note {
	font-size: var(--fs-xs);
	color: var(--paper-faint);
}

.dlg-title {
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	color: var(--alert);
}

.dlg-error {
	font-size: var(--fs-md);
	color: var(--alert);
	overflow-wrap: anywhere;
}

.dlg-panel {
	padding: var(--sp-4);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--ink);
	text-align: left;
}

.dlg-rows {
	display: grid;
	gap: var(--sp-3);
}

.dlg-row__label {
	display: block;
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--vip);
}

.dlg-row__value {
	display: block;
	margin-top: 2px;
	font-size: var(--fs-md);
	color: var(--paper);
	overflow-wrap: anywhere;
}

.dlg-row__value--gold {
	font-family: var(--font-mono);
	color: var(--gold);
}

.dlg-warn {
	padding: var(--sp-4);
	border: 1px solid var(--alert);
	border-radius: var(--r-md);
	background: var(--alert-veil);
	font-size: var(--fs-sm);
	color: var(--paper);
	text-align: left;
}

.dlg-warn strong {
	color: var(--alert);
}

.dlg-actions {
	display: grid;
	gap: var(--sp-3);
}

@media (min-width: 560px) {
	.dlg-actions {
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
	}
}

/* O número do sorteio: o dado que a pessoa veio buscar */
.dlg-ticket {
	padding: var(--sp-5) var(--sp-4);
	border: 1px solid var(--vip);
	border-radius: var(--r-md);
	background: var(--vip-veil);
}

.dlg-ticket__label {
	display: block;
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--vip);
}

.dlg-ticket__number {
	display: block;
	margin-top: var(--sp-2);
	font-family: var(--font-mono);
	font-size: clamp(2rem, 1.4rem + 3vw, 3rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.06em;
	color: var(--paper);
	overflow-wrap: anywhere;
}

.dlg-stats {
	display: grid;
	gap: var(--sp-1);
	text-align: left;
}

.dlg-stat {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-3);
	padding: var(--sp-2) 0;
	border-bottom: 1px solid var(--line);
	font-size: var(--fs-sm);
	color: var(--paper-dim);
}

.dlg-stat__value {
	font-family: var(--font-mono);
	font-weight: 700;
	color: var(--paper);
	overflow-wrap: anywhere;
}

.dlg-stat__value--gold {
	color: var(--gold);
}

.link-box {
	display: block;
	padding: var(--sp-3);
	border: 1px dashed var(--line-strong);
	border-radius: var(--r-sm);
	background: var(--ink);
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	color: var(--vip);
	word-break: break-all;
	text-align: left;
}

.dlg-divider {
	height: 1px;
	border: 0;
	background: var(--line);
}

/* --------------------------------------------------------------------------
   18. Loading
   -------------------------------------------------------------------------- */
.spinner {
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 3px solid rgba(0, 0, 0, 0.25);
	border-top-color: currentColor;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
	vertical-align: -4px;
	margin-right: 0.5em;
}

.loading {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid var(--line-strong);
	border-top-color: var(--vip);
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
	vertical-align: -3px;
	margin-right: 0.4em;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

/* --------------------------------------------------------------------------
   19. Movimento reduzido
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.video-frame.custom-video-border,
	.video-unmute__icon {
		animation: none;
	}

	.video-frame.custom-video-border {
		box-shadow: 0 0 0 6px var(--vip-veil);
	}

	.btn:hover,
	.btn:active {
		transform: none;
	}
}


/* --------------------------------------------------------------------------
   Ícones
   Emoji como ícone renderiza diferente em cada sistema, não herda a cor do
   texto e dá aparência de template. Trocados por SVG que segue currentColor.
   -------------------------------------------------------------------------- */
.card__icon svg {
	width: 26px;
	height: 26px;
	display: block;
	color: var(--vip);
}

.btn__icon {
	display: inline-flex;
	align-items: center;
}

.btn__icon svg {
	width: 1.1em;
	height: 1.1em;
	display: block;
}

/* --------------------------------------------------------------------------
   Ajustes de superfície
   O tema todo era quase-preto sobre quase-preto: card, input e fundo não se
   separavam. Estes blocos dão profundidade real.
   -------------------------------------------------------------------------- */
.card {
	background: linear-gradient(180deg, var(--ink-2) 0%, var(--ink-1) 100%);
	border: 1px solid var(--line);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 12px 28px -20px #000;
}

.form-card {
	background: var(--ink-2);
	border: 1px solid var(--line);
}

.field__input {
	background: var(--ink);
	border: 1px solid var(--line-strong);
	color: var(--paper);
}

.field__input::placeholder {
	color: var(--paper-faint);
	opacity: 1;
}

.field__input:focus {
	border-color: var(--vip);
	background: #060d0e;
	outline: none;
	box-shadow: 0 0 0 3px rgba(33, 230, 118, 0.18);
}

/* O bilhete do prêmio: era uma caixa quase vazia e sem peso. */
.ticket {
	background: linear-gradient(165deg, #1d2b21 0%, #0d1512 100%);
	border: 1px solid var(--line-strong);
	box-shadow: 0 20px 50px -28px #000;
}

.ticket__body {
	padding-block: var(--sp-5) var(--sp-4);
}

.section--sunken {
	background: var(--ink-1);
	border-block: 1px solid var(--line);
}


/* --------------------------------------------------------------------------
   Imagem do prêmio
   O prêmio é a isca da página. Sem foto, o hero era uma caixa escura com um
   texto no meio — muito espaço vazio e nenhum apelo.
   -------------------------------------------------------------------------- */
.ticket__media {
	margin: 0;
	overflow: hidden;
	border-radius: calc(var(--r-lg) - 3px);
	background: #000;
	line-height: 0;
}

.ticket__media img {
	width: 100%;
	height: auto;
	/* contain, não cover: a foto do prêmio não pode ter o produto cortado só
	   para caber num retângulo. A proporção é a do arquivo enviado. */
	object-fit: contain;
	/* Teto de altura para o CTA não cair abaixo da dobra. Foto vertical fica
	   alta, e sem teto empurraria o botão para fora da tela. */
	max-height: 52vh;
	display: block;
	margin-inline: auto;
}

@media (min-width: 900px) {
	.ticket__media img {
		max-height: 42vh;
		width: auto;
		max-width: 100%;
	}
}

/* Com imagem, o texto do prêmio vira legenda e cede o palco para a foto. */
.ticket:has(.ticket__media:not([hidden])) .ticket__body {
	padding-block: var(--sp-4) var(--sp-3);
}

.ticket:has(.ticket__media:not([hidden])) .prize-highlight {
	font-size: clamp(1.7rem, 1.1rem + 3vw, 2.8rem);
}