/* Telemapa — a home (outubro de 2026, segunda versão).

   Só a home carrega este arquivo. A página é um diretório e foi desenhada para
   a pessoa achar grupo sem caçar onde clicar:

     capa compacta (título, busca e todas as categorias, com a área +18 num
     botão à parte) → palco (plano de topo) → impulsionados → a lista de grupos,
     com abas de ordem e filtros, que a categoria clicada na capa filtra.

   Mesma paleta de sempre: fundo quase preto, azul do Telegram como acento,
   dourado só para o que é pago. Tudo funciona sem JavaScript; o home.js troca
   a lista sem recarregar e acrescenta as animações (GSAP). Quem pediu
   "reduzir movimento" recebe a página parada. */

.e-home main { padding-top: var(--e-4); }

/* ============================================================== seções */
.secao { margin-top: clamp(2.5rem, 1.8rem + 2.4vw, 4rem); min-width: 0; }
.secao-topo {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--e-2) var(--e-4); margin-bottom: var(--e-4);
}
.secao-topo h2 {
  margin: 0; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem); letter-spacing: -.03em;
}
.secao-sobre {
  margin: 0 0 .35rem; font-size: .74rem; font-weight: 650; letter-spacing: .09em;
  text-transform: uppercase; color: var(--accent);
}
.secao-sobre--ouro { color: var(--gold); }

/* ============================================================== capa
   Compacta: título e busca na mesma faixa, e logo abaixo as categorias — é o
   primeiro clique de quase todo mundo, então vem antes de qualquer lista. */
.capa {
  position: relative; isolation: isolate; overflow: hidden; margin: 0;
  padding: clamp(1.25rem, .9rem + 1.8vw, 2.25rem);
  border-radius: 26px;
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-soft) 100%);
  border: 1px solid var(--line-soft);
  box-shadow: var(--brilho-topo);
}
.capa-fundo { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.capa-luz { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; }
.capa-luz--1 {
  width: 520px; height: 520px; right: -140px; top: -260px;
  background: radial-gradient(circle, var(--accent) 0%, transparent 65%);
}
.capa-grade {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(90% 80% at 85% 0%, #000 0%, transparent 70%);
          mask-image: radial-gradient(90% 80% at 85% 0%, #000 0%, transparent 70%);
  opacity: .7;
}

.capa-topo {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 30rem);
  gap: var(--e-3) var(--e-5); align-items: end;
}
.capa-texto { min-width: 0; }

/* O H1 não ganha nenhuma tag no meio — o termo de busca precisa chegar inteiro
   ao Google. O degradê é do título todo, por background-clip. */
.capa .capa-titulo {
  margin: 0 0 var(--e-2);
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.5rem);
  line-height: 1.06; letter-spacing: -.04em; font-weight: 750; text-wrap: balance;
  background: linear-gradient(100deg, var(--text) 40%, color-mix(in srgb, var(--accent) 75%, var(--text)) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.capa .capa-linha { margin: 0; font-size: .98rem; line-height: 1.5; color: var(--text-dim); }

/* Busca grande, com o botão dentro do campo. */
.capa .capa-busca {
  position: relative; display: flex; align-items: center; gap: 0; max-width: none;
  padding: 5px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line);
  box-shadow: var(--shadow), var(--brilho-topo);
  transition: border-color .2s, box-shadow .2s;
}
.capa .capa-busca:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow); }
.capa-busca-icone { flex: none; margin: 0 .2rem 0 .8rem; color: var(--text-faint); }
.capa .capa-busca input {
  flex: 1; min-width: 0; border: 0; background: transparent; box-shadow: none;
  padding: .65rem .55rem; font-size: 1rem; color: var(--text);
}
.capa .capa-busca input:focus { outline: none; box-shadow: none; }
.capa .capa-busca button { padding: .7rem 1.4rem; }

