/* ==========================================================================
   Corte Fino Assados — página única
   Cores tiradas do logo: vermelho galo + mostarda. Creme de farofa,
   brasa para o traço e verde cebolinha como contraponto.
   ========================================================================== */

:root {
	--vermelho: #C1201F;
	--vermelho-fundo: #B21B1A;
	--mostarda: #F4B223;
	--creme: #F3E9D2;
	--papel: #FFFBF1;
	--brasa: #2B1510;
	--cebolinha: #2E7D4F;
	--laranja: #E8742A;

	--f-titulo: "Archivo", "Arial Black", system-ui, sans-serif;
	--f-cond: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
	--f-texto: "Source Sans 3", Arial, system-ui, sans-serif;
	--f-letra: "Yellowtail", "Brush Script MT", cursive;

	--margem: clamp(16px, 4vw, 56px);
	--raio: 22px;
	--onda: clamp(14px, 1.6vw, 24px);
	--topo-h: 76px;
	--ease: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
	overflow-x: clip;
	background: var(--vermelho);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scrollbar-color: var(--mostarda) var(--vermelho);
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
html.travado { overflow: hidden; }

body {
	margin: 0;
	min-height: 100vh;
	background: var(--vermelho);
	color: var(--creme);
	font-family: var(--f-texto);
	font-size: clamp(17px, 0.9vw + 11px, 21px);
	line-height: 1.45;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, p, figure, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

::selection { background: var(--mostarda); color: var(--vermelho); }

:focus-visible {
	outline: 3px solid var(--mostarda);
	outline-offset: 3px;
	border-radius: 6px;
}

.sr {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.pular {
	position: fixed;
	top: 10px; left: 10px;
	z-index: 200;
	padding: .6em 1em;
	border-radius: 999px;
	background: var(--mostarda);
	color: var(--vermelho);
	font-weight: 700;
	transform: translateY(-160%);
	transition: transform .2s var(--ease);
}
.pular:focus { transform: none; }

/* Galo e marca recortados do logo (máscaras, a cor vem do currentColor) */
.galo {
	display: block;
	aspect-ratio: 744 / 898;
	background: currentColor;
	-webkit-mask: url("../img/galo.png") center / contain no-repeat;
	mask: url("../img/galo.png") center / contain no-repeat;
}

/* Letreiro manuscrito */
.letreiro {
	font-family: var(--f-letra);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
}

/* Pílulas */
.pilula {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	padding: .5em 1.05em;
	border-radius: 999px;
	font-family: var(--f-cond);
	font-weight: 800;
	font-size: 15px;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.1;
	white-space: nowrap;
}
.pilula svg { width: 1.2em; height: 1.2em; flex: none; }
.pilula--clara {
	background: var(--creme);
	color: var(--vermelho);
	transition: transform .25s var(--ease), background-color .25s;
}
.pilula--clara:hover { transform: translateY(-2px) rotate(-1.5deg); background: var(--papel); }

/* Botões grandes */
.botao {
	display: inline-flex;
	align-items: center;
	gap: .55em;
	padding: .85em 1.5em;
	border-radius: 999px;
	font-family: var(--f-cond);
	font-weight: 800;
	font-size: clamp(19px, 1.5vw, 24px);
	text-transform: uppercase;
	letter-spacing: .02em;
	text-decoration: none;
	line-height: 1;
	box-shadow: 0 6px 0 var(--brasa);
	transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.botao svg { width: 1.15em; height: 1.15em; }
.botao:hover { transform: translateY(-3px) rotate(-1deg); box-shadow: 0 9px 0 var(--brasa); }
.botao:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--brasa); }
.botao--mostarda { background: var(--mostarda); color: var(--vermelho); }
.botao--creme { background: var(--creme); color: var(--vermelho); }

/* Borda ondulada: semicírculos da cor da seção anterior pendurados no topo */
.borda { position: relative; }
.borda::before {
	content: "";
	position: absolute;
	left: 0; right: 0;
	top: -1px;
	height: calc(var(--onda) + 1px);
	background:
		linear-gradient(var(--anterior), var(--anterior)) 0 0 / 100% 1px no-repeat,
		radial-gradient(circle at 50% 0, var(--anterior) calc(var(--onda) - .5px), transparent var(--onda))
		0 1px / calc(var(--onda) * 2) var(--onda) repeat-x;
	pointer-events: none;
	z-index: 3;
}

/* Letreiro em faixa (marquee) */
.marquee {
	display: flex;
	width: max-content;
	animation: marquee var(--dur, 40s) linear infinite;
}
.marquee--dir { animation-direction: reverse; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ==========================================================================
   Abertura
   ========================================================================== */
.intro { display: none; }
.js .intro {
	position: fixed;
	inset: 0;
	z-index: 120;
	display: block;
	pointer-events: none;
}
.intro__faixas { position: absolute; inset: 0; display: flex; }
.intro__faixas i { flex: 1; }
.intro__faixas i:nth-child(1) { background: var(--vermelho); }
.intro__faixas i:nth-child(2) { background: var(--laranja); }
.intro__faixas i:nth-child(3) { background: var(--mostarda); }
.intro__faixas i:nth-child(4) { background: var(--creme); }
.intro__faixas i:nth-child(5) { background: var(--cebolinha); }

.intro__centro {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 26px;
}
.intro__galo {
	width: 74px;
	color: var(--vermelho);
	animation: galo-pula .5s var(--ease) infinite alternate;
}
@keyframes galo-pula { to { transform: translateY(-8px) rotate(-6deg); } }
.intro__msg {
	padding: .6em 1.2em;
	border-radius: 999px;
	background: var(--vermelho);
	color: var(--creme);
	font-weight: 700;
	font-size: 19px;
	box-shadow: 0 10px 30px rgba(43, 21, 16, .25);
	min-width: 16ch;
	text-align: center;
}
.intro__barra {
	width: min(320px, 70vw);
	height: 6px;
	border-radius: 6px;
	background: rgba(255, 251, 241, .45);
	overflow: hidden;
}
.intro__barra b {
	display: block;
	height: 100%;
	background: var(--papel);
	transform-origin: left;
	transform: scaleX(0);
}
.intro__grito {
	position: absolute;
	left: var(--margem);
	bottom: 40px;
	font-family: var(--f-titulo);
	font-weight: 900;
	font-stretch: 125%;
	text-transform: uppercase;
	font-size: 17px;
	color: var(--creme);
}

/* ==========================================================================
   Barra do topo
   ========================================================================== */
.topo {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 60;
	height: var(--topo-h);
	padding: 0 var(--margem);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	pointer-events: none;
}
.topo > * { pointer-events: auto; }
.topo__logo {
	width: 58px;
	height: 58px;
	flex: none;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--vermelho);
	box-shadow: 0 0 0 3px var(--mostarda), 0 8px 18px rgba(43, 21, 16, .3);
	color: var(--mostarda);
	transition: transform .3s var(--ease);
}
.topo__logo .galo { width: 30px; }
.topo__logo:hover { transform: rotate(-10deg) scale(1.06); }

.topo__status {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	background: var(--vermelho);
	color: var(--creme);
	box-shadow: 0 0 0 2px rgba(243, 233, 210, .35);
}
.topo__status .ponto {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--creme);
	opacity: .6;
}
.topo__status.is-aberto .ponto {
	background: #57D98A;
	opacity: 1;
	box-shadow: 0 0 0 0 rgba(87, 217, 138, .7);
	animation: pulsa 1.8s infinite;
}
@keyframes pulsa { 70% { box-shadow: 0 0 0 8px rgba(87, 217, 138, 0); } 100% { box-shadow: 0 0 0 0 rgba(87, 217, 138, 0); } }

.topo__cta { box-shadow: 0 6px 16px rgba(43, 21, 16, .2); }

/* ==========================================================================
   01 — Hero
   ========================================================================== */
.hero {
	position: relative;
	min-height: 100svh;
	min-height: max(100svh, 620px);
	overflow: hidden;
	display: grid;
	place-items: center;
	--fs: clamp(76px, min(19vw, 34vh), 340px);
	--faixas-h: clamp(170px, 18vw, 280px);
	--pt: calc(var(--topo-h) + 10px);
	--pb: calc(var(--faixas-h) / 2 + 150px);
	padding: var(--pt) var(--margem) var(--pb);
	background: var(--vermelho);
}
.hero__fundo {
	position: absolute;
	width: max(70vw, 110vh);
	right: -18vw;
	top: -12vh;
	color: var(--vermelho-fundo);
	rotate: -8deg;
	pointer-events: none;
}

.hero__titulo {
	position: relative;
	z-index: 1;
	display: grid;
	justify-items: center;
	font-family: var(--f-titulo);
	font-weight: 900;
	font-stretch: 125%;
	font-size: var(--fs);
	line-height: .8;
	text-transform: uppercase;
	color: var(--creme);
	letter-spacing: -.01em;
	text-shadow: 0 .035em 0 #8C1414;
	user-select: none;
}
.hero__linha { display: block; white-space: nowrap; }
.hero__linha b { display: inline-block; font-weight: inherit; rotate: var(--r, 0deg); translate: 0 var(--y, 0); }
.hero__linha--1 { translate: -3% 0; }
.hero__linha--2 { translate: 24% 0; }
.hero__linha--1 b:nth-child(1) { --r: -7deg; --y: 4%; }
.hero__linha--1 b:nth-child(2) { --r: 3deg; --y: -3%; }
.hero__linha--1 b:nth-child(3) { --r: -2deg; --y: 2%; }
.hero__linha--1 b:nth-child(4) { --r: 5deg; --y: -4%; }
.hero__linha--1 b:nth-child(5) { --r: -4deg; --y: 3%; }
.hero__linha--2 b:nth-child(1) { --r: 4deg; --y: -2%; }
.hero__linha--2 b:nth-child(2) { --r: -5deg; --y: 3%; }
.hero__linha--2 b:nth-child(3) { --r: 2deg; --y: -3%; }
.hero__linha--2 b:nth-child(4) { --r: -6deg; --y: 2%; }

.hero__prato {
	position: absolute;
	z-index: 2;
	left: calc(50% - var(--fs) * 1.8);
	top: calc((var(--pt) + 100% - var(--pb)) / 2 + var(--fs) * .24);
	width: calc(var(--fs) * 1.1);
	aspect-ratio: 1;
	translate: -50% -50%;
	pointer-events: none;
}
.prato {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	overflow: hidden;
	background: var(--creme);
	border: clamp(7px, .9vw, 14px) solid var(--creme);
	box-shadow:
		0 0 0 clamp(3px, .3vw, 5px) var(--brasa),
		0 34px 60px rgba(43, 21, 16, .5);
}
.prato img { width: 100%; height: 100%; object-fit: cover; scale: 1.08; animation: gira 90s linear infinite; }
@keyframes gira { to { rotate: 360deg; } }

.hero__solto { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.solto { position: absolute; overflow: visible; filter: drop-shadow(0 10px 10px rgba(43, 21, 16, .25)); }
.solto--1 { left: 7%; top: 20%; width: clamp(64px, 8vw, 130px); aspect-ratio: 120 / 84; rotate: -22deg; }
.solto--2 { right: 6%; top: 16%; width: clamp(80px, 11vw, 180px); aspect-ratio: 140 / 100; rotate: 16deg; }
.solto--3 { left: 21%; top: 11%; width: clamp(80px, 10vw, 160px); aspect-ratio: 2; rotate: 18deg; }
.solto--4 { right: 14%; bottom: 27%; width: clamp(56px, 7vw, 116px); aspect-ratio: 120 / 84; rotate: 34deg; }
.solto--5 { left: 40%; bottom: 31%; width: clamp(22px, 2.4vw, 38px); aspect-ratio: 1; }
.solto--6 { right: 30%; bottom: 20%; width: clamp(22px, 2.4vw, 38px); aspect-ratio: 1; rotate: 60deg; }
.solto--7 { right: 24%; top: 26%; width: clamp(18px, 2vw, 32px); aspect-ratio: 1; rotate: -30deg; }

.hero__rodape {
	position: absolute;
	z-index: 4;
	left: var(--margem);
	right: var(--margem);
	bottom: calc(var(--faixas-h) / 2 + 36px);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: end;
	gap: 24px;
}
.hero__lide { max-width: 36ch; font-size: clamp(16px, 1.1vw, 19px); font-weight: 600; line-height: 1.75; }
.hero__lide span {
	padding: .18em .45em;
	border-radius: 6px;
	background: var(--brasa);
	color: var(--creme);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.rolar {
	justify-self: end;
	font-family: var(--f-cond);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: 15px;
	text-decoration: none;
	padding-bottom: 32px;
	position: relative;
}
.rolar::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 2px;
	height: 24px;
	background: currentColor;
	animation: desce 1.6s var(--ease) infinite;
	transform-origin: top;
}
@keyframes desce { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1) translateY(100%); opacity: 0; } }

