/* ============================================
   BRUKMONT · paleta tirada do brasão e do banner
   ============================================ */
:root {
  --noite:        #0d1020;   /* fundo mais escuro (borda do brasão) */
  --noite-2:      #141a30;   /* céu */
  --noite-3:      #1c2340;   /* cards */
  --borda:        #2c3558;
  --montanha:     #5d6b94;
  --neve:         #eef2fa;
  --ouro:         #f0d060;
  --ouro-escuro:  #a07c24;
  --vermelho:     #9b2c2c;
  --vermelho-2:   #c0403a;
  --fogo:         #e8892c;
  --creme:        #fff3d0;
  --mata:         #1e3a2a;
  --texto:        #e6e2d6;
  --texto-suave:  #a9adc2;

  --fonte-pixel:  "Pixelify Sans", system-ui, sans-serif;
  --fonte-mini:   "Silkscreen", monospace;
  --fonte-texto:  "Inter", system-ui, sans-serif;

  --largura: 1120px;
  --raio: 4px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--noite);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

/* brasão sem o fundo quadrado */
.marca img, .rodape-conteudo img { clip-path: circle(48.5% at 50% 50%); }

/* pixel art sem borrar */
.brasao, .banner, .banner-rodape, .marca img, .rodape img {
  image-rendering: pixelated;
}

h1, h2, h3 {
  font-family: var(--fonte-pixel);
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 .5em;
  color: var(--neve);
}

.ouro { color: var(--ouro); }

.kicker {
  font-family: var(--fonte-mini);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ouro);
  margin: 0 0 14px;
  line-height: 1.8;
}

/* ============ BOTÕES ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  font-family: var(--fonte-mini);
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--raio);
  border: 2px solid transparent;
  transition: transform .12s, box-shadow .12s, background .12s;
  cursor: pointer;
}
.btn:active { transform: translateY(2px); box-shadow: none !important; }

.btn-ouro {
  background: var(--ouro);
  color: var(--noite);
  box-shadow: 0 4px 0 var(--ouro-escuro);
}
.btn-ouro:hover { background: #f7dd7a; }

.btn-escuro {
  background: var(--noite-3);
  color: var(--creme);
  border-color: var(--borda);
  box-shadow: 0 4px 0 #070912;
}
.btn-escuro:hover { border-color: var(--ouro-escuro); }

.btn-pequeno { padding: 10px 14px; font-size: 13px; }

/* ============ MENU ============ */
.topo {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(13, 16, 32, .92);
  backdrop-filter: blur(6px);
  border-bottom: 2px solid var(--borda);
}

.nav {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--fonte-pixel);
  font-weight: 700;
  font-size: 22px;
  color: var(--neve);
}

.links {
  list-style: none;
  display: flex;
  gap: 4px;
  margin: 0 0 0 auto;
  padding: 0;
}
.links a {
  display: block;
  padding: 8px 10px;
  font-family: var(--fonte-mini);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-decoration: none;
  color: var(--texto-suave);
  border-bottom: 2px solid transparent;
}
.links a:hover { color: var(--creme); }
.links a.ativo { color: var(--ouro); border-bottom-color: var(--ouro); }
.links .link-apoiar { color: var(--ouro); }
.links .link-apoiar:hover { color: var(--creme); }

.menu-btn {
  display: none;
  margin-left: auto;
  background: none;
  border: 2px solid var(--borda);
  border-radius: var(--raio);
  padding: 8px;
  cursor: pointer;
}
.menu-btn span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--creme);
  margin: 4px 0;
}

/* ============ HERO ============ */
.hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 56px 16px 0;
  /* altura do banner das montanhas (1600x340, largura mínima 720px) */
  --altura-banner: max(21.25vw, 153px);
  /* mapa da vila ao fundo, escurecido; embaixo termina na cor do céu do banner */
  background:
    radial-gradient(ellipse 60% 45% at 50% 42%, rgba(232, 137, 44, .12), transparent 70%),
    linear-gradient(180deg,
      rgba(11, 14, 29, .66) 0%,
      rgba(13, 16, 32, .78) 40%,
      rgba(20, 29, 51, .88) calc(100% - var(--altura-banner) - 220px),
      #141d33 calc(100% - var(--altura-banner) + 10px)),
    url("../img/mapa-fundo.jpg") 41% 40% / cover no-repeat,
    #141d33;
}
/* vinheta nas laterais, como uma lente */
.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 var(--altura-banner) 0;   /* para antes das montanhas */
  background: radial-gradient(ellipse 85% 70% at 50% 35%, transparent 40%, rgba(8, 10, 22, .75) 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  pointer-events: none;
}

