/**
 * Provador — sistema visual neo-brutalista gamificado.
 *
 * As regras que definem o estilo, para nenhuma tela fugir delas:
 *
 *   1. Borda preta grossa em tudo que é caixa. 3px no miúdo, 4px no graúdo.
 *   2. Sombra dura, deslocada, SEM desfoque — `6px 6px 0 #000`. Nada de blur.
 *   3. Cor saturada e chapada. Zero gradiente.
 *   4. Tipografia pesada, caixa alta nos rótulos, entrelinha curta.
 *   5. Canto reto. O único arredondado é a pílula de badge, e é de propósito.
 *   6. Interação move o objeto e come a sombra — parece botão físico afundando.
 *
 * Sobre contraste: texto branco sobre o rosa (#ff3d81) da 3,37:1 e reprova; a
 * tinta escura sobre o mesmo rosa passa folgado — e e mais fiel ao estilo, que
 * usa preto sobre cor berrante. Medido no navegador, nao estimado.
 *
 * Sobre daltonismo: em nenhum lugar o certo/errado é dito só pela cor, e o par
 * verde+laranja não aparece — ele dá ΔE 6,3 e já reprovou aqui antes. Acerto e
 * erro carregam ícone e palavra junto do fundo.
 */

.prov {
	--prov-preto: #0a0a0a;
	--prov-papel: #fdf4e3;
	--prov-papel-2: #fffaf0;

	--prov-amarelo: #ffd23f;
	--prov-rosa: #ff3d81;
	--prov-ciano: #22d3ee;
	--prov-lima: #b8ff2e;
	--prov-roxo: #a78bfa;
	--prov-laranja: #ff6b35;

	/* Semântica: ciano acerta, rosa erra. Nunca verde+laranja. */
	--prov-ok: #22d3ee;
	--prov-nao: #ff3d81;

	/*
	 * Tinta que NUNCA inverte no modo escuro.
	 *
	 * Amarelo, lima, rosa e ciano são claros nos dois modos, então texto em
	 * cima deles tem de ser escuro sempre. Usar --prov-preto aqui foi o erro
	 * que deixou cabeçalho de tabela e medalha ilegíveis: no escuro
	 * --prov-preto vira claro, e claro sobre amarelo não se lê.
	 */
	--prov-tinta-fixa: #0a0a0a;
	--prov-papel-fixo: #fffaf0;

	--prov-borda: 3px;
	--prov-borda-forte: 4px;
	--prov-sombra: 6px 6px 0 var(--prov-preto);
	--prov-sombra-p: 4px 4px 0 var(--prov-preto);
	--prov-sombra-g: 10px 10px 0 var(--prov-preto);

	--prov-fonte: "Archivo Black", "Arial Black", "Helvetica Neue", Impact, system-ui, sans-serif;
	--prov-fonte-texto: "DM Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

	box-sizing: border-box;
	color: var(--prov-preto);
	font-family: var(--prov-fonte-texto);
	line-height: 1.5;
	max-width: 100%;
}

.prov *,
.prov *::before,
.prov *::after {
	box-sizing: inherit;
}

/* ------------------------------------------------------------------
 * Tipografia
 * ---------------------------------------------------------------- */

.prov-titulo,
.prov h2.prov-titulo,
.prov h3.prov-titulo {
	font-family: var(--prov-fonte);
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 0.95;
	margin: 0 0 0.6em;
	text-transform: uppercase;
}

.prov-titulo--g {
	font-size: clamp(1.9rem, 7vw, 3.4rem);
}

.prov-titulo--m {
	font-size: clamp(1.4rem, 5vw, 2.1rem);
}

.prov-titulo--p {
	font-size: clamp(1.05rem, 3.6vw, 1.35rem);
}

/* O rótulo destacado atrás do título, como adesivo. */
.prov-etiqueta {
	background: var(--prov-preto);
	color: var(--prov-papel);
	display: inline-block;
	font-family: var(--prov-fonte);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	padding: 0.28em 0.7em;
	text-transform: uppercase;
	transform: rotate(-1.4deg);
}

.prov-sub {
	font-size: 0.95rem;
	margin: 0 0 1em;
	opacity: 0.8;
}

/* ------------------------------------------------------------------
 * Caixa — a unidade de tudo
 * ---------------------------------------------------------------- */

.prov-card {
	background: var(--prov-papel-2);
	border: var(--prov-borda) solid var(--prov-preto);
	box-shadow: var(--prov-sombra);
	margin: 0 0 1.4rem;
	padding: 1.15rem 1.25rem;
}

.prov-card--destaque {
	border-width: var(--prov-borda-forte);
	box-shadow: var(--prov-sombra-g);
}

.prov-card--amarelo { background: var(--prov-amarelo); }
.prov-card--rosa    { background: var(--prov-rosa); }
.prov-card--ciano   { background: var(--prov-ciano); }
.prov-card--lima    { background: var(--prov-lima); }
.prov-card--roxo    { background: var(--prov-roxo); }
.prov-card--preto   { background: var(--prov-preto); color: var(--prov-papel); }

.prov-card--preto .prov-titulo { color: var(--prov-papel); }

/* Levemente torto: é o que dá o ar de adesivo colado à mão. */
.prov-card--torto { transform: rotate(-0.7deg); }
.prov-card--torto2 { transform: rotate(0.6deg); }