.contagem {
	padding: 12px 20px 14px;
	border-radius: 18px;
	background: var(--creme);
	color: var(--vermelho);
	text-align: center;
	box-shadow: 0 6px 0 var(--brasa);
	rotate: -2deg;
}
.contagem__rotulo {
	font-family: var(--f-cond);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .05em;
	font-size: 14px;
	color: var(--brasa);
}
.contagem__numeros { display: flex; gap: 12px; justify-content: center; }
.contagem__numeros span { display: grid; justify-items: center; }
.contagem__numeros b {
	font-family: var(--f-cond);
	font-weight: 800;
	font-size: clamp(30px, 2.6vw, 44px);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.contagem__numeros small { font-size: 12px; font-weight: 700; color: var(--brasa); }

/* ==========================================================================
   02 — Faixas
   ========================================================================== */
.faixas {
	position: relative;
	z-index: 6;
	height: clamp(170px, 18vw, 280px);
	margin-top: calc(clamp(170px, 18vw, 280px) / -2);
	margin-bottom: calc(clamp(170px, 18vw, 280px) / -2);
	overflow-x: clip;
	pointer-events: none;
}
.faixa {
	position: absolute;
	left: -10vw;
	width: 120vw;
	overflow: hidden;
	box-shadow: 0 10px 24px rgba(43, 21, 16, .25);
}
.faixa__trilho { white-space: nowrap; }
.faixa__trilho span, .faixa__trilho i { flex: none; }
.faixa--mostarda {
	top: 18%;
	rotate: -4deg;
	background: var(--mostarda);
	color: var(--vermelho);
	padding: .2em 0;
	font-family: var(--f-titulo);
	font-weight: 900;
	font-stretch: 125%;
	text-transform: uppercase;
	font-size: clamp(34px, 4.6vw, 76px);
	line-height: 1.05;
}
.faixa--mostarda i { font-style: normal; padding: 0 .4em; color: var(--brasa); }
.faixa--creme {
	top: 56%;
	rotate: 2.5deg;
	background: var(--creme);
	color: var(--vermelho);
	border-block: 3px solid var(--brasa);
	padding: .25em 0;
	font-family: var(--f-cond);
	font-style: italic;
	font-weight: 800;
	text-transform: uppercase;
	font-size: clamp(22px, 2.4vw, 38px);
	line-height: 1.1;
}
.faixa--creme i { font-style: normal; padding: 0 .6em; color: var(--laranja); }

/* ==========================================================================
   03 — Verbete
   ========================================================================== */
.verbete {
	position: relative;
	background: var(--creme);
	color: var(--brasa);
	padding: clamp(150px, 16vw, 240px) var(--margem) clamp(110px, 12vw, 180px);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	overflow-x: clip;
}
.verbete__cartao {
	position: relative;
	width: min(100%, 820px);
	padding: clamp(28px, 4vw, 60px);
	background: var(--papel);
	border-radius: 6px;
	outline: 4px dashed var(--mostarda);
	outline-offset: 14px;
	box-shadow: 0 30px 60px rgba(43, 21, 16, .12);
	rotate: -1.2deg;
}
.verbete__titulo {
	font-family: var(--f-titulo);
	font-weight: 900;
	font-stretch: 125%;
	text-transform: uppercase;
	font-size: clamp(38px, 5.8vw, 92px);
	line-height: .9;
	color: var(--vermelho);
}
.verbete__pron {
	margin-top: 14px;
	font-family: var(--f-cond);
	font-weight: 800;
	font-size: clamp(16px, 1.3vw, 20px);
	color: var(--vermelho);
	letter-spacing: .02em;
	padding-bottom: 14px;
	border-bottom: 2px solid rgba(193, 32, 31, .25);
}
.verbete__pron em { color: var(--laranja); }
.verbete__texto {
	margin-top: 22px;
	max-width: 52ch;
	font-size: clamp(19px, 1.5vw, 24px);
	line-height: 1.45;
}
.verbete__sin { margin-top: 18px; font-size: 17px; }
.verbete__sin strong { color: var(--vermelho); }
.verbete__letreiro {
	margin: 26px 0 -8px auto;
	width: fit-content;
	font-size: clamp(46px, 6vw, 96px);
	color: var(--vermelho);
	rotate: -6deg;
}
.verbete__foto {
	position: absolute;
	right: max(var(--margem), calc(50% - 640px));
	bottom: clamp(50px, 7vw, 110px);
	width: clamp(170px, 22vw, 340px);
	aspect-ratio: 4 / 5;
	border-radius: var(--raio);
	overflow: hidden;
	rotate: 7deg;
	box-shadow: 0 24px 50px rgba(43, 21, 16, .3);
	border: 6px solid var(--papel);
}
.verbete__foto img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   04 — Monta o frango
   ========================================================================== */
.monta {
	--anterior: var(--creme);
	background: var(--cebolinha);
	color: var(--creme);
}
.monta__fixo {
	position: relative;
	height: 100svh;
	min-height: 600px;
	padding: calc(var(--topo-h) + 24px) var(--margem) 40px;
	overflow: hidden;
}
.monta__titulo {
	position: relative;
	z-index: 2;
	font-family: var(--f-titulo);
	font-weight: 900;
	font-stretch: 125%;
	text-transform: uppercase;
	font-size: clamp(42px, 6.4vw, 108px);
	line-height: .88;
}
.monta__passos {
	position: absolute;
	z-index: 2;
	left: var(--margem);
	bottom: 80px;
	display: grid;
	gap: 6px;
	counter-reset: passo;
}
.monta__passos li {
	counter-increment: passo;
	display: grid;
	grid-template-columns: 2.2em auto;
	align-items: baseline;
	opacity: .38;
	transition: opacity .35s var(--ease);
}
.monta__passos li::before {
	content: counter(passo, decimal-leading-zero);
	font-family: var(--f-cond);
	font-weight: 800;
	font-size: 14px;
	color: var(--mostarda);
}
.monta__passos b {
	font-family: var(--f-cond);
	font-weight: 800;
	text-transform: uppercase;
	font-size: clamp(24px, 2.3vw, 36px);
	line-height: 1.05;
	transition: transform .35s var(--ease);
}
.monta__passos span {
	grid-column: 2;
	font-size: 15px;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height .35s var(--ease), opacity .35s var(--ease);
}
.monta__passos li.is-ativo { opacity: 1; }
.monta__passos li.is-ativo b { transform: translateX(6px); }
.monta__passos li.is-ativo span { max-height: 2.4em; opacity: 1; }

.monta__progresso {
	position: absolute;
	left: var(--margem);
	right: var(--margem);
	bottom: 40px;
	height: 3px;
	background: rgba(243, 233, 210, .25);
	border-radius: 3px;
	overflow: hidden;
}
.monta__progresso b {
	display: block;
	height: 100%;
	background: var(--mostarda);
	transform-origin: left;
	transform: scaleX(0);
}

.monta__palco {
	position: absolute;
	right: max(var(--margem), 3vw);
	bottom: 120px;
	width: min(56vw, 840px, calc((100svh - 230px) * 1.23));
}
.cena { width: 100%; height: auto; overflow: visible; }
.cena .pele { fill: #C9651E; }
.cena__vapor path { stroke-dasharray: 160; }
.monta__selo {
	position: absolute;
	right: 0;
	bottom: -6%;
	font-family: var(--f-cond);
	font-style: italic;
	font-weight: 800;
	text-transform: uppercase;
	font-size: clamp(54px, 7vw, 120px);
	line-height: .9;
	color: var(--creme);
	text-shadow: .04em .05em 0 var(--brasa);
	rotate: -6deg;
}
.monta__legenda {
	position: relative;
	z-index: 2;
	margin-top: clamp(16px, 2vw, 28px);
	max-width: 30ch;
	font-size: clamp(16px, 1.3vw, 21px);
	line-height: 1.4;
}
.monta__legenda b { color: var(--mostarda); }

/* ==========================================================================
   05 — Vitrine
   ========================================================================== */
.vitrine {
	position: relative;
	background: var(--creme);
	color: var(--vermelho);
}
.vitrine__fixo {
	position: relative;
	height: 100svh;
	min-height: 620px;
	overflow: hidden;
	padding-top: calc(var(--topo-h) + 24px);
}
.vitrine__titulo {
	position: relative;
	z-index: 2;
	padding: 0 var(--margem);
	font-family: var(--f-titulo);
	font-weight: 900;
	font-stretch: 125%;
	text-transform: uppercase;
	font-size: clamp(40px, 5.6vw, 96px);
	line-height: .88;
}
.vitrine__fundo {
	position: absolute;
	left: 0;
	top: 50%;
	translate: 0 -40%;
	font-family: var(--f-titulo);
	font-weight: 900;
	font-stretch: 125%;
	text-transform: uppercase;
	font-size: 34vw;
	line-height: 1;
	white-space: nowrap;
	color: rgba(193, 32, 31, .07);
	pointer-events: none;
}
.vitrine__trilho {
	position: absolute;
	left: 0;
	bottom: clamp(40px, 8vh, 90px);
	display: flex;
	align-items: center;
	gap: clamp(28px, 4vw, 64px);
	padding: 40px var(--margem) 40px 36vw;
	width: max-content;
	outline: none;
}
.prato-cartao {
	position: relative;
	flex: none;
	width: clamp(230px, 22vw, 340px);
	aspect-ratio: 4 / 5;
	rotate: var(--r, -3deg);
	translate: 0 var(--y, 0);
}
.prato-cartao:nth-child(4n+2) { --r: 4deg; --y: 30px; }
.prato-cartao:nth-child(4n+3) { --r: -1.5deg; --y: -24px; }
.prato-cartao:nth-child(4n+4) { --r: 5deg; --y: 18px; }
.prato-cartao img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--raio);
	box-shadow: 0 24px 40px rgba(43, 21, 16, .28);
}
.prato-cartao figcaption { position: absolute; inset: 0; pointer-events: none; }
.prato-cartao__nome {
	position: absolute;
	left: -10px;
	bottom: 16px;
	right: 10px;
	font-family: var(--f-cond);
	font-style: italic;
	font-weight: 800;
	text-transform: uppercase;
	font-size: clamp(32px, 2.8vw, 46px);
	line-height: .9;
	color: var(--creme);
	text-shadow: .04em .05em 0 var(--brasa), 0 0 24px rgba(43, 21, 16, .5);
	rotate: -4deg;
}
.preco {
	position: absolute;
	top: -22px;
	right: -18px;
	width: 92px;
	height: 92px;
	border-radius: 50%;
	display: grid;
	place-content: center;
	text-align: center;
	background: var(--mostarda);
	color: var(--vermelho);
	font-family: var(--f-cond);
	font-weight: 800;
	font-size: 23px;
	line-height: 1;
	box-shadow: 0 0 0 3px var(--brasa);
	rotate: 10deg;
}
.preco small { display: block; font-size: 12px; color: var(--brasa); margin-bottom: 2px; }