.ceu {
  display: none; /* estrelas desligadas: agora o fundo é o mapa */
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 10% 20%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 25% 8%,  #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 40% 30%, #cfd6ee 50%, transparent 51%),
    radial-gradient(1px 1px at 62% 12%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 78% 26%, #cfd6ee 50%, transparent 51%),
    radial-gradient(1px 1px at 90% 10%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 55% 45%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 15% 50%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 85% 48%, #fff 50%, transparent 51%);
  opacity: .7;
  animation: piscar 5s ease-in-out infinite alternate;
}
@keyframes piscar { from { opacity: .45; } to { opacity: .85; } }

.vagalumes span {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--ouro);
  box-shadow: 0 0 8px 2px rgba(240, 208, 96, .6);
  animation: flutuar linear infinite;
  opacity: 0;
}
@keyframes flutuar {
  0%   { transform: translate(0, 0);        opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translate(30px, -160px); opacity: 0; }
}

/* vaga-lumes que sobem pela página inteira */
.vagalumes-site {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
main, .rodape { position: relative; z-index: 1; }
.topo { z-index: 50; }

.vagalumes-site span {
  position: absolute;
  bottom: -10px;
  width: var(--tam, 4px);
  height: var(--tam, 4px);
  background: var(--ouro);
  box-shadow: 0 0 10px 3px rgba(240, 208, 96, .55);
  opacity: 0;
  animation:
    subir var(--dur, 14s) linear infinite,
    brilhar 2.2s ease-in-out infinite alternate;
  animation-delay: var(--atraso, 0s), var(--atraso, 0s);
}
@keyframes subir {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(var(--balanco, 20px), -28vh); }
  50%  { transform: translate(calc(var(--balanco, 20px) * -1), -56vh); }
  75%  { transform: translate(var(--balanco, 20px), -84vh); }
  100% { transform: translate(0, -112vh); }
}
@keyframes brilhar {
  from { opacity: .15; }
  to   { opacity: .95; }
}

.hero-conteudo {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
}

.brasao {
  width: 180px;
  height: 180px;
  margin: 0 auto 20px;
  clip-path: circle(48.5% at 50% 50%);
  filter: drop-shadow(0 0 24px rgba(232, 137, 44, .35));
  animation: respirar 4s ease-in-out infinite;
}
@keyframes respirar {
  50% { filter: drop-shadow(0 0 40px rgba(232, 137, 44, .55)); }
}

.hero h1 {
  font-size: clamp(40px, 8vw, 84px);
  text-shadow: 0 4px 0 #05060d;
  margin-bottom: 20px;
}

.lead {
  font-size: 18px;
  color: var(--texto);
  max-width: 620px;
  margin: 0 auto 32px;
}

.contador {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  margin-bottom: 32px;
  background: var(--noite-3);
  border: 2px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: 0 4px 0 #070912;
}
.contador strong {
  font-family: var(--fonte-pixel);
  font-size: 36px;
  color: var(--ouro);
  line-height: 1;
}
.contador span {
  font-family: var(--fonte-mini);
  font-size: 12px;
  text-transform: uppercase;
  text-align: left;
  color: var(--texto-suave);
  line-height: 1.8;
}

.acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

.banner {
  position: relative;
  z-index: 1;
  width: 100vw;   /* ocupa a tela toda, ignorando o recuo do hero */
  max-width: none;
  min-width: 720px;
  margin: 48px auto 0;
  left: 50%;
  transform: translateX(-50%);
}

/* ============ NÚMEROS ============ */
.numeros {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #10162a;
  border-top: 2px solid var(--borda);
  border-bottom: 2px solid var(--borda);
}
.numero {
  padding: 28px 16px;
  text-align: center;
  border-right: 2px solid var(--borda);
}
.numero:last-child { border-right: 0; }
.numero strong {
  display: block;
  font-family: var(--fonte-pixel);
  font-size: 40px;
  color: var(--ouro);
  line-height: 1.1;
}
.numero span {
  font-family: var(--fonte-mini);
  font-size: 12px;
  text-transform: uppercase;
  color: var(--texto-suave);
  line-height: 1.8;
}

/* ============ SEÇÕES ============ */
.secao {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 88px 16px 0;
  text-align: center;
}
.secao h2 { font-size: clamp(30px, 5vw, 46px); }
.sub {
  color: var(--texto-suave);
  max-width: 620px;
  margin: 0 auto 40px;
}

.card {
  background: var(--noite-3);
  border: 2px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: 0 4px 0 #070912;
  padding: 28px 24px;
  text-align: left;
}
.card h3 { font-size: 24px; color: var(--creme); }
.card p  { color: var(--texto-suave); margin: 0; }

/* passos */
.passos {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 820px;
  margin: 0 auto;
}
.passo-num {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 16px;
  font-family: var(--fonte-mini);
  font-size: 20px;
  color: var(--noite);
  background: var(--ouro);
  box-shadow: 0 3px 0 var(--ouro-escuro);
}

/* no ar */
.no-ar {
  max-width: 780px;
  margin: 0 auto;
  padding: 40px 36px;
  border-color: var(--vermelho);
  background:
    linear-gradient(180deg, rgba(155, 44, 44, .18), transparent 60%),
    var(--noite-3);
}
.no-ar h2 { margin-bottom: 16px; }
.no-ar > p { color: var(--texto); margin-bottom: 18px; }
.selo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fonte-mini);
  font-size: 13px;
  text-transform: uppercase;
  color: var(--vermelho-2);
  margin-bottom: 14px !important;
}
.ponto-vivo {
  width: 10px;
  height: 10px;
  background: var(--vermelho-2);
  animation: pulsar 1.4s ease-in-out infinite;
}
@keyframes pulsar { 50% { opacity: .3; } }