/* As categorias: ladrilhos com ícone, nome e quantidade. */
.capa-cats { margin-top: var(--e-4); }
.cat-grade {
  display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
}
.capa .cat-tile {
  display: flex; align-items: center; gap: .55rem; height: 100%;
  padding: .6rem .75rem; border-radius: 14px; font-size: .88rem; font-weight: 550;
  color: var(--text); background: color-mix(in srgb, var(--surface-2) 85%, transparent);
  border: 1px solid var(--line-soft);
  transition: background .15s, border-color .15s, transform .15s;
}
.capa .cat-tile:hover { text-decoration: none; color: var(--text); border-color: var(--accent-ring); background: var(--surface-3); transform: translateY(-1px); }
.capa .cat-tile .emoji { font-size: 1.15rem; line-height: 1; flex: none; }
.cat-nome { flex: 1; min-width: 0; line-height: 1.25; }
.capa .cat-tile b { flex: none; font-weight: 600; font-size: .75rem; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.capa .cat-tile.is-current {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 28%, transparent);
}
.capa .cat-tile.is-current b { color: color-mix(in srgb, var(--accent-ink) 70%, transparent); }

/* A área adulta: botão próprio, com o aviso escrito. */
.capa .cat-tile--adulto {
  border-color: color-mix(in srgb, #e5484d 45%, var(--line));
  background: color-mix(in srgb, #e5484d 9%, var(--surface-2));
}
.capa .cat-tile--adulto:hover { border-color: #e5484d; background: color-mix(in srgb, #e5484d 15%, var(--surface-2)); }
.cat-18 {
  flex: none; display: grid; place-items: center; width: 30px; height: 22px; border-radius: 6px;
  font-size: .7rem; font-weight: 800; color: #fff; background: #d93a3f;
}
.cat-tile--adulto .cat-nome, .cat-tile--volta .cat-nome { white-space: normal; }
.cat-tile--adulto small { font-size: .78rem; font-weight: 450; color: var(--text-dim); margin-left: .25rem; }

.capa-rodape {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-5); margin-top: var(--e-3);
}
.capa-rodape .cat-tile { height: auto; padding: .5rem .9rem .5rem .55rem; }
.capa .capa-selos { margin: 0; font-size: .8rem; }

/* ============================================================== palco */
.palco { margin-top: var(--e-5); }
.palco-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--e-2) var(--e-3);
  margin-bottom: var(--e-3);
}
.palco-head h2 { margin: 0; font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); letter-spacing: -.025em; }
.palco-nav { margin-left: auto; display: flex; align-items: center; gap: .4rem; }
.palco-nav[hidden] { display: none; }
.palco-contador { font-size: .82rem; color: var(--text-faint); font-variant-numeric: tabular-nums; margin-right: .4rem; }
.palco-contador b { color: var(--text); font-weight: 650; }
.palco-seta {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  font-size: 1.35rem; line-height: 1; cursor: pointer;
  color: var(--text); background: var(--surface-2); border: 1px solid var(--line);
  transition: background .15s, border-color .15s, transform .15s;
}
.palco-seta:hover { border-color: var(--accent-ring); background: var(--surface-3); }
.palco-seta:active { transform: scale(.94); }

.palco-corpo { display: grid; gap: var(--e-3); }
.palco--varios .palco-corpo { grid-template-columns: minmax(0, 1fr) minmax(250px, 300px); }

.palco .palco-janela {
  position: relative; overflow: hidden; border-radius: 26px;
  border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--line));
  box-shadow: var(--shadow-lg);
  background: #07080b;
  height: clamp(300px, 18rem + 4vw, 380px);
}
.palco .palco-trilho {
  display: flex; gap: 0; height: 100%; margin: 0; padding: 0; list-style: none;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  scrollbar-width: none; overscroll-behavior-x: contain;
  transform: none !important;
}
.palco .palco-trilho::-webkit-scrollbar { display: none; }

.palco .vit-item {
  position: relative; isolation: isolate; overflow: hidden;
  flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always;
  display: flex; flex-direction: row; align-items: flex-end;
  padding: clamp(1.25rem, .8rem + 2.4vw, 2.75rem);
  margin: 0; min-height: 0; gap: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none;
  color: #f4f6fa;
}
.palco .vit-item:hover { transform: none; }

.palco-fundo {
  position: absolute; inset: 0; z-index: -2; overflow: hidden;
  background:
    radial-gradient(90% 120% at 85% 20%, hsl(var(--av-h, 217) 70% 45% / .55), transparent 60%),
    linear-gradient(135deg, hsl(var(--av-h, 217) 45% 16%), hsl(calc(var(--av-h, 217) + 40) 40% 7%));
}
.palco-fundo img {
  position: absolute; inset: -20%; width: 140%; height: 140%; max-width: none; object-fit: cover;
  filter: blur(46px) saturate(1.5); opacity: .55; will-change: transform;
}
/* Véu para a leitura: escuro onde está o texto, aberto onde está a foto. */
.vit-item::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5,6,9,.88) 0%, rgba(5,6,9,.55) 45%, rgba(5,6,9,.05) 100%),
    linear-gradient(0deg, rgba(5,6,9,.6) 0%, transparent 50%);
}