.vitrine__selo {
	flex: none;
	width: clamp(220px, 20vw, 300px);
	aspect-ratio: 1;
	border-radius: 50%;
	display: grid;
	place-content: center;
	text-align: center;
	gap: 8px;
	margin-left: 2vw;
	background: var(--vermelho);
	color: var(--creme);
	text-decoration: none;
	box-shadow: 0 8px 0 var(--brasa);
	transition: transform .3s var(--ease);
}
.vitrine__selo b {
	font-family: var(--f-cond);
	font-weight: 800;
	text-transform: uppercase;
	font-size: clamp(32px, 2.8vw, 44px);
	line-height: 1;
	color: var(--mostarda);
}
.vitrine__selo span { font-size: 16px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.vitrine__selo:hover { transform: rotate(-6deg) scale(1.04); }

/* ==========================================================================
   06 — Cardápio
   ========================================================================== */
.cardapio {
	--anterior: var(--creme);
	background: var(--vermelho);
	color: var(--creme);
	padding: clamp(80px, 9vw, 140px) 0 clamp(80px, 8vw, 120px);
	overflow: hidden;
}
.cardapio__topo { padding: 0 var(--margem); margin-bottom: clamp(60px, 7vw, 110px); display: flex; flex-wrap: wrap; align-items: end; gap: 10px 40px; }
.cardapio__titulo {
	font-family: var(--f-titulo);
	font-weight: 900;
	font-stretch: 125%;
	text-transform: uppercase;
	font-size: clamp(40px, 6vw, 100px);
	line-height: .88;
}
.cardapio__conselho {
	font-size: clamp(50px, 7vw, 120px);
	color: var(--mostarda);
	rotate: -5deg;
	translate: 0 12%;
}

.cardapio__mural {
	margin: clamp(30px, 4vw, 60px) 0;
	rotate: -3deg;
	width: 110%;
	margin-left: -5%;
	font-family: var(--f-cond);
	font-style: italic;
	font-weight: 800;
	text-transform: uppercase;
	font-size: clamp(44px, 6.4vw, 110px);
	line-height: .95;
	color: rgba(243, 233, 210, .16);
	user-select: none;
}
.cardapio__mural p span { padding-right: .5em; white-space: nowrap; }
.cardapio__mural .is-dourado { color: var(--mostarda); }

.cardapio__grade {
	padding: 0 var(--margem);
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(36px, 4vw, 64px) clamp(40px, 6vw, 110px);
	max-width: 1320px;
	margin: 0 auto;
}
.cardapio__grupo h3 {
	font-family: var(--f-cond);
	font-weight: 800;
	text-transform: uppercase;
	font-size: clamp(26px, 2.2vw, 34px);
	color: var(--mostarda);
	padding-bottom: 8px;
	border-bottom: 3px solid var(--mostarda);
	margin-bottom: 8px;
}
.cardapio__grupo dl > div {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	padding: 12px 0;
	border-bottom: 1px solid rgba(243, 233, 210, .18);
}
.cardapio__grupo dt {
	display: flex;
	align-items: baseline;
	font-weight: 700;
	font-size: clamp(18px, 1.3vw, 21px);
}
.cardapio__grupo dt::after {
	content: "";
	flex: 1;
	min-width: 16px;
	margin: 0 10px;
	border-bottom: 3px dotted rgba(243, 233, 210, .35);
}
.cardapio__grupo .v {
	font-family: var(--f-cond);
	font-weight: 800;
	font-size: clamp(20px, 1.6vw, 25px);
	color: var(--mostarda);
	white-space: nowrap;
}
.cardapio__grupo .d {
	grid-column: 1 / -1;
	margin-top: 2px;
	font-size: 16px;
	max-width: 54ch;
	opacity: .82;
}
.cardapio__acoes {
	margin-top: clamp(40px, 5vw, 70px);
	padding: 0 var(--margem);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px 22px;
}
.cardapio__nota {
	margin: 22px auto 0;
	padding: 0 var(--margem);
	max-width: 70ch;
	text-align: center;
	font-size: 14px;
	opacity: .7;
}

/* ==========================================================================
   07 — Como pedir
   ========================================================================== */
.pedir {
	--anterior: var(--vermelho);
	background: var(--creme);
	color: var(--brasa);
	padding: clamp(90px, 10vw, 150px) max(var(--margem), calc(50% - 680px)) clamp(90px, 9vw, 140px);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(40px, 6vw, 100px);
	align-items: center;
	overflow-x: clip;
}
.pedir__fotos { position: relative; min-height: clamp(320px, 34vw, 520px); }
.polaroide {
	position: absolute;
	width: 62%;
	padding: 12px 12px 0;
	background: var(--papel);
	box-shadow: 0 24px 50px rgba(43, 21, 16, .22);
}
.polaroide img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.polaroide figcaption {
	font-family: var(--f-letra);
	font-size: clamp(24px, 2.2vw, 34px);
	color: var(--vermelho);
	padding: 8px 4px 12px;
	line-height: 1.1;
}
.polaroide--a { left: 0; top: 0; rotate: -6deg; }
.polaroide--b { right: 0; bottom: 0; rotate: 5deg; }

.pedir__letreiro { font-size: clamp(40px, 4.6vw, 76px); color: var(--vermelho); rotate: -4deg; margin-bottom: 14px; }
.pedir__titulo {
	font-family: var(--f-titulo);
	font-weight: 900;
	font-stretch: 125%;
	text-transform: uppercase;
	font-size: clamp(30px, 3.6vw, 58px);
	line-height: .92;
	color: var(--vermelho);
	margin-bottom: 18px;
}
.pedir__texto p:not(.letreiro) { max-width: 44ch; font-size: clamp(18px, 1.35vw, 22px); }
.pedir__texto a { color: var(--vermelho); font-weight: 700; text-underline-offset: 3px; }

.pedir__passos {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px 38px;
}
.pedir__passos li { display: flex; align-items: center; gap: 12px; }
.pedir__passos b {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--vermelho);
	color: var(--creme);
	font-family: var(--f-cond);
	font-weight: 800;
	font-size: 20px;
	flex: none;
}
.pedir__passos span {
	font-family: var(--f-cond);
	font-weight: 800;
	text-transform: uppercase;
	font-size: clamp(20px, 1.7vw, 26px);
	color: var(--vermelho);
}

