/* TALKS na marca do site (28/10/2026).
   Carrega por último, depois de brand/marca.css e de talks/talks.css. O
   talks.css continua porque guarda a mecânica da prévia do PDF e do NPS
   (has-image, has-canvas, no-file, locked, done...); aqui ele é só
   remapeado para os papéis da marca e redesenhado. Nada de id ou classe
   usada pelos scripts muda. Ver brand/PADRAO.md. */

/* ---------- Papéis: o talks.css redefine --bg, --accent e --line; voltam à marca ---------- */
:root {
  --bg: var(--gz-bg); --bg-soft: var(--gz-surface); --bg-ink: var(--gz-bloco);
  --ink: var(--gz-text); --ink-2: var(--gz-body); --ink-3: var(--gz-muted);
  --line: var(--gz-line); --line-ink: var(--gz-line-2);
  --accent: var(--gz-accent); --accent-hover: var(--gz-accent-texto);
  --radius: 14px; --radius-lg: 24px; --ff: var(--sans);
}
html, body { background: var(--bg); color: var(--text); font-family: var(--sans); font-feature-settings: normal; }
body { font-size: 18px; line-height: 1.6; }
a:hover { text-decoration: none; }
.wrap { width: var(--gz-largura); max-width: none; margin-inline: auto; padding: 0; }
main.section { padding: 0 0 var(--gz-respiro); }
.gz-topo a:hover, .gz-rodape a:hover, .gz-menu a:hover { text-decoration: none; }
/* O talks.css pinta todo <footer> de preto; o rodapé da marca volta ao papel. */
footer.gz-rodape { padding: 0; border: 0; background: none; color: var(--muted); }

/* ---------- Página do evento: abertura com o passo a passo ao lado ---------- */
.tk-abre { padding-block: clamp(36px, 5vw, 64px) clamp(32px, 4vw, 52px); }
/* O laranja fica num invólucro atrás do cartão (dentro de um elemento girado,
   o ::before com z-index negativo ficaria por cima do fundo escuro). */
.tk-passos-fundo { position: relative; width: 100%; max-width: 480px; margin-left: auto; }
.tk-passos-fundo::before { content: ''; position: absolute; inset: 18px -14px -14px 18px; border-radius: 28px; background: var(--accent); transform: rotate(-4deg); }
.tk-passos { position: relative; display: grid; gap: 4px; width: 100%; max-width: 480px; margin: 0 0 0 auto; padding: 26px 26px 22px; list-style: none; border-radius: 26px; background: var(--bloco); color: var(--sobre-bloco); transform: rotate(1.5deg); box-shadow: 0 30px 60px -34px var(--sombra); }
[data-tema="escuro"] .tk-passos { border: 1px solid var(--line-2); }
.tk-passos ol { margin: 0; padding: 0; list-style: none; }
.tk-passos-titulo { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.tk-passos-titulo::before { content: ''; width: 10px; height: 17px; background: var(--accent); clip-path: var(--raio); }
.tk-passos li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid rgb(255 255 255 / 12%); }
.tk-passos li b { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: var(--sobre-acc); font-family: var(--display); font-weight: 800; font-size: 19px; }
.tk-passos li span { font-size: 15px; line-height: 1.45; color: var(--sobre-bloco-2); }
.tk-passos li strong { display: block; font-family: var(--display); font-weight: 750; font-stretch: 92%; font-size: 19px; letter-spacing: -.01em; color: var(--sobre-bloco); }

