:root {
--gold:#d98d00;
--cream:#fff4d7;
--red:#c82b16;
--deep:#180b12;
--blue:#1758a6;
--ink:#22140d
}
* {
	box-sizing: border-box
}
body {
	margin: 0;
	background: var(--cream);
	color: var(--ink);
	font-family: Fredoka, sans-serif
}
.topbar {
	padding: 0;
	background: var(--deep);
	color: #fff4d7;
font-size:.9rem
}
.topbar-inner { display: flex; width: calc(100% - 12vw); max-width: 1100px; margin: auto; padding: 10px 0; justify-content: space-between; }
.topbar a { color: #fff4d7; font: 800 .76rem Montserrat, sans-serif; letter-spacing: .2px; text-decoration: none; text-transform: uppercase; }
.topbar a:hover { color: #f3d47d; }
header {
	background-color: var(--gold);
	background-image: linear-gradient(rgba(217, 141, 0, .76), rgba(217, 141, 0, .76)), url('assets/header-game-icons.png');
	background-size: auto, 360px 360px;
	background-position: center;
	background-blend-mode: normal, soft-light;
	padding: 24px 6vw 62px;
	position: relative;
	overflow: hidden
}
header:after {
	content: "";
	position: absolute;
	width: 300px;
	height: 300px;
	border: 4px solid rgba(126,43,5,.25);
	border-radius: 50%;
	right: -90px;
	bottom: -190px
}
nav, .heading, main {
	max-width: 1100px;
	margin: auto;
	position: relative;
	z-index: 1
}
nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px
}
.brand {
	color: #fff;
	text-decoration: none;
	font: 900 1.3rem Montserrat, sans-serif;
	letter-spacing: -1.5px;
	text-transform: uppercase
}
.brand i {
	color: var(--deep);
	font-style: normal
}
.back {
	color: var(--deep);
font:800 .78rem Montserrat, sans-serif;
	text-decoration: none;
	text-transform: uppercase
}
.heading {
	padding-top: 45px
}
.tag {
	display: inline-block;
	background: var(--red);
	padding: 8px 14px;
	color: #fff;
	box-shadow: 4px 4px 0 var(--deep);
font:900 .75rem Montserrat, sans-serif;
	letter-spacing: .8px;
	text-transform: uppercase;
	transform: rotate(-2deg)
}
h1 {
	margin: 18px 0 0;
	font: 900 clamp(2.8rem, 7vw, 5.9rem)/.86 Montserrat, sans-serif;
	letter-spacing: -5px;
	text-transform: uppercase;
	color: var(--red);
	text-shadow: 5px 5px 0 var(--deep)
}
main {
	width: calc(100% - 12vw);
	padding: 55px 0 80px
}

.intro {
	margin: 0 0 26px;
	font-size: 1.15rem
}
.search-box {
	background: #fff;
	border: 3px solid var(--deep);
	box-shadow: 8px 8px 0 var(--deep);
	padding: clamp(22px, 5vw, 46px)
}
.filters {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px
}
.field {
	display: flex;
	flex-direction: column;
	gap: 8px
}
label {
font:900 .82rem Montserrat, sans-serif;
	letter-spacing: .4px;
	text-transform: uppercase
}
select, input {
	min-height: 52px;
	width: 100%;
	border: 2px solid var(--deep);
	border-radius: 3px;
	background: #fffdf7;
	padding: 0 14px;
	color: var(--deep);
	font: 600 1rem Fredoka, sans-serif;
	outline: none
}
select:focus, input:focus {
	border-color: var(--blue);
	box-shadow: 3px 3px 0 var(--blue)
}
.full {
	grid-column: 1/-1
}
.hint {
	color: #765528;
font-size:.92rem;
	margin: 3px 0 0
}
.actions {
	display: flex;
	gap: 14px;
	justify-content: flex-end;
	margin-top: 31px
}
button, .reset {
	border: 0;
	padding: 14px 21px;
	cursor: pointer;
	text-decoration: none;
font:900 .8rem Montserrat, sans-serif;
	text-transform: uppercase
}
button {
	color: #fff;
	background: var(--red);
	box-shadow: 4px 4px 0 var(--deep)
}
.reset {
	color: var(--deep);
	background: #f4d889
}
.site-nav { z-index: 5; }
.site-nav .links { display: flex; align-items: center; gap: 26px; }
.site-nav .links a { color: var(--deep); font: 800 .82rem Montserrat, sans-serif; text-decoration: none; text-transform: uppercase; }
.site-nav .links a:hover { color: #fff; }
.site-nav .links a.is-active { color: #fff; }
.site-nav .menu { display: none; padding: 0; border: 0; background: transparent; color: var(--deep); font-size: 1.7rem; cursor: pointer; }
.animated-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 50px;
	box-shadow: 4px 4px 0 var(--deep);
	transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.animated-action span {
	font-size: 1.2em;
	line-height: 1;
	transition: transform .18s ease;
}
.animated-action:hover {
	transform: translate(-3px, -3px);
	box-shadow: 7px 7px 0 var(--deep);
}
.animated-action:hover span {
	transform: translateX(4px);
}
.animated-action:active {
	transform: translate(1px, 1px);
	box-shadow: 2px 2px 0 var(--deep);
}
.animated-action:focus-visible {
	outline: 3px solid var(--blue);
	outline-offset: 4px;
}
.examples {
	margin-top: 54px
}
h2 {
	font: 900 1.7rem Montserrat, sans-serif;
	letter-spacing: -1.5px;
	text-transform: uppercase;
	margin: 0 0 16px
}
.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px
}
.chip {
	border: 2px solid var(--deep);
	padding: 7px 12px;
	background: #73c4c0;
	font-weight: 700
}
@media(max-width:600px) {
.topbar span:last-child {
	display: none
}
.filters {
	grid-template-columns: 1fr
}
.full {
	grid-column: auto
}
.actions {
	justify-content: stretch
}
.actions>* {
	flex: 1;
	text-align: center
}
}
:root {
  --brincoteca-deep: #180b12;
  --brincoteca-cream: #fff4d7;
}

.site-footer {
	background-color: var(--brincoteca-deep) !important;
	color: var(--brincoteca-cream) !important;
	padding: 0 !important;
	text-align: left !important;
	font-family: Fredoka, sans-serif !important;
	position: relative;
	overflow: hidden;
}

.site-footer-inner {
	position: relative;
	z-index: 1;
	width: calc(100% - 12vw);
	max-width: 1100px;
	margin: auto;
	padding: 26px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
}

.site-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url('assets/footer-archive-icons.png') center/330px repeat;
	opacity: .08;
	pointer-events: none;
}

.site-footer p {
	position: relative;
	margin: 0 !important;
}

.site-footer p + p {
  margin-top: 0 !important;
  opacity: .82 !important;
  font-size: .94rem !important;
  text-align: right;
}

.site-footer strong {
  font-family: Montserrat, sans-serif;
  letter-spacing: .4px;
}
.manifesto {
	display: grid;
grid-template-columns:1.1fr .9fr;
	gap: 38px;
	align-items: start
}
.statement {
	font: 700 clamp(1.45rem, 3vw, 2.35rem)/1.23 Fredoka, sans-serif;
	margin: 0
}
.card {
	border: 3px solid var(--deep);
	padding: 30px;
	background: #fff;
	box-shadow: 7px 7px 0 var(--deep)
}
.card h2 {
	font: 900 1.35rem Montserrat, sans-serif;
	text-transform: uppercase;
	letter-spacing: -1px;
	margin: 0 0 13px
}
.card p {
	font-size: 1.08rem;
	line-height: 1.55;
	margin: 0 0 18px
}
.card p:last-child {
	margin: 0
}
.note {
	margin-top: 48px;
	background: var(--blue);
	color: #fff;
	padding: 32px;
	border: 3px solid var(--deep);
	box-shadow: 7px 7px 0 var(--deep)
}
.note h2 {
	font: 900 1.65rem Montserrat, sans-serif;
	text-transform: uppercase;
	letter-spacing: -1.5px;
	margin: 0 0 10px
}
.note p {
	font-size: 1.1rem;
	line-height: 1.5;
	margin: 0
}
@media(max-width:720px) {
.manifesto {
	grid-template-columns: 1fr
}
h1 {
	letter-spacing: -3px
}
}
.intro-buy {
	font: 700 clamp(1.35rem, 3vw, 2.15rem)/1.24 Fredoka, sans-serif;
	max-width: 760px;
	margin: 0 0 38px
}
.grid-buy {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px
}
.card-buy {
	background: #fff;
	border: 3px solid var(--deep);
	box-shadow: 6px 6px 0 var(--deep);
	padding: 25px
}
.card-buy h2 {
	font: 900 1.2rem Montserrat, sans-serif;
	text-transform: uppercase;
	letter-spacing: -1px;
	margin: 0 0 9px
}
.card-buy p {
	line-height: 1.48;
	margin: 0
}
.call-buy {
	margin-top: 46px;
	background: var(--blue);
	border: 3px solid var(--deep);
	box-shadow: 7px 7px 0 var(--deep);
	padding: 34px;
	color: #fff
}
.call-buy h2 {
	font: 900 1.7rem Montserrat, sans-serif;
	text-transform: uppercase;
	letter-spacing: -1.5px;
	margin: 0 0 10px
}
.call-buy p {
	font-size: 1.1rem;
	line-height: 1.5;
	margin: 0 0 20px
}
.button-buy {
	display: inline-block;
	background: #f3d47d;
	color: var(--deep);
	padding: 14px 18px;
	text-decoration: none;
font:900 .78rem Montserrat, sans-serif;
	text-transform: uppercase
}
@media(max-width:720px) {
.grid-buy {
	grid-template-columns: 1fr
}
h1 {
	letter-spacing: -3px
}
}

/* Pesquisa V2 — usa a mesma identidade visual das páginas públicas. */
.models-header { min-height: 0; }
.models-main { max-width: 1100px; padding: 0 6vw 80px; }
.models-intro { padding: clamp(48px, 8vw, 82px) 0 clamp(34px, 5vw, 64px); border-bottom: 2px solid var(--deep); }
.models-kicker { margin: 0 0 12px; color: var(--red); font: 900 .73rem Montserrat, sans-serif; letter-spacing: 1.2px; text-transform: uppercase; }
.models-intro h2 { margin: 0; color: var(--ink); font: 900 clamp(2.1rem, 5vw, 4.2rem)/.9 Montserrat, sans-serif; letter-spacing: -3px; text-transform: uppercase; }
.models-intro p:last-child { max-width: 570px; margin: 28px 0 0; font-size: clamp(1rem, 2vw, 1.2rem); line-height: 1.55; }
.models-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(28px, 5vw, 50px); padding-top: 36px; }
.models-layout.filters-collapsed { grid-template-columns: 1fr; }
.models-layout.filters-collapsed .models-filters { display: none; }
.models-filters { align-self: start; position: sticky; top: 18px; padding: 22px; border: 3px solid var(--deep); background: #fff; box-shadow: 6px 6px 0 var(--deep); }
.models-filters form { display: grid; gap: 9px; }
.filter-heading { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.filter-heading h2 { margin: 0; font: 900 1.05rem Montserrat, sans-serif; letter-spacing: -1px; text-transform: uppercase; }
.filter-heading a { color: var(--red); font: 900 .66rem Montserrat, sans-serif; text-decoration: none; text-transform: uppercase; }
.filter-heading a:hover { color: var(--deep); }
.models-filters label { margin-top: 11px; font: 900 .67rem Montserrat, sans-serif; letter-spacing: .6px; text-transform: uppercase; }
.models-filters input, .models-filters select { width: 100%; min-height: 40px; border: 2px solid var(--deep); border-radius: 0; background: var(--cream); color: var(--ink); font: 600 .8rem Montserrat, sans-serif; }
.models-filters input { padding: 10px; }
.models-filters select { padding: 8px; }
.models-filters button { margin-top: 20px; padding: 13px; border: 0; background: var(--red); color: #fff; box-shadow: 3px 3px 0 var(--deep); font: 900 .7rem Montserrat, sans-serif; letter-spacing: .7px; cursor: pointer; text-transform: uppercase; transition: transform .18s ease, box-shadow .18s ease; }
.models-filters button:hover { box-shadow: 5px 5px 0 var(--deep); transform: translate(-2px, -2px); }
.models-toolbar { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 0 0 18px; border-bottom: 2px solid var(--deep); }
.models-toolbar > p { margin: 0; font: 800 .74rem Montserrat, sans-serif; text-transform: uppercase; }
.models-toolbar > p strong { color: var(--red); font-size: 1.05rem; }
.models-sort { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 14px; }
.models-sort span, .models-sort a { color: var(--ink); font: 800 .65rem Montserrat, sans-serif; letter-spacing: .35px; text-decoration: none; text-transform: uppercase; }
.models-sort a:hover, .models-sort a.is-current { color: var(--red); }
.models-sort a.is-current { border-bottom: 2px solid currentColor; }
.models-filter-toggle { padding: 9px 12px; border: 2px solid var(--deep); background: #fff; color: var(--deep); font: 900 .65rem Montserrat, sans-serif; cursor: pointer; letter-spacing: .4px; text-transform: uppercase; transition: background .18s ease, color .18s ease; }
.models-filter-toggle:hover { background: var(--red); color: #fff; }
.models-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(195px, 1fr)); gap: 30px 18px; padding-top: 30px; }
.model-card { display: block; color: var(--ink); text-decoration: none; }
.model-fade-enabled .model-card { opacity: 0; transform: translateY(18px); transition: opacity .45s ease, transform .45s ease; }
.model-fade-enabled .model-card.is-visible { opacity: 1; transform: translateY(0); }
.model-image { position: relative; display: flex; aspect-ratio: 4 / 3; min-height: 0; align-items: center; justify-content: center; overflow: hidden; border: 3px solid var(--deep); background: #e5c768; box-shadow: 5px 5px 0 var(--deep); }
.model-image img { width: 100%; height: 100%; min-height: 0; object-fit: cover; transition: transform .3s ease; }
.model-card:hover .model-image img { transform: scale(1.04); }
.model-image > span { color: rgba(24, 11, 18, .28); font: 900 4rem/.8 Montserrat, sans-serif; }
.model-image > small { position: absolute; right: 10px; bottom: 9px; color: var(--deep); font: 900 .55rem Montserrat, sans-serif; letter-spacing: .5px; text-transform: uppercase; }
.model-meta { padding-top: 15px; }
.model-meta > span { color: var(--red); font: 900 .72rem Montserrat, sans-serif; }
.model-meta h2 { margin: 5px 0 4px; font: 900 1rem/1.1 Montserrat, sans-serif; letter-spacing: -.5px; text-transform: uppercase; }
.model-meta p { margin: 0; font-size: .84rem; }
.model-meta small { display: block; margin-top: 9px; color: #765528; font: 800 .57rem Montserrat, sans-serif; letter-spacing: .4px; text-transform: uppercase; }
.models-empty { padding: 45px 25px; border: 3px solid var(--deep); background: #fff; box-shadow: 6px 6px 0 var(--deep); }
.models-empty p { font-size: 1.1rem; }
.models-empty a { color: var(--red); font: 900 .75rem Montserrat, sans-serif; text-decoration: none; text-transform: uppercase; }
@media(max-width:720px) { .models-layout { grid-template-columns: 1fr; gap: 34px; } .models-filters { position: static; } .models-filters form { grid-template-columns: 1fr 1fr; column-gap: 14px; } .models-filters .filter-heading, .models-filters label[for="v2-search"], .models-filters input, .models-filters button { grid-column: 1 / -1; } .models-filters label { margin-top: 8px; } .models-toolbar { align-items: flex-start; flex-direction: column; } .models-sort { justify-content: flex-start; } .models-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; } }
@media(max-width:400px) { .models-filters form { grid-template-columns: 1fr; } .models-filters label, .models-filters select { grid-column: 1 / -1; } .models-grid { grid-template-columns: 1fr; } }
@media(prefers-reduced-motion:reduce) { .model-fade-enabled .model-card { opacity: 1; transform: none; transition: none; } }
/*Item*/
.museum-card {
	display: grid;
grid-template-columns:minmax(0, 1fr) minmax(360px, .95fr);
	gap: 42px;
	align-items: start
}
.gallery {
	position: sticky;
	top: 22px
}
.main-image {
	height: 490px;
	border: 4px solid var(--deep);
	background: #e5c768;
	box-shadow: 8px 8px 0 var(--deep);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden
}
.main-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #f4deb0
}
.no-image {
	font: 900 1.1rem Montserrat, sans-serif;
	text-transform: uppercase;
	text-align: center;
	padding: 30px
}
.thumbs {
	display: flex;
	gap: 11px;
	flex-wrap: wrap;
	margin-top: 20px
}
.thumb {
	border: 3px solid var(--deep);
	width: 86px;
	height: 72px;
	padding: 0;
	cursor: pointer;
	background: #fff
}
.thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover
}
.thumb.active {
	outline: 4px solid var(--red);
	outline-offset: 2px
}
.details {
	background: #fff;
	border: 3px solid var(--deep);
	box-shadow: 8px 8px 0 var(--deep);
	padding: 30px
}
.details h2 {
	font: 900 1.8rem Montserrat, sans-serif;
	letter-spacing: -1.5px;
	text-transform: uppercase;
	margin: 0 0 25px
}
.lead {
	font-size: 1.18rem;
	line-height: 1.55;
	margin: 0 0 27px
}
.facts {
	margin: 0;
	border-top: 2px solid #eadfc6
}
.fact {
	display: grid;
	grid-template-columns: 42% 58%;
	border-bottom: 1px solid #eadfc6;
	padding: 12px 0;
	gap: 14px
}
.fact dt {
font:900 .72rem Montserrat, sans-serif;
	text-transform: uppercase;
	color: #765528
}
.fact dd {
	margin: 0;
	font-size: 1.04rem
}
.long {
	margin-top: 26px;
	padding-top: 22px
}
.long h3 {
font:900 .8rem Montserrat, sans-serif;
	text-transform: uppercase;
	margin: 0 0 8px
}
.long p {
	margin: 0;
	line-height: 1.55
}
@media(max-width:850px) {
.museum-card {
	grid-template-columns: 1fr
}
.gallery {
	position: static
}
.main-image {
	height: min(70vh, 470px)
}
}
@media(max-width:500px) {
main {
	padding: 36px 5vw 65px
}
.details {
	padding: 22px
}
.main-image {
	height: 330px
}
.fact {
	grid-template-columns: 1fr;
	gap: 4px
}
.title {
	letter-spacing: -2.5px
}
}

/* Notícias */
.news-intro { max-width: 720px; margin-bottom: 38px; }
.news-intro h2 { margin-bottom: 14px; }
.news-intro > p:last-child { margin: 0; font-size: 1.12rem; line-height: 1.5; }
.news-list { display: grid; gap: 24px; }
.news-card { display: grid; grid-template-columns: minmax(180px, 30%) 1fr; overflow: hidden; background: #fff; border: 3px solid var(--deep); box-shadow: 7px 7px 0 var(--deep); }
.news-gallery { display: flex; min-height: 230px; flex-direction: column; background: #e9d6a8; }
.news-image { width: 100%; height: 230px; min-height: 0; flex: 1 0 230px; object-fit: cover; background: #e9d6a8; }
.news-placeholder { position: relative; display: flex; min-height: 230px; align-items: center; justify-content: center; overflow: hidden; border: 3px solid var(--deep); background: #e5c768; box-shadow: 5px 5px 0 var(--deep); }
.news-placeholder span { color: rgba(24, 11, 18, .28); font: 900 4rem/.8 Montserrat, sans-serif; }
.news-placeholder small { position: absolute; right: 10px; bottom: 9px; color: var(--deep); font: 900 .55rem Montserrat, sans-serif; letter-spacing: .5px; text-transform: uppercase; }
.news-thumbs { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; gap: 7px; padding: 9px; border-top: 2px solid var(--deep); background: #f3d47d; }
.news-thumbs::before { flex-basis: 100%; color: #765528; content: "Mais imagens"; font: 900 .62rem/1 Montserrat, sans-serif; letter-spacing: .5px; text-transform: uppercase; }
.news-thumb { width: 68px; height: 52px; padding: 0; border: 2px solid var(--deep); background: #fff; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.news-thumb img { width: 100%; height: 100%; object-fit: cover; }
.news-thumb.active { outline: 3px solid var(--red); outline-offset: 1px; }
.news-thumb:hover { box-shadow: 3px 3px 0 var(--deep); transform: translate(-1px, -1px); }
.news-content { padding: clamp(22px, 4vw, 34px); }
.news-content time { display: block; margin-bottom: 9px; color: #765528; font: 900 .74rem Montserrat, sans-serif; letter-spacing: .6px; text-transform: uppercase; }
.news-content h3 { margin: 0 0 13px; font: 900 clamp(1.35rem, 3vw, 2rem)/1 Montserrat, sans-serif; letter-spacing: -1px; text-transform: uppercase; }
.news-content p { margin: 0; font-size: 1.05rem; line-height: 1.58; }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 42px; font: 800 .78rem Montserrat, sans-serif; text-transform: uppercase; }
.pagination a { padding: 12px 15px; color: var(--deep); background: #f3d47d; text-decoration: none; box-shadow: 3px 3px 0 var(--deep); transition: transform .18s ease, box-shadow .18s ease; }
.pagination a:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--deep); }
@media(max-width:720px) { .news-card { grid-template-columns: 1fr; } .news-image { height: 250px; flex-basis: 250px; } .news-gallery,.news-placeholder { min-height: 210px; max-height: none; } .pagination { align-items: stretch; flex-direction: column; text-align: center; } }
@media(max-width:720px) { .site-nav { position: relative; } .site-nav .menu { display: block; } .site-nav .links { display: none; position: absolute; top: calc(100% + 12px); right: 0; width: min(250px, 82vw); flex-direction: column; align-items: stretch; gap: 0; padding: 8px; border: 2px solid var(--deep); background: #f3d47d; box-shadow: 5px 5px 0 var(--deep); } .site-nav.nav-open .links { display: flex; } .site-nav .links a { padding: 12px 14px; } .site-nav .links a:hover { color: #fff; background: var(--red); } }
/* Resultados de pesquisa */
.results { margin-top: 48px; }
.results h2 { margin-bottom: 18px; }
.table-wrap { overflow-x: auto; background: #fff; border: 3px solid var(--deep); box-shadow: 6px 6px 0 var(--deep); }
.results table { width: 100%; min-width: 760px; border-collapse: collapse; }
.results th,
.results td { padding: 13px 14px; text-align: left; border-bottom: 1px solid #eadfc6; }
.results th { background: #f3d47d; font: 900 .72rem Montserrat, sans-serif; text-transform: uppercase; }
.results tbody tr { cursor: pointer; }
.results tbody tr:hover { background: var(--cream); }
.results td a { color: var(--red); font-weight: 700; }
.empty { padding: 22px; background: #fff; border: 2px dashed var(--deep); }

/* Ficha do objeto */
.zoomable { cursor: zoom-in; }
.object-name { margin: 0 0 22px; color: var(--red); font: 900 1.3rem Montserrat, sans-serif; text-transform: uppercase; }
.image-modal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 30px; background: rgba(24, 11, 18, .92); }
.image-modal.open { display: flex; }
.image-modal img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 0 0 3px var(--cream); }
.image-modal button { position: fixed; top: 18px; right: 22px; width: 46px; height: 46px; border: 2px solid var(--cream); border-radius: 50%; background: var(--red); color: #fff; font: 900 2rem/1 Fredoka, sans-serif; cursor: pointer; }

/* Página inicial */
html { scroll-behavior: smooth; }
@scope (.page-home) {
:root {
--gold:#d98d00;
--cream:#fff4d7;
--red:#c82b16;
--deep:#180b12;
--blue:#1758a6;
--ink:#22140d;
}
* {
	box-sizing: border-box;
}
html {
	scroll-behavior: smooth;
}
body {
	margin: 0;
	color: var(--ink);
	background: var(--cream);
	font-family: Fredoka, sans-serif;
}
.topbar {
	background: var(--deep);
	color: #fff6e0;
	padding: 10px 6vw;
	display: flex;
	justify-content: space-between;
font-size:.9rem;
}
.topbar span:last-child {
	opacity: .78;
}
header {
	background-color: var(--gold);
	min-height: 630px;
	position: relative;
	overflow: hidden;
	padding: 24px 6vw 70px;
}
header:before, header:after {
	content: "";
	position: absolute;
	border: 4px solid rgba(126,43,5,.25);
	border-radius: 50%;
	width: 310px;
	height: 310px;
}
header:before {
	right: -100px;
	top: 105px;
}
header:after {
	left: -180px;
	bottom: -150px;
	width: 390px;
	height: 390px;
}
nav, .hero {
	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin: auto;
}
nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}
.brand {
	font-family: Montserrat, sans-serif;
	font-weight: 900;
	letter-spacing: -1.5px;
	color: white;
	font-size: 1.3rem;
	text-transform: uppercase;
	text-decoration: none;
}
.brand i {
	color: var(--deep);
	font-style: normal;
}
.links {
	display: flex;
	gap: 26px;
	align-items: center;
}
.links a {
	color: var(--deep);
	font-family: Montserrat, sans-serif;
font-size:.82rem;
	font-weight: 800;
	text-decoration: none;
	text-transform: uppercase;
}
.links a:hover {
	color: #fff;
}
.menu {
	display: none;
	background: none;
	border: 0;
	font-size: 1.7rem;
}
.hero {
	display: grid;
grid-template-columns:1.25fr .75fr;
	align-items: center;
	gap: 35px;
	padding-top: 92px;
}
.ribbon {
	display: inline-block;
	background: var(--red);
	color: #fff;
	padding: 10px 20px;
	transform: rotate(-2deg);
	box-shadow: 6px 6px 0 var(--deep);
	font-family: Montserrat, sans-serif;
	font-size: 1.05rem;
	font-weight: 900;
	text-transform: uppercase;
}
h1 {
	color: var(--red);
	margin: 22px 0 4px;
	font-family: Montserrat, sans-serif;
	font-weight: 900;
	font-size: clamp(3.5rem, 8vw, 7.6rem);
	line-height: .78;
	letter-spacing: -7px;
	text-transform: uppercase;
	text-shadow: 7px 7px 0 var(--deep);
}
.subtitle {
	font-family: Montserrat, sans-serif;
	font-size: clamp(1.1rem, 2.5vw, 2rem);
	font-weight: 900;
	text-transform: uppercase;
	margin: 26px 0;
	line-height: 1;
}
.intro {
	max-width: 520px;
	font-size: 1.18rem;
	line-height: 1.45;
}
.button {
	background: var(--deep);
	color: #fff;
	display: inline-block;
	padding: 14px 23px;
	border-radius: 5px;
	text-decoration: none;
	font-family: Montserrat, sans-serif;
	font-weight: 900;
	text-transform: uppercase;
font-size:.8rem;
	box-shadow: 4px 4px 0 rgba(255,255,255,.55);
	transition: .2s;
}
.button:hover {
	transform: translate(-2px, -2px);
	box-shadow: 7px 7px 0 rgba(255,255,255,.55);
}
.hero-art {
	position: relative;
	height: 330px;
}
.console {
	position: absolute;
	width: 285px;
	height: 190px;
	background: #e94120;
	border: 8px solid var(--deep);
	border-radius: 18px 18px 44px 44px;
	transform: rotate(8deg);
	right: 0;
	top: 30px;
	box-shadow: 12px 12px 0 rgba(24,11,18,.33);
}
.screen {
	width: 115px;
	height: 82px;
	background: #8edac5;
	border: 7px solid var(--deep);
	border-radius: 8px;
	position: absolute;
	top: 30px;
	left: 78px;
}
.screen:after {
	content: "★";
	color: var(--blue);
	font-size: 38px;
	position: absolute;
	left: 31px;
	top: 12px;
}
.dpad {
	position: absolute;
	left: 24px;
	top: 77px;
	width: 48px;
	height: 18px;
	background: var(--deep);
	border-radius: 3px;
}
.dpad:after {
	content: "";
	position: absolute;
	width: 18px;
	height: 48px;
	left: 15px;
	top: -15px;
	background: var(--deep);
	border-radius: 3px;
}
.buttons {
	position: absolute;
	right: 24px;
	top: 89px;
	display: flex;
	gap: 11px;
}
.buttons b {
	width: 23px;
	height: 23px;
	background: var(--deep);
	display: block;
	border-radius: 50%;
}
.ball {
	position: absolute;
	left: 5px;
	bottom: 3px;
	width: 125px;
	height: 125px;
	border: 7px solid var(--deep);
	border-radius: 50%;
	background: repeating-linear-gradient(45deg, #f8d533 0 15px, #2459a8 15px 30px, #f8d533 30px 45px);
	transform: rotate(-18deg);
}
.pixel {
	position: absolute;
	width: 34px;
	height: 34px;
	background: #fff4d7;
	box-shadow: 34px 0 #1758a6, 0 34px #1758a6;
	right: 280px;
	top: 22px;
	transform: rotate(20deg);
}
main {
	max-width: 1200px;
	margin: auto;
	padding: 55px 6vw 80px;
}
.section-label {
	color: var(--red);
	font-family: Montserrat, sans-serif;
	font-weight: 900;
	letter-spacing: 1.4px;
	text-transform: uppercase;
font-size:.78rem;
}
h2 {
	font: 900 clamp(2.1rem, 4vw, 3.6rem)/.95 Montserrat, sans-serif;
	margin: 10px 0 32px;
	letter-spacing: -2px;
	text-transform: uppercase;
}
.collection {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}
.collection-banner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 360px;
	overflow: hidden;
	background: var(--deep);
	border: 3px solid var(--deep);
	box-shadow: 8px 8px 0 var(--red);
	color: #fff4d7;
	text-decoration: none;
}
.collection-copy {
	padding: clamp(28px, 5vw, 58px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: var(--blue);
}
.collection-copy h3 {
	font: 900 clamp(2rem, 4vw, 3.7rem)/.92 Montserrat, sans-serif;
	letter-spacing: -2px;
	text-transform: uppercase;
	margin: 10px 0 15px;
}
.collection-copy p {
	font-size: 1.16rem;
	line-height: 1.45;
	max-width: 400px;
	margin: 0 0 25px;
}
.collection-copy span {
font:900 .77rem Montserrat, sans-serif;
	color: #f8d533;
	letter-spacing: 1px;
	text-transform: uppercase;
}
.collection-image {
	min-height: 300px;
	background: url('assets/colecao-nostalgica.png') center right/cover no-repeat;
	transition: transform .35s ease;
}
.collection-banner:hover .collection-image {
	transform: scale(1.04);
}
.card {
	min-height: 245px;
	border: 3px solid var(--deep);
	padding: 23px;
	position: relative;
	overflow: hidden;
	transition: transform .2s;
}
.card-link {
	color: inherit;
	text-decoration: none;
	display: block;
}
.card:hover {
	transform: translateY(-7px);
}
.card:nth-child(1) {
	background: #ffca3b;
}
.card:nth-child(2) {
	background: #73c4c0;
}
.card:nth-child(3) {
	background: #ef7865;
}
.card-number {
	font: 900 3.6rem/.7 Montserrat, sans-serif;
	opacity: .18;
	position: absolute;
	right: 16px;
	top: 18px;
}
.card .emoji {
	font-size: 4.7rem;
	display: block;
	margin: 24px 0 10px;
	filter: drop-shadow(4px 4px 0 rgba(24,11,18,.18));
}
.card h3 {
	font: 900 1.3rem Montserrat, sans-serif;
	text-transform: uppercase;
	margin: 0;
}
.card p {
	margin: 6px 0 0;
	font-size: 1.03rem;
}
.cta {
	margin-top: 70px;
	padding: 36px;
	background: var(--blue);
	color: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 25px;
	box-shadow: 8px 8px 0 var(--deep);
}
.cta h2 {
	margin: 8px 0 0;
	font-size: 2.35rem;
}
.cta .section-label {
	color: #f8d533;
}
.cta .button {
	background: #f8d533;
	color: var(--deep);
	white-space: nowrap;
}
 @media (max-width:720px) {
header {
	min-height: auto;
}
.topbar span:last-child, .links {
	display: none;
}
.menu {
	display: block;
}
.hero {
	grid-template-columns: 1fr;
	padding-top: 65px;
}
.hero-art {
	height: 260px;
}
.collection {
	grid-template-columns: 1fr;
}
.collection-banner {
	grid-template-columns: 1fr;
}
.collection-copy {
	min-height: 280px;
}
.collection-image {
	min-height: 270px;
	background-position: 70% center;
}
.cta {
	align-items: flex-start;
	flex-direction: column;
}
h1 {
	letter-spacing: -4px;
	text-shadow: 4px 4px 0 var(--deep);
}
}
}

@media (max-width: 600px) {
  .image-modal { padding: 15px; }
  .image-modal button { top: 12px; right: 12px; }
}
body.page-home .site-footer-inner { max-width: 1200px; }
@media(max-width:600px) { .site-footer-inner { align-items: flex-start; flex-direction: column; gap: 7px; width: calc(100% - 10vw); } .site-footer p + p { text-align: left; } }

/* Grelha comum: topbar, cabeçalho e conteúdo começam na mesma linha. */
body.page-home .topbar { padding: 0; }
body.page-home .topbar-inner { max-width: 1200px; }
body.page-home main { width: calc(100% - 12vw); max-width: 1200px; padding: 55px 0 80px; }
.models-main { width: calc(100% - 12vw); padding-right: 0; padding-left: 0; }
@media(max-width:500px) { main, body.page-home main, .models-main { width: calc(100% - 10vw); padding-top: 36px; padding-bottom: 65px; } .topbar-inner { width: calc(100% - 10vw); } }