/* troca.css: listas que rolam sem parar na home (protótipo de 24 set 2026)
   ------------------------------------------------------------------
   Peça nova, prefixo "v-troca". Só lê tokens de tokens.css: nenhum valor de
   cor, letra ou espaço é escrito aqui. Cinco colunas lado a lado, cada uma
   com um rótulo fixo em cima e, embaixo, uma lista que sobe sem parar (a
   quinta é uma frase parada, "ou pergunte o que quiser"). Sem molduras e
   sem caixas: é texto sobre o fundo da página, com uma máscara que esmaece
   o topo e a base de cada janela. */

.v-troca { padding-block: var(--section-y); overflow: hidden; }
/* O atributo hidden perde para qualquer "display" escrito em classe (ex. .v-btn); aqui ele vale. */
.v-troca [hidden] { display: none !important; }

/* ---------- As cinco colunas ---------- */
.v-troca__painel {
  display: grid;
  /* 25 set 2026: a 5ª coluna (perguntas livres, frases de ~90 caracteres)
     ganha um pouco mais de largura que as outras. */
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.2fr) minmax(0, 1.3fr);
  gap: var(--space-5);
  align-items: start;
}

.v-troca__coluna { min-width: 0; }   /* item de grade: sem isto o texto comprido empurra a coluna e vaza por cima da vizinha */
.v-troca__coluna.is-vazia { visibility: hidden; }

.v-troca__rotulo {
  display: block;
  font-family: var(--font-mono); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-subtle);
  margin-bottom: var(--space-3);
}

/* Janela (reescrita em 25 set 2026, pedido do Sr. Felipe): mostra o item atual
   inteiro e, esmaecidos, o anterior (em cima) e o seguinte (embaixo), em TODAS
   as colunas. A altura é medida pelo troca.js (item mais alto da lista + um
   respiro de cada lado) e, em tela larga, é a MESMA nas cinco colunas: assim o
   item atual de todas fica centrado na mesma linha horizontal. Os itens têm a
   altura do próprio texto; o JS centra o atual medindo a posição real dele. */
.v-troca__janela {
  position: relative;
  height: var(--janela-h, 6em);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--janela-espia, 1em), #000 calc(100% - var(--janela-espia, 1em)), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 var(--janela-espia, 1em), #000 calc(100% - var(--janela-espia, 1em)), transparent 100%);
}
.v-troca__pista {
  position: absolute; inset: 0 0 auto 0;
  will-change: transform;
}
.v-troca__item {
  width: 100%; min-width: 0;
  display: block;
  line-height: 1.2;
  padding-block: 0.18em;
  white-space: normal;
  text-wrap: balance;
}