/* ---------- Material (prévia do PDF) ---------- */
/* Colunas que encolhem de verdade: sem minmax(0, ...) a prévia empurrava a grade para fora no celular. */
.doc-grid > * { min-width: 0; }
.doc-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 48px); padding-top: clamp(24px, 3vw, 36px); border-top: 2px solid var(--text); }
.doc-preview { margin-top: 0; border: 8px solid var(--cartao); border-radius: 26px; background: var(--surface); box-shadow: 0 30px 60px -36px var(--sombra); }
.doc-preview iframe, .doc-canvas { background: var(--cartao); }
.doc-img, .doc-canvas { border-radius: 18px; }
.doc-img-link::after { background: var(--bloco); color: var(--sobre-bloco); font-family: var(--sans); }
.doc-preview-fallback, .doc-preview-loading { color: var(--muted); }
.doc-preview-fallback svg { color: var(--accent-texto); }
.doc-spin { border-color: var(--line-2); border-top-color: var(--accent); }
.doc-actions { gap: 12px; margin-top: 22px; }
.doc-btn { min-height: 52px; padding: 14px 26px; border-radius: 999px; font: 700 15px/1.2 var(--sans); }
.doc-btn-primary { background: var(--accent); color: var(--sobre-acc); }
.doc-btn-primary:hover { background: var(--text); color: var(--bg); transform: none; }
.doc-btn-ghost { border: 1px solid var(--line-2); background: transparent; color: var(--text); }
.doc-btn-ghost:hover { border-color: var(--text); color: var(--text); transform: none; }
.doc-size { color: var(--muted); }
/* Avisos abaixo da prévia: trava antes do NPS e material que ainda vem. */
.tk-aviso { align-items: center; gap: 14px; margin-top: 18px; padding: 16px 20px; border-radius: 18px; font-size: 15px; line-height: 1.5; font-weight: 600; }
.tk-aviso svg { flex: none; width: 24px; height: 24px; }
.tk-aviso.trava { border: 1.5px dashed var(--accent); background: var(--cartao); color: var(--text); }
.tk-aviso.trava svg { color: var(--accent-texto); }
.tk-aviso.breve { border: 1px solid var(--line-2); background: var(--surface); color: var(--muted); }

/* ---------- NPS ---------- */
.nps-card { top: 120px; padding: clamp(24px, 3vw, 34px); border: 1px solid var(--line); border-radius: 26px; background: var(--cartao); box-shadow: 0 30px 60px -40px var(--sombra); }
.nps-title { font-family: var(--display); font-weight: 800; font-stretch: 88%; font-size: 30px; line-height: 1; letter-spacing: -.03em; }
.nps-title::before { content: ''; display: block; width: 12px; height: 20px; margin-bottom: 14px; background: var(--accent); clip-path: var(--raio); }
.nps-sub { margin-top: 10px; font-size: 15px; color: var(--body); }
.nps-q { margin: 22px 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.nps-scale { grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 6px; }
.nps-pill { border: 1px solid var(--line-2); border-radius: 12px; background: var(--bg); color: var(--text); font-family: var(--display); font-weight: 800; font-size: 16px; }
.nps-pill:hover { border-color: var(--accent); color: var(--accent-texto); }
.nps-pill.selected { border-color: var(--accent); background: var(--accent); color: var(--sobre-acc); }
.nps-scale-labels { font-size: 12px; color: var(--muted); }
.nps-feedback { border: 1px solid var(--line-2); border-radius: 16px; background: var(--bg); color: var(--text); font-size: 16px; }
.nps-feedback:focus { border-color: var(--accent); }
.nps-send { min-height: 54px; border-radius: 999px; background: var(--text); color: var(--bg); font: 700 16px/1.2 var(--sans); }
.nps-send:hover:not(:disabled) { background: var(--accent); color: var(--sobre-acc); transform: none; }
.nps-msg.err { color: var(--erro); }
.nps-msg.ok, .nps-success svg { color: #1f9d55; }
.nps-success h3 { font-family: var(--display); font-weight: 800; font-stretch: 88%; font-size: 28px; letter-spacing: -.03em; }
.nps-success p { color: var(--body); }
.nps-toast { border: 1px solid var(--line); border-left: 0; border-radius: 18px; background: var(--cartao); color: var(--text); box-shadow: 0 24px 50px -20px var(--sombra); }
.nps-toast b { color: var(--accent-texto); }
@keyframes npsPulse { 0%, 100% { box-shadow: 0 0 0 0 rgb(255 106 31 / 0%); } 35% { box-shadow: 0 0 0 8px rgb(255 106 31 / 35%); } }

/* ---------- Vitrine (/talks/) ---------- */
.tk-busca { display: flex; align-items: center; gap: 12px; max-width: 560px; min-height: 58px; margin-top: 30px; padding: 0 22px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--cartao); transition: border-color .18s, box-shadow .18s; }
.tk-busca:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgb(255 106 31 / 18%); }
.tk-busca svg { flex: none; width: 19px; height: 19px; color: var(--muted); }
.tk-busca input { flex: 1; min-width: 0; padding: 16px 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 16px; }
.tk-busca input::placeholder { color: var(--muted); }