blockquote {
  margin: 0 0 28px;
  padding: 16px 20px;
  border-left: 4px solid var(--ouro);
  background: rgba(240, 208, 96, .06);
  font-family: var(--fonte-pixel);
  font-size: 22px;
  color: var(--creme);
}
.no-ar .acoes { justify-content: flex-start; }
.proximo {
  margin-top: 28px !important;
  padding-top: 20px;
  border-top: 2px dashed var(--borda);
  color: var(--texto-suave) !important;
}
.proximo strong { color: var(--vermelho-2); }

/* mistérios */
.misterios {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.misterio { text-align: center; }
.misterio p { color: var(--texto); }
.icone {
  display: block;
  font-family: var(--fonte-pixel);
  font-size: 36px;
  color: var(--ouro);
  margin-bottom: 12px;
  line-height: 1;
}
.icone.olhos {
  color: #e0302a;
  text-shadow: 0 0 12px rgba(224, 48, 42, .8);
  letter-spacing: 6px;
  font-size: 24px;
  padding: 6px 0;
}

/* explore */
.explore {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;   /* a última linha fica centralizada */
  gap: 20px;
  margin-top: 40px;
}
.explore > .explorar { flex: 0 1 calc((100% - 40px) / 3); }
.explorar {
  position: relative;
  text-decoration: none;
  transition: transform .15s, border-color .15s;
}
.explorar:hover { transform: translateY(-3px); border-color: var(--ouro-escuro); }
.tag {
  position: absolute;
  top: 16px;
  right: 16px;
  font-family: var(--fonte-mini);
  font-size: 11px;
  text-transform: uppercase;
  padding: 5px 7px;
  color: var(--texto-suave);
  border: 1px solid var(--borda);
}

.tag-pronto { color: var(--noite); background: var(--ouro); border-color: var(--ouro); }

/* ============ RODAPÉ ============ */
.rodape {
  margin-top: 110px;
  position: relative;
  background: linear-gradient(180deg, var(--noite) 0%, #141d33 100%);
  overflow: hidden;
}
.banner-rodape {
  width: 100%;
  min-width: 720px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.rodape-conteudo {
  background: #0f1622;
  text-align: center;
  padding: 32px 16px 40px;
  color: var(--texto-suave);
  font-size: 15px;
}
.rodape-conteudo img { margin: 0 auto 12px; }
.rodape-conteudo p { margin: 4px 0; }
.rodape-conteudo strong { color: var(--creme); }
.insta-texto { color: var(--ouro); }

/* aviso "em breve" */
.aviso {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 20px);
  padding: 12px 18px;
  background: var(--ouro);
  color: var(--noite);
  font-family: var(--fonte-mini);
  font-size: 13px;
  box-shadow: 0 4px 0 var(--ouro-escuro);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 100;
}
.aviso.visivel { opacity: 1; transform: translate(-50%, 0); }

/* ============ LORE ============ */
.lore-topo {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 72px 16px 24px;
  text-align: center;
}
.lore-topo h1 { font-size: clamp(38px, 7vw, 72px); text-shadow: 0 4px 0 #05060d; }

.indice {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
}
.indice a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font-size: 14px;
  text-decoration: none;
  color: var(--texto);
  background: var(--noite-3);
  border: 2px solid var(--borda);
  border-radius: var(--raio);
  transition: border-color .15s, color .15s;
}
.indice a:hover { border-color: var(--ouro-escuro); color: var(--creme); }
.indice span {
  font-family: var(--fonte-mini);
  font-size: 12px;
  color: var(--ouro);
}

.capitulos {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 16px 0;
}
/* linha do tempo ligando os capítulos */
.capitulos::before {
  content: "";
  position: absolute;
  top: 40px;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: repeating-linear-gradient(to bottom, var(--borda) 0 8px, transparent 8px 16px);
  transform: translateX(-50%);
}

.capitulo {
  position: relative;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 48px;
  align-items: start;
  padding: 56px 0;
  scroll-margin-top: 80px;
}
.capitulo:nth-child(even) { grid-template-columns: 1fr 300px; }
.capitulo:nth-child(even) .capa { order: 2; }

.capa {
  margin: 0;
  position: sticky;
  top: 96px;
}
.capa img {
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border: 3px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: 0 6px 0 #070912, 0 20px 40px rgba(0, 0, 0, .45);
  image-rendering: pixelated;
}

.texto {
  position: relative;
  z-index: 1;
  background: var(--noite-3);
  border: 2px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: 0 4px 0 #070912;
  padding: 36px 34px;
}
.texto h2 { font-size: clamp(30px, 4vw, 42px); margin-bottom: 18px; }
.texto p { margin: 0 0 16px; }
.texto strong { color: var(--creme); font-weight: 600; }
.texto .fecho {
  margin: 24px 0 0;
  padding-top: 18px;
  border-top: 2px dashed var(--borda);
  color: var(--creme);
}
.texto .nota {
  font-style: italic;
  color: var(--texto-suave);
}
.texto blockquote { margin: 8px 0 20px; }

.lista-nomes {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}
.lista-nomes li {
  position: relative;
  padding: 8px 0 8px 22px;
  border-bottom: 1px solid rgba(44, 53, 88, .6);
}
.lista-nomes li:last-child { border-bottom: 0; }
.lista-nomes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 17px;
  width: 8px;
  height: 8px;
  background: var(--ouro);
}

/* episódio que ainda não saiu */
.capa-vazia {
  display: grid;
  place-items: center;
  aspect-ratio: 9 / 16;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 10px, transparent 10px 20px),
    var(--noite-2);
  border: 3px dashed var(--borda);
  border-radius: var(--raio);
}
.capa-vazia span {
  font-family: var(--fonte-pixel);
  font-size: 96px;
  color: var(--ouro);
  opacity: .6;
  animation: piscar 2.5s ease-in-out infinite alternate;
}
.em-breve .texto { border-style: dashed; }
.em-breve .acoes { justify-content: flex-start; margin-top: 8px; }