/* ==========================================================================
   08 — Horários
   ========================================================================== */
.horarios {
	--anterior: var(--creme);
	background: var(--mostarda);
	color: var(--vermelho);
	padding: clamp(80px, 9vw, 140px) var(--margem) clamp(100px, 10vw, 160px);
	overflow: hidden;
	min-height: 80vh;
}
.horarios :focus-visible { outline-color: var(--vermelho); }
.horarios__titulo {
	position: relative;
	z-index: 1;
	font-family: var(--f-titulo);
	font-weight: 900;
	font-stretch: 125%;
	text-transform: uppercase;
	font-size: clamp(56px, 11vw, 190px);
	line-height: .82;
	margin-bottom: clamp(24px, 3vw, 44px);
}
.horarios__lista { position: relative; z-index: 1; display: grid; gap: clamp(8px, 1.2vw, 18px); width: fit-content; }
.horarios__lista > div { display: grid; }
.horarios__lista dt {
	font-family: var(--f-cond);
	font-weight: 800;
	text-transform: uppercase;
	font-size: clamp(18px, 1.5vw, 24px);
	color: var(--brasa);
	display: flex;
	align-items: center;
	gap: 10px;
}
.horarios__lista dd {
	font-family: var(--f-cond);
	font-weight: 800;
	font-size: clamp(46px, 6vw, 100px);
	line-height: .95;
	font-variant-numeric: tabular-nums;
}
.horarios__lista dd i { font-style: normal; font-weight: 700; padding: 0 .12em; }
.horarios__folga dd { font-size: clamp(28px, 3vw, 48px); opacity: .55; }
.horarios__lista .is-hoje dt::after {
	content: "hoje";
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--vermelho);
	color: var(--mostarda);
	font-size: .7em;
	letter-spacing: .06em;
}
.horarios__letreiro {
	position: relative;
	z-index: 1;
	margin-top: clamp(24px, 3vw, 40px);
	font-size: clamp(42px, 5vw, 86px);
	rotate: -4deg;
	width: fit-content;
}
.horarios__galo {
	position: absolute;
	right: calc(min(46vw, 680px) / -5);
	top: 50%;
	translate: 0 -46%;
	width: min(46vw, 680px);
	aspect-ratio: 1;
	border: 0;
	border-radius: 50%;
	background: var(--vermelho);
	color: var(--mostarda);
	cursor: pointer;
	display: grid;
	place-items: center;
	padding: 0;
}
.horarios__galo .galo { width: 46%; translate: -8% 2%; transform-origin: 50% 90%; }
.horarios__galo:hover .galo { animation: galo-mexe .5s var(--ease); }
.horarios__galo.canta .galo { animation: galo-canta .9s var(--ease); }
@keyframes galo-mexe { 30% { rotate: -6deg; } 60% { rotate: 4deg; } }
@keyframes galo-canta { 15% { rotate: -14deg; scale: 1.06; } 35% { rotate: 6deg; } 55% { rotate: -10deg; scale: 1.04; } 80% { rotate: 3deg; } }
.balao {
	position: absolute;
	left: 8%;
	top: 16%;
	padding: .4em .8em .5em;
	border-radius: 18px 18px 18px 4px;
	background: var(--creme);
	color: var(--vermelho);
	font-family: var(--f-cond);
	font-weight: 800;
	font-size: clamp(22px, 2.4vw, 38px);
	text-transform: uppercase;
	box-shadow: 0 5px 0 var(--brasa);
	opacity: 0;
	scale: .4;
	rotate: -8deg;
	transition: opacity .2s, scale .35s var(--ease);
	pointer-events: none;
}
.horarios__galo.canta .balao { opacity: 1; scale: 1; }