.palco-conteudo { position: static; width: min(100%, 36rem, calc(100% - clamp(140px, 8rem + 6vw, 220px) - 4rem)); }
.palco .vit-topo { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; color: inherit; }
.palco .vit-topo:hover { color: inherit; text-decoration: none; }
.palco .vit-topo:hover .palco-nome { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* A foto do grupo: grande, à direita, flutuando — é a "capa do cartaz". */
.palco .palco-foto {
  position: absolute; right: clamp(2rem, 6vw, 5rem); top: 50%;
  width: clamp(140px, 8rem + 6vw, 220px); height: auto; aspect-ratio: 1;
  border-radius: 38px; object-fit: cover; font-size: 4rem;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 8px rgba(255,255,255,.04), 0 0 120px hsl(var(--av-h, 217) 80% 55% / .35);
  translate: 0 -50%;
}
.palco-info { display: flex; flex-direction: column; gap: .45rem; }
.palco-etiquetas { display: flex; gap: .4rem; flex-wrap: wrap; }
.palco-cat {
  font-size: .72rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase;
  padding: .28rem .65rem; border-radius: 999px;
  color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(8px);
}
.palco .palco-nome {
  font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.7rem); font-weight: 750; line-height: 1.05;
  letter-spacing: -.035em; color: #fff; white-space: normal;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.palco .palco-meta { font-size: .92rem; color: rgba(236,240,247,.72); }
.palco .palco-meta b { color: #fff; font-weight: 650; }
.palco .palco-desc {
  margin: var(--e-3) 0 0; max-width: 46ch; min-height: 0;
  font-size: .98rem; line-height: 1.55; color: rgba(236,240,247,.8);
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.palco-acoes { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: var(--e-4); }
.palco .vit-entrar { width: auto; padding: .8rem 1.6rem; font-size: 1rem; }
.btn--vidro {
  color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
}
.btn--vidro:hover { color: #fff; background: rgba(255,255,255,.16); text-decoration: none; }

/* Índice ao lado: cada destaque com nome e a barra de tempo. */
.palco-indice {
  display: flex; flex-direction: column; gap: .45rem; margin: 0; padding: 0; list-style: none;
  max-height: clamp(300px, 18rem + 4vw, 380px); overflow-y: auto; scrollbar-width: thin;
}
.palco-aba {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: .7rem;
  padding: .6rem .75rem; border-radius: 16px; color: var(--text);
  background: var(--surface); border: 1px solid var(--line-soft);
  transition: background .2s, border-color .2s;
}
.palco-aba:hover { text-decoration: none; color: var(--text); background: var(--surface-2); }
.palco-aba.ativa {
  background: var(--surface-2);
  border-color: color-mix(in srgb, var(--gold) 45%, var(--line));
}
.palco-aba img, .palco-aba-vazia {
  width: 40px; height: 40px; border-radius: 12px; object-fit: cover;
}
.palco-aba-vazia {
  display: grid; place-items: center; font-weight: 700;
  color: hsl(var(--av-h, 217) 70% 72%); background: hsl(var(--av-h, 217) 32% 20%);
}
.palco-aba-texto { display: flex; flex-direction: column; min-width: 0; }
.palco-aba-nome { font-size: .88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palco-aba-meta { font-size: .74rem; color: var(--text-faint); }
.palco-aba-tempo { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: transparent; }
.palco-aba-tempo i {
  display: block; height: 100%; transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, var(--gold), color-mix(in srgb, var(--gold) 60%, #fff));
}

/* ============================================================== cartão compacto */
.mini-grade {
  display: grid; gap: var(--e-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 172px), 1fr));
}
.mini {
  position: relative; isolation: isolate; min-width: 0;
  border-radius: 20px; background: var(--surface); border: 1px solid var(--line-soft);
  box-shadow: var(--brilho-topo);
  transition: transform .25s cubic-bezier(.2,.7,.2,1), border-color .2s, box-shadow .25s, background .2s;
}
.mini::after {
  /* a luz que segue o mouse (o home.js atualiza --mx/--my) */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, -40%), color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
  opacity: 0; transition: opacity .25s;
}
.mini:hover { transform: translateY(-4px); border-color: var(--line); box-shadow: var(--brilho-topo), var(--shadow); background: var(--surface-2); }
.mini:hover::after { opacity: 1; }
.mini-link {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .3rem;
  height: 100%; padding: var(--e-3) var(--e-3) .9rem; color: var(--text); border-radius: inherit; overflow: hidden;
}
.mini-link:hover { color: var(--text); text-decoration: none; }
.mini-link:focus-visible { outline-offset: -3px; }
.mini-capa {
  position: absolute; inset: 0 0 auto; height: 64px; z-index: -1;
  background: linear-gradient(135deg, hsl(var(--av-h, 217) 60% 45% / .32), hsl(calc(var(--av-h, 217) + 50) 60% 40% / .08));
  -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent);
}
.mini .mini-foto {
  width: 60px; height: 60px; flex: none; border-radius: 18px; margin: .35rem 0 .45rem;
  font-size: 1.4rem; box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.mini-nome {
  font-weight: 650; font-size: .95rem; line-height: 1.3; letter-spacing: -.01em;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mini-meta { font-size: .78rem; color: var(--text-faint); line-height: 1.4; }
.mini-meta b { color: var(--text-dim); font-weight: 600; }
.mini-rodape { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: auto; padding-top: .45rem; }
.mini-tipo { font-size: .72rem; color: var(--text-faint); }
.mini-novo { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; color: var(--text-dim); }
.mini-novo i { width: 6px; height: 6px; border-radius: 50%; background: #3fb950; box-shadow: 0 0 0 3px rgba(63,185,80,.18); }

/* Impulsionado: borda dourada que gira devagar. */
@property --giro { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.mini--pago {
  background: color-mix(in srgb, var(--gold) 5%, var(--surface));
  border-color: transparent;
}
.mini--pago::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--giro),
    color-mix(in srgb, var(--gold) 25%, transparent) 0deg,
    var(--gold) 60deg,
    color-mix(in srgb, var(--gold) 25%, transparent) 140deg,
    color-mix(in srgb, var(--gold) 25%, transparent) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: mini-giro 6s linear infinite;
}
@keyframes mini-giro { to { --giro: 360deg; } }
.mini--pago .mini-capa { background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 30%, transparent), transparent); }
.mini--pago:hover { border-color: transparent; box-shadow: var(--brilho-topo), 0 12px 40px color-mix(in srgb, var(--gold) 14%, transparent); }

/* Impulsionados: cartão deitado, quatro por linha — menor que o palco, maior
   e mais rico que o cartão comum. */
.mini-grade--impulso {
  grid-template-columns: none; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * var(--e-3)) / 4);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: 6px;
}
.mini-grade--impulso > * { scroll-snap-align: start; }
.mini-grade--impulso .mini-link {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: .85rem; row-gap: .15rem;
  align-items: center; padding: var(--e-3) var(--e-4) var(--e-3) var(--e-3);
}
.mini-grade--impulso .mini-foto { grid-row: 1 / span 3; width: 64px; height: 64px; margin: 0; }
.mini-grade--impulso .mini-nome { -webkit-line-clamp: 1; line-clamp: 1; }
.mini-grade--impulso .mini-rodape { margin: 0; padding: .2rem 0 0; }
.mini-grade--impulso .mini-capa { inset: 0; height: auto; -webkit-mask-image: linear-gradient(90deg, #000, transparent 70%); mask-image: linear-gradient(90deg, #000, transparent 70%); }
@media (max-width: 1100px) {
  .mini-grade--impulso { grid-auto-columns: calc((100% - var(--e-3)) / 2); }
}

/* Trilho horizontal (Novos): rola de lado, sem barra. */
.trilho-x { margin-inline: -4px; }
.mini-grade--trilho {
  grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(176px, 190px);
  overflow-x: auto; scroll-snap-type: x proximity; padding: 4px 4px 10px;
  scrollbar-width: thin;
}
.mini-grade--trilho > * { scroll-snap-align: start; }

/* ============================================================== a lista de grupos */
.catalogo { scroll-margin-top: 90px; }
.catalogo-topo {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--e-2) var(--e-4); margin-bottom: var(--e-3);
}
.catalogo-topo h2 { margin: 0; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem); letter-spacing: -.03em; }