.voltar-topo {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  text-decoration: none;
  font-size: 14px;
  color: var(--noite);
  background: var(--ouro);
  border-radius: var(--raio);
  box-shadow: 0 4px 0 var(--ouro-escuro);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.voltar-topo.visivel { opacity: 1; pointer-events: auto; }

/* ============ PRIVACIDADE ============ */
.privacidade {
  max-width: 780px;
  margin: 24px auto 0;
  padding: 30px 32px;
}
.privacidade h2 { font-size: 30px; margin-bottom: 14px; }
.privacidade h3 { font-size: 21px; color: var(--ouro); margin: 22px 0 8px; }
.privacidade p { color: var(--texto); margin: 0 0 12px; }
.privacidade .acoes { justify-content: flex-start; margin-top: 16px; }
.campo small a { color: var(--ouro); }

/* ============ APOIE ============ */
.btn-grande { padding: 18px 30px; font-size: 16px; }
.apoie-topo {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 40px 16px 0;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 40px;
  align-items: center;
}
.apoie-capa { margin: 0; }
.apoie-capa img {
  width: 100%;
  height: auto;
  border: 3px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: 0 6px 0 #070912, 0 20px 50px rgba(0, 0, 0, .5), 0 0 60px rgba(240, 208, 96, .12);
  image-rendering: pixelated;
}
.apoie-chamada h1 { font-size: clamp(38px, 5vw, 58px); text-shadow: 0 4px 0 #05060d; }
.apoie-chamada .sub { margin: 0 0 26px; }
.apoie-nota { margin: 12px 0 0; font-size: 14px; color: var(--texto-suave); }

.apoie-blocos { display: grid; gap: 28px; margin-top: 36px; text-align: left; }
.apoie-bloco {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 32px;
  align-items: center;
  background: var(--noite-3);
  border: 2px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: 0 4px 0 #070912;
  padding: 18px;
}
.apoie-bloco.invertido img { order: 2; }
.apoie-bloco img {
  width: 100%;
  height: auto;
  border: 2px solid var(--borda);
  border-radius: var(--raio);
  image-rendering: pixelated;
}
.apoie-bloco h3 { font-size: 28px; color: var(--creme); }
.apoie-bloco p { color: var(--texto); margin: 0; }

.apoie-usos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 36px; max-width: 760px; margin-left: auto; margin-right: auto; }
.apoie-usos .card { text-align: center; }
.apoie-usos .icone { margin-bottom: 14px; }

.apoie-gratis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 36px; }
.apoie-gratis .explorar h3 { font-size: 21px; }

.apoie-final {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  padding: 44px 28px;
  border-color: var(--ouro-escuro);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(240, 208, 96, .14), transparent 70%),
    var(--noite-3);
}
.apoie-final p { margin: 0 0 24px !important; color: var(--texto) !important; }

/* ============ MORADORES ============ */
.montador-area { max-width: var(--largura); margin: 0 auto; padding: 24px 16px 0; }
.montador {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 36px;
  padding: 32px;
}
.vitrine { position: sticky; top: 96px; align-self: start; text-align: center; }
.palco {
  position: relative;
  display: grid;
  place-items: end center;
  height: 400px;
  padding-bottom: 18px;
  border: 2px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
  /* chão de terra da praça com a luz da fogueira */
  background:
    radial-gradient(ellipse 70% 45% at 50% 100%, rgba(232, 137, 44, .35), transparent 70%),
    linear-gradient(180deg, #141d33 0%, #1c2a48 55%, #5a3c24 55.5%, #6b4a2c 100%);
}
.palco::before { /* sombra no chão */
  content: "";
  position: absolute;
  left: 50%;
  bottom: 22px;
  width: 120px;
  height: 14px;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, .35);
  border-radius: 50%;
}
.previa { position: relative; width: 248px; height: 352px; image-rendering: pixelated; }
.placa-nome {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--fonte-pixel);
  font-weight: 700;
  font-size: 26px;
  color: var(--neve);
  text-shadow: 2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000;
}
.placa-nome.vazio { opacity: .45; }
.placa-oficio {
  margin: 12px 0 14px;
  font-family: var(--fonte-mini);
  font-size: 13px;
  text-transform: uppercase;
  color: var(--ouro);
}