/* ==========================================================================
   09 — Onde fica
   ========================================================================== */
.onde {
	--anterior: var(--mostarda);
	background: var(--cebolinha);
	color: var(--creme);
	padding: clamp(80px, 9vw, 140px) var(--margem);
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(40px, 5vw, 90px);
	align-items: center;
	overflow: hidden;
}
.onde__fundo {
	position: absolute;
	left: -2vw;
	bottom: -4vw;
	font-family: var(--f-titulo);
	font-weight: 900;
	font-stretch: 125%;
	text-transform: uppercase;
	font-size: 22vw;
	line-height: .8;
	white-space: nowrap;
	color: transparent;
	-webkit-text-stroke: 2px rgba(243, 233, 210, .14);
	pointer-events: none;
}
.onde__info, .onde__mapa { position: relative; z-index: 1; }
.onde__titulo {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-family: var(--f-cond);
	font-weight: 800;
	text-transform: uppercase;
	font-size: clamp(38px, 4.4vw, 72px);
	line-height: .95;
}
.onde__titulo svg { width: .7em; height: .7em; flex: none; color: var(--mostarda); margin-top: .08em; }
.onde__bairro {
	margin-top: 6px;
	font-family: var(--f-cond);
	font-weight: 800;
	text-transform: uppercase;
	font-size: clamp(22px, 2vw, 30px);
	opacity: .85;
}
.onde__agora {
	margin-top: 22px;
	width: fit-content;
	padding: 12px 16px;
	border-radius: 14px;
	background: rgba(23, 56, 37, .45);
	font-family: var(--f-cond);
	font-weight: 800;
	font-size: clamp(19px, 1.6vw, 24px);
	color: var(--mostarda);
}
.onde__botoes { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; }
.onde__botoes .pilula { color: var(--cebolinha); font-size: 16px; }
.onde__extras { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 18px 26px; }
.onde__extras li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--f-cond);
	font-weight: 800;
	text-transform: uppercase;
	font-size: 15px;
	letter-spacing: .03em;
}
.onde__extras svg {
	width: 44px;
	height: 44px;
	padding: 10px;
	border-radius: 50%;
	background: var(--creme);
	color: var(--vermelho);
	flex: none;
}