.catalogo-filtros {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--e-2) var(--e-4); margin-bottom: var(--e-4);
  padding-bottom: var(--e-3); border-bottom: 1px solid var(--line-soft);
}
.abas-ordem { display: flex; gap: .3rem; overflow-x: auto; scrollbar-width: none; }
.abas-ordem::-webkit-scrollbar { display: none; }
.aba-ordem {
  white-space: nowrap; padding: .55rem 1rem; border-radius: 999px;
  font-size: .9rem; font-weight: 600; color: var(--text-dim);
  border: 1px solid transparent; transition: background .15s, color .15s;
}
.aba-ordem:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }
.aba-ordem.is-current { color: var(--text); background: var(--surface-2); border-color: var(--line); }

.filtro-tipo {
  display: inline-flex; padding: 3px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-soft);
}
.filtro-tipo-op { padding: .35rem .85rem; border-radius: 999px; font-size: .82rem; font-weight: 600; color: var(--text-dim); }
.filtro-tipo-op:hover { color: var(--text); text-decoration: none; }
.filtro-tipo-op.is-current { background: var(--accent); color: var(--accent-ink); }

.catalogo-grade { transition: opacity .2s; }
.catalogo.carregando .catalogo-grade { opacity: .45; }
.catalogo-mais { display: grid; justify-items: center; gap: var(--e-2); margin-top: var(--e-5); }
.catalogo-mais p { margin: 0; }