.controles .grupo { margin-bottom: 20px; }
.controles .rotulo {
  margin: 0 0 8px;
  font-family: var(--fonte-mini);
  font-size: 12px;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.grupo-duplo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.controles .rotulo.passo { color: var(--ouro); margin: 6px 0 14px; font-size: 13px; }
.controles .grupo:first-child .rotulo { color: var(--ouro); font-size: 13px; }

/* homem / mulher */
.sexo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.sexo button {
  font-family: var(--fonte-pixel);
  font-size: 20px;
  font-weight: 600;
  padding: 10px;
  cursor: pointer;
  color: var(--texto);
  background: var(--noite-2);
  border: 2px solid var(--borda);
  border-radius: var(--raio);
}
.sexo button:hover { border-color: var(--ouro-escuro); }
.sexo button.ativo { color: var(--noite); background: var(--ouro); border-color: var(--ouro); box-shadow: 0 3px 0 var(--ouro-escuro); }

/* abas */
.abas {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--borda);
  margin-bottom: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.abas::-webkit-scrollbar { display: none; }
.abas button {
  flex: 1;
  font-family: var(--fonte-mini);
  font-size: 13px;
  text-transform: uppercase;
  padding: 10px 8px 8px;
  cursor: pointer;
  color: var(--texto-suave);
  background: none;
  border: 2px solid transparent;
  border-bottom: 0;
  border-radius: var(--raio) var(--raio) 0 0;
  margin-bottom: -2px;
}
.abas button:hover { color: var(--creme); }
.abas button.ativo { color: var(--ouro); background: var(--noite-2); border-color: var(--borda); border-bottom: 2px solid var(--noite-2); }
.paineis-abas { min-height: 260px; }

/* opções com miniatura do personagem */
.minis { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 8px; }
.mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  padding: 8px 4px 7px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  line-height: 1.2;
  color: var(--texto-suave);
  background: var(--noite-2);
  border: 2px solid var(--borda);
  border-radius: var(--raio);
  transition: border-color .15s, transform .15s;
}
.mini canvas { image-rendering: pixelated; max-width: 100%; }
.mini:hover { border-color: var(--ouro-escuro); transform: translateY(-2px); }
.mini.ativo { color: var(--creme); font-weight: 600; border-color: var(--ouro); background: rgba(240, 208, 96, .1); box-shadow: 0 3px 0 var(--ouro-escuro); }
.amostra.original { position: relative; }
.amostra.original::after { content: "★"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; color: var(--noite); }

/* cartões de ofício, cada um com o personagem vestido */
.oficios {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 8px;
}
.oficio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px 9px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  line-height: 1.2;
  color: var(--texto-suave);
  background: var(--noite-2);
  border: 2px solid var(--borda);
  border-radius: var(--raio);
  transition: border-color .15s, transform .15s, background .15s;
}
.oficio canvas { width: 62px; height: 88px; image-rendering: pixelated; }
.oficio:hover { border-color: var(--ouro-escuro); transform: translateY(-2px); }
.oficio.ativo {
  color: var(--creme);
  font-weight: 600;
  background: rgba(240, 208, 96, .1);
  border-color: var(--ouro);
  box-shadow: 0 3px 0 var(--ouro-escuro);
}
.opcoes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.opcoes button {
  font: inherit;
  font-size: 14px;
  padding: 7px 12px;
  cursor: pointer;
  color: var(--texto);
  background: var(--noite-2);
  border: 2px solid var(--borda);
  border-radius: var(--raio);
}
.opcoes button:hover { border-color: var(--ouro-escuro); }
.opcoes button.ativo { color: var(--noite); background: var(--ouro); border-color: var(--ouro); font-weight: 600; }
.amostras { display: flex; flex-wrap: wrap; gap: 8px; }
.amostras[hidden] { display: none; }
.amostra {
  width: 30px;
  height: 30px;
  cursor: pointer;
  border: 2px solid #000;
  border-radius: var(--raio);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .4);
  transition: transform .12s;
}
.amostra:hover { transform: translateY(-2px); }
.amostra.ativo { outline: 3px solid var(--ouro); outline-offset: 2px; }
.divisor { border: 0; border-top: 2px dashed var(--borda); margin: 26px 0 22px; }
.opcional { color: var(--texto-suave); font-weight: 400; font-size: 13px; }