/* Tamanhos e cor por papel. --k escala tudo (1 no site, maior no modo palestra). */
.v-troca { --k: 1; }
.v-troca__coluna .v-troca__item {
  font-family: var(--font-display); font-weight: 500;
  font-size: calc(clamp(1.05rem, 0.45rem + 1.15vw, 1.5rem) * var(--k));
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
.v-troca__coluna--acento .v-troca__item { color: var(--accent); }
.v-troca__coluna--pergunta .v-troca__item {
  font-style: italic; font-weight: 400;
  font-size: calc(clamp(0.9rem, 0.65rem + 0.6vw, 1.1rem) * var(--k));
  letter-spacing: 0;
  color: var(--fg-muted);
  text-wrap: pretty;
}
/* 5ª coluna: perguntas livres (mesmo corpo de "você pergunta", sem itálico,
   para separar a pergunta pronta da pergunta que o usuário mesmo faz) */
.v-troca__coluna--livre .v-troca__item { font-style: normal; color: var(--fg); }

/* Coluna final, parada (fora de uso desde 25 set 2026; fica para referência): mesmo ritmo vertical das outras, sem lista */
.v-troca__coluna--fixa .v-troca__fixo {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(1.1rem, 0.75rem + 1.1vw, 1.5rem);
  line-height: 1.2;
  color: var(--fg-subtle);
  margin: 0;
}

/* ---------- Controles ---------- */
.v-troca__controles { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-top: var(--space-6); }
.v-troca__controles .v-btn { min-height: 44px; }

/* ---------- Hero (26 set 2026) ----------
   Só a marca e a linha "inteligência editorial". A vitrine vem logo abaixo, ainda
   na primeira tela; por isso o hero é baixo e a seção da vitrine perde o respiro de cima. */
.v-abertura { padding-block: clamp(var(--space-7), 8vh, var(--space-9)) var(--space-5); }
.v-abertura__titulo { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.v-abertura__marca {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(4rem, 1.5rem + 9vw, 10rem);
  line-height: 0.9; letter-spacing: -0.045em;
  color: var(--fg);
}
.v-abertura__tag {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(1.25rem, 0.9rem + 1.3vw, 2.1rem);
  line-height: 1.2; letter-spacing: -0.01em;
  color: var(--fg-muted);
}
.v-abertura + .v-troca { padding-top: var(--space-6); }

/* Assinatura no canto, só no modo palestra */
.v-troca__marca-palco { display: none; }
.v-troca.is-palco .v-troca__marca-palco {
  display: block; position: fixed; left: clamp(2rem, 5vw, 6rem); top: clamp(1.5rem, 4vh, 3rem); margin: 0;
  font-family: var(--font-display); font-style: italic; font-size: clamp(1rem, 0.6rem + 0.8vw, 1.5rem); color: var(--fg-muted);
}
.v-troca.is-palco .v-troca__marca-palco span { font-style: normal; color: var(--fg); letter-spacing: -0.02em; margin-right: 0.4em; }

/* Botão "Ver a lista completa": texto sublinhado, separado dos controles de rolagem */
.v-troca__ver-tudo {
  margin-left: auto; background: none; border: 0; padding: var(--space-2) 0; cursor: pointer;
  font-family: var(--font-text); font-size: var(--text-sm); color: var(--fg);
  text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 0.3em; text-decoration-thickness: 1px;
  transition: color var(--dur-fast) ease;
}
.v-troca__ver-tudo:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
@media (hover: hover) and (pointer: fine) { .v-troca__ver-tudo:hover { color: var(--accent); } }

/* ---------- Lista completa: painel lateral (dialog) ---------- */
.v-lista {
  position: fixed; inset: 0 0 0 auto; margin: 0;
  width: min(640px, 100vw); height: 100dvh; max-height: 100dvh; max-width: 100vw;
  padding: 0; border: 0; border-left: var(--border-w) solid var(--line);
  background: var(--bg); color: var(--fg);
  box-shadow: var(--shadow-lg);
  display: none; flex-direction: column;
}
.v-lista[open] { display: flex; animation: v-lista-entra 260ms var(--ease-out); }
@keyframes v-lista-entra { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.v-lista::backdrop { background: rgba(20, 19, 17, 0.35); }
.v-lista__topo {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-5) var(--space-6); border-bottom: var(--border-w) solid var(--line);
}
.v-lista__topo h2 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: var(--text-2xl); letter-spacing: var(--tracking-tight); }
.v-lista__fechar { background: none; border: 0; font-size: 1.75rem; line-height: 1; cursor: pointer; color: var(--fg-muted); padding: var(--space-2); }
.v-lista__corpo { overflow-y: auto; padding: var(--space-4) var(--space-6) var(--space-8); }
.v-lista__secao { padding-block: var(--space-5); border-bottom: var(--border-w) solid var(--line); }
.v-lista__secao:last-child { border-bottom: 0; }
.v-lista__rotulo {
  margin: 0 0 var(--space-4);
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-subtle);
}
.v-lista dl { margin: 0; display: grid; gap: var(--space-3); }
.v-lista__par { display: grid; grid-template-columns: minmax(8rem, 13rem) 1fr; gap: var(--space-4); }
.v-lista dt { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.3; }
.v-lista dd { margin: 0; color: var(--fg-muted); font-size: var(--text-sm); line-height: 1.5; padding-top: 0.15em; }
.v-lista__ferramenta { border-top: var(--border-w) solid var(--line); }
.v-lista__ferramenta:first-of-type { border-top: 0; }
.v-lista__ferramenta summary {
  list-style: none; cursor: pointer; padding-block: var(--space-4);
  display: grid; gap: var(--space-1);
}
.v-lista__ferramenta summary::-webkit-details-marker { display: none; }
.v-lista__nome { font-family: var(--font-display); font-size: var(--text-xl); color: var(--accent); letter-spacing: var(--tracking-tight); }
.v-lista__nome::after { content: " +"; color: var(--fg-subtle); font-family: var(--font-mono); font-size: var(--text-sm); }
.v-lista__ferramenta[open] .v-lista__nome::after { content: " −"; }
.v-lista__desc { color: var(--fg-muted); font-size: var(--text-sm); line-height: 1.5; }
.v-lista__saidas { padding: 0 0 var(--space-5) var(--space-4); border-left: 1px solid var(--accent-soft); margin-left: 2px !important; }
.v-lista__saidas dt { font-size: var(--text-base); }
.v-lista__nota { margin: 0; color: var(--fg-muted); font-size: var(--text-base); }
@media (max-width: 560px) {
  .v-lista__par { grid-template-columns: 1fr; gap: var(--space-1); }
  .v-lista__topo, .v-lista__corpo { padding-inline: var(--space-4); }
}

/* ---------- Telas estreitas: colunas empilham em duas linhas de duas + a frase parada ---------- */
@media (max-width: 900px) {
  .v-troca__painel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }
  .v-troca__coluna--pergunta { grid-column: 1 / -1; }
  .v-troca__coluna--fixa { grid-column: 1 / -1; }
  .v-troca__coluna--fixa .v-troca__fixo { text-align: center; }
}

/* ---------- Modo palestra (25 set 2026) ----------
   Para deixar a vitrine rodando no fundo de uma palestra: ocupa a tela toda,
   letra maior, sem botões nem lista completa, cursor some parado. Entra pelo
   botão "Modo palestra" (tela cheia) ou abrindo a página com ?palco=1. */
.v-troca.is-palco {
  position: fixed; inset: 0; z-index: 50;
  background: var(--bg);
  display: flex; align-items: center;
  padding: 0;
  --k: 1.45;
}
.v-troca.is-palco .v-container { width: 100%; max-width: none; padding-inline: clamp(2rem, 5vw, 6rem); }
.v-troca.is-palco .v-troca__rotulo { font-size: calc(var(--text-xs) * 1.3); }
.v-troca.is-palco .v-troca__controles { position: fixed; right: 1.5rem; bottom: 1.25rem; margin: 0; opacity: 0; transition: opacity 400ms ease; }
.v-troca.is-palco .v-troca__controles:hover,
.v-troca.is-palco .v-troca__controles:focus-within { opacity: 1; }
.v-troca.is-palco.is-cursor-parado { cursor: none; }
body.tem-palco .v-abertura { display: none; }
.v-troca.is-palco .v-troca__ver-tudo { display: none; }

/* ---------- Movimento reduzido: sem rolagem sozinha; Anterior/Próxima trocam na hora ---------- */
@media (prefers-reduced-motion: reduce) {
  .v-troca__pista { transition: none !important; }
}