/* ============================================================== faixa do dono */
.e-home .faixa-admin {
  margin-top: clamp(3rem, 2rem + 3vw, 5rem);
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 28px; border-color: var(--line);
  background:
    radial-gradient(60% 120% at 100% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
    radial-gradient(50% 100% at 0% 100%, color-mix(in srgb, var(--gold) 9%, transparent), transparent 60%),
    var(--surface);
}
.e-home .faixa-admin h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); letter-spacing: -.03em; }
.e-home .section.prose { margin-top: var(--e-6); }

/* ============================================================== animação de entrada
   Só existe com o home.js e o GSAP no ar (classe .anima no <html>), e só para o
   que estava abaixo da dobra na carga. O GSAP liga cada bloco ao entrar. */
.anima [data-revelar] { will-change: transform, opacity; }

/* ============================================================== larguras menores */
@media (max-width: 1000px) {
  .palco--varios .palco-corpo { grid-template-columns: minmax(0, 1fr); }
  .palco-indice {
    flex-direction: row; justify-content: center; gap: .5rem;
    max-height: none; overflow: visible;
  }
  .palco-aba {
    grid-template-columns: 1fr; padding: 3px; border-radius: 14px; background: transparent; border-color: transparent;
  }
  .palco-aba.ativa { background: transparent; border-color: var(--gold); }
  .palco-aba-texto { display: none; }
  .palco-aba img, .palco-aba-vazia { width: 34px; height: 34px; border-radius: 11px; }
  .palco-aba-tempo { left: 4px; right: 4px; bottom: -5px; }
  .palco .palco-foto { right: 2.5rem; width: 150px; }
}

@media (max-width: 860px) {
  .capa-topo { grid-template-columns: minmax(0, 1fr); }

  /* No celular a foto volta para dentro do texto, acima do nome. */
  .palco .palco-janela { height: auto; }
  .palco .palco-trilho { height: auto; align-items: stretch; }
  .palco .vit-item { min-height: 340px; padding: 1.25rem 1.15rem 1.35rem; }
  .palco .palco-foto {
    position: static; translate: none; width: 64px; border-radius: 18px; font-size: 1.7rem; margin-bottom: .2rem;
    box-shadow: 0 14px 40px rgba(0,0,0,.5), 0 0 60px hsl(var(--av-h, 217) 80% 55% / .3);
  }
  .vit-item::after {
    background: linear-gradient(0deg, rgba(5,6,9,.92) 0%, rgba(5,6,9,.6) 55%, rgba(5,6,9,.25) 100%);
  }
  .palco-conteudo { width: 100%; }
  .palco .palco-nome { font-size: 1.5rem; }
  .palco .palco-desc { font-size: .88rem; margin-top: var(--e-2); }
  .palco-acoes { margin-top: var(--e-3); }
  .palco-acoes { flex-wrap: nowrap; }
  .palco-acoes .btn { flex: 1 1 auto; padding: .7rem .9rem; font-size: .92rem; }
  .palco .palco-desc { -webkit-line-clamp: 1; line-clamp: 1; }
}