/* mural */
.aviso-teste {
  max-width: 640px;
  margin: 0 auto 24px;
  padding: 12px 16px;
  font-size: 14px;
  color: var(--creme);
  background: rgba(232, 137, 44, .12);
  border: 2px dashed var(--fogo);
  border-radius: var(--raio);
}
.mural-filtros {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 8px 0 28px;
}
.mural-filtros input, .mural-filtros select {
  font: inherit;
  font-size: 15px;
  color: var(--texto);
  background: var(--noite-3);
  border: 2px solid var(--borda);
  border-radius: var(--raio);
  padding: 10px 14px;
  min-width: 240px;
}
.mural-filtros input:focus, .mural-filtros select:focus { outline: none; border-color: var(--ouro); }
.mural {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}
.morador {
  position: relative;
  text-align: center;
  padding: 14px 10px 16px;
  background: var(--noite-3);
  border: 2px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: 0 4px 0 #070912;
  transition: transform .15s, border-color .15s;
}
.morador:hover { transform: translateY(-3px); border-color: var(--ouro-escuro); }
.morador-sprite {
  width: 93px;
  height: 132px;
  margin: 0 auto 8px;
  display: block;
  image-rendering: pixelated;
}
.morador h3 { font-size: 20px; margin: 0 0 2px; color: var(--creme); overflow-wrap: anywhere; }
.morador-oficio { margin: 0; font-size: 13px; color: var(--ouro); }
.morador-insta { display: inline-block; margin-top: 6px; font-size: 13px; color: var(--texto-suave); text-decoration: none; overflow-wrap: anywhere; }
.morador-insta:hover { color: var(--creme); }
.morador.e-meu { border-color: var(--ouro); }
.selo-voce {
  position: absolute;
  top: 8px;
  right: 8px;
  font-family: var(--fonte-mini);
  font-size: 10px;
  text-transform: uppercase;
  padding: 3px 6px;
  color: var(--noite);
  background: var(--ouro);
}
.morador.recem-chegado { animation: chegar 1.6s ease; }
@keyframes chegar {
  0%, 30% { box-shadow: 0 0 0 4px var(--ouro), 0 0 40px rgba(240, 208, 96, .6); }
  100% { box-shadow: 0 4px 0 #070912; }
}
.mural-vazio { color: var(--texto-suave); margin-top: 20px; }
.mural-secao h2 { margin-bottom: 10px; }
.mural-subtitulo { margin-bottom: 28px; }
.mural-total:empty { display: none; }
.ver-mais { margin-top: 28px; }

/* ============ SUGESTÕES ============ */
.sugestoes-area {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 24px 16px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 28px;
  align-items: start;
}
.caixa { padding: 32px 30px; }
.isca { position: absolute; left: -9999px; }

.tipos { border: 0; padding: 0; margin: 0 0 24px; }
.tipos legend {
  font-family: var(--fonte-pixel);
  font-size: 22px;
  color: var(--neve);
  margin-bottom: 14px;
}
.tipos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tipos legend { grid-column: 1 / -1; }
.tipo { position: relative; cursor: pointer; }
.tipo input { position: absolute; opacity: 0; }
.tipo-cartao {
  height: 100%;
  overflow: hidden;
  background: var(--noite-2);
  border: 2px solid var(--borda);
  border-radius: var(--raio);
  transition: border-color .15s, background .15s, transform .15s, box-shadow .15s;
}
.tipo:hover .tipo-cartao { transform: translateY(-2px); border-color: var(--ouro-escuro); }

/* ilustração no topo de cada opção */
.tipo-img {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-bottom: 2px solid var(--borda);
}
.tipo-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
  filter: saturate(.55) brightness(.6);
  transform: scale(1.02);
  transition: filter .25s, transform .4s;
}
.tipo-historia img { object-position: 50% 40%; }   /* moradores reunidos na praça com o bardo */
.tipo-mapa img     { object-position: 50% 60%; }   /* vista de cima: vila, rio e castelo */
.tipo-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(20, 26, 48, .85) 100%);
}
.tipo:hover .tipo-img img { filter: saturate(.8) brightness(.8); transform: scale(1.06); }

.tipo-selo {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  font-weight: 700;
  color: var(--noite);
  background: var(--ouro);
  box-shadow: 0 3px 0 var(--ouro-escuro);
  opacity: 0;
  transform: scale(.6);
  transition: opacity .15s, transform .15s;
}

.tipo-txt { padding: 12px 16px 14px; }
.tipo strong { display: block; color: var(--creme); font-weight: 600; font-size: 17px; }
.tipo small { color: var(--texto-suave); font-size: 13px; }

/* opção escolhida */
.tipo input:checked + .tipo-cartao {
  border-color: var(--ouro);
  background: rgba(240, 208, 96, .08);
  box-shadow: 0 4px 0 var(--ouro-escuro), 0 0 24px rgba(240, 208, 96, .15);
}
.tipo input:checked + .tipo-cartao .tipo-img img { filter: none; }
.tipo input:checked + .tipo-cartao .tipo-selo { opacity: 1; transform: none; }
.tipo input:focus-visible + .tipo-cartao { outline: 2px solid var(--ouro); outline-offset: 2px; }