/* Pilha da abertura: ingressos de eventos e a nota das plateias. */
.tk-ingresso { padding: 20px 22px 22px; }
.tk-ingresso small { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-texto); }
.tk-ingresso small::before { content: ''; width: 8px; height: 14px; background: var(--accent); clip-path: var(--raio); }
.tk-ingresso b { display: block; margin: 10px 0 12px; font-family: var(--display); font-weight: 800; font-stretch: 88%; font-size: clamp(22px, 2.2vw, 30px); line-height: 1; letter-spacing: -.03em; }
.tk-ingresso span { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px dashed var(--line-2); font-size: 13px; color: var(--muted); }
.tk-ingresso span svg { width: 15px; height: 15px; }
.gz-pilha > .tk-nota { background: var(--bloco); color: var(--sobre-bloco); }
.tk-nota { padding: 20px 22px; }
.tk-nota small { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.tk-nota b { display: block; margin-top: 6px; font-family: var(--display); font-weight: 800; font-stretch: 84%; font-size: 64px; line-height: .9; letter-spacing: -.04em; color: var(--accent); }
.tk-nota span { display: block; margin-top: 8px; font-size: 14px; color: var(--sobre-bloco-2); }

.tk-eventos { padding-top: clamp(16px, 2vw, 28px); scroll-margin-top: 120px; }
.tk-eventos .secao { margin-bottom: 26px; }
.tk-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tk-card { position: relative; display: flex; flex-direction: column; min-height: 168px; padding: 20px 20px 18px; border: 1px solid var(--line-2); border-radius: 22px; background: var(--cartao); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color .2s, transform .35s var(--sai), box-shadow .35s var(--sai); }
.tk-card:hover, .tk-card:focus-visible { border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 24px 40px -26px var(--sombra); }
.tk-card .tk-card-rotulo { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tk-card .tk-card-rotulo svg { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--surface); color: var(--muted); transition: background-color .2s, color .2s; }
.tk-card:hover .tk-card-rotulo svg { background: var(--accent); color: var(--sobre-acc); }
.tk-card .nm { margin-top: auto; padding-top: 22px; font-family: var(--display); font-weight: 800; font-stretch: 88%; font-size: 22px; line-height: 1.04; letter-spacing: -.02em; overflow-wrap: anywhere; }
.tk-card .st { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--accent-texto); }
.tk-empty { padding: 30px 0; color: var(--muted); font-size: 16px; text-align: center; }
.tk-pager { display: flex; justify-content: center; gap: 8px; margin-top: 26px; }
.tk-pager button { min-width: 42px; height: 42px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 999px; background: transparent; color: var(--text); font: 700 14px/1 var(--sans); cursor: pointer; }
.tk-pager button:hover { border-color: var(--text); }
.tk-pager button.on { border-color: var(--accent); background: var(--accent); color: var(--sobre-acc); }
.tk-pager button:disabled { opacity: .35; cursor: default; }

/* Pedido final, no bloco escuro. */
.tk-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: center; margin-top: var(--gz-respiro); padding: clamp(28px, 4vw, 52px); border-radius: 32px; background: var(--bloco); color: var(--sobre-bloco); }
[data-tema="escuro"] .tk-cta { border: 1px solid var(--line-2); }
.tk-cta .t { font-family: var(--display); font-weight: 800; font-stretch: 86%; font-size: clamp(32px, 4vw, 54px); line-height: .98; letter-spacing: -.035em; text-wrap: balance; }
.tk-cta .s { max-width: 56ch; margin-top: 12px; font-size: 17px; color: var(--sobre-bloco-2); }
.tk-cta .s b { color: var(--accent); }
.tk-cta .acts { display: flex; flex-wrap: wrap; gap: 10px; }
.tk-cta .acts a { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 14px 24px; border-radius: 999px; font-weight: 700; white-space: nowrap; transition: background-color .18s, color .18s, border-color .18s; }
.tk-cta .dark { background: var(--accent); color: var(--sobre-acc); }
.tk-cta .dark:hover { background: var(--sobre-bloco); color: var(--bloco); }
.tk-cta .ghost { border: 1px solid rgb(255 255 255 / 30%); color: var(--sobre-bloco); }
.tk-cta .ghost:hover { border-color: var(--sobre-bloco); }

/* Senha do evento: o mesmo desenho dos popups do site. */
.tk-ovl { position: fixed; inset: 0; z-index: 120; display: none; align-items: center; justify-content: center; padding: 20px; background: rgb(18 16 13 / 70%); }
.tk-ovl.open { display: flex; }
.tk-modal { position: relative; width: min(460px, 100%); padding: 30px 30px 24px; border-radius: 26px; background: var(--cartao); color: var(--text); box-shadow: 0 30px 80px -24px var(--sombra); }
.tk-modal .gz-logo { display: block; width: 74px; height: 50px; margin-bottom: 16px; }
.tk-modal .kick { display: flex; align-items: center; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-texto); }
.tk-modal .kick::before { content: ''; width: 10px; height: 17px; background: var(--accent); clip-path: var(--raio); }
.tk-modal .nm { margin: 10px 0 6px; font-family: var(--display); font-weight: 800; font-stretch: 88%; font-size: 32px; line-height: 1; letter-spacing: -.03em; }
.tk-modal .dt { margin-bottom: 18px; font-size: 15px; color: var(--body); }
.tk-modal form { display: flex; gap: 8px; }
.tk-modal input { flex: 1; min-width: 0; min-height: 52px; padding: 12px 18px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--bg); color: var(--text); font: inherit; font-size: 16px; }
.tk-modal input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 4px rgb(255 106 31 / 18%); }
.tk-btn { min-height: 52px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--accent); color: var(--sobre-acc); font: 700 15px/1 var(--sans); cursor: pointer; white-space: nowrap; }
.tk-btn:hover { background: var(--text); color: var(--bg); }
.tk-erro { display: none; margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--erro); }
.tk-erro.show { display: block; }
.tk-fechar { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--surface); color: var(--text); font-size: 24px; line-height: 1; cursor: pointer; }

@media (max-width: 1000px) {
  .tk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tk-cta { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .doc-grid { grid-template-columns: minmax(0, 1fr); }
  /* No celular o passo a passo vira uma linha só, para o NPS ficar perto. */
  .tk-passos { max-width: none; transform: none; padding: 18px 20px; }
  .tk-passos-fundo { max-width: none; }
  .tk-passos-fundo::before { display: none; }
  .nps-card { top: auto; }
}
@media (max-width: 700px) {
  /* Quem chega do palco quer achar o evento: no celular a busca encosta na lista. */
  .tk-vitrine-abre .gz-abre-visual { display: none; }
  .tk-vitrine-abre { padding-bottom: 28px; }
  .tk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .tk-card { min-height: 140px; padding: 16px; border-radius: 18px; }
  .tk-card .nm { font-size: 19px; }
  .tk-modal form { flex-direction: column; }
  .tk-cta { border-radius: 24px; }
  .tk-cta .acts a { flex: 1 1 auto; justify-content: center; }
  .nps-scale { gap: 4px; }
  .nps-pill { border-radius: 10px; font-size: 15px; }
  .doc-btn { flex: 1 1 auto; justify-content: center; }
}
/* Celular estreito: as 11 notas em duas linhas, com botão grande para o dedo. */
@media (max-width: 420px) {
  .nps-card { padding: 22px 18px; }
  .nps-scale { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
  .nps-pill { aspect-ratio: auto; min-height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  .tk-card { transition: none; }
}

/* Cartões "bagunçadinhos", como os estudos da Prospectiva (Gui, 30/10/2026:
   "meio bagunçadinho, acho legal, leve"): cada cartão com uma inclinação e
   um deslocamento próprios, que somem quando o mouse passa. */
.tk-grid { gap: 18px; padding-block: 6px; }
.tk-card { transition: rotate .45s cubic-bezier(.34, 1.56, .64, 1), translate .45s cubic-bezier(.34, 1.56, .64, 1), transform .3s, border-color .2s, box-shadow .3s; }
.tk-card:nth-child(7n+1) { rotate: -1.1deg; translate: 0 2px; }
.tk-card:nth-child(7n+2) { rotate: .8deg; translate: 0 10px; }
.tk-card:nth-child(7n+3) { rotate: -.5deg; translate: 0 -3px; }
.tk-card:nth-child(7n+4) { rotate: 1.2deg; translate: 0 6px; }
.tk-card:nth-child(7n+5) { rotate: -.8deg; translate: 0 12px; }
.tk-card:nth-child(7n+6) { rotate: .5deg; translate: 0 0; }
.tk-card:nth-child(7n+7) { rotate: -1.3deg; translate: 0 8px; }
.tk-card:hover, .tk-card:focus-visible { rotate: 0deg; translate: 0 0; }
@media (max-width: 700px) { .tk-card:nth-child(n) { translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .tk-card:nth-child(n) { rotate: none; translate: none; } }