@media (max-width: 640px) {
  .e-home main { padding-top: var(--e-3); }
  .capa { border-radius: 20px; padding: 1.15rem 1rem 1rem; }
  .capa .capa-titulo { font-size: 1.55rem; }
  .capa .capa-linha { font-size: .88rem; }
  .capa .capa-busca button { padding: .65rem 1.05rem; }
  .capa-busca-icone { display: none; }
  .capa .capa-busca input { padding-left: .95rem; }

  /* Categorias no celular: duas fileiras que rolam de lado — cabe tudo em
     ~110px, e a lista de grupos aparece logo depois. O +18 fica fora da
     rolagem, sempre à vista, numa linha só dele. */
  .capa-cats { margin-top: var(--e-3); margin-inline: -1rem; }
  .cat-grade {
    grid-template-columns: none; grid-template-rows: repeat(2, auto); grid-auto-flow: column;
    grid-auto-columns: max-content; overflow-x: auto; scrollbar-width: none;
    padding: 0 1rem 4px; gap: .4rem;
  }
  .cat-grade::-webkit-scrollbar { display: none; }
  .capa .cat-tile { padding: .5rem .7rem; font-size: .84rem; border-radius: 12px; }
  .cat-nome { white-space: nowrap; }
  .capa-rodape .cat-tile { width: 100%; }
  .capa .capa-selos { display: none; }

  .palco { margin-top: var(--e-4); }
  .palco-head { margin-bottom: var(--e-2); }
  .palco-nav { display: none !important; }
  .palco .palco-janela { border-radius: 20px; }

  .mini-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-2); }
  /* Impulsionados no celular: uma fileira que rola de lado. */
  .mini-grade--impulso {
    grid-template-columns: none; grid-auto-flow: column;
    grid-auto-columns: 84%; gap: var(--e-2); overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: -1rem; padding: 2px 1rem 8px; scroll-padding-inline: 1rem; scrollbar-width: none;
  }
  .mini-grade--impulso::-webkit-scrollbar { display: none; }
  .mini-grade--impulso > * { scroll-snap-align: start; }
  .mini .mini-foto { width: 52px; height: 52px; border-radius: 16px; }
  .mini-nome { font-size: .9rem; }

  .secao { margin-top: var(--e-5); }
  .catalogo-filtros { margin-inline: -1rem; padding-inline: 1rem; }
  .abas-ordem { width: 100%; }
  .aba-ordem { padding: .5rem .85rem; font-size: .86rem; }
  .catalogo .grid { gap: var(--e-2); }
  .catalogo .card-link { padding: var(--e-3); gap: var(--e-3); }
  .catalogo .card-avatar { width: 46px; height: 46px; flex-basis: 46px; border-radius: 14px; }
  /* No celular a lista é para passar o olho: nome, assunto e membros. A
     descrição fica para a página do grupo. */
  .catalogo .card-desc { display: none; }
  .catalogo .card-meta { margin-top: .15rem; }
  .catalogo .card-meta .chip { font-size: .62rem; padding: .12rem .45rem; }
}

/* ============================================================== tema claro */
:root[data-theme="claro"] .capa { background: linear-gradient(180deg, #fff 0%, var(--bg) 100%); }
:root[data-theme="claro"] .capa-luz--1 { opacity: .2; }
:root[data-theme="claro"] .capa .cat-tile { background: #fff; }
:root[data-theme="claro"] .capa .cat-tile.is-current { background: var(--accent); }
:root[data-theme="claro"] .mini .mini-foto { box-shadow: 0 6px 16px rgba(16,32,52,.12); }

/* ============================================================== menos movimento */
@media (prefers-reduced-motion: reduce) {
  .mini--pago::before { animation: none; }
  .mini, .palco-seta, .capa .cat-tile { transition: none; }
  .mini:hover, .capa .cat-tile:hover { transform: none; }
  .palco .palco-trilho { scroll-behavior: auto; }
}