.campo { margin-bottom: 18px; }
.campo label { display: block; font-weight: 600; color: var(--creme); margin-bottom: 6px; font-size: 15px; }
.campo small { display: block; margin-top: 6px; font-size: 13px; color: var(--texto-suave); }
.obrig { color: var(--fogo); }
.campo input[type="text"], .campo select, .campo textarea {
  width: 100%;
  font: inherit;
  font-size: 16px;
  color: var(--texto);
  background: var(--noite);
  border: 2px solid var(--borda);
  border-radius: var(--raio);
  padding: 11px 13px;
  transition: border-color .15s;
}
.campo textarea { resize: vertical; min-height: 90px; }
.campo select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ouro) 50%), linear-gradient(135deg, var(--ouro) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
.campo select option, .campo select optgroup { background: var(--noite-2); color: var(--texto); }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--ouro); }
.campo ::placeholder { color: #5f6684; }

.com-arroba { display: flex; }
.com-arroba span {
  display: grid;
  place-items: center;
  padding: 0 12px;
  font-weight: 600;
  color: var(--ouro);
  background: var(--noite-2);
  border: 2px solid var(--borda);
  border-right: 0;
  border-radius: var(--raio) 0 0 var(--raio);
}
.com-arroba input { border-radius: 0 var(--raio) var(--raio) 0 !important; }


.aceite { display: flex; gap: 10px; align-items: flex-start; margin: 6px 0 18px; font-size: 14px; color: var(--texto-suave); cursor: pointer; }
.aceite input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--ouro); flex: none; }

.invalido input, .invalido select, .invalido textarea { border-color: var(--vermelho-2) !important; }
.aceite.invalido span { color: var(--vermelho-2); }
.erro-form { min-height: 1.2em; margin: 0 0 12px; color: #ff8a80; font-size: 14px; }
.enviar { width: 100%; }
.enviar:disabled { opacity: .7; cursor: wait; }

.dicas { display: grid; gap: 20px; position: sticky; top: 90px; }
.dicas-lista { margin: 0; padding-left: 20px; display: grid; gap: 12px; }
.dicas-lista li { color: var(--texto-suave); }
.dicas-lista li::marker { color: var(--ouro); font-weight: 700; }
.dicas-lista strong { color: var(--creme); font-weight: 600; }
.resposta { border-color: var(--ouro); text-align: center; }
.resposta h2 { font-size: 32px; }
.resposta p { margin: 0 0 18px; }

/* ============ MAPA ============ */
.legenda {
  display: flex;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--texto-suave);
}
.legenda span { display: inline-flex; align-items: center; gap: 8px; }
.pino-mini {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--noite);
}
.pino-mini.conhecido { background: var(--ouro); }
.pino-mini.misterio  { background: var(--vermelho-2); }

.mapa-area {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 24px 16px 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 32px;
  align-items: start;
}

.mapa-quadro {
  margin: 0;
  position: sticky;
  top: 84px;
  /* o mapa inteiro cabe na altura da tela */
  width: min(460px, calc((100vh - 110px) * 0.5477));
}
.mapa-img {
  position: relative;
  border: 3px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: 0 6px 0 #070912, 0 20px 40px rgba(0, 0, 0, .45);
  overflow: hidden;
  background: #1e382a;
}
.mapa-img img { width: 100%; height: auto; display: block; }
.mapa-img::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 60px rgba(8, 10, 22, .65);
  pointer-events: none;
}

.rosa {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  font-family: var(--fonte-mini);
  font-size: 12px;
  line-height: 1.1;
  text-align: center;
  color: var(--creme);
  background: rgba(13, 16, 32, .7);
  padding: 6px 8px;
  border-radius: var(--raio);
}

.pinos { position: absolute; inset: 0; z-index: 2; }
.pino {
  position: absolute;
  transform: translate(-50%, -50%);
  background: none;
  border: 0;
  padding: 6px;
  cursor: pointer;
}
.pino-icone {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  font-family: var(--fonte-pixel);
  font-weight: 700;
  font-size: 13px;
  color: var(--creme);
  border: 2px solid var(--noite);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .5);
  transition: transform .15s;
}
.pino.conhecido .pino-icone { background: var(--ouro); }
.pino.misterio  .pino-icone { background: var(--vermelho-2); }
.pino::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 2px solid currentColor;
  opacity: 0;
  animation: onda 2.2s ease-out infinite;
}
.pino.conhecido { color: var(--ouro); }
.pino.misterio  { color: var(--vermelho-2); }
@keyframes onda {
  0%   { transform: scale(.8); opacity: .8; }
  100% { transform: scale(2.2); opacity: 0; }
}
.pino-nome {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translate(-50%, 4px);
  white-space: nowrap;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--creme);
  background: rgba(13, 16, 32, .92);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s, transform .15s;
}
.pino:hover .pino-nome,
.pino:focus-visible .pino-nome,
.pino.ativo .pino-nome { opacity: 1; transform: translate(-50%, 0); }
.pino:hover .pino-icone,
.pino.ativo .pino-icone { transform: scale(1.35); }
.pino.ativo { z-index: 5; }