.prov-grid {
	display: grid;
	gap: 1.1rem;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

/* ------------------------------------------------------------------
 * Botões e campos
 * ---------------------------------------------------------------- */

.prov-btn,
.prov button.prov-btn,
.prov input[type="submit"].prov-btn {
	background: var(--prov-amarelo);
	border: var(--prov-borda) solid var(--prov-preto);
	box-shadow: var(--prov-sombra-p);
	color: var(--prov-tinta-fixa);
	cursor: pointer;
	display: inline-block;
	font-family: var(--prov-fonte);
	font-size: 1rem;
	letter-spacing: 0.02em;
	padding: 0.72em 1.4em;
	text-decoration: none;
	text-transform: uppercase;
	transition: transform 0.08s steps(2), box-shadow 0.08s steps(2);
}

.prov-btn:hover,
.prov-btn:focus-visible {
	box-shadow: 2px 2px 0 var(--prov-preto);
	transform: translate(2px, 2px);
}

.prov-btn:active {
	box-shadow: 0 0 0 var(--prov-preto);
	transform: translate(4px, 4px);
}

.prov-btn--forte { background: var(--prov-rosa); color: var(--prov-tinta-fixa); }
.prov-btn--calmo { background: var(--prov-papel-2); color: var(--prov-preto); }

.prov-btn[disabled],
.prov-btn[aria-disabled="true"] {
	background: #d8d2c4;
	box-shadow: none;
	cursor: not-allowed;
	opacity: 0.75;
	transform: none;
}

.prov-campo {
	display: block;
	margin: 0 0 1rem;
}

.prov-campo > label,
.prov-rotulo {
	display: block;
	font-family: var(--prov-fonte);
	font-size: 0.82rem;
	letter-spacing: 0.05em;
	margin: 0 0 0.35em;
	text-transform: uppercase;
}

.prov input[type="text"],
.prov input[type="number"],
.prov input[type="url"],
.prov input[type="email"],
.prov input[type="password"],
.prov input[type="date"],
.prov input[type="file"],
.prov select,
.prov textarea {
	background: var(--prov-papel-2);
	border: var(--prov-borda) solid var(--prov-preto);
	border-radius: 0;
	color: var(--prov-preto);
	font-family: var(--prov-fonte-texto);
	font-size: 1rem;
	max-width: 100%;
	padding: 0.6em 0.7em;
	width: 100%;
}

.prov input:focus-visible,
.prov select:focus-visible,
.prov textarea:focus-visible {
	box-shadow: var(--prov-sombra-p);
	outline: 3px solid var(--prov-roxo);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------
 * A nota — o número é o herói da interface
 * ---------------------------------------------------------------- */

.prov-nota-grande {
	background: var(--prov-preto);
	border: var(--prov-borda-forte) solid var(--prov-preto);
	color: var(--prov-amarelo);
	display: inline-block;
	font-family: var(--prov-fonte);
	font-size: clamp(2.4rem, 9vw, 4.2rem);
	line-height: 1;
	padding: 0.18em 0.42em;
}

.prov-nota-media {
	font-family: var(--prov-fonte);
	font-size: clamp(1.5rem, 5vw, 2.2rem);
	line-height: 1;
}

/* O campo de nota, grande o suficiente para o dedo na mesa do restaurante. */
.prov-criterio {
	align-items: center;
	border-bottom: 2px dashed var(--prov-preto);
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1rem;
	justify-content: space-between;
	padding: 0.85rem 0;
}

.prov-criterio:last-of-type {
	border-bottom: 0;
}

.prov-criterio__nome {
	font-family: var(--prov-fonte);
	font-size: 1.05rem;
	text-transform: uppercase;
}

.prov-criterio__peso {
	background: var(--prov-preto);
	color: var(--prov-papel);
	font-family: var(--prov-fonte-texto);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	margin-left: 0.5em;
	padding: 0.15em 0.5em;
	text-transform: uppercase;
	vertical-align: 2px;
}

.prov-criterio input[type="number"] {
	font-family: var(--prov-fonte);
	font-size: 1.5rem;
	max-width: 7.5rem;
	text-align: center;
}

/* ------------------------------------------------------------------
 * Gamificação
 * ---------------------------------------------------------------- */

/* Pílula — o único canto arredondado do sistema, e é intencional. */
.prov-badge {
	background: var(--prov-lima);
	color: var(--prov-tinta-fixa);
	border: 2px solid var(--prov-preto);
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-family: var(--prov-fonte);
	font-size: 0.74rem;
	letter-spacing: 0.04em;
	padding: 0.3em 0.75em;
	text-transform: uppercase;
	white-space: nowrap;
}

.prov-badge--ciano { background: var(--prov-ciano); }
.prov-badge--rosa  { background: var(--prov-rosa); color: var(--prov-tinta-fixa); }
.prov-badge--roxo  { background: var(--prov-roxo); }
.prov-badge--preto { background: var(--prov-preto); color: var(--prov-papel); }

/*
 * Barra de progresso segmentada — chunky, sem arredondar.
 *
 * Trilha e contorno NÃO invertem no escuro, de propósito. O rótulo atravessa a
 * barra inteira: passa por cima do preenchimento lima e também por cima da
 * parte vazia. Se a trilha escurecesse, o texto (que tem de ser escuro para se
 * ler sobre o lima) sumiria na parte vazia — deu 1,07:1 na medição. Fixando a
 * trilha em papel claro, o mesmo texto escuro se lê nos dois trechos e nos dois
 * modos.
 */
.prov-barra {
	background: var(--prov-papel-fixo);
	border: var(--prov-borda) solid var(--prov-tinta-fixa);
	height: 1.6rem;
	overflow: hidden;
	position: relative;
}

.prov-barra__preenchida {
	background: var(--prov-lima);
	color: var(--prov-tinta-fixa);
	background-image: repeating-linear-gradient(
		45deg,
		transparent 0 6px,
		rgba(10, 10, 10, 0.14) 6px 12px
	);
	border-right: var(--prov-borda) solid var(--prov-tinta-fixa);
	height: 100%;
	transition: width 0.3s steps(8);
}

.prov-barra__texto {
	color: var(--prov-tinta-fixa);
	font-family: var(--prov-fonte);
	font-size: 0.78rem;
	left: 0;
	letter-spacing: 0.05em;
	line-height: 1.6rem;
	position: absolute;
	text-align: center;
	text-transform: uppercase;
	top: 0;
	width: 100%;
}

/* Medalha de posição no ranking. */
.prov-medalha {
	align-items: center;
	background: var(--prov-papel);
	color: var(--prov-tinta-fixa);
	border: var(--prov-borda) solid var(--prov-preto);
	display: inline-flex;
	font-family: var(--prov-fonte);
	font-size: 1rem;
	height: 2.4rem;
	justify-content: center;
	width: 2.4rem;
}

.prov-medalha--1 { background: var(--prov-amarelo); box-shadow: var(--prov-sombra-p); }
.prov-medalha--2 { background: #d9d9d9; }
.prov-medalha--3 { background: var(--prov-laranja); }

/* Sequência de presença. */
.prov-streak {
	align-items: baseline;
	background: var(--prov-laranja);
	color: var(--prov-tinta-fixa);
	border: var(--prov-borda) solid var(--prov-preto);
	box-shadow: var(--prov-sombra-p);
	display: inline-flex;
	gap: 0.4em;
	padding: 0.45em 0.8em;
}

.prov-streak__n {
	font-family: var(--prov-fonte);
	font-size: 1.6rem;
	line-height: 1;
}

.prov-streak__rot {
	font-family: var(--prov-fonte);
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Conquista — cartão de troféu. */
.prov-conquista {
	background: var(--prov-papel-2);
	border: var(--prov-borda) solid var(--prov-preto);
	box-shadow: var(--prov-sombra-p);
	padding: 0.9rem;
	text-align: center;
}

.prov-conquista--ganha { background: var(--prov-amarelo); color: var(--prov-tinta-fixa); }

.prov-conquista--travada {
	background: #e7e2d6;
	filter: grayscale(1);
	opacity: 0.6;
}

.prov-conquista__icone {
	display: block;
	font-size: 2rem;
	line-height: 1;
	margin-bottom: 0.35rem;
}

.prov-conquista__nome {
	font-family: var(--prov-fonte);
	font-size: 0.82rem;
	text-transform: uppercase;
}

.prov-conquista__desc {
	font-size: 0.76rem;
	margin-top: 0.3rem;
	opacity: 0.85;
}

/* ------------------------------------------------------------------
 * Nota cega — o estado lacrado
 * ---------------------------------------------------------------- */

.prov-lacrado {
	background: var(--prov-preto);
	border: var(--prov-borda-forte) solid var(--prov-preto);
	box-shadow: var(--prov-sombra);
	color: var(--prov-papel);
	padding: 1.5rem 1.25rem;
	position: relative;
	text-align: center;
}

.prov-lacrado::before {
	content: "";
	background-image: repeating-linear-gradient(
		45deg,
		var(--prov-amarelo) 0 14px,
		var(--prov-preto) 14px 28px
	);
	height: 10px;
	left: 0;
	position: absolute;
	right: 0;
	top: -4px;
}

.prov-lacrado__icone {
	display: block;
	font-size: 2.6rem;
	line-height: 1;
	margin-bottom: 0.5rem;
}

.prov-lacrado__titulo {
	font-family: var(--prov-fonte);
	font-size: clamp(1.1rem, 4vw, 1.5rem);
	text-transform: uppercase;
}

.prov-lacrado__aviso {
	font-size: 0.88rem;
	margin: 0.5rem 0 0;
	opacity: 0.85;
}

/* ------------------------------------------------------------------
 * Aposta — a ficha e a odd
 * ---------------------------------------------------------------- */

.prov-odd {
	background: var(--prov-preto);
	color: var(--prov-lima);
	display: inline-block;
	font-family: var(--prov-fonte);
	font-size: 1.05rem;
	padding: 0.22em 0.55em;
}

.prov-odd--favorito {
	background: var(--prov-lima);
	color: var(--prov-tinta-fixa);
}

.prov-chance {
	font-family: var(--prov-fonte);
	font-size: 0.95rem;
}

.prov-ficha {
	background: var(--prov-papel-2);
	border: var(--prov-borda) solid var(--prov-preto);
	box-shadow: var(--prov-sombra-p);
	padding: 0.9rem 1rem;
}

.prov-ficha--acertou {
	background: var(--prov-ok);
	color: var(--prov-tinta-fixa);
}

.prov-ficha--errou {
	background: var(--prov-nao);
	color: var(--prov-tinta-fixa);
}

/* Saldo positivo e negativo se distinguem por sinal e ícone, não só por cor. */
.prov-saldo {
	font-family: var(--prov-fonte);
	font-size: 1.15rem;
	white-space: nowrap;
}

.prov-saldo--mais { color: #0e7490; }
.prov-saldo--menos { color: #9d174d; }

/* ------------------------------------------------------------------
 * Tabela
 * ---------------------------------------------------------------- */

/* O embrulho é o que impede a tabela de estourar a largura no celular. */
.prov-rolante {
	-webkit-overflow-scrolling: touch;
	border: var(--prov-borda) solid var(--prov-preto);
	box-shadow: var(--prov-sombra-p);
	margin: 0 0 1.4rem;
	overflow-x: auto;
}

.prov-tabela {
	border-collapse: collapse;
	margin: 0;
	min-width: 100%;
	width: 100%;
}

.prov-tabela caption {
	background: var(--prov-preto);
	color: var(--prov-papel);
	font-family: var(--prov-fonte);
	font-size: 0.82rem;
	letter-spacing: 0.06em;
	padding: 0.6em 0.8em;
	text-align: left;
	text-transform: uppercase;
}

.prov-tabela th {
	background: var(--prov-amarelo);
	color: var(--prov-tinta-fixa);
	border-bottom: var(--prov-borda) solid var(--prov-preto);
	font-family: var(--prov-fonte);
	font-size: 0.74rem;
	letter-spacing: 0.06em;
	padding: 0.7em 0.8em;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
}

.prov-tabela td {
	border-bottom: 2px solid rgba(10, 10, 10, 0.18);
	padding: 0.7em 0.8em;
	vertical-align: middle;
}

.prov-tabela tbody tr:last-child td {
	border-bottom: 0;
}

.prov-tabela tbody tr:nth-child(odd) {
	background: rgba(10, 10, 10, 0.035);
}

.prov-tabela tbody tr.prov-eu {
	background: var(--prov-ciano);
	font-weight: 700;
}

/* ------------------------------------------------------------------
 * Avisos
 * ---------------------------------------------------------------- */

.prov-aviso,
.prov-erro,
.prov-sucesso {
	border: var(--prov-borda) solid var(--prov-preto);
	box-shadow: var(--prov-sombra-p);
	font-weight: 600;
	margin: 0 0 1.2rem;
	padding: 0.85rem 1rem;
}

.prov-aviso   { background: var(--prov-amarelo); color: var(--prov-tinta-fixa); }
.prov-sucesso { background: var(--prov-ok); color: var(--prov-tinta-fixa); }
.prov-erro    { background: var(--prov-nao); color: var(--prov-tinta-fixa); }

.prov-vazio {
	background: repeating-linear-gradient(
		45deg,
		var(--prov-papel) 0 10px,
		var(--prov-papel-2) 10px 20px
	);
	border: var(--prov-borda) dashed var(--prov-preto);
	font-family: var(--prov-fonte);
	padding: 1.6rem 1rem;
	text-align: center;
	text-transform: uppercase;
}

/* ------------------------------------------------------------------
 * Galeria e mapa
 * ---------------------------------------------------------------- */

.prov-galeria {
	display: grid;
	gap: 0.8rem;
	grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
}

.prov-galeria img {
	border: var(--prov-borda) solid var(--prov-preto);
	box-shadow: var(--prov-sombra-p);
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.prov-mapa {
	border: var(--prov-borda) solid var(--prov-preto);
	box-shadow: var(--prov-sombra);
	height: min(60vh, 460px);
	width: 100%;
}

.prov-filtros {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	margin: 0 0 1rem;
}

.prov-filtros select {
	width: auto;
}

/* ------------------------------------------------------------------
 * Celular (~390px) — a largura em que isto é de fato usado, na mesa
 * ---------------------------------------------------------------- */

@media (max-width: 480px) {
	.prov-card {
		box-shadow: var(--prov-sombra-p);
		padding: 1rem;
	}

	.prov-card--torto,
	.prov-card--torto2 {
		transform: none;
	}

	.prov-criterio {
		align-items: stretch;
		flex-direction: column;
	}

	.prov-criterio input[type="number"] {
		max-width: 100%;
	}

	.prov-btn {
		display: block;
		text-align: center;
		width: 100%;
	}

	.prov-tabela th,
	.prov-tabela td {
		padding: 0.6em 0.55em;
	}
}

/* ------------------------------------------------------------------
 * Preferências do usuário
 * ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.prov-btn,
	.prov-barra__preenchida {
		transition: none;
	}

	.prov-card--torto,
	.prov-card--torto2,
	.prov-etiqueta {
		transform: none;
	}
}

/*
 * Escuro: o papel vira quase preto e a borda vira clara, senão a borda
 * desaparece no fundo e a caixa perde o contorno que define o estilo.
 */


/* Impressão: a ata da noite cabe numa folha. */
@media print {
	.prov-card,
	.prov-rolante {
		box-shadow: none;
	}

	.prov form,
	.prov .prov-btn {
		display: none;
	}
}

/* ------------------------------------------------------------------
 * Navegação
 *
 * Fica aqui e não no tema porque tema de blocos não declara local de menu, e
 * um site sem navegação não se usa. No celular vira rolagem horizontal em vez
 * de quebrar em quatro linhas de botão.
 * ---------------------------------------------------------------- */

.prov-menu {
	-webkit-overflow-scrolling: touch;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0 0 1.8rem;
	padding: 0 0 0.3rem;
}

.prov-menu .prov-btn {
	font-size: 0.82rem;
	padding: 0.55em 0.9em;
}

@media (max-width: 640px) {
	.prov-menu {
		flex-wrap: nowrap;
		overflow-x: auto;
	}

	.prov-menu .prov-btn {
		display: inline-block;
		flex: 0 0 auto;
		width: auto;
	}
}

/* ------------------------------------------------------------------
 * Por que NÃO existe modo escuro automático aqui
 *
 * Havia um `@media (prefers-color-scheme: dark)` que invertia a paleta. Estava
 * errado, e a medição no navegador provou: quem decide o fundo da página é o
 * TEMA, não o sistema operacional. Com o sistema em escuro e um tema claro
 * (Twenty Twenty-Five, o padrão), os componentes viravam escuros sobre página
 * clara — link de tabela saiu em rgb(245,240,230) sobre fundo quase branco,
 * ilegível.
 *
 * Um plugin não tem como saber a cor de fundo do tema. Então ele pinta as
 * próprias superfícies: todo card, tabela e aviso traz o próprio fundo e a
 * própria borda, e continua legível sobre qualquer tema.
 *
 * Se um dia o clube usar um tema escuro, a solução é uma folha de tema à
 * parte — não uma media query que adivinha.
 * ---------------------------------------------------------------- */

/* ==================================================================
 * MOLDURA — cabeçalho, rodapé e fundo animado
 *
 * Regra que vale para os três: nada aqui pode criar rolagem horizontal.
 * Fundo animado e faixa corrida são as duas causas clássicas disso, então
 * ambos vivem dentro de um contêiner com overflow hidden, e o fundo é
 * position fixed — que não entra no fluxo nem estica o documento.
 * ================================================================== */

.prov-fundo {
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	position: fixed;
	z-index: -1;
}

/*
 * As listras diagonais.
 *
 * O elemento é maior que a tela e anda em transform, não em
 * background-position: transform roda na GPU e não repinta a cada quadro.
 */
.prov-fundo__listras {
	animation: prov-desliza 28s linear infinite;
	background-image: repeating-linear-gradient(
		45deg,
		rgba(10, 10, 10, 0.05) 0 2px,
		transparent 2px 22px
	);
	height: 200%;
	left: -50%;
	position: absolute;
	top: -50%;
	width: 200%;
	will-change: transform;
}

@keyframes prov-desliza {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(0, 62px, 0); }
}

/* ------------------------------------------------------------------
 * Os ingredientes que boiam no fundo
 *
 * Eles são DECORAÇÃO, e a regra que vem disso é uma só: não podem competir
 * com o texto. Por isso ficam com opacidade baixa e sem traço preto — a
 * borda grossa do estilo, que é o que faz um botão saltar, aqui faria o
 * fundo saltar por cima do conteúdo.
 *
 * O tamanho vem do span, não do SVG: assim a animação anima a caixa e o
 * desenho acompanha, em vez de cada ingrediente precisar da própria medida.
 * ---------------------------------------------------------------- */

.prov-fundo__forma {
	display: block;
	opacity: 0.22;
	position: absolute;
	will-change: transform;
}

.prov-fundo__forma .prov-ingrediente {
	display: block;
	height: 100%;
	width: 100%;
}

/*
 * Sem contorno preto no fundo.
 *
 * O traço é declarado no SVG, então tirá-lo aqui exige alcançar os elementos
 * pintados. `stroke: none` no grupo não bastaria: cada forma traz o próprio
 * atributo, e atributo de apresentação perde para CSS — mas só se o seletor
 * chegar no elemento certo.
 */
.prov-fundo__forma .prov-ingrediente * {
	stroke: none;
}

.prov-fundo__forma--1 {
	animation: prov-boia-a 19s ease-in-out infinite;
	height: 190px;
	left: -40px;
	top: 7%;
	width: 190px;
}

.prov-fundo__forma--2 {
	animation: prov-boia-b 23s ease-in-out infinite;
	height: 230px;
	right: -50px;
	top: 30%;
	width: 230px;
}

.prov-fundo__forma--3 {
	animation: prov-boia-a 26s ease-in-out infinite reverse;
	bottom: 8%;
	height: 150px;
	left: 4%;
	width: 150px;
}

.prov-fundo__forma--4 {
	animation: prov-boia-b 21s ease-in-out infinite reverse;
	bottom: 16%;
	height: 120px;
	right: 12%;
	width: 120px;
}

.prov-fundo__forma--5 {
	animation: prov-boia-b 31s ease-in-out infinite;
	height: 140px;
	left: 38%;
	top: 52%;
	width: 140px;
}

.prov-fundo__forma--6 {
	animation: prov-boia-a 24s ease-in-out infinite;
	height: 110px;
	right: 30%;
	top: 4%;
	width: 110px;
}

@keyframes prov-boia-a {
	0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
	50%      { transform: translate3d(28px, -36px, 0) rotate(12deg); }
}

@keyframes prov-boia-b {
	0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
	50%      { transform: translate3d(-34px, 30px, 0) rotate(-10deg); }
}

/* ------------------------------------------------------------------
 * Cabeçalho
 * ---------------------------------------------------------------- */

.prov-topo {
	margin: 0 0 1.6rem;
}

/* A fita zebrada, que dá o tom antes de qualquer texto. */
.prov-topo__faixa {
	background-image: repeating-linear-gradient(
		45deg,
		var(--prov-amarelo) 0 16px,
		var(--prov-tinta-fixa) 16px 32px
	);
	height: 12px;
}

.prov-topo__miolo {
	align-items: center;
	background: var(--prov-papel-2);
	border: var(--prov-borda-forte) solid var(--prov-preto);
	box-shadow: var(--prov-sombra);
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
	margin-top: 10px;
	padding: 0.9rem 1.1rem;
}

.prov-marca {
	align-items: center;
	color: inherit;
	display: flex;
	gap: 0.6rem;
	text-decoration: none;
}

.prov-marca__icone {
	background: var(--prov-amarelo);
	border: var(--prov-borda) solid var(--prov-preto);
	box-shadow: var(--prov-sombra-p);
	display: inline-block;
	font-size: 1.5rem;
	line-height: 1;
	padding: 0.32em;
}

/*
 * O nome no cabeçalho não pode estourar a página.
 *
 * "CARBURGUER" é uma palavra só de dez letras: ela não quebra, não encolhe e
 * não some. Se o espaço não dá, ela transborda — e como o transbordo é para a
 * direita, quem rola é o DOCUMENTO INTEIRO, num sintoma que aparece longe da
 * causa. Foi o que aconteceu a 320px: 171px de palavra em 125px de espaço.
 *
 * `min-width: 0` no bloco de texto resolveu a caixa, não a palavra — a caixa
 * passou a poder encolher e a palavra continuou do mesmo tamanho. O que
 * resolve a palavra é o piso do clamp: ele existe para o nome não sumir, mas
 * um piso alto demais numa tela estreita é exatamente o transbordo.
 */
.prov-marca__nome {
	display: block;
	font-family: var(--prov-fonte);
	font-size: clamp(1.05rem, 5vw, 2rem);
	letter-spacing: -0.02em;
	line-height: 0.9;
	text-transform: uppercase;
}

/*
 * O bloco de texto da marca precisa poder encolher.
 *
 * Ele é item de um flex, e item de flex não encolhe abaixo do próprio
 * conteúdo mínimo enquanto `min-width` for `auto` — que é o padrão. Numa tela
 * de 320px isso empurrava "clube de restaurantes" 8px para fora da página e
 * criava rolagem horizontal no site inteiro. O sintoma aparecia longe da
 * causa: quem rolava era o documento, não o cabeçalho.
 *
 * Com `min-width: 0` ele passa a poder encolher, e o subtítulo quebra em duas
 * linhas em vez de esticar a página.
 */
.prov-marca__texto {
	min-width: 0;
}

.prov-marca__sub {
	display: block;
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	opacity: 0.75;
	text-transform: uppercase;
}

/*
 * O espaçamento entre letras some nas telas mais estreitas.
 *
 * `0.14em` acrescenta 21 espaços a uma frase de 21 letras — quase 30% de
 * largura só de ar. É o que dá o tom em tela larga e é a diferença entre
 * caber e não caber em tela estreita.
 */
@media (max-width: 360px) {
	.prov-marca__sub {
		letter-spacing: 0.04em;
	}
}

/* O medidor de nível: gamificação visível antes de qualquer clique. */
.prov-topo__nivel {
	align-items: center;
	background: var(--prov-amarelo);
	border: var(--prov-borda) solid var(--prov-preto);
	box-shadow: var(--prov-sombra-p);
	color: var(--prov-tinta-fixa);
	display: flex;
	gap: 0.6rem;
	padding: 0.5rem 0.8rem 0.9rem;
	position: relative;
	text-decoration: none;
}

.prov-topo__nivel:hover,
.prov-topo__nivel:focus-visible {
	box-shadow: 2px 2px 0 var(--prov-preto);
	transform: translate(2px, 2px);
}

.prov-topo__nivel-icone {
	font-size: 1.5rem;
	line-height: 1;
}

.prov-topo__nivel-texto strong {
	display: block;
	font-family: var(--prov-fonte);
	font-size: 0.86rem;
	text-transform: uppercase;
}

.prov-topo__nivel-texto span {
	display: block;
	font-size: 0.7rem;
	opacity: 0.85;
}

.prov-topo__nivel-barra {
	background: var(--prov-papel-fixo);
	border: 2px solid var(--prov-tinta-fixa);
	bottom: 4px;
	display: block;
	height: 7px;
	left: 0.8rem;
	position: absolute;
	right: 0.8rem;
}

.prov-topo__nivel-barra > span {
	background: var(--prov-tinta-fixa);
	display: block;
	height: 100%;
}

/* ------------------------------------------------------------------
 * Rodapé
 * ---------------------------------------------------------------- */

.prov-rodape {
	border-top: var(--prov-borda-forte) solid var(--prov-preto);
	margin: 3rem 0 0;
	padding: 0;
}

/* A faixa corrida com os restaurantes provados. */
.prov-faixa-corrida {
	background: var(--prov-tinta-fixa);
	border-bottom: var(--prov-borda) solid var(--prov-preto);
	overflow: hidden;
	padding: 0.55rem 0;
	white-space: nowrap;
}

.prov-faixa-corrida__trilho {
	animation: prov-corre 38s linear infinite;
	display: inline-block;
	will-change: transform;
}

/*
 * Metade do trilho é uma cópia da outra: quando a primeira sai de cena, a
 * segunda já ocupou o lugar, e a emenda não aparece.
 */
@keyframes prov-corre {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

.prov-faixa-corrida__item {
	color: var(--prov-papel-fixo);
	font-family: var(--prov-fonte);
	font-size: 0.82rem;
	letter-spacing: 0.06em;
	padding: 0 1.4rem;
	text-transform: uppercase;
}

.prov-faixa-corrida__item b {
	background: var(--prov-lima);
	color: var(--prov-tinta-fixa);
	padding: 0.1em 0.45em;
}

.prov-rodape__miolo {
	background: var(--prov-papel-2);
	display: grid;
	gap: 1.4rem;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	padding: 1.4rem 1.2rem;
}

.prov-rodape__numeros {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.4rem;
	margin: 0.6rem 0 0;
}

.prov-rodape__numeros strong {
	font-family: var(--prov-fonte);
	font-size: 1.5rem;
	line-height: 1;
}

/* ------------------------------------------------------------------
 * "Ir para": cada destino é uma fatia do lanche
 *
 * O ingrediente vem numa caixa de tamanho fixo em vez de escalar com o texto.
 * Os rótulos têm de 4 a 14 letras ("Mapa", "Próximo lugar"), e com o desenho
 * em `em` o picles do "Mapa" sairia menor que o bacon da "Retrospectiva" —
 * uma fileira de fatias de tamanhos diferentes parece erro de montagem.
 * ---------------------------------------------------------------- */

.prov-rodape__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.7rem;
}

.prov-fatia {
	align-items: center;
	background: var(--prov-papel-2);
	border: 3px solid var(--prov-preto);
	box-shadow: 3px 3px 0 var(--prov-preto);
	color: inherit;
	display: inline-flex;
	font-size: 0.8rem;
	font-weight: 700;
	gap: 0.4rem;
	letter-spacing: 0.02em;
	line-height: 1;
	padding: 0.45rem 0.7rem;
	text-decoration: none;
	text-transform: uppercase;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.prov-fatia__arte {
	display: block;
	flex: 0 0 auto;
	height: 22px;
	width: 22px;
}

/*
 * O recheio dentro de um botão do menu é INLINE, não bloco.
 *
 * `.prov-fatia`, no rodapé, é um flex: lá o desenho pode ser bloco que ele
 * fica ao lado do texto. `.prov-btn` é um bloco comum, e o texto vem solto
 * depois do span — com `display: block` o desenho empurrava o rótulo para a
 * linha de baixo e todo botão do menu virava dois andares.
 *
 * `middle` alinha pelo meio da altura de x, que é onde o olho põe um símbolo
 * ao lado de uma palavra em caixa alta.
 */
.prov-recheio {
	display: inline-block;
	height: 22px;
	vertical-align: middle;
	width: 22px;
}

.prov-fatia__arte .prov-ingrediente,
.prov-recheio .prov-ingrediente {
	display: block;
	height: 100%;
	width: 100%;
}

/*
 * O recheio dentro de um botão do menu.
 *
 * `.prov-btn` alinha os filhos numa linha, e o ingrediente precisa da mesma
 * caixa fixa de 22px que ele tem no rodapé — pelo mesmo motivo: os rótulos
 * variam de "Mapa" a "Retrospectiva", e desenho que escala com o texto sai
 * de tamanhos diferentes em cada botão.
 *
 * O caso de reserva é o emoji, que não é um SVG e não obedece a largura: por
 * isso a regra solta a caixa quando o filho não é um ingrediente.
 */
.prov-recheio:not(:has(.prov-ingrediente)) {
	height: auto;
	width: auto;
}

/*
 * O botão AFUNDA ao ser pressionado, em vez de subir.
 *
 * A sombra dura desenha uma fatia levantada da página. Empurrá-la para dentro
 * da própria sombra é o gesto que corresponde ao desenho — subir seria
 * levantar algo que já está levantado, e o movimento não se lê.
 */
.prov-fatia:hover,
.prov-fatia:focus-visible {
	box-shadow: 1px 1px 0 var(--prov-preto);
	transform: translate3d(2px, 2px, 0);
}

/*
 * Em foco, o contorno precisa aparecer POR FORA da sombra dura, senão ele
 * encosta nos 3px de borda preta e some dentro dela.
 */
.prov-fatia:focus-visible {
	outline: 3px solid var(--prov-ciano);
	outline-offset: 3px;
}

.prov-rodape__rodape {
	background: var(--prov-tinta-fixa);
	color: var(--prov-papel-fixo);
	font-size: 0.74rem;
	letter-spacing: 0.1em;
	margin: 0;
	padding: 0.7rem 1.2rem;
	text-align: center;
	text-transform: uppercase;
}

/* ------------------------------------------------------------------
 * A moldura do tema sai de cena nas páginas do clube
 *
 * O tema de blocos desenha o próprio header e footer. Sem isso, a página fica
 * com dois cabeçalhos e dois rodapés — e o do tema traz links que não são do
 * clube (Blog, Loja, Temas). A classe no body vem de Provador_Moldura, então
 * só as páginas do clube são afetadas.
 * ---------------------------------------------------------------- */

.provador-clube .wp-site-blocks > header.wp-block-template-part,
.provador-clube .wp-site-blocks > footer.wp-block-template-part {
	display: none;
}

/*
 * A assinatura do tema na ficha do restaurante.
 *
 * O modelo de post único do tema imprime "Escrito por <autor> em <data>". O
 * nosso tipo de post não tem autor nem mostra data, então os dois blocos saem
 * VAZIOS e sobram as preposições soltas: "Escrito por em". Não é um estilo
 * ruim, é uma frase pela metade — e uma ficha de restaurante não tem autor
 * para assinar. O seletor é preso ao tipo de post para não apagar a assinatura
 * de um post de verdade do blog.
 */
body.single-provador_rest .wp-block-post-title + .wp-block-group {
	display: none;
}

/*
 * A navegação de posts e o "Mais posts" do tema, na ficha do restaurante.
 *
 * O mesmo modelo de post único do tema imprime, depois do conteúdo: um
 * espaçador vazio, o link "← restaurante anterior / próximo restaurante →" e
 * uma listagem "Mais posts" com o post de exemplo do WordPress ("Olá,
 * mundo!"). Nada disso é do clube — é navegação pensada para posts de blog,
 * misturando restaurante com post de exemplo, e o clube já tem a própria
 * navegação (o menu, o "Ir para" do rodapé).
 *
 * `.entry-content ~ .wp-block-group` pega o espaçador E o bloco de navegação
 * de uma vez, porque os dois são irmãos posteriores ao conteúdo dentro do
 * mesmo wrapper — sem depender das classes de hash que o editor de blocos
 * gera a cada build (`wp-container-core-group-is-layout-xxxxxxxx`), que
 * mudam e quebrariam um seletor colado nelas.
 *
 * "Mais posts" é outro ramo, direto abaixo de `main`; por isso `main >`.
 */
body.single-provador_rest .entry-content ~ .wp-block-group,
body.single-provador_rest main.wp-block-group > .wp-block-group.alignwide.has-global-padding {
	display: none;
}

/* ------------------------------------------------------------------
 * Cor de link dentro dos nossos componentes
 *
 * O tema pinta `a` com a cor dele, que pode não ter contraste com o nosso
 * papel. Dentro de .prov a cor é nossa.
 * ---------------------------------------------------------------- */

.prov a:not(.prov-btn):not(.prov-marca):not(.prov-topo__nivel) {
	color: var(--prov-preto);
}

.prov-tabela a {
	color: var(--prov-tinta-fixa);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ------------------------------------------------------------------
 * Celular
 * ---------------------------------------------------------------- */

@media (max-width: 640px) {
	.prov-topo__miolo {
		gap: 0.8rem;
	}

	.prov-topo__nivel {
		width: 100%;
	}

	/*
	 * Menos ingredientes no celular: são decoração, e cada um é uma camada
	 * composta a cada quadro. Ficam os dois das bordas, que é o que dá o tom
	 * sem encher a tela pequena.
	 */
	.prov-fundo__forma--3,
	.prov-fundo__forma--4,
	.prov-fundo__forma--5,
	.prov-fundo__forma--6 {
		display: none;
	}
}

/* ------------------------------------------------------------------
 * Alvo de toque
 *
 * Medido a 390px: os links do rodapé e a marca saíam com 25px de altura.
 * Este site é usado com o polegar, na mesa do restaurante, então tudo que se
 * toca precisa de pelo menos 44px — a medida que corresponde à área de
 * contato real de um dedo.
 *
 * A consulta é `pointer: coarse` em vez de largura: um tablet grande também
 * se usa com o dedo, e um celular ligado a um mouse não precisa disso.
 * ---------------------------------------------------------------- */

@media (pointer: coarse) {
	.prov a,
	.prov button,
	.prov [role="button"] {
		min-height: 44px;
	}

	/*
	 * O título do cartão é um link, e a regra acima NÃO o alcançava.
	 *
	 * `min-height` não se aplica a elemento `display: inline` — a declaração
	 * aparece resolvida em 44px no inspetor e a caixa continua com 23. Uma
	 * regra que o navegador aceita, calcula e ignora é pior que uma regra
	 * ausente: ela some da lista do que falta fazer.
	 *
	 * `block` em vez de `inline-block` porque nome de restaurante quebra em
	 * duas linhas — e caixa inline-block não quebra, transborda. O par
	 * padding/margem opostos cresce o alvo sem mover nada na página.
	 */
	.prov-titulo a {
		display: block;
		margin-block: -0.7rem;
		padding-block: 0.7rem;
	}

	/*
	 * Parágrafo que é só um link — "Sair", "Voltar para entrar".
	 *
	 * `:only-child` é o recorte que importa: link solto num parágrafo é um
	 * destino, e vira alvo cheio. Link no MEIO de uma frase continua inline,
	 * porque esticá-lo abriria buracos no texto — e a própria WCAG dispensa
	 * o alvo de 44px para o link que mora dentro de uma linha de texto.
	 */
	.prov-sub > a:only-child {
		display: block;
		margin-block: -0.7rem;
		padding-block: 0.7rem;
	}

	/*
	 * Os botões de zoom do mapa vêm da biblioteca com 30px.
	 * Eles são da Leaflet, mas quem os entrega ao dedo do membro é este site.
	 *
	 * O crédito "Leaflet" no rodapé do mapa fica de fora: é uma nota de
	 * atribuição em letra miúda, não um destino — e é o mesmo caso do link
	 * dentro de uma frase.
	 */
	.prov .leaflet-control-zoom a {
		height: 44px;
		line-height: 44px;
		width: 44px;
	}

	/*
	 * A fatia saiu desta lista: ela já nasce inline-flex com padding próprio,
	 * e a altura mínima de 44px acima basta. Empilhar mais meio rem em cima e
	 * embaixo só esticaria o botão para longe do desenho.
	 */
	.prov-marca {
		align-items: center;
		display: inline-flex;
		padding-bottom: 0.5rem;
		padding-top: 0.5rem;
	}

	/* Digitar 8,5 com o polegar exige alvo grande. */
	.prov input[type="number"],
	.prov input[type="text"],
	.prov select {
		min-height: 48px;
	}

	/*
	 * Link dentro de célula é o conteúdo da célula, não um link solto no meio
	 * de um parágrafo — então é tocável e precisa da altura. inline-flex dá os
	 * 44px sem travar a quebra de linha, que line-height fixo travaria.
	 */
	.prov-tabela td a {
		align-items: center;
		display: inline-flex;
		min-height: 44px;
	}
}

/*
 * Quem pediu menos movimento recebe o mesmo layout, parado.
 *
 * Não basta encurtar a duração: `animation: none` devolve o elemento à posição
 * inicial, que é exatamente onde ele foi desenhado para ficar.
 */
@media (prefers-reduced-motion: reduce) {
	.prov-fundo__listras,
	.prov-fundo__forma,
	.prov-faixa-corrida__trilho {
		animation: none;
	}

	.prov-topo__nivel:hover,
	.prov-topo__nivel:focus-visible {
		transform: none;
	}
}

/* ------------------------------------------------------------------
 * O pino do mapa
 *
 * `divIcon` do Leaflet chega com fundo branco e borda — herança do marcador
 * padrão dele. Sem zerar os dois, cada queijo aparece dentro de um quadrado
 * branco, e o mapa fica com oito etiquetas em vez de oito fatias.
 * ---------------------------------------------------------------- */

.prov-pino-mapa {
	background: transparent;
	border: 0;
}

.prov-pino-mapa .prov-pino {
	display: block;
	height: 100%;
	width: 100%;
	/* A sombra dura do estilo não cabe aqui: o pino não é retangular. */
	filter: drop-shadow(2px 3px 0 rgba(10, 10, 10, 0.35));
}

@media print {
	.prov-fundo,
	.prov-faixa-corrida {
		display: none;
	}
}

/* ------------------------------------------------------------------
 * Alinhamento com a coluna do tema
 *
 * As faixas decorativas (a fita zebrada e a faixa corrida) atravessam a tela
 * de ponta a ponta — é o que dá o efeito. Mas o MIOLO do cabeçalho e do rodapé
 * precisa parar onde o conteúdo para, senão o logo fica colado na borda e a
 * moldura parece de outra página.
 *
 * A medida vem da própria variável do tema, com valor de reserva para quando
 * o tema não declarar nenhuma.
 * ---------------------------------------------------------------- */

.prov-topo__miolo,
.prov-rodape__miolo,
.prov-rodape__rodape {
	margin-left: auto;
	margin-right: auto;
	max-width: var(--wp--style--global--wide-size, 1100px);
}

/* Respiro lateral em telas estreitas, para nada encostar na borda. */
@media (max-width: 1140px) {
	.prov-topo__miolo,
	.prov-rodape__miolo,
	.prov-rodape__rodape {
		margin-left: 16px;
		margin-right: 16px;
	}
}

/* ==================================================================
 * ARTE — hambúrguer, molhos e selos
 *
 * O desenho é a nota: o lanche ganha camada conforme o restaurante merece.
 * Por isso nada aqui esconde ou duplica o número — a ilustração fica ao lado
 * dele, dizendo a mesma coisa de outro jeito, para quem lê a página correndo.
 * ================================================================== */

.prov-burger {
	display: block;
	height: auto;
	overflow: visible;
	width: 100%;
}

.prov-burger--p { max-width: 54px; }
.prov-burger--m { max-width: 104px; }
.prov-burger--g { max-width: 180px; }

/* Dentro do selo o lanche é coadjuvante: cede largura para o número. */
.prov-selo .prov-burger--g { max-width: 104px; }
.prov-selo .prov-burger--m { max-width: 76px; }

/* O lanche respira devagar, como pão saindo do forno. */
.prov-burger--g,
.prov-burger--m {
	animation: prov-respira 4.5s ease-in-out infinite;
	transform-origin: 50% 90%;
}

@keyframes prov-respira {
	0%, 100% { transform: scale(1) rotate(0deg); }
	50%      { transform: scale(1.035) rotate(-1.2deg); }
}

/* O vapor sobe e some. */
.prov-burger__vapor path {
	animation: prov-vapor 2.6s ease-in-out infinite;
}

.prov-burger__vapor path:nth-child(2) { animation-delay: 0.5s; }
.prov-burger__vapor path:nth-child(3) { animation-delay: 1s; }

@keyframes prov-vapor {
	0%   { opacity: 0;   transform: translateY(6px); }
	40%  { opacity: 0.9; }
	100% { opacity: 0;   transform: translateY(-12px); }
}

/* O cheddar balança de leve, como queijo que ainda não firmou. */
.prov-burger__queijo {
	animation: prov-escorre 5s ease-in-out infinite;
	transform-origin: 50% 0;
}

@keyframes prov-escorre {
	0%, 100% { transform: scaleY(1); }
	50%      { transform: scaleY(1.06); }
}

/*
 * Passar o dedo (ou o mouse) abre o lanche: cada camada se afasta um pouco.
 * É a recompensa por interagir, e some sob prefers-reduced-motion.
 */
.prov-selo:hover .prov-burger__pao-cima,
.prov-selo:focus-within .prov-burger__pao-cima { transform: translateY(-7px); }
.prov-selo:hover .prov-burger__tomate,
.prov-selo:focus-within .prov-burger__tomate   { transform: translateY(-4px); }
.prov-selo:hover .prov-burger__alface,
.prov-selo:focus-within .prov-burger__alface   { transform: translateY(-2px); }
.prov-selo:hover .prov-burger__carne,
.prov-selo:focus-within .prov-burger__carne    { transform: translateY(3px); }
.prov-selo:hover .prov-burger__pao-baixo,
.prov-selo:focus-within .prov-burger__pao-baixo { transform: translateY(5px); }

.prov-burger__pao-cima,
.prov-burger__tomate,
.prov-burger__alface,
.prov-burger__carne,
.prov-burger__pao-baixo {
	transition: transform 0.22s cubic-bezier(0.34, 1.6, 0.64, 1);
}

/* ------------------------------------------------------------------
 * O selo de nota
 * ---------------------------------------------------------------- */

.prov-selo {
	align-items: center;
	flex-wrap: wrap;
	background: var(--prov-papel-2);
	border: var(--prov-borda-forte) solid var(--prov-preto);
	box-shadow: var(--prov-sombra);
	color: var(--prov-tinta-fixa);
	display: flex;
	gap: 1rem;
	padding: 1rem 1.2rem;
	position: relative;
}

.prov-selo--amarelo { background: var(--prov-amarelo); }
.prov-selo--lima    { background: var(--prov-lima); }
.prov-selo--rosa    { background: var(--prov-rosa); }
.prov-selo--ciano   { background: var(--prov-ciano); }
.prov-selo--papel   { background: var(--prov-papel-2); }

/*
 * O lanche cede espaço, o número não.
 *
 * Sem isto o SVG (que é width:100%) engolia a caixa e "7,64" quebrava
 * caractere a caractere numa coluna de 25px. O desenho ilustra a nota; se
 * ele espreme a nota, inverteu o papel.
 */
.prov-selo .prov-burger {
	flex: 0 0 auto;
}

.prov-selo__texto {
	flex: 1 1 auto;
	min-width: 0;
}

.prov-selo__nota {
	white-space: nowrap;
}

.prov-selo__nota {
	display: block;
	font-family: var(--prov-fonte);
	font-size: clamp(2rem, 8vw, 3.2rem);
	line-height: 0.9;
}

.prov-selo__frase {
	display: block;
	font-family: var(--prov-fonte);
	font-size: clamp(0.8rem, 3vw, 1rem);
	letter-spacing: 0.04em;
	margin-top: 0.3rem;
	text-transform: uppercase;
}

/* ------------------------------------------------------------------
 * Ketchup — o respingo atrás do número
 * ---------------------------------------------------------------- */

.prov-mancha {
	display: inline-block;
	position: relative;
}

.prov-ketchup {
	height: 128%;
	left: 50%;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%) rotate(-4deg);
	width: 124%;
	z-index: 0;
}

.prov-mancha > *:not(.prov-ketchup) {
	position: relative;
	z-index: 1;
}

/* ------------------------------------------------------------------
 * O cheddar escorrendo de uma faixa
 *
 * Mora numa faixa própria, de altura fixa, pendurada embaixo do elemento que
 * decora. Não entra no fluxo do texto e por isso não empurra nada nem cria
 * rolagem — que é como esse efeito costuma quebrar layout.
 * ---------------------------------------------------------------- */

.prov-escorrido-faixa {
	height: 42px;
	line-height: 0;
	margin-top: -2px;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.prov-escorrido {
	display: block;
	height: 60px;
	width: 100%;
}

/* ------------------------------------------------------------------
 * A frase da mesa, solta
 * ---------------------------------------------------------------- */

.prov-frase {
	background: var(--prov-tinta-fixa);
	color: var(--prov-papel-fixo);
	display: inline-block;
	font-family: var(--prov-fonte);
	font-size: 0.86rem;
	letter-spacing: 0.06em;
	padding: 0.35em 0.8em;
	text-transform: uppercase;
	transform: rotate(-1.6deg);
}

/* ------------------------------------------------------------------
 * Celular
 * ---------------------------------------------------------------- */

@media (max-width: 480px) {
	.prov-selo {
		gap: 0.8rem;
		padding: 0.9rem;
	}

	.prov-burger--g { max-width: 110px; }
	.prov-burger--m { max-width: 76px; }
}

/* ------------------------------------------------------------------
 * Menos movimento
 *
 * O lanche continua inteiro e legível — o que sai é só o movimento. Quem
 * desliga animação não quer perder informação, quer perder o balanço.
 * ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.prov-burger--g,
	.prov-burger--m,
	.prov-burger__vapor path,
	.prov-burger__queijo {
		animation: none;
	}

	.prov-burger__pao-cima,
	.prov-burger__tomate,
	.prov-burger__alface,
	.prov-burger__carne,
	.prov-burger__pao-baixo {
		transition: none;
	}

	.prov-selo:hover .prov-burger__pao-cima,
	.prov-selo:hover .prov-burger__tomate,
	.prov-selo:hover .prov-burger__alface,
	.prov-selo:hover .prov-burger__carne,
	.prov-selo:hover .prov-burger__pao-baixo,
	.prov-selo:focus-within .prov-burger__pao-cima,
	.prov-selo:focus-within .prov-burger__tomate,
	.prov-selo:focus-within .prov-burger__alface,
	.prov-selo:focus-within .prov-burger__carne,
	.prov-selo:focus-within .prov-burger__pao-baixo {
		transform: none;
	}
}

/* O lanche e o número lado a lado, dentro de um card. */
.prov-selo__linha {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
	margin: 0.6rem 0;
}

.prov-selo__linha .prov-burger {
	flex: 0 0 auto;
	max-width: 76px;
}

/* ==================================================================
 * CONTA E MESA
 * ================================================================== */

.prov-lembrar {
	align-items: center;
	display: flex;
	gap: 0.5rem;
	font-size: 0.9rem;
	margin: 0 0 1rem;
}

.prov-lembrar input[type="checkbox"] {
	height: 22px;
	width: 22px;
	min-height: 0;
}

.prov-card .prov-sub a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ------------------------------------------------------------------
 * A fila da mesa
 * ---------------------------------------------------------------- */

.prov-fila {
	list-style: none;
	margin: 0 0 1.2rem;
	padding: 0;
}

.prov-fila li {
	align-items: center;
	border-bottom: 2px dashed var(--prov-preto);
	display: flex;
	font-family: var(--prov-fonte);
	gap: 0.7rem;
	padding: 0.6rem 0;
	text-transform: uppercase;
}

.prov-fila li:last-child {
	border-bottom: 0;
}

.prov-fila__n {
	align-items: center;
	background: var(--prov-amarelo);
	border: var(--prov-borda) solid var(--prov-preto);
	color: var(--prov-tinta-fixa);
	display: inline-flex;
	flex: 0 0 auto;
	height: 34px;
	justify-content: center;
	width: 34px;
}

/* ------------------------------------------------------------------
 * A tela de passagem
 *
 * É a barreira da nota cega no modo mesa: ela não imprime nota nenhuma, só o
 * nome de quem recebe o aparelho. Por isso é grande, centralizada e sem mais
 * nada na tela — quem pega o celular não deve ter o que ler além do próprio
 * nome.
 * ---------------------------------------------------------------- */

.prov-passagem {
	background: var(--prov-tinta-fixa);
	border: var(--prov-borda-forte) solid var(--prov-preto);
	box-shadow: var(--prov-sombra-g);
	color: var(--prov-papel-fixo);
	margin: 0 0 1.4rem;
	padding: 2.2rem 1.4rem;
	text-align: center;
}

.prov-passagem .prov-etiqueta {
	background: var(--prov-amarelo);
	color: var(--prov-tinta-fixa);
}

.prov-passagem__seta {
	font-size: 3rem;
	line-height: 1;
	margin: 1rem 0 0.4rem;
	animation: prov-aponta 1.4s ease-in-out infinite;
}

@keyframes prov-aponta {
	0%, 100% { transform: translateX(0); }
	50%      { transform: translateX(10px); }
}

.prov-passagem__nome {
	color: var(--prov-amarelo);
	font-family: var(--prov-fonte);
	font-size: clamp(2.2rem, 11vw, 4rem);
	line-height: 0.95;
	margin: 0 0 0.6rem;
	text-transform: uppercase;
	word-break: break-word;
}

.prov-passagem__aviso {
	font-size: 0.92rem;
	margin: 0 auto 1.4rem;
	max-width: 34ch;
	opacity: 0.85;
}

.prov-passagem__contador {
	font-family: var(--prov-fonte);
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	margin: 1.2rem 0 0;
	opacity: 0.75;
	text-transform: uppercase;
}

/* O botão de "sou eu" é o alvo principal da tela: grande e largo. */
.prov-passagem .prov-btn {
	font-size: 1.05rem;
	padding: 0.95em 1.6em;
	width: 100%;
}

@media (prefers-reduced-motion: reduce) {
	.prov-passagem__seta {
		animation: none;
	}
}

/* ==================================================================
 * BARRA INFERIOR — o atalho do polegar
 *
 * Inspirada na barra de jogo: abas gordas, ícone grande, rótulo pequeno, e a
 * aba atual LEVANTADA em vez de só colorida. Levantar é o que faz a posição
 * ser lida de relance, sem depender de cor — e funciona igual para quem não
 * distingue as cores.
 *
 * Ela só existe no celular. No desktop o menu de botões do topo já cabe
 * inteiro, e uma barra fixa embaixo numa tela grande só rouba altura.
 * ================================================================== */

.prov-abas {
	display: none;
}

@media (max-width: 720px) {

	/*
	 * No celular o menu de cima sai de cena.
	 *
	 * Ele virava uma fileira com rolagem lateral e itens cortados pela metade
	 * — que parece defeito, não convite a rolar. A barra de baixo faz o mesmo
	 * trabalho melhor, e ainda fica onde o polegar alcança.
	 */
	.prov-menu {
		display: none;
	}

	.prov-abas {
		align-items: stretch;
		background: var(--prov-papel-2);
		border-top: var(--prov-borda-forte) solid var(--prov-preto);
		bottom: 0;
		display: flex;
		left: 0;
		position: fixed;
		right: 0;
		z-index: 40;
		/* Respeita a faixa do gesto de "voltar" no iPhone. */
		padding-bottom: env(safe-area-inset-bottom, 0);
	}

	/*
	 * O espaço que a barra ocupa é devolvido ao documento.
	 *
	 * Sem isto a barra cobre o fim da página para sempre, e o último botão de
	 * cada tela fica intocável — o tipo de defeito que só aparece com o dedo
	 * no aparelho, nunca no navegador do computador.
	 */
	body {
		padding-bottom: 86px;
	}

	.prov-aba {
		align-items: center;
		background: var(--prov-papel-2);
		border-right: 3px solid var(--prov-preto);
		color: var(--prov-preto);
		display: flex;
		flex: 1 1 0;
		flex-direction: column;
		gap: 0.15rem;
		justify-content: center;
		min-height: 62px;
		min-width: 0;
		padding: 0.5rem 0.2rem;
		position: relative;
		text-align: center;
		text-decoration: none;
	}

	.prov-aba:last-child {
		border-right: 0;
	}

	.prov-aba__icone {
		display: block;
		font-size: 1.45rem;
		line-height: 1;
	}

	.prov-aba__rotulo {
		display: block;
		font-family: var(--prov-fonte);
		font-size: 0.6rem;
		letter-spacing: 0.04em;
		line-height: 1.1;
		text-transform: uppercase;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		max-width: 100%;
	}

	/*
	 * A aba atual sobe e ganha cor.
	 *
	 * São dois sinais para a mesma informação — altura e cor. Só a cor
	 * reprovaria para quem não a distingue; só a altura seria discreta demais
	 * num relance.
	 */
	.prov-aba--atual {
		background: var(--prov-amarelo);
		border-top: 4px solid var(--prov-tinta-fixa);
		color: var(--prov-tinta-fixa);
		margin-top: -10px;
		min-height: 72px;
	}

	.prov-aba--atual .prov-aba__icone {
		font-size: 1.7rem;
	}

	.prov-aba:active {
		background: var(--prov-lima);
	}

	/* ------------------------------------------------------------------
	 * A gaveta do "mais"
	 * ---------------------------------------------------------------- */

	.prov-aba--gaveta {
		padding: 0;
	}

	.prov-aba--gaveta > summary {
		align-items: center;
		cursor: pointer;
		display: flex;
		flex-direction: column;
		gap: 0.15rem;
		height: 100%;
		justify-content: center;
		list-style: none;
		min-height: 62px;
		padding: 0.5rem 0.2rem;
	}

	.prov-aba--gaveta > summary::-webkit-details-marker {
		display: none;
	}

	.prov-aba--gaveta[open] > summary {
		background: var(--prov-amarelo);
		color: var(--prov-tinta-fixa);
	}

	/* A gaveta sobe de dentro da barra, encostada na borda de baixo. */
	.prov-gaveta {
		background: var(--prov-papel-2);
		border: var(--prov-borda-forte) solid var(--prov-preto);
		bottom: calc(100% + 4px);
		box-shadow: var(--prov-sombra);
		display: grid;
		gap: 2px;
		grid-template-columns: 1fr 1fr;
		padding: 0.5rem;
		position: absolute;
		right: 0;
		width: min(78vw, 320px);
	}

	.prov-gaveta a {
		align-items: center;
		background: var(--prov-papel);
		border: 2px solid var(--prov-preto);
		color: var(--prov-preto);
		display: flex;
		font-family: var(--prov-fonte);
		font-size: 0.68rem;
		gap: 0.4rem;
		letter-spacing: 0.03em;
		min-height: 48px;
		padding: 0.5rem;
		text-decoration: none;
		text-transform: uppercase;
	}

	.prov-gaveta a:active {
		background: var(--prov-lima);
	}

	/*
	 * A barra some quando o teclado do celular está aberto.
	 *
	 * Em tela baixa (o que sobra com o teclado em pé) uma barra fixa come um
	 * terço do que resta, e o campo que a pessoa está preenchendo fica
	 * espremido contra ela.
	 */
	@media (max-height: 460px) {
		.prov-abas {
			position: static;
		}

		body {
			padding-bottom: 0;
		}
	}
}

/* ==================================================================
 * TIPS E APOSTA DE MESA
 * ================================================================== */

.prov-tips {
	align-items: baseline;
	background: var(--prov-amarelo);
	border: 2px solid var(--prov-tinta-fixa);
	color: var(--prov-tinta-fixa);
	display: inline-flex;
	gap: 0.3em;
	padding: 0.25em 0.6em;
}

.prov-tips__n {
	font-family: var(--prov-fonte);
	font-size: 1.05rem;
	line-height: 1;
}

.prov-tips__rot {
	font-family: var(--prov-fonte);
	font-size: 0.62rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.prov-tips-grande {
	font-family: var(--prov-fonte);
	font-size: clamp(2.4rem, 12vw, 4rem);
	line-height: 1;
	margin: 0.5rem 0 0.3rem;
}

.prov-tips-grande small {
	font-size: 0.32em;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* ------------------------------------------------------------------
 * Escolher em quem apostar
 *
 * Cada palpite é um alvo inteiro, não um rádio de 20px com rótulo ao lado.
 * Na mesa, com o polegar, acertar um rádio pequeno é o tipo de atrito que faz
 * a pessoa desistir do jogo.
 * ---------------------------------------------------------------- */

.prov-palpites {
	display: grid;
	gap: 0.6rem;
	margin: 0.8rem 0;
}

.prov-palpite {
	align-items: center;
	background: var(--prov-papel);
	border: var(--prov-borda) solid var(--prov-preto);
	cursor: pointer;
	display: flex;
	gap: 0.8rem;
	justify-content: space-between;
	min-height: 60px;
	padding: 0.7rem 0.9rem;
}

.prov-palpite input[type="radio"] {
	flex: 0 0 auto;
	height: 26px;
	margin: 0;
	width: 26px;
}

.prov-palpite__corpo {
	flex: 1 1 auto;
	min-width: 0;
}

.prov-palpite__nome {
	display: block;
	font-family: var(--prov-fonte);
	font-size: 1rem;
	text-transform: uppercase;
}

.prov-palpite__vies {
	display: block;
	font-size: 0.74rem;
	opacity: 0.8;
}

.prov-palpite__numeros {
	align-items: flex-end;
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	gap: 0.25rem;
}

/* O escolhido salta: a borda engorda e o fundo acende. */
.prov-palpite:has(input:checked) {
	background: var(--prov-lima);
	border-width: var(--prov-borda-forte);
	box-shadow: var(--prov-sombra-p);
}

/* Navegador sem :has ainda mostra o foco, que é o mínimo. */
.prov-palpite:focus-within {
	outline: 3px solid var(--prov-roxo);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------
 * As fichas de aposta
 * ---------------------------------------------------------------- */

.prov-fichas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1.2rem;
}

.prov-ficha {
	cursor: pointer;
}

.prov-ficha input[type="radio"] {
	height: 1px;
	opacity: 0;
	position: absolute;
	width: 1px;
}

.prov-ficha span {
	background: var(--prov-papel-2);
	border: var(--prov-borda) solid var(--prov-preto);
	display: inline-flex;
	align-items: center;
	font-family: var(--prov-fonte);
	font-size: 0.92rem;
	gap: 0.3em;
	min-height: 46px;
	padding: 0.45em 0.9em;
}

.prov-ficha input:checked + span {
	background: var(--prov-amarelo);
	box-shadow: var(--prov-sombra-p);
	transform: translate(-2px, -2px);
}

/* O rádio escondido continua alcançável pelo teclado. */
.prov-ficha input:focus-visible + span {
	outline: 3px solid var(--prov-roxo);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------
 * A fila da mesa, com o botão de tirar
 * ---------------------------------------------------------------- */

.prov-fila__nome {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.prov-fila__acao {
	flex: 0 0 auto;
	margin: 0;
}

.prov-btn--mini {
	font-size: 0.7rem;
	min-height: 40px;
	padding: 0.4em 0.7em;
}

/* ------------------------------------------------------------------
 * Celular
 * ---------------------------------------------------------------- */

@media (max-width: 480px) {
	.prov-palpite {
		align-items: flex-start;
		flex-wrap: wrap;
	}

	.prov-palpite__numeros {
		align-items: flex-start;
		flex-direction: row;
		gap: 0.5rem;
		width: 100%;
	}

	.prov-fichas .prov-ficha {
		flex: 1 1 calc(50% - 0.25rem);
	}

	.prov-fichas .prov-ficha span {
		justify-content: center;
		width: 100%;
	}

	/*
	 * O botão de tirar fica NA linha do nome.
	 *
	 * Com flex-wrap ele caía para a linha de baixo em quase todo nome, e a
	 * lista virava o dobro de altura com um botão órfão sob cada pessoa. O
	 * nome encolhe com reticências; o botão não encolhe.
	 */
	.prov-fila li {
		flex-wrap: nowrap;
		gap: 0.5rem;
	}

	.prov-fila__nome {
		font-size: 0.86rem;
		white-space: nowrap;
	}
}

@media (prefers-reduced-motion: reduce) {
	.prov-ficha input:checked + span {
		transform: none;
	}
}

/* O saldo no cabeçalho: ao lado do nível, some quando a tela aperta. */
.prov-topo__tips {
	display: inline-flex;
}

@media (max-width: 420px) {
	.prov-topo__tips {
		display: none;
	}
}

/* ==================================================================
 * CARBURGUER — o carro e a entrada
 * ================================================================== */

.prov-carro {
	display: block;
	height: auto;
	overflow: visible;
	width: 100%;
}

.prov-carro--logo {
	max-width: 76px;
}

/*
 * Em tela estreita o carro cede espaço para o nome.
 *
 * Os dois dividem a mesma linha, e o carro é o único dos dois que encolhe sem
 * perder o que é — a 56px ainda se vê o hambúrguer ao volante, enquanto o
 * nome abaixo de 17px vira legenda. Cedendo 20px aqui, o nome não precisa
 * descer ao piso do clamp.
 */
@media (max-width: 360px) {
	.prov-carro--logo {
		max-width: 56px;
	}

	.prov-marca__carro {
		padding: 0.25rem 0.3rem;
	}
}

.prov-carro--grande {
	max-width: 420px;
}

/* ------------------------------------------------------------------
 * O carro andando
 *
 * A carroceria sobe e desce de leve, as rodas giram, e o chão corre para
 * trás. É o chão correndo que cria a ilusão de avanço — sem ele o carro só
 * treme no lugar.
 * ---------------------------------------------------------------- */

.prov-carro--grande .prov-carro__corpo,
.prov-carro--grande .prov-carro__vidro,
.prov-carro--grande .prov-carro__farol,
.prov-carro--grande .prov-carro__motorista {
	animation: prov-solavanco 0.9s ease-in-out infinite;
}

/* O motorista chacoalha um pouco mais que o carro: ele não está preso. */
.prov-carro--grande .prov-carro__motorista {
	animation-duration: 0.62s;
	transform-origin: 50% 80%;
}

@keyframes prov-solavanco {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-3px); }
}

.prov-carro--grande .prov-carro__roda {
	animation: prov-gira 0.7s linear infinite;
}

.prov-carro--grande .prov-carro__roda--tras   { transform-origin: 92px 112px; }
.prov-carro--grande .prov-carro__roda--frente { transform-origin: 206px 112px; }

@keyframes prov-gira {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

.prov-carro--grande .prov-carro__chao {
	stroke: var(--prov-tinta-fixa);
	stroke-dasharray: 26 20;
	animation: prov-estrada 0.55s linear infinite;
}

@keyframes prov-estrada {
	from { stroke-dashoffset: 0; }
	to   { stroke-dashoffset: -46; }
}

.prov-carro--grande .prov-carro__vento path {
	animation: prov-rajada 0.9s ease-in-out infinite;
}

.prov-carro--grande .prov-carro__vento path:nth-child(2) { animation-delay: 0.14s; }
.prov-carro--grande .prov-carro__vento path:nth-child(3) { animation-delay: 0.28s; }

@keyframes prov-rajada {
	0%   { opacity: 0;   transform: translateX(14px); }
	40%  { opacity: 0.6; }
	100% { opacity: 0;   transform: translateX(-16px); }
}

/* No logo o chão é linha cheia: tracejado em 76px vira poeira. */
.prov-carro--logo .prov-carro__chao {
	stroke: var(--prov-tinta-fixa);
}

/* ------------------------------------------------------------------
 * A marca no cabeçalho
 * ---------------------------------------------------------------- */

.prov-marca__carro {
	background: var(--prov-amarelo);
	border: var(--prov-borda) solid var(--prov-preto);
	box-shadow: var(--prov-sombra-p);
	display: inline-flex;
	flex: 0 0 auto;
	padding: 0.3rem 0.4rem;
}

.prov-marca:hover .prov-carro--logo,
.prov-marca:focus-visible .prov-carro--logo {
	animation: prov-arranca 0.5s ease-in-out;
}

@keyframes prov-arranca {
	0%   { transform: translateX(0); }
	35%  { transform: translateX(-5px) rotate(-2deg); }
	100% { transform: translateX(0); }
}

/* ------------------------------------------------------------------
 * A entrada
 * ---------------------------------------------------------------- */

.prov-entrada {
	background: var(--prov-papel-2);
	border: var(--prov-borda-forte) solid var(--prov-preto);
	box-shadow: var(--prov-sombra-g);
	/*
	 * O cartão vira a régua do nome que está dentro dele. Ver o porquê no
	 * comentário de .prov-entrada__nome, logo abaixo.
	 */
	container-type: inline-size;
	margin: 0 0 1.8rem;
	overflow: hidden;
	padding: 1.6rem 1.2rem 2rem;
	position: relative;
	text-align: center;
}

/* A faixa zebrada atravessando o topo da entrada, como fita de obra. */
.prov-entrada::before {
	background-image: repeating-linear-gradient(
		45deg,
		var(--prov-amarelo) 0 16px,
		var(--prov-tinta-fixa) 16px 32px
	);
	content: "";
	height: 12px;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.prov-entrada__arte {
	display: flex;
	justify-content: center;
	margin: 1rem 0 1.2rem;
}

/*
 * O nome cabe numa linha só.
 *
 * A medida vem do CARTÃO, não da janela. Com `vw` o nome quebrava duas vezes,
 * por motivos opostos: a 390px de janela, 13vw pedia 383px onde havia 301
 * ("CARBURG / UER"); baixando para 9vw o celular ficou certo e o desktop
 * quebrou — a 1240px de janela o clamp batia no teto de 5rem, a palavra pedia
 * 608px e o cartão, que para na coluna do tema, oferecia 607. Um pixel.
 *
 * `vw` mede a janela, e quem limita o texto é a caixa em volta dele. Numa
 * página de coluna estreita os dois não têm relação nenhuma, então qualquer
 * número acertado numa largura erra na outra. Com `cqi` a conta passa a ser
 * sobre o próprio cartão e vale em qualquer janela.
 *
 * O número: "CARBURGUER" nesta fonte ocupa 7,6em. Cabendo em 100cqi, o teto
 * seria 13,1cqi — 11cqi deixa 16% de folga, que é o que cobre a diferença
 * entre a Archivo Black e a fonte de reserva quando a web font não carrega.
 *
 * O PISO também quebrava, e é o caso mais fácil de esquecer: numa tela de
 * 320px o cartão oferece 216px, 11cqi daria 24px — e aí o piso de 1,8rem
 * assumia, pedia 219px, e a palavra quebrava de novo. Um piso é um teto pelo
 * avesso: ele também precisa caber.
 *
 * A linha com `vw` fica em cima de propósito: navegador sem container queries
 * descarta a declaração seguinte e fica com ela, em vez de ficar sem nenhuma.
 */
.prov-entrada__nome {
	font-family: var(--prov-fonte);
	font-size: clamp(1.6rem, 9vw, 4.5rem);
	font-size: clamp(1.6rem, 11cqi, 5rem);
	letter-spacing: -0.03em;
	line-height: 0.9;
	margin: 0 0 0.4rem;
	overflow-wrap: break-word;
	text-transform: uppercase;
	word-break: normal;
}

.prov-entrada__sub {
	font-size: clamp(0.95rem, 3.6vw, 1.1rem);
	margin: 0 auto 1.4rem;
	max-width: 38ch;
	opacity: 0.85;
}

.prov-entrada__botoes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	justify-content: center;
}

@media (max-width: 480px) {
	.prov-entrada {
		padding: 1.3rem 0.9rem 1.6rem;
	}

	.prov-entrada__botoes .prov-btn {
		width: 100%;
	}
}

/*
 * Sem movimento, o carro fica parado e inteiro.
 *
 * O desenho não perde nada: ele já diz "hambúrguer dirigindo" estático. O que
 * a animação acrescenta é graça, e graça é a primeira coisa que se abre mão
 * quando alguém pede menos movimento.
 */
@media (prefers-reduced-motion: reduce) {
	.prov-carro--grande .prov-carro__corpo,
	.prov-carro--grande .prov-carro__vidro,
	.prov-carro--grande .prov-carro__farol,
	.prov-carro--grande .prov-carro__motorista,
	.prov-carro--grande .prov-carro__roda,
	.prov-carro--grande .prov-carro__chao,
	.prov-carro--grande .prov-carro__vento path,
	.prov-marca:hover .prov-carro--logo {
		animation: none;
	}

	.prov-carro--grande .prov-carro__chao {
		stroke-dasharray: none;
	}
}

/* ==================================================================
 * ÍCONES DA BARRA E A CORTINA
 * ================================================================== */

.prov-icone {
	display: block;
	height: 26px;
	width: 26px;
}

.prov-aba--atual .prov-icone {
	height: 30px;
	width: 30px;
}

/* ------------------------------------------------------------------
 * Os ícones se mexem — mas só o da aba em que você está
 *
 * Cinco ícones animados ao mesmo tempo viram um carrossel piscando no pé da
 * tela. Animar só o ativo transforma o movimento em indicação de "você está
 * aqui", que é informação, em vez de enfeite competindo por atenção.
 * ---------------------------------------------------------------- */

.prov-aba--atual .prov-icone__talher {
	animation: prov-garfo 1.6s ease-in-out infinite;
	transform-origin: 12px 20px;
}

@keyframes prov-garfo {
	0%, 100% { transform: rotate(0deg); }
	45%      { transform: rotate(-7deg); }
}

.prov-aba--atual .prov-icone__aparelho {
	animation: prov-passando 1.8s ease-in-out infinite;
	transform-origin: 12px 12px;
}

@keyframes prov-passando {
	0%, 100% { transform: rotate(0deg) translateX(0); }
	50%      { transform: rotate(9deg) translateX(-2px); }
}

.prov-aba--atual .prov-icone__passa {
	animation: prov-seta-mesa 1.8s ease-in-out infinite;
}

@keyframes prov-seta-mesa {
	0%, 100% { opacity: 0.25; transform: translateX(-2px); }
	50%      { opacity: 1;    transform: translateX(2px); }
}

.prov-aba--atual .prov-icone__brilho {
	animation: prov-lustro 2s ease-in-out infinite;
}

@keyframes prov-lustro {
	0%, 100% { opacity: 0; }
	50%      { opacity: 0.9; }
}

.prov-aba--atual .prov-icone__estrela {
	animation: prov-pisca 1.9s ease-in-out infinite;
	transform-origin: 12px 12px;
}

@keyframes prov-pisca {
	0%, 100% { transform: scale(1) rotate(0deg); }
	50%      { transform: scale(1.12) rotate(-6deg); }
}

.prov-aba--gaveta[open] .prov-icone__linhas path:nth-child(1) { transform: translateX(2px); }
.prov-aba--gaveta[open] .prov-icone__linhas path:nth-child(3) { transform: translateX(-2px); }

.prov-icone__linhas path {
	transition: transform 0.18s ease-out;
}

/* ------------------------------------------------------------------
 * A cortina
 *
 * Ela SE DISPENSA POR CSS: a animação termina em visibility hidden com
 * `forwards`. Se o JavaScript não rodar, a cortina ainda sai do caminho —
 * uma cortina que depende de script para sumir é uma tela branca esperando
 * para acontecer.
 * ---------------------------------------------------------------- */

.prov-cortina {
	align-items: center;
	animation: prov-cortina-sai 1.9s ease-in forwards;
	background: var(--prov-papel);
	display: flex;
	flex-direction: column;
	inset: 0;
	justify-content: center;
	overflow: hidden;
	position: fixed;
	z-index: 9000;
}

@keyframes prov-cortina-sai {
	0%, 72%  { opacity: 1; visibility: visible; }
	99%      { opacity: 0; visibility: visible; }
	100%     { opacity: 0; visibility: hidden; pointer-events: none; }
}

.prov-cortina__faixa {
	background-image: repeating-linear-gradient(
		45deg,
		var(--prov-amarelo) 0 18px,
		var(--prov-tinta-fixa) 18px 36px
	);
	height: 16px;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.prov-cortina__faixa--baixo {
	bottom: 0;
	top: auto;
}

/*
 * O palco é a largura da tela, e o carro atravessa dentro dele.
 *
 * `overflow: hidden` no palco (e na cortina) é o que impede o carro de
 * empurrar a página para o lado enquanto entra e sai — animação que atravessa
 * a tela é a causa clássica de rolagem horizontal fantasma.
 */
.prov-cortina__palco {
	overflow: hidden;
	padding: 1rem 0;
	width: 100%;
}

.prov-cortina__palco .prov-carro {
	animation: prov-atravessa 1.9s cubic-bezier(0.5, 0, 0.5, 1) forwards;
	margin: 0 auto;
	max-width: min(360px, 82vw);
}

@keyframes prov-atravessa {
	0%   { transform: translateX(-125vw); }
	55%  { transform: translateX(0); }
	100% { transform: translateX(125vw); }
}

.prov-cortina__texto {
	font-family: var(--prov-fonte);
	font-size: clamp(1rem, 4.5vw, 1.4rem);
	letter-spacing: 0.06em;
	margin: 0.8rem 0 0;
	text-transform: uppercase;
}

/*
 * Sem movimento, sem cortina.
 *
 * Aqui não basta parar a animação: uma cortina parada é uma tela que cobre o
 * site para sempre. Ela simplesmente não existe para quem pediu menos
 * movimento — e não existe nada a perder, porque ela é só espera enfeitada.
 */
@media (prefers-reduced-motion: reduce) {
	.prov-cortina {
		display: none;
	}
}

/* ------------------------------------------------------------------
 * O carro estacionado na ficha do restaurante
 * ---------------------------------------------------------------- */

.prov-estacionado {
	margin: 0 0 1rem;
}

/*
 * Mais largo que os 300px de antes porque o quadro da variante parada cresceu
 * para a esquerda (332 unidades em vez de 260): com o mesmo max-width o CARRO
 * encolheria um quinto só para caber a porta ao lado dele.
 */
.prov-carro--parado {
	max-width: 380px;
}

.prov-carro--parado .prov-carro__chao {
	stroke: var(--prov-tinta-fixa);
}

@media (max-width: 480px) {
	.prov-carro--parado {
		max-width: 100%;
	}
}