.onde__mapa {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: var(--raio);
	border: 8px solid var(--creme);
	box-shadow: 0 30px 60px rgba(23, 56, 37, .5);
	rotate: 1.5deg;
	background: var(--creme);
}
.onde__mapa iframe { width: 100%; height: 100%; border: 0; border-radius: calc(var(--raio) - 8px); display: block; }
.onde__aqui {
	position: absolute;
	top: -22px;
	left: -18px;
	padding: .25em .7em .3em;
	border-radius: 12px;
	background: var(--mostarda);
	color: var(--vermelho);
	font-family: var(--f-letra);
	font-size: 34px;
	line-height: 1;
	rotate: -10deg;
	box-shadow: 0 5px 0 var(--brasa);
}

/* ==========================================================================
   10 — Final + rodapé
   ========================================================================== */
.final {
	--anterior: var(--cebolinha);
	background: var(--vermelho);
	color: var(--creme);
	padding: clamp(90px, 9vw, 140px) var(--margem) 36px;
	overflow: hidden;
}
.final__cartao {
	display: inline-grid;
	gap: 4px;
	padding: 18px 26px 20px;
	border-radius: 18px;
	background: var(--creme);
	color: var(--vermelho);
	text-decoration: none;
	box-shadow: 0 6px 0 var(--brasa);
	transition: transform .3s var(--ease);
	max-width: 100%;
}
.final__cartao small { font-size: 15px; font-weight: 600; color: var(--brasa); }
.final__cartao b {
	font-family: var(--f-titulo);
	font-weight: 900;
	font-stretch: 112%;
	text-transform: uppercase;
	font-size: clamp(20px, 2.6vw, 40px);
	line-height: 1;
	overflow-wrap: anywhere;
}
.final__cartao:hover { transform: rotate(-1.5deg) translateY(-3px); }

.final__palco { position: relative; margin-top: clamp(50px, 8vw, 120px); }
.final__chuva { position: absolute; inset: -20% 0 0; pointer-events: none; z-index: 2; }
.final__chuva svg { position: absolute; overflow: visible; filter: drop-shadow(0 10px 10px rgba(43, 21, 16, .3)); animation: flutua 5s ease-in-out infinite alternate; }
.final__chuva svg:nth-child(1) { left: 6%; top: 18%; width: clamp(60px, 8vw, 130px); aspect-ratio: 120 / 84; rotate: -18deg; }
.final__chuva svg:nth-child(2) { left: 30%; top: -4%; width: clamp(70px, 9vw, 150px); aspect-ratio: 140 / 100; rotate: 22deg; animation-delay: -1.5s; }
.final__chuva svg:nth-child(3) { left: 52%; top: 30%; width: clamp(50px, 6vw, 100px); aspect-ratio: 120 / 84; rotate: 40deg; animation-delay: -3s; }
.final__chuva svg:nth-child(4) { left: 68%; top: 0; width: clamp(70px, 9vw, 140px); aspect-ratio: 2; rotate: -14deg; animation-delay: -2s; }
.final__chuva svg:nth-child(5) { right: 4%; top: 22%; width: clamp(70px, 9vw, 140px); aspect-ratio: 140 / 100; rotate: -30deg; animation-delay: -4s; }
.final__chuva svg:nth-child(6) { left: 18%; top: 62%; width: clamp(50px, 6vw, 96px); aspect-ratio: 120 / 84; rotate: 12deg; animation-delay: -.8s; }
@keyframes flutua { to { translate: 0 -18px; } }

.final__traducao {
	position: relative;
	z-index: 3;
	text-align: right;
	padding-right: 6%;
	font-weight: 700;
	color: var(--mostarda);
	font-size: clamp(15px, 1.2vw, 19px);
}
.final__titulo {
	position: relative;
	z-index: 1;
	font-family: var(--f-titulo);
	font-weight: 900;
	font-stretch: 125%;
	text-transform: uppercase;
	font-size: clamp(54px, 14.4vw, 260px);
	line-height: .84;
	text-align: center;
	letter-spacing: -.02em;
	text-shadow: 0 .035em 0 #8C1414;
	white-space: nowrap;
}

.rodape {
	position: relative;
	z-index: 3;
	margin-top: clamp(36px, 5vw, 70px);
	padding-top: 22px;
	border-top: 2px solid rgba(243, 233, 210, .25);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 28px;
	font-family: var(--f-cond);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: 15px;
}
.rodape a { text-decoration: none; }
.rodape a:hover { color: var(--mostarda); }
.rodape__marca {
	display: block;
	width: 170px;
	aspect-ratio: 964 / 117;
	background: var(--mostarda);
	-webkit-mask: url("../img/marca.png") center / contain no-repeat;
	mask: url("../img/marca.png") center / contain no-repeat;
}
.rodape__psiu { margin-left: auto; color: var(--mostarda); }

/* ==========================================================================
   Tablet e celular
   ========================================================================== */
@media (max-width: 900px) {
	:root { --topo-h: 68px; }
	.topo__logo { width: 50px; height: 50px; }
	.topo__logo .galo { width: 26px; }
	.topo__status { font-size: 13px; }
	.topo__cta span { display: none; }
	.topo__cta { padding: .6em; }
	.topo__cta svg { width: 22px; height: 22px; }

	/* celular: hero empilhado, cada bloco no fluxo, sem sobreposição em telas baixas */
	.hero {
		--fs: clamp(60px, 20.5vw, 190px);
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 22px;
		padding: calc(var(--topo-h) + 4svh) var(--margem) calc(var(--faixas-h) / 2 + 34px);
	}
	.hero__linha--2 { translate: 16% 0; }
	.hero__prato { position: relative; left: auto; top: auto; translate: none; align-self: center; width: min(58vw, 300px, 30svh); }
	.hero__rodape { position: relative; left: auto; right: auto; bottom: auto; margin-top: auto; grid-template-columns: 1fr; justify-items: start; gap: 18px; }
	.hero__rodape .rolar { display: none; }
	.solto--4, .solto--5 { display: none; }
	.contagem { justify-self: start; }

	.verbete__foto { position: relative; right: auto; bottom: auto; margin-top: 48px; width: min(64vw, 300px); justify-self: end; }

	.monta__fixo { min-height: 560px; }
	.monta__palco { left: 50%; right: auto; translate: -50% 0; bottom: 84px; width: min(96vw, 620px, calc((100svh - 400px) * 1.23)); }
	.monta__passos { position: relative; left: auto; bottom: auto; margin-top: 22px; gap: 0; }
	.monta__passos li {
		grid-area: 1 / 1;
		grid-template-columns: 1fr;
		opacity: 0;
		transform: translateY(10px);
		transition: opacity .3s var(--ease), transform .3s var(--ease);
	}
	.monta__passos li::before { content: counter(passo, decimal-leading-zero) " de 05"; font-size: 14px; letter-spacing: .04em; }
	.monta__passos b { font-size: clamp(30px, 9vw, 40px); }
	.monta__passos span { grid-column: 1; max-height: none; opacity: 1; font-size: 17px; }
	.monta__passos li.is-ativo { opacity: 1; transform: none; }
	.monta__passos li.is-ativo b { transform: none; }
	.monta__legenda { margin-top: 14px; font-size: 15px; }
	.monta__selo { font-size: clamp(44px, 12vw, 80px); }

	.vitrine__fixo { height: auto; min-height: 0; padding-bottom: 60px; }
	.vitrine__fundo { display: none; }
	.vitrine__trilho {
		position: relative;
		bottom: auto;
		width: auto;
		padding: 50px var(--margem) 40px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.vitrine__trilho::-webkit-scrollbar { display: none; }
	.prato-cartao, .vitrine__selo { scroll-snap-align: center; }
	.prato-cartao { width: min(70vw, 300px); }

	.cardapio__grade { grid-template-columns: 1fr; }

	.pedir { grid-template-columns: 1fr; }
	.pedir__fotos { min-height: 0; aspect-ratio: 1.1; }
	.pedir__passos { justify-content: flex-start; flex-direction: column; }

	.horarios { padding-bottom: calc(min(70vw, 360px) * .8 + 30px); min-height: 0; }
	.horarios__titulo { font-size: min(12.4vw, 110px); }
	.horarios__galo { top: auto; bottom: calc(min(70vw, 360px) / -5); right: -10vw; translate: 0 0; width: min(70vw, 360px); }

	.onde { grid-template-columns: 1fr; }
	.onde__mapa { aspect-ratio: 1; }

	.rodape__psiu { margin-left: 0; }
}

@media (max-width: 900px) and (max-height: 760px) {
	.monta__legenda { display: none; }
}

@media (max-width: 520px) {
	.final__palco { padding-top: 70px; }
	.final__chuva { inset: 0 0 auto; height: 70px; }
	.final__chuva svg:nth-child(1) { left: 0; top: 4px; width: 62px; }
	.final__chuva svg:nth-child(2) { left: 24%; top: 0; width: 70px; }
	.final__chuva svg:nth-child(4) { left: 52%; top: 14px; width: 70px; }
	.final__chuva svg:nth-child(5) { right: 0; top: 2px; width: 66px; }
	.final__chuva svg:nth-child(3), .final__chuva svg:nth-child(6) { display: none; }
	.final__traducao { text-align: left; padding: 0; margin-bottom: 8px; }
	.topo__status { font-size: 12px; padding: .5em .8em; max-width: calc(100vw - 2 * var(--margem) - 120px); overflow: hidden; text-overflow: ellipsis; }
	.solto--3, .solto--6 { display: none; }
	.faixa--mostarda { top: 14%; }
	.verbete__cartao { outline-offset: 8px; }
	.preco { width: 80px; height: 80px; font-size: 20px; right: -8px; }
	.botao { width: 100%; justify-content: center; }
}

/* ==========================================================================
   Movimento reduzido
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
	.js .intro { display: none; }
	.marquee { animation: none; }
}