/* painel do lugar */
.painel {
  background: var(--noite-3);
  border: 2px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: 0 4px 0 #070912;
  overflow: hidden;
  scroll-margin-top: 80px;
}
.painel.e-misterio { border-color: var(--vermelho); }
.painel.trocando { animation: aparecer .35s ease; }
@keyframes aparecer { from { opacity: .3; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.painel-foto { position: relative; }
.painel-foto img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  image-rendering: pixelated;
  border-bottom: 2px solid var(--borda);
}
.painel-tipo {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--fonte-mini);
  font-size: 11px;
  text-transform: uppercase;
  padding: 6px 9px;
  color: var(--noite);
  background: var(--ouro);
  box-shadow: 0 3px 0 var(--ouro-escuro);
}
.e-misterio .painel-tipo { background: var(--vermelho-2); color: var(--creme); box-shadow: 0 3px 0 var(--vermelho); }

.painel-texto { padding: 26px 28px 28px; }
.painel-texto h2 { font-size: clamp(28px, 3.4vw, 38px); margin-bottom: 12px; }
.painel-desc { margin: 0 0 18px; }

.painel-eps { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.eps-rotulo {
  font-family: var(--fonte-mini);
  font-size: 11px;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-right: 4px;
}
.painel-eps a {
  font-size: 13px;
  text-decoration: none;
  padding: 6px 10px;
  color: var(--creme);
  border: 2px solid var(--borda);
  border-radius: var(--raio);
  background: var(--noite-2);
}
.painel-eps a:hover { border-color: var(--ouro-escuro); }

/* lista de lugares */
.lista-lugares { margin-top: 28px; }
.lista-lugares .kicker { margin: 18px 0 10px; }
.botoes-lugares { display: flex; flex-wrap: wrap; gap: 8px; }
.botao-lugar {
  font-family: var(--fonte-texto);
  font-size: 14px;
  padding: 8px 12px;
  cursor: pointer;
  color: var(--texto);
  background: var(--noite-3);
  border: 2px solid var(--borda);
  border-radius: var(--raio);
  transition: border-color .15s, background .15s;
}
.botao-lugar::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  vertical-align: 1px;
  background: var(--ouro);
}
.botao-lugar.misterio::before { background: var(--vermelho-2); }
.botao-lugar:hover { border-color: var(--ouro-escuro); }
.botao-lugar.ativo { background: var(--noite-2); border-color: var(--ouro); color: var(--creme); }
.botao-lugar.misterio.ativo { border-color: var(--vermelho-2); }

/* ============ CELULAR ============ */
@media (max-width: 900px) {
  .menu-btn { display: block; }
  .seguir { display: none; }
  .links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--noite);
    border-bottom: 2px solid var(--borda);
    padding: 8px 16px 16px;
  }
  .links.aberto { display: flex; }
  .links a { padding: 14px 4px; font-size: 14px; }

  .passos { grid-template-columns: 1fr; }
  .explore > .explorar { flex-basis: 100%; }
  .misterios { grid-template-columns: 1fr 1fr; }
  .numeros { grid-template-columns: 1fr 1fr; }
  .numero:nth-child(2) { border-right: 0; }
  .numero:nth-child(-n+2) { border-bottom: 2px solid var(--borda); }

  .capitulos::before { display: none; }
  .capitulo,
  .capitulo:nth-child(even) {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 40px 0;
  }
  .capitulo:nth-child(even) .capa { order: 0; }
  .capa { position: static; max-width: 280px; width: 100%; margin: 0 auto; }

  .mapa-area { grid-template-columns: 1fr; }
  .sugestoes-area { grid-template-columns: 1fr; }
  .apoie-topo, .apoie-bloco { grid-template-columns: 1fr; gap: 20px; text-align: center; }
  .apoie-bloco { text-align: left; }
  .apoie-bloco.invertido img { order: 0; }
  .apoie-usos { grid-template-columns: 1fr; }
  .apoie-gratis { grid-template-columns: 1fr 1fr; }
  .montador { grid-template-columns: 1fr; padding: 22px 18px; }
  .vitrine { position: static; }
  .palco { height: 330px; }
  .previa { width: 186px; height: 264px; }
  .dicas { position: static; }
  .mapa-quadro { position: static; width: 100%; max-width: 460px; margin: 0 auto; }
  .pino-icone { width: 16px; height: 16px; font-size: 12px; }
}

@media (max-width: 520px) {
  body { font-size: 16px; }
  .hero { padding-top: 36px; }
  .brasao { width: 140px; height: 140px; }
  .lead { font-size: 16px; }
  .acoes .btn { width: 100%; }
  .misterios { grid-template-columns: 1fr; }
  .no-ar { padding: 28px 20px; }
  .numero strong { font-size: 32px; }
  .texto { padding: 26px 20px; }
  .lore-topo { padding-top: 48px; }
  .indice a { font-size: 13px; padding: 8px 10px; }
  .caixa { padding: 24px 18px; }
  .tipos { grid-template-columns: 1fr; }
  .apoie-gratis { grid-template-columns: 1fr; }
  .btn-grande { width: 100%; }
  .grupo-duplo { grid-template-columns: 1fr; }
  .mural { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .mural-filtros input, .mural-filtros select { min-width: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}