/* Páginas institucionais na marca: /sobre/, /palestras/, /livros/ e
   /perguntas-frequentes/ (28/10/2026). Entra depois de marca.css e site.css,
   que já trazem a abertura (.gz-abre), as palestras (.talks), os livros
   (.livros), os depoimentos (.depos) e o rodapé completo (.rodape). Aqui só o
   que essas quatro páginas têm a mais. Gerador: tools/paginas/montar.py. */

/* Pergunta de um lado, resposta do outro. O título fica com a pergunta inteira,
   como está no schema (é o que os buscadores e as IAs citam). */
.pg-linhas { margin-top: var(--gz-respiro); border-top: 2px solid var(--text); }
.pg-linha { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 24px 64px; padding-block: 40px; border-bottom: 1px solid var(--line-2); }
.pg-linha h2 { font-family: var(--display); font-weight: 800; font-stretch: 88%; font-size: clamp(28px, 2.9vw, 40px); line-height: 1; letter-spacing: -.03em; text-wrap: balance; color: var(--text); }
.pg-linha p { max-width: 60ch; font-size: 18px; line-height: 1.65; color: var(--body); text-wrap: pretty; }
.pg-linha p + p, .pg-linha p + ul, .pg-linha h3 + ul { margin-top: 14px; }
.pg-linha p a { color: var(--accent-texto); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.pg-linha h3 { margin-top: 26px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-texto); }
.pg-linha ul { display: grid; gap: 10px; }
.pg-linha li { position: relative; padding-left: 24px; font-size: 17px; color: var(--body); }
.pg-linha li::before { content: ''; position: absolute; left: 0; top: .3em; width: 10px; height: 17px; background: var(--accent); clip-path: var(--raio); }
.pg-linha .credencial { margin-top: 24px; }
/* Sobre (Gui, 30/10/2026): a pergunta da esquerda deixava um vão grande
   embaixo dela. Fica maior, em umas três linhas, encostada à direita da
   coluna (perto do texto) e acompanhando a leitura. */
.pg-linhas-grandes .pg-linha h2 { align-self: start; position: sticky; top: 110px; max-width: 10ch; margin-left: auto; font-size: clamp(38px, 4.4vw, 64px); line-height: .94; text-align: right; }
@media (max-width: 900px) { .pg-linhas-grandes .pg-linha h2 { position: static; max-width: none; margin-left: 0; text-align: left; font-size: clamp(32px, 8vw, 44px); } }

/* Bloco escuro com duas ideias lado a lado (a prova da página). */
.pg-escuro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 56px; margin-top: var(--gz-respiro); padding: clamp(32px, 5vw, 56px); border-radius: 34px; background: var(--bloco); color: var(--sobre-bloco); }
.pg-escuro .rotulo { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.pg-escuro h2 { margin: 14px 0 18px; font-family: var(--display); font-weight: 800; font-stretch: 86%; font-size: clamp(30px, 3.2vw, 46px); line-height: .96; letter-spacing: -.035em; text-wrap: balance; }
.pg-escuro p { max-width: 46ch; font-size: 17px; line-height: 1.65; color: var(--sobre-bloco-2); }
.pg-escuro > div + div { padding-left: 56px; border-left: 1px solid rgb(243 238 229 / 18%); }

/* O pedido final: o bloco laranja, um por página. */
.pg-pedido { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 28px 56px; align-items: end; margin-top: var(--gz-respiro); padding: clamp(32px, 5vw, 56px); border-radius: 34px; background: var(--accent); color: var(--sobre-acc); }
.pg-pedido h2 { font-family: var(--display); font-weight: 800; font-stretch: 86%; font-size: clamp(40px, 5vw, 70px); line-height: .92; letter-spacing: -.04em; text-wrap: balance; }
.pg-pedido p { max-width: 44ch; font-size: 18px; line-height: 1.55; }
.pg-pedido .acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.pg-pedido .button { border-color: var(--sobre-acc); background: var(--sobre-acc); color: var(--accent); }
.pg-pedido .button:hover { border-color: var(--sobre-acc); background: transparent; color: var(--sobre-acc); }
.pg-pedido .button.outline { background: transparent; color: var(--sobre-acc); }
.pg-pedido .button.outline:hover { background: var(--sobre-acc); color: var(--accent); }

/* Título de seção com texto ao lado, quando a pergunta é o título. */
.pg-sec { margin-top: var(--gz-respiro); }
.pg-sec .titulo-sec h2 { max-width: 18ch; }

/* Abertura dos livros: as duas capas de pé sobre o bloco laranja (a pilha
   padrão corta tudo em 1200 x 630, o que serve para foto e não para capa). */
.pg-capas { position: relative; width: 100%; max-width: 520px; aspect-ratio: 6 / 5; margin-left: auto; }
.pg-capas::before { content: ''; position: absolute; inset: 14% 4% 4% 10%; border-radius: 32px; background: var(--accent); transform: rotate(calc(4deg * var(--giro))); transition: transform .6s var(--sai); }
.pg-capas img { position: absolute; width: 44%; height: auto; border-radius: 8px; box-shadow: 0 34px 60px -30px var(--sombra); transition: transform .6s var(--sai); }
.pg-capas img:nth-child(1) { left: 6%; top: 4%; z-index: 2; transform: rotate(calc(-6deg * var(--giro))); }
.pg-capas img:nth-child(2) { right: 4%; top: 12%; width: 40%; transform: rotate(calc(5deg * var(--giro))); }
@media (hover: hover) and (pointer: fine) {
  .gz-abre:hover .pg-capas::before { transform: rotate(calc(6deg * var(--giro))) scale(1.03); }
  .gz-abre:hover .pg-capas img:nth-child(1) { transform: rotate(-9deg) translate(-10px, -6px); }
  .gz-abre:hover .pg-capas img:nth-child(2) { transform: rotate(calc(8deg * var(--giro))) translate(10px, -8px); }
}

/* Abertura do /sobre/: o retrato da home (.retrato), com a altura contida.
   A foto em 4:5 ficava mais alta que o texto e deixava um vão embaixo dos
   botões (Gui, 29/10/2026): foto um pouco menor e mais baixa, texto
   centrado na altura dela e menos respiro antes da primeira seção. */
.gz-abre:has(.pg-retrato) { align-items: center; padding-bottom: clamp(36px, 4vw, 56px); }
.pg-retrato { width: min(100%, 470px); margin: 0 40px 0 auto; }
.pg-retrato > img { aspect-ratio: 4 / 5; }
/* Retrato em rodízio, como na home (Gui, 30/10/2026: "muito gap vazio, gire
   minhas imagens"): foto maior, a nova entra por cima saindo do desfoque e o
   card de trás troca de cor. O script fica no tools/paginas/sobre.html. */
.pg-retrato::before { background: var(--card-giro, var(--accent)); transition: background-color .6s var(--sai), transform .5s cubic-bezier(.2, .7, .2, 1); }
.pg-retrato > img.entra { position: absolute; top: 0; left: 0; opacity: 0; filter: blur(14px) saturate(1.3); scale: 1.03; transition: transform .5s cubic-bezier(.2, .7, .2, 1), opacity .5s ease, filter .5s ease, scale .6s var(--sai); }
.pg-retrato > img.entra.dentro { opacity: 1; filter: none; scale: 1; }
/* Abertura do Sobre mais viva (Gui, 30/10/2026): três selos flutuando, como na home. */
.pg-retrato .sb1 { --gira: -4deg; --entra: .4s; --prof: 22px; left: -42%; top: 10%; }
.pg-retrato .sb2 { --gira: 5deg; --entra: 1s; --boia: 6s; --prof: 30px; right: -10%; top: -5%; background: var(--accent); color: var(--sobre-acc); }
.pg-retrato .sb2 i { background: var(--sobre-acc); }
.pg-retrato .sb3 { --gira: -3deg; --entra: 1.6s; --boia: 8s; --prof: 16px; right: -14%; bottom: 14%; background: var(--violeta); color: #fff; }
.pg-retrato .sb3 i { background: #fff; }
.pg-fatos li { font-size: 15px; }
.pg-fatos b { font-family: var(--display); font-weight: 800; font-stretch: 90%; font-size: 18px; letter-spacing: -.01em; }
@media (max-width: 900px) {
  .pg-retrato .sb1 { left: -6%; top: 4%; }
  .pg-retrato .sb3 { right: -4%; }
  .pg-retrato .sb2 { right: -2%; }
}
.gz-abre:has(.pg-retrato) + .pg-linhas { margin-top: 0; }

/* Palestras sem link para página própria (as páginas de cada uma estão sendo
   repensadas): a capa é só imagem e o cartão não sobe ao passar o mouse. */
.talk .capa { cursor: default; }
.talks.sem-link .talk:hover { transform: none; }

@media (max-width: 900px) {
  .pg-linha, .pg-escuro, .pg-pedido { grid-template-columns: minmax(0, 1fr); }
  .pg-linha { padding-block: 32px; }
  .pg-escuro > div + div { padding: 32px 0 0; border-left: 0; border-top: 1px solid rgb(243 238 229 / 18%); }
  .pg-pedido { align-items: start; }
  .pg-capas { max-width: 420px; margin-inline: auto; }
  /* O fundo laranja do retrato passa 6% da foto: com 86% ele cabe na tela. */
  .pg-retrato { width: min(86%, 420px); margin-inline: auto; }
}
@media (max-width: 480px) {
  .pg-linha p { font-size: 17px; }
  .pg-escuro, .pg-pedido { border-radius: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .pg-capas::before, .pg-capas img { transition: none; }
}

/* /sobre/: a ANTI/HYPE, a empresa que o Gui fundou com o Gus. Cartão claro,
   e o visual na cor da marca dela (o fundo fluido laranja e roxo do logo),
   com as telas reais do portal e da Academia. */
.pg-ah { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 64px; align-items: center; margin-top: var(--gz-respiro); padding: clamp(28px, 5vw, 56px); border-radius: 34px; background: var(--cartao); box-shadow: 0 30px 60px -44px var(--sombra); }
.pg-ah-rotulo { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-texto); }
.pg-ah-rotulo img { width: 34px; height: 34px; border-radius: 9px; }
.pg-ah h2 { margin: 18px 0 10px; font-family: var(--display); font-weight: 800; font-stretch: 86%; font-size: clamp(40px, 4.6vw, 64px); line-height: .94; letter-spacing: -.04em; text-wrap: balance; color: var(--text); }
.pg-ah-lema { margin-bottom: 22px; font-family: var(--display); font-weight: 750; font-stretch: 90%; font-size: clamp(20px, 2vw, 26px); line-height: 1.15; letter-spacing: -.02em; background: linear-gradient(90deg, #ff6a1f, #e2366f 55%, #6b3df0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pg-ah-texto > p:not([class]) { max-width: 54ch; margin-top: 14px; font-size: 17px; line-height: 1.65; color: var(--body); }
.pg-ah-dois { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 22px; }
.pg-ah-dois li { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border: 1px solid var(--line-2); border-radius: 18px; }
.pg-ah-dois b { font-family: var(--display); font-weight: 800; font-stretch: 90%; font-size: 20px; letter-spacing: -.02em; color: var(--text); }
.pg-ah-dois span { font-size: 15px; line-height: 1.5; color: var(--body); }
.pg-ah-fecho { margin-top: 22px; font-family: var(--display); font-weight: 750; font-stretch: 92%; font-size: 21px; line-height: 1.25; letter-spacing: -.015em; color: var(--text); }
.pg-ah .acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
/* ANTI/HYPE no Sobre (Gui, 30/10/2026: "muito gap"): texto e imagem lado a
   lado na mesma altura; portal, Academia, fecho e botões descem para uma
   faixa de ponta a ponta embaixo. */
.pg-ah-base { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.45fr); gap: 12px; align-items: stretch; }
.pg-ah-base .pg-ah-dois { display: contents; }
.pg-ah-dois li { justify-content: flex-start; padding: 22px 24px; }
.pg-ah-fim { display: flex; flex-direction: column; justify-content: center; padding: 22px 26px; border-radius: 18px; background: var(--bloco); color: var(--sobre-bloco); }
.pg-ah-fim .pg-ah-fecho { margin-top: 0; color: var(--sobre-bloco); }
.pg-ah-fim > p:not([class]) { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--sobre-bloco-2); }
.pg-ah-fim .acoes { flex-wrap: nowrap; gap: 10px; margin-top: 18px; }
.pg-ah-fim .button { min-height: 44px; padding: 10px 18px; font-size: 14px; white-space: nowrap; }
.pg-ah-fim .button.outline { border-color: rgb(255 255 255 / 35%); color: var(--sobre-bloco); }
.pg-ah-fim .button.outline:hover { border-color: var(--sobre-bloco); background: var(--sobre-bloco); color: var(--bloco); }
@media (max-width: 1100px) { .pg-ah-base { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .pg-ah-fim { grid-column: 1 / -1; } }
@media (max-width: 560px) { .pg-ah-base { grid-template-columns: minmax(0, 1fr); } .pg-ah-fim .acoes { flex-wrap: wrap; } }
.pg-ah-visual { position: relative; aspect-ratio: 1 / 1; max-width: 540px; width: 100%; margin-left: auto; }
.pg-ah-visual::before { content: ''; position: absolute; inset: 8% 2% 4% 8%; border-radius: 34px; background: url(/images/antihype/fundo.webp?v=1) center / cover; transform: rotate(calc(4deg * var(--giro))); transition: transform .6s var(--sai); }
.pg-ah-tela { position: absolute; width: 82%; height: auto; border: 7px solid var(--cartao); border-radius: 16px; box-shadow: 0 30px 60px -30px var(--sombra); transition: transform .6s var(--sai); }
.pg-ah-tela:nth-child(1) { left: 0; top: 12%; transform: rotate(calc(-5deg * var(--giro))); }
.pg-ah-tela:nth-child(2) { right: 0; bottom: 10%; z-index: 2; transform: rotate(calc(3deg * var(--giro))); }
.pg-ah-logo { position: absolute; right: 6%; top: 0; z-index: 3; width: 26%; height: auto; border-radius: 22%; box-shadow: 0 20px 40px -18px var(--sombra); transform: rotate(calc(8deg * var(--giro))); transition: transform .6s var(--sai); }
@media (hover: hover) and (pointer: fine) {
  .pg-ah:hover .pg-ah-visual::before { transform: rotate(calc(6deg * var(--giro))) scale(1.03); }
  .pg-ah:hover .pg-ah-tela:nth-child(1) { transform: rotate(calc(-8deg * var(--giro))) translate(-10px, -6px); }
  .pg-ah:hover .pg-ah-tela:nth-child(2) { transform: rotate(calc(5deg * var(--giro))) translate(8px, 6px); }
  .pg-ah:hover .pg-ah-logo { transform: rotate(14deg) scale(1.06); }
}
@media (max-width: 900px) {
  .pg-ah { grid-template-columns: minmax(0, 1fr); }
  .pg-ah-visual { max-width: 460px; margin-inline: auto; }
}
@media (max-width: 560px) {
  .pg-ah-dois { grid-template-columns: minmax(0, 1fr); }
  .pg-ah { border-radius: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .pg-ah-visual::before, .pg-ah-tela, .pg-ah-logo { transition: none; }
}

/* Páginas por segmento (/palestras/cooperativas/, 29/10/2026). */
/* Logos dos clientes do segmento: sempre em chip branco, para a cor da marca
   de cada um aparecer igual no claro e no escuro. */
.pg-logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 8px; }
.pg-logos li { display: grid; place-items: center; height: 108px; padding: 20px 26px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.pg-logos img { max-width: 100%; max-height: 52px; width: auto; height: auto; object-fit: contain; }
/* O número do setor, grande, com a leitura ao lado. */
.pg-numero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 32px; align-items: center; margin-bottom: 20px; padding: 26px 30px; border-radius: 26px; background: var(--bloco); color: var(--sobre-bloco); }
.pg-numero b { font-family: var(--display); font-weight: 800; font-stretch: 86%; font-size: clamp(44px, 6vw, 80px); line-height: .9; letter-spacing: -.04em; color: var(--accent); }
.pg-numero p { max-width: 60ch; font-size: 17px; line-height: 1.55; color: var(--sobre-bloco-2); }
/* Os três sinais do radar, um por círculo, com a fonte embaixo. */
.pg-sinais { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pg-sinais li { display: flex; flex-direction: column; gap: 10px; padding: 24px 24px 20px; border-radius: 24px; background: var(--cartao); box-shadow: 0 0 0 1px var(--line); }
.pg-sinais li::before { content: ''; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--accent); }
.pg-sinais li.forte::before { background: var(--accent); }
.pg-sinais li.medio::before { background: color-mix(in srgb, var(--accent) 35%, transparent); }
.pg-sinais li.fraco::before { border-style: dashed; }
.pg-sinais .kicker { font-size: 12px; }
.pg-sinais h3 { font-family: var(--display); font-weight: 800; font-stretch: 90%; font-size: 24px; line-height: 1.05; letter-spacing: -.02em; color: var(--text); text-wrap: balance; }
.pg-sinais p { font-size: 16px; line-height: 1.55; color: var(--body); }
.pg-sinais small { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.pg-sinais small a, .titulo-sec p a { color: var(--accent-texto); font-weight: 600; }
/* Linha de formato: o título é da linha, não o rótulo pequeno. */
.pg-linha.formato h3 { margin: 0; font-family: var(--display); font-weight: 800; font-stretch: 88%; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.05; letter-spacing: -.03em; text-transform: none; color: var(--text); }
.pg-sec .pg-linhas { margin-top: 0; }
@media (max-width: 900px) {
  .pg-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-sinais { grid-template-columns: minmax(0, 1fr); }
  .pg-numero { grid-template-columns: minmax(0, 1fr); }
}
/* Hub /palestras/: as páginas por segmento, como cartões de atalho. */
.pg-segmentos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; }
.pg-segmentos a { position: relative; display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 24px 56px 24px 26px; border-radius: 24px; background: var(--cartao); box-shadow: 0 0 0 1px var(--line); color: var(--body); text-decoration: none; transition: transform .3s var(--sai), box-shadow .3s; }
.pg-segmentos a:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--accent), 0 20px 40px -28px var(--sombra); }
.pg-segmentos .kicker { font-size: 11px; }
.pg-segmentos b { font-family: var(--display); font-weight: 800; font-stretch: 88%; font-size: 26px; line-height: 1; letter-spacing: -.025em; color: var(--text); }
.pg-segmentos .ic { position: absolute; top: 24px; right: 22px; width: 22px; height: 22px; color: var(--accent-texto); }
/* Galeria de fotos das páginas por segmento: cópias impressas, giro leve,
   clique abre a foto grande. */
.pg-galeria { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
/* Sem clique (pedido do Gui): o mouse em cima endireita o quadro e aproxima a
   foto dentro dele; saiu o mouse, volta. */
.pg-galeria li { overflow: hidden; border: 8px solid var(--cartao); border-radius: 18px; background: var(--cartao); box-shadow: 0 22px 40px -26px var(--sombra); transition: transform .45s var(--sai), box-shadow .45s; }
.pg-galeria li:nth-child(odd) { transform: rotate(calc(-1.2deg * var(--giro))); }
.pg-galeria li:nth-child(even) { transform: rotate(calc(1deg * var(--giro))); }
.pg-galeria img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; transition: transform .6s var(--sai); }
@media (hover: hover) and (pointer: fine) {
  .pg-galeria li:hover { z-index: 2; transform: rotate(0) scale(1.03); box-shadow: 0 30px 60px -30px var(--sombra); }
  .pg-galeria li:hover img { transform: scale(1.12); }
}
.pg-credito { margin-top: 18px; font-size: 13px; color: var(--muted); }
@media (max-width: 900px) { .pg-galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
@media (max-width: 520px) { .pg-galeria { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .pg-galeria li, .pg-galeria img { transition: none; } }
/* Números embaixo dos logos: três fatos curtos, em linha. */
.pg-numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 22px; border-block: 2px solid var(--text); }
.pg-numeros li { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px; border-left: 1px solid var(--line-2); }
.pg-numeros li:first-child { border-left: 0; padding-left: 0; }
.pg-numeros b { font-family: var(--display); font-weight: 800; font-stretch: 88%; font-size: clamp(36px, 4vw, 54px); line-height: 1; letter-spacing: -.03em; color: var(--text); }
.pg-numeros span { font-size: 15px; line-height: 1.4; color: var(--muted); }
@media (max-width: 700px) {
  .pg-numeros { grid-template-columns: minmax(0, 1fr); }
  .pg-numeros li { padding: 16px 0; border-left: 0; border-top: 1px solid var(--line-2); }
  .pg-numeros li:first-child { border-top: 0; }
}
/* Respiro das páginas por segmento (Gui, 29/10/2026): a primeira seção
   encosta mais na abertura, os números ganham ar em relação aos logos e o
   intervalo entre seções fica igual em toda a página. */
.gz-abre + .pg-sec { margin-top: clamp(8px, 2vw, 28px); }
.pg-sec { margin-top: clamp(64px, 7vw, 104px); }
.pg-sec .titulo-sec { margin-bottom: 32px; }
.pg-logos + .pg-numeros { margin-top: 40px; }
.pg-numeros li a { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 14px; font-weight: 700; color: var(--accent-texto); }
.pg-numeros li a .ic { width: 14px; height: 14px; }
/* O vídeo: capa própria (a do YouTube traz a data do evento), escurecida
   na marca onde fica o texto; o YouTube só carrega no clique. */
.pg-video { overflow: hidden; border-radius: 28px; background: var(--bloco); box-shadow: 0 30px 60px -40px var(--sombra); }
.pg-video .yt-lite { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: var(--bloco); cursor: pointer; text-align: left; }
.pg-video .yt-lite img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.pg-video .yt-lite::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bloco) 0%, var(--bloco) 44%, color-mix(in srgb, var(--bloco) 70%, transparent) 58%, transparent 78%); }
.pg-video-capa { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 14px; width: min(52%, 560px); padding: clamp(24px, 5vw, 64px); color: var(--sobre-bloco); }
.pg-video-capa .kicker { color: var(--accent); }
.pg-video-capa b { font-family: var(--display); font-weight: 800; font-stretch: 86%; font-size: clamp(30px, 4vw, 58px); line-height: .94; letter-spacing: -.035em; text-wrap: balance; }
.pg-video-acao { display: inline-flex; align-items: center; gap: 12px; margin-top: 10px; font: 700 16px/1 var(--sans); }
.pg-video-play { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--accent); color: var(--sobre-acc); transition: transform .3s var(--sai); }
.pg-video-play svg { width: 24px; height: 24px; margin-left: 3px; fill: currentColor; }
.pg-video .yt-lite:hover .pg-video-play, .pg-video .yt-lite:focus-visible .pg-video-play { transform: scale(1.1); }
.pg-video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.pg-credito a { color: var(--accent-texto); font-weight: 600; }
@media (max-width: 700px) {
  .pg-video .yt-lite { aspect-ratio: 4 / 5; }
  .pg-video .yt-lite img { object-position: 100% center; }
  .pg-video .yt-lite::before { background: linear-gradient(0deg, var(--bloco) 0%, var(--bloco) 38%, color-mix(in srgb, var(--bloco) 60%, transparent) 55%, transparent 75%); }
  .pg-video-capa { inset: auto 0 0 0; width: 100%; justify-content: flex-end; }
}
/* Camadas do vídeo: foto, escurecido, texto (sem isso a foto cobria o degradê). */
.pg-video .yt-lite img { z-index: 0; }
.pg-video .yt-lite::before { z-index: 1; }
.pg-video-capa { z-index: 2; }
/* O link de avaliações nos números leva o círculo à mão (peça .circulado do site.css). */
.pg-numeros li a.circulado { align-self: flex-start; margin: 6px 0 0 -10px; }
/* O NPS do evento do vídeo (Gui, 29/10/2026): selo grande no verde da
   Sicredi, preso no canto do quadro e por fora do vídeo. Anel de texto
   girando, flutua de leve, e confete ao passar o mouse (script na página). */
.pg-video-quadro { position: relative; }
.pg-video-selo { position: absolute; z-index: 3; top: -46px; right: -26px; width: 210px; height: 210px; border-radius: 50%; color: #fff; background: radial-gradient(circle at 32% 28%, #64c832 0%, #3fa110 45%, #146e37 100%); box-shadow: 0 24px 40px -18px rgb(20 110 55 / 65%), inset 0 0 0 6px rgb(255 255 255 / 14%); animation: selo-flutua 5s ease-in-out infinite; cursor: default; transition: scale .3s var(--sai); }
.pg-video-selo:hover { scale: 1.07; }
/* Gira só o texto, em volta do centro do círculo: girar a caixa da imagem
   fazia o canto do quadrado passar da borda da página. */
.selo-anel { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.selo-anel text { transform-box: view-box; transform-origin: 50% 50%; animation: selo-gira 22s linear infinite; }
.selo-anel text { fill: rgb(255 255 255 / 92%); font: 700 12.5px/1 var(--sans); letter-spacing: .08em; }
.selo-miolo { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.selo-miolo b { font-family: var(--display); font-weight: 800; font-stretch: 86%; font-size: 72px; line-height: .85; letter-spacing: -.04em; text-shadow: 0 4px 14px rgb(0 0 0 / 22%); }
.selo-miolo span { margin-top: 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.pg-video-selo .confete { position: absolute; left: 50%; top: 50%; width: 9px; height: 13px; margin: -6px 0 0 -4px; border-radius: 2px; pointer-events: none; animation: confete 1.1s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes confete { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--x), calc(var(--y) + 70px)) rotate(var(--r)); opacity: 0; } }
@keyframes selo-gira { to { transform: rotate(360deg); } }
@keyframes selo-flutua { 0%, 100% { transform: rotate(8deg) translateY(0); } 50% { transform: rotate(4deg) translateY(-8px); } }
@media (max-width: 1320px) { .pg-video-selo { right: 8px; } }
@media (max-width: 700px) {
  .pg-video-selo { top: -30px; right: 6px; width: 132px; height: 132px; }
  .selo-anel text { font-size: 13px; }
  .selo-miolo b { font-size: 44px; }
  .selo-miolo span { font-size: 9px; }
}
/* O confete pode voar para fora da coluna: sem rolagem lateral por causa dele. */
body:has(.pg-video-selo) { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { .pg-video-selo, .selo-anel text { animation: none; } .pg-video-selo { transform: rotate(8deg); } }

/* Palcos por formato (/palestras/congressos/, 29/10/2026): cada lugar da grade
   de um congresso com o evento real e a fonte. O primeiro, a abertura com o
   maior público, vai em destaque laranja e ocupa duas colunas. */
.pg-palcos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pg-palcos li { display: flex; flex-direction: column; gap: 10px; padding: 26px 26px 24px; border: 1px solid var(--line); border-radius: 26px; background: var(--cartao); transition: transform .4s var(--sai), border-color .2s; }
.pg-palcos li:hover { transform: translateY(-3px); border-color: var(--text); }
.pg-palcos h3 { font-family: var(--display); font-weight: 800; font-stretch: 88%; font-size: 26px; line-height: 1; letter-spacing: -.03em; }
.pg-palcos p { font-size: 15.5px; line-height: 1.5; color: var(--body); }
.pg-palco-papel { align-self: flex-start; padding: 6px 12px; border-radius: 99px; background: var(--text); color: var(--bg); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pg-palco-num { margin-top: 4px; font-family: var(--display); font-weight: 800; font-stretch: 86%; font-size: 48px; line-height: .9; letter-spacing: -.04em; color: var(--violeta-texto); }
.pg-palco-num small { font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.pg-palco-fonte { margin-top: auto; padding-top: 8px; font-size: 13px; color: var(--muted); }
.pg-palco-fonte a { text-decoration: underline; text-underline-offset: 3px; }
.pg-palcos .destaque { grid-column: span 2; grid-row: span 2; padding: 36px; border-color: transparent; background: var(--accent); color: var(--sobre-acc); }
.pg-palcos .destaque h3 { font-size: clamp(38px, 4.4vw, 60px); line-height: .92; }
.pg-palcos .destaque p { max-width: 46ch; font-size: 17px; color: inherit; opacity: .9; }
.pg-palcos .destaque .pg-palco-papel { background: var(--sobre-acc); color: var(--accent); }
.pg-palcos .destaque .pg-palco-num { font-size: clamp(70px, 9vw, 120px); color: inherit; }
.pg-palcos .destaque .pg-palco-num small, .pg-palcos .destaque .pg-palco-fonte { color: inherit; opacity: .85; }
.pg-palcos .destaque:hover { border-color: transparent; }
.pg-palco-frase { margin: auto 0 0; padding-top: 18px; font-family: var(--display); font-weight: 800; font-stretch: 86%; font-size: clamp(40px, 7vw, 104px); line-height: .9; max-width: 9ch; letter-spacing: -.035em; }
.pg-palcos .destaque .pg-palco-num { margin-top: 10px; }
.pg-palcos .destaque .pg-palco-fonte { margin-top: 14px; }
@media (max-width: 1000px) {
  .pg-palcos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-palcos .destaque { grid-row: auto; }
}
@media (max-width: 640px) {
  .pg-palcos { grid-template-columns: minmax(0, 1fr); }
  .pg-palcos .destaque { grid-column: auto; padding: 28px 24px; }
  .pg-palcos li { padding: 22px 20px; }
}

/* Versões do destaque para o Gui escolher (?versao=b, c, d). A "a" é a laranja.
   b: bloco escuro, número gigante em laranja, frase menor.
   c: faixa na largura inteira, texto à esquerda e número à direita, sem vão.
   d: recado em papel, inclinado, frase grande com aspas laranja. */
.pg-palcos[data-v="b"] .destaque { background: var(--bloco); color: var(--sobre-bloco); }
.pg-palcos[data-v="b"] .destaque .pg-palco-papel { background: var(--accent); color: var(--sobre-acc); }
.pg-palcos[data-v="b"] .destaque .pg-palco-frase { order: 9; margin-top: 14px; padding-top: 0; font-size: clamp(24px, 2.4vw, 34px); max-width: none; color: var(--sobre-bloco-2); }
.pg-palcos[data-v="b"] .destaque .pg-palco-num { margin-top: auto; font-size: clamp(110px, 15vw, 220px); color: var(--accent); }
.pg-palcos[data-v="b"] .destaque .pg-palco-fonte { order: 10; }
.pg-palcos[data-v="b"] .destaque .pg-palco-num small { display: block; margin-top: 8px; }
.pg-palcos[data-v="c"] .destaque { grid-column: 1 / -1; grid-row: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "papel num" "titulo num" "texto num" "frase num" "fonte num"; align-items: start; gap: 8px 40px; }
.pg-palcos[data-v="c"] .destaque .pg-palco-papel { grid-area: papel; justify-self: start; }
.pg-palcos[data-v="c"] .destaque h3 { grid-area: titulo; }
.pg-palcos[data-v="c"] .destaque p { grid-area: texto; }
.pg-palcos[data-v="c"] .destaque .pg-palco-frase { grid-area: frase; margin: 6px 0 0; padding: 0; font-size: clamp(30px, 3.2vw, 46px); max-width: none; }
.pg-palcos[data-v="c"] .destaque .pg-palco-fonte { grid-area: fonte; }
.pg-palcos[data-v="c"] .destaque .pg-palco-num { grid-area: num; align-self: center; margin: 0; font-size: clamp(110px, 14vw, 210px); text-align: right; }
.pg-palcos[data-v="c"] .destaque .pg-palco-num small { display: block; font-size: 17px; }
.pg-palcos[data-v="d"] .destaque { background: var(--cartao); color: var(--text); border: 1px solid var(--line); transform: rotate(calc(-1.2deg * var(--giro))); box-shadow: 0 30px 60px -30px rgb(0 0 0 / 35%); }
.pg-palcos[data-v="d"] .destaque:hover { transform: rotate(calc(-1.2deg * var(--giro))) translateY(-3px); }
.pg-palcos[data-v="d"] .destaque .pg-palco-papel { background: var(--accent); color: var(--sobre-acc); }
.pg-palcos[data-v="d"] .destaque p { color: var(--body); }
.pg-palcos[data-v="d"] .destaque .pg-palco-frase::first-letter { color: var(--accent); }
.pg-palcos[data-v="d"] .destaque .pg-palco-num { color: var(--violeta-texto); }
.pg-palcos[data-v="d"] .destaque .pg-palco-num small, .pg-palcos[data-v="d"] .destaque .pg-palco-fonte { color: var(--muted); opacity: 1; }
@media (max-width: 1000px) {
  .pg-palcos[data-v="c"] .destaque { grid-template-columns: minmax(0, 1fr); grid-template-areas: "papel" "titulo" "texto" "frase" "num" "fonte"; }
  .pg-palcos[data-v="c"] .destaque .pg-palco-num { text-align: left; }
}
@media (max-width: 640px) { .pg-palcos[data-v="d"] .destaque, .pg-palcos[data-v="d"] .destaque:hover { transform: none; } }

/* Pilar /inovacao-e-foresight/: os termos do glossário como etiquetas. */
.pg-termos { display: flex; flex-wrap: wrap; gap: 10px; }
.pg-termos a { display: inline-block; padding: 9px 16px; border-radius: 999px; background: var(--cartao); box-shadow: 0 0 0 1px var(--line); color: var(--text); font-weight: 600; font-size: 15px; text-decoration: none; transition: box-shadow .25s, color .25s; }
.pg-termos a:hover { box-shadow: 0 0 0 1.5px var(--accent); color: var(--accent-texto); }

/* ── Modelo "pilar" (29/10/2026): páginas de pilar de conteúdo, como
   /inovacao-e-foresight/. Mesma marca do site; o que muda é o ritmo:
   faixa escura com histórias curtas que abrem no toque, radar interativo,
   gráfico e galeria. O violeta (terceira cor) marca o que é do pilar. ── */
.pl-faixa { margin-top: var(--gz-respiro); }
.pl-faixa .titulo-sec h2 { color: var(--sobre-bloco); max-width: 20ch; }
.pl-faixa .titulo-sec p { color: var(--sobre-bloco-2); }
.pl-drops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 22px; padding-bottom: 30px; align-items: start; }
.pl-drop { position: relative; border-radius: 24px; background: rgb(243 238 229 / 6%); box-shadow: inset 0 0 0 1px rgb(243 238 229 / 14%); transition: background .3s, box-shadow .3s, transform .3s var(--sai); }
.pl-drop:hover { background: rgb(243 238 229 / 10%); }
.pl-drop[open] { background: var(--violeta); box-shadow: none; transform: none; }
.pl-drop summary { display: flex; flex-direction: column; gap: 10px; padding: 26px 26px 24px; cursor: pointer; list-style: none; }
.pl-drop summary::-webkit-details-marker { display: none; }
.pl-drop summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 24px; }
.pl-drop .kicker { font-size: 11px; color: var(--sobre-bloco-2); }
.pl-num { font-family: var(--display); font-weight: 800; font-stretch: 84%; font-size: clamp(48px, 5.4vw, 72px); line-height: .9; letter-spacing: -.04em; color: var(--accent); }
.pl-drop[open] .pl-num { color: #fff; }
.pl-pergunta { font-size: 17px; line-height: 1.45; color: var(--sobre-bloco); text-wrap: pretty; }
.pl-abrir { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--accent); }
.pl-abrir::after { content: '+'; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid currentColor; font-size: 15px; line-height: 1; transition: transform .3s var(--sai); }
.pl-drop[open] .pl-abrir { color: #fff; }
.pl-drop[open] .pl-abrir::after { transform: rotate(45deg); }
.pl-drop > div { padding: 0 26px 26px; animation: pl-abre .45s var(--sai); }
.pl-drop > div p { font-size: 16px; line-height: 1.6; color: #fff; }
.pl-drop > div small { display: block; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgb(255 255 255 / 25%); font-size: 13px; color: rgb(255 255 255 / 80%); }
.pl-drop > div small a { color: #fff; font-weight: 600; }
@keyframes pl-abre { from { opacity: 0; transform: translateY(-6px); } }
/* Bagunçadinha de mesa (Gui, 29/10/2026): todos os cartões com giro e
   altura um pouco diferentes; o cartão endireita no mouse e quando abre.
   rotate/translate próprios, para não brigar com o transform do .reveal. */
.pl-drop { transition: background .3s, box-shadow .3s, rotate .45s var(--sai), translate .45s var(--sai); }
.pl-drop:nth-child(6n+1) { rotate: calc(-1.6deg * var(--giro)); translate: 0 6px; }
.pl-drop:nth-child(6n+2) { rotate: calc(1.2deg * var(--giro)); translate: 0 22px; }
.pl-drop:nth-child(6n+3) { rotate: calc(-.7deg * var(--giro)); translate: 0 -4px; }
.pl-drop:nth-child(6n+4) { rotate: calc(1.5deg * var(--giro)); translate: 0 10px; }
.pl-drop:nth-child(6n+5) { rotate: calc(-1.1deg * var(--giro)); translate: 0 30px; }
.pl-drop:nth-child(6n+6) { rotate: calc(.9deg * var(--giro)); translate: 0 2px; }
.pl-drop:hover, .pl-drop[open] { rotate: 0deg; z-index: 2; }

.pl-radar { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.pl-radar-svg { width: 100%; max-width: 440px; margin-inline: auto; overflow: visible; }
.pl-radar-svg .anel { fill: color-mix(in srgb, var(--violeta) 7%, transparent); stroke: var(--violeta); stroke-width: .8; transition: fill .35s, stroke-width .35s; cursor: pointer; }
.pl-radar-svg .anel.fraco { stroke-dasharray: 3 3; }
.pl-radar-svg .anel.medio { fill: color-mix(in srgb, var(--violeta) 14%, var(--bg)); }
.pl-radar-svg .anel.forte { fill: color-mix(in srgb, var(--violeta) 30%, var(--bg)); }
.pl-radar-svg .anel.on { fill: color-mix(in srgb, var(--accent) 45%, var(--bg)); stroke-width: 1.6; }
.pl-radar-svg .pontos circle { fill: var(--text); pointer-events: none; }
.pl-radar-svg .rot { font: 700 7px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; text-anchor: middle; fill: var(--violeta-texto); pointer-events: none; }
.pl-aneis { grid-template-columns: minmax(0, 1fr); }
.pl-aneis li { cursor: pointer; transition: box-shadow .3s, transform .3s var(--sai); }
.pl-aneis li.on, .pl-aneis li:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent); transform: translateX(6px); }

.pl-grafico { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 64px); align-items: end; padding: clamp(28px, 5vw, 56px); border-radius: 34px; background: var(--cartao); box-shadow: 0 0 0 1px var(--line); }
.pl-grafico .rotulo { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--violeta-texto); }
.pl-grafico h2 { margin: 14px 0 18px; font-family: var(--display); font-weight: 800; font-stretch: 86%; font-size: clamp(30px, 3.2vw, 46px); line-height: .96; letter-spacing: -.035em; text-wrap: balance; color: var(--text); }
.pl-grafico p { max-width: 50ch; font-size: 17px; line-height: 1.65; color: var(--body); }
.pl-grafico small { display: block; margin-top: 16px; font-size: 13px; color: var(--muted); }
.pl-grafico small a { color: var(--accent-texto); font-weight: 600; }
.pl-barras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; height: 300px; align-items: end; }
.pl-barras li { display: flex; flex-direction: column; justify-content: end; align-items: center; gap: 8px; height: 100%; }
.pl-barras b { font-family: var(--display); font-weight: 800; font-stretch: 88%; font-size: 22px; letter-spacing: -.02em; color: var(--text); }
.pl-barras .barra { width: 100%; height: var(--h); min-height: 3px; border-radius: 12px 12px 4px 4px; background: var(--violeta); transform-origin: bottom; }
.pl-barras li:first-child .barra { background: var(--accent); }
.pl-barras small { font-size: 13px; color: var(--muted); }
.js-reveal .pl-grafico:not(.visible) .barra { transform: scaleY(0); }
.pl-grafico .barra { transition: transform 1.1s var(--sai); }
.pl-barras li:nth-child(2) .barra { transition-delay: .15s; }
.pl-barras li:nth-child(3) .barra { transition-delay: .3s; }
.pl-barras li:nth-child(4) .barra { transition-delay: .45s; }
@media (max-width: 900px) {
  .pl-drops { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .pl-drop:nth-child(n) { translate: 0 0; }
  .pl-radar, .pl-grafico { grid-template-columns: minmax(0, 1fr); }
  .pl-radar-svg { max-width: 300px; }
  .pl-barras { height: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  .pl-drop, .pl-aneis li, .pl-grafico .barra { transition: none; }
  .pl-drop > div { animation: none; }
  .js-reveal .pl-grafico .barra { transform: none; }
}

/* Chamada no meio do pilar: o pedido aparece onde a pessoa já se convenceu,
   não só no fim. Cartão com o mesmo giro leve da página. */
.pl-chamada { display: flex; align-items: center; justify-content: space-between; gap: 20px 40px; flex-wrap: wrap; margin-top: clamp(40px, 6vw, 72px); padding: clamp(24px, 3.5vw, 36px) clamp(24px, 4vw, 44px); border-radius: 28px; background: var(--cartao); box-shadow: 0 0 0 1px var(--line), 0 22px 44px -28px var(--sombra); rotate: calc(-.5deg * var(--giro)); }
.pl-chamada p { flex: 1 1 380px; max-width: 58ch; font-size: 18px; line-height: 1.55; color: var(--body); }
.pl-chamada p b { display: block; margin-bottom: 4px; font-family: var(--display); font-weight: 800; font-stretch: 88%; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.05; letter-spacing: -.025em; color: var(--text); }
.pl-chamada .acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.pl-chamada.escura { background: rgb(243 238 229 / 6%); box-shadow: inset 0 0 0 1px rgb(243 238 229 / 16%); rotate: calc(.4deg * var(--giro)); }
.pl-chamada.escura p { color: var(--sobre-bloco-2); }
.pl-chamada.escura p b { color: var(--sobre-bloco); }
.pl-chamada.escura .button.outline { border-color: rgb(243 238 229 / 35%); color: var(--sobre-bloco); }
.pl-chamada.escura .button.outline:hover { border-color: var(--sobre-bloco); background: var(--sobre-bloco); color: var(--bloco); }
@media (max-width: 600px) { .pl-chamada { rotate: 0deg; } .pl-chamada .acoes, .pl-chamada .acoes .button { width: 100%; } }

/* Quatro atalhos ficam em 2 x 2, sem cartão sozinho na segunda linha. */
.pg-segmentos.dois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .pg-segmentos.dois { grid-template-columns: minmax(0, 1fr); } }


/* Página de líderes: três logos e um nome sem logo em arquivo. */
.pg-logos.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pg-logo-texto b { font-family: var(--display); font-weight: 800; font-stretch: 88%; font-size: 34px; letter-spacing: -.02em; color: #0d4b8c; }
/* Cartão de evento sem link (página de líderes): mesmo desenho do link. */
.pg-evento-sem-link { position: relative; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); min-height: 240px; overflow: hidden; border-radius: 26px; background: var(--cartao); color: var(--body); box-shadow: 0 0 0 1px var(--line), 0 18px 36px -24px var(--sombra); }
@media (max-width: 900px) { .pg-logos.tres { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .pg-evento-sem-link { grid-template-columns: minmax(0, 1fr); } }
.pl-mesa li:nth-child(odd) .pg-evento-sem-link { rotate: calc(-.8deg * var(--giro)); }
.pl-mesa li:nth-child(even) .pg-evento-sem-link { rotate: calc(.7deg * var(--giro)); }
/* Três encontros lado a lado: foto em cima, texto embaixo. */
.pg-eventos.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pg-eventos.tres .pg-evento-sem-link { grid-template-columns: minmax(0, 1fr); height: 100%; }
.pg-eventos.tres .foto { aspect-ratio: 3 / 2; }
.pg-eventos.tres .txt { justify-content: flex-start; padding: 24px 26px 28px; }
@media (max-width: 1000px) { .pg-eventos.tres { grid-template-columns: minmax(0, 1fr); } }

/* Ênfases de cada página de evento (alfinete do Gui, 30/10/2026: "tá bem
   denso, mais visual"): cartão com foto da ênfase, para quem e a frase. */
.pg-enfases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.pg-enfases .cartao { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 24px; background: var(--cartao); color: var(--body); text-decoration: none; box-shadow: 0 0 0 1px var(--line), 0 18px 36px -24px var(--sombra); transition: transform .3s var(--sai), box-shadow .3s, rotate .45s var(--sai); }
.pg-enfases li:nth-child(odd) .cartao { rotate: calc(-.9deg * var(--giro)); }
.pg-enfases li:nth-child(even) .cartao { rotate: calc(.8deg * var(--giro)); translate: 0 10px; }

.pg-enfases .foto { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.pg-enfases .foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--sai); }

.pg-enfases .txt { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 22px; }
.pg-enfases .kicker { font-size: 14px; font-weight: 700; letter-spacing: .01em; color: var(--violeta-texto); }
.pg-enfases b { font-family: var(--display); font-weight: 800; font-stretch: 88%; font-size: 21px; line-height: 1.05; letter-spacing: -.02em; color: var(--text); text-wrap: balance; }
.pg-enfases .txt > span:last-child { font-size: 15px; line-height: 1.5; }

@media (max-width: 1100px) { .pg-enfases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pg-enfases { grid-template-columns: minmax(0, 1fr); } .pg-enfases li:nth-child(even) .cartao { translate: 0 0; } }

/* Perguntas como cartões que abrem (o texto todo está no HTML, para busca e IA). */
.pg-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.pg-faq details { border-radius: 22px; background: var(--cartao); box-shadow: 0 0 0 1px var(--line); transition: box-shadow .3s; }
.pg-faq details[open] { box-shadow: 0 0 0 1.5px var(--accent), 0 20px 40px -28px var(--sombra); }
.pg-faq summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 20px 22px; cursor: pointer; list-style: none; }
.pg-faq summary::-webkit-details-marker { display: none; }
.pg-faq .n { font-family: var(--display); font-weight: 800; font-size: 28px; line-height: 1; color: var(--accent); }
.pg-faq h3 { margin: 0; font-family: var(--display); font-weight: 800; font-stretch: 90%; font-size: 20px; line-height: 1.15; letter-spacing: -.015em; color: var(--text); text-wrap: balance; }
.pg-faq .mais { position: relative; width: 28px; height: 28px; border-radius: 50%; background: var(--bg); }
.pg-faq .mais::before, .pg-faq .mais::after { content: ''; position: absolute; left: 8px; right: 8px; top: 13px; height: 2px; border-radius: 2px; background: var(--text); transition: transform .3s var(--sai); }
.pg-faq .mais::after { transform: rotate(90deg); }
.pg-faq details[open] .mais::after { transform: rotate(0); }
.pg-faq details > p { margin: 0; padding: 0 22px 22px 64px; font-size: 16px; line-height: 1.6; color: var(--body); }
@media (max-width: 760px) { .pg-faq { grid-template-columns: minmax(0, 1fr); } .pg-faq details > p { padding-left: 22px; } }

/* Marca do evento ao lado do título da galeria. */
.pg-marca-evento { display: flex; width: max-content; align-items: center; gap: 12px; margin: 0 0 12px; padding: 10px 16px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.pg-marca-evento img { height: 26px; width: auto; }
.pg-marca-evento span { font-size: 13px; font-weight: 700; color: #011e41; }

/* Logo do evento como etiqueta colada na galeria (alfinete do Gui, 30/10). */
.pg-galeria-com-marca { position: relative; }
.pg-galeria-marca { position: absolute; z-index: 3; left: -10px; top: -22px; display: grid; place-items: center; padding: 12px 18px; border-radius: 14px; background: #fff; rotate: calc(-4deg * var(--giro)); box-shadow: 0 16px 30px -16px var(--sombra), 0 0 0 1px var(--line); }
.pg-galeria-marca img { display: block; height: 30px; width: auto; }
@media (max-width: 700px) { .pg-galeria-marca { left: 4px; top: -18px; padding: 9px 14px; } .pg-galeria-marca img { height: 22px; } }
/* Três cartões de formato (workshop) e logo em texto. */
.pg-enfases.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .pg-enfases.tres { grid-template-columns: minmax(0, 1fr); } }
.pg-logo-texto b { font-family: var(--display); font-weight: 800; font-stretch: 88%; font-size: 30px; letter-spacing: -.02em; color: #1d1d1b; }

/* Logos leves (workshop, alfinete do Gui 30/10): uma faixa só, todos do mesmo
   peso visual, sem caixa grande. */
.pg-logos.leve { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 28px 40px; padding: 28px 36px; border-radius: 26px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.pg-logos.leve li { display: grid; place-items: center; height: auto; padding: 0; background: none; box-shadow: none; border-radius: 0; }
.pg-logos.leve img { max-height: 34px; max-width: 132px; width: auto; height: auto; }
.pg-logos.leve .pg-logo-texto b { font-size: 24px; }
/* Celular e tablet: os logos viram uma grade de células iguais, cada um
   centrado na sua, para as linhas e as colunas alinharem (Gui, 30/10/2026). */
@media (max-width: 900px) {
  .pg-logos.leve { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 10px 12px; }
  .pg-logos.leve li { height: 74px; padding: 0 10px; }
  .pg-logos.leve img { max-height: 30px; max-width: min(100%, 136px); }
  .pg-logos.leve .pg-logo-texto b { font-size: 19px; }
}
@media (max-width: 360px) { .pg-logos.leve { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* "Por que agora" (workshop): o dado grande à esquerda, o que o workshop faz
   à direita em três passos. */
.pg-agora { align-items: center; }
.pg-agora-num { display: block; margin: 10px 0 6px; font-family: var(--display); font-weight: 800; font-stretch: 84%; font-size: clamp(88px, 11vw, 150px); line-height: .85; letter-spacing: -.05em; color: var(--accent); }
.pg-agora-dado > p:not(.rotulo) { max-width: 30ch; font-size: 20px; line-height: 1.45; color: var(--sobre-bloco); }
.pg-agora-mini { display: flex; gap: 28px; margin: 26px 0 0; padding: 18px 0 0; border-top: 1px solid rgb(243 238 229 / 18%); list-style: none; }
.pg-agora-mini b { display: block; font-family: var(--display); font-weight: 800; font-size: 30px; line-height: 1; color: var(--sobre-bloco); }
.pg-agora-mini span { font-size: 14px; color: var(--sobre-bloco-2); }
.pg-agora small { display: block; margin-top: 18px; font-size: 12.5px; color: var(--sobre-bloco-2); }
.pg-agora small a { color: var(--sobre-bloco); text-decoration: underline; text-underline-offset: 3px; }
.pg-agora-passos { margin: 4px 0 18px; padding: 0; list-style: none; counter-reset: p; }
.pg-agora-passos li { position: relative; padding: 12px 0 12px 46px; border-bottom: 1px solid rgb(243 238 229 / 14%); font-size: 17px; line-height: 1.45; color: var(--sobre-bloco); counter-increment: p; }
.pg-agora-passos li::before { content: counter(p); position: absolute; left: 0; top: 10px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--sobre-acc); font-weight: 800; font-size: 14px; }

/* Workshop (Gui, 29/10/2026: "mais assertivo no copy, entregável"). O formato
   fica à vista logo na abertura, em selos, e a jornada mostra que o workshop
   começa no briefing e só termina quando o teste roda. */
.ws-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.ws-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); font-size: 14px; font-weight: 600; color: var(--text); }
.ws-chips li::before { content: ''; flex: none; width: 7px; height: 12px; background: var(--accent); clip-path: var(--raio); }

/* Workshop em um minuto (Gui, 30/10/2026): quem busca é RH, diretor ou
   executivo, e precisa ver logo de cara para quem é, o formato, a duração e
   o que o time leva. Três colunas num bloco escuro, logo depois da abertura. */
.ws-ficha { margin-top: var(--gz-respiro); padding: 40px 44px 44px; border-radius: 30px; background: var(--bloco); color: var(--sobre-bloco); }
.ws-ficha h2 { font-family: var(--display); font-weight: 800; font-stretch: 86%; font-size: clamp(30px, 3.2vw, 46px); line-height: .95; letter-spacing: -.035em; }
.ws-ficha-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 40px; margin-top: 30px; }
.ws-ficha-grade > div { padding-top: 20px; border-top: 1px solid rgb(255 255 255 / 18%); }
.ws-ficha-rot { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.ws-ficha-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.ws-ficha-tags li { padding: 9px 16px; border-radius: 999px; background: var(--sobre-bloco); color: var(--bloco); font-family: var(--display); font-weight: 800; font-stretch: 90%; font-size: 18px; line-height: 1.1; letter-spacing: -.01em; }
.ws-ficha-nota { margin-top: 14px; font-size: 16px; line-height: 1.55; color: var(--sobre-bloco-2); }
.ws-ficha-lista { display: grid; gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; counter-reset: ficha; }
.ws-ficha-lista li { position: relative; padding-left: 34px; font-size: 17px; line-height: 1.45; counter-increment: ficha; }
.ws-ficha-lista li::before { content: counter(ficha); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--sobre-acc); font-size: 13px; font-weight: 800; }
@media (max-width: 900px) { .ws-ficha { padding: 30px 22px 32px; } .ws-ficha-grade { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
.ws-jornada { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 22px 0 0; padding: 0; list-style: none; border-block: 2px solid var(--text); }
.ws-jornada li { display: flex; flex-direction: column; gap: 10px; padding: 26px 28px 30px; border-left: 1px solid var(--line-2); }
.ws-jornada li:first-child { padding-left: 0; border-left: 0; }
.ws-quando { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-texto); }
.ws-jornada b { font-family: var(--display); font-weight: 800; font-stretch: 88%; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.02; letter-spacing: -.03em; color: var(--text); text-wrap: balance; }
.ws-jornada li > span:last-child { font-size: 16px; line-height: 1.55; color: var(--body); }
@media (max-width: 900px) {
  .ws-jornada { grid-template-columns: minmax(0, 1fr); }
  .ws-jornada li { padding: 22px 0; border-left: 0; border-top: 1px solid var(--line-2); }
  .ws-jornada li:first-child { border-top: 0; }
}
.pg-agora .rotulo + h2 + p { margin-top: 14px; }
.pg-agora section > p:not(.rotulo) + p { margin-top: 12px; }

/* Workshops Digital Thinkers e de futuros (29/10/2026): temas com o fio de
   pesquisa, trilha numerada, reel vertical ao lado do texto, livro incluso e
   a faixa que liga um workshop aos outros. */
.ws-temas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.ws-temas li { display: flex; flex-direction: column; gap: 10px; padding: 30px; border-radius: 24px; background: var(--cartao); }
.ws-tema-kicker { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-texto); }
.ws-temas b { font-family: var(--display); font-weight: 800; font-stretch: 88%; font-size: clamp(24px, 2.3vw, 30px); line-height: 1.02; letter-spacing: -.03em; color: var(--text); }
.ws-temas li > span:not(.ws-tema-kicker) { font-size: 16px; line-height: 1.55; color: var(--body); }
.ws-fio { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line-2); font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.ws-fio em { font-style: normal; font-weight: 700; color: var(--text); }
.ws-fio a { color: var(--accent-texto); text-decoration: underline; text-underline-offset: 3px; }
.ws-trilha { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--text); }
.ws-trilha li { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--line-2); }
.ws-trilha .n { font-family: var(--display); font-weight: 800; font-stretch: 88%; font-size: 44px; line-height: .9; letter-spacing: -.04em; color: var(--accent); }
.ws-trilha li > div { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 6px 40px; align-items: start; }
.ws-trilha b { grid-row: span 2; font-family: var(--display); font-weight: 800; font-stretch: 88%; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.02; letter-spacing: -.03em; color: var(--text); text-wrap: balance; }
.ws-trilha li > div > span { font-size: 16px; line-height: 1.55; color: var(--body); }
.ws-trilha small { font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--accent-texto); }
.ws-reel { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.ws-reel-video { overflow: hidden; border-radius: 26px; background: var(--bloco); box-shadow: 0 30px 60px -36px var(--sombra); transform: rotate(calc(-1.5deg * var(--giro))); }
.ws-reel-video video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; background: var(--bloco); }
.ws-reel-texto .kicker, .ws-livro .kicker { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-texto); }
.ws-reel-texto h2, .ws-livro h2 { margin: 12px 0 18px; max-width: 16ch; font-family: var(--display); font-weight: 800; font-stretch: 86%; font-size: clamp(34px, 4vw, 54px); line-height: .96; letter-spacing: -.036em; text-wrap: balance; }
.ws-reel-texto p, .ws-livro p:not(.kicker) { max-width: 52ch; margin-top: 12px; font-size: 17px; line-height: 1.6; color: var(--body); }
.ws-reel-texto blockquote { margin-top: 26px; padding: 24px 26px; border-radius: 22px; background: var(--accent); color: var(--sobre-acc); font-family: var(--display); font-weight: 700; font-stretch: 92%; font-size: 21px; line-height: 1.3; letter-spacing: -.015em; transform: rotate(calc(-.8deg * var(--giro))); }
.ws-reel-texto cite { display: block; margin-top: 12px; font: 600 13px/1.4 var(--sans); font-style: normal; letter-spacing: .02em; }
.ws-livro { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(28px, 4vw, 52px); border-radius: 30px; background: var(--cartao); }
.ws-livro img { width: 100%; height: auto; border-radius: 10px; box-shadow: 0 30px 50px -28px var(--sombra); transform: rotate(calc(-3deg * var(--giro))); }
.ws-depos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ws-outros-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.ws-outros-lista a { position: relative; display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 28px 70px 28px 30px; border-radius: 24px; background: var(--bloco); color: var(--sobre-bloco); text-decoration: none; transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.ws-outros-lista a:hover { transform: translateY(-3px); }
.ws-outros-lista .kicker { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.ws-outros-lista b { font-family: var(--display); font-weight: 800; font-stretch: 88%; font-size: clamp(24px, 2.4vw, 30px); line-height: 1; letter-spacing: -.03em; }
.ws-outros-lista span:not(.kicker) { font-size: 15px; line-height: 1.5; color: var(--sobre-bloco-2); }
.ws-outros-lista .ic { position: absolute; top: 28px; right: 28px; width: 24px; height: 24px; color: var(--accent); }
@media (max-width: 900px) {
  .ws-temas, .ws-depos, .ws-outros-lista { grid-template-columns: minmax(0, 1fr); }
  .ws-trilha li { grid-template-columns: 56px minmax(0, 1fr); gap: 14px; }
  .ws-trilha .n { font-size: 34px; }
  .ws-trilha li > div { grid-template-columns: minmax(0, 1fr); }
  .ws-trilha b { grid-row: auto; }
  .ws-reel, .ws-livro { grid-template-columns: minmax(0, 1fr); }
  .ws-reel-video { width: min(100%, 340px); margin-inline: auto; }
  .ws-livro img { width: min(60%, 240px); }
}
@media (prefers-reduced-motion: reduce) { .ws-outros-lista a { transition: none; } .ws-outros-lista a:hover { transform: none; } }
.ws-ferramentas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.ws-ferramentas li { display: flex; flex-direction: column; gap: 10px; padding: 28px; border: 1px solid var(--line-2); border-radius: 24px; background: var(--surface); }
.ws-ferramentas b { font-family: var(--display); font-weight: 800; font-stretch: 88%; font-size: clamp(22px, 2vw, 27px); line-height: 1.04; letter-spacing: -.03em; color: var(--text); }
.ws-ferramentas li > span:not(.ws-tema-kicker) { font-size: 15.5px; line-height: 1.55; color: var(--body); }
.ws-ferramentas-fecho { margin-top: 22px; padding: 24px 28px; border-radius: 22px; background: var(--bloco); color: var(--sobre-bloco-2); font-size: 17px; line-height: 1.6; }
.ws-ferramentas-fecho b { color: var(--accent); }
@media (max-width: 1040px) { .ws-ferramentas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .ws-ferramentas { grid-template-columns: minmax(0, 1fr); } }

/* Digital Thinkers, rodada de alfinetes (30/10/2026). Número com a unidade
   ao lado ("6 encontros"), trilha em cartões, reel que toca sozinho com a
   logo do cliente e o livro com seção própria. */
.pg-numeros-unidade b { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pg-numeros-unidade b em { font-style: normal; font-size: .46em; font-weight: 750; letter-spacing: -.02em; color: var(--violeta-texto); }
.pg-numeros-unidade li a { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--accent-texto); }
.pg-numeros-unidade li a .ic { width: 14px; height: 14px; }
.ws-cartoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.ws-cartoes li { position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 220px; padding: 28px 28px 30px; border-radius: 26px; background: var(--cartao); overflow: hidden; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.ws-cartoes li:nth-child(2), .ws-cartoes li:nth-child(6) { background: var(--bloco); color: var(--sobre-bloco); }
.ws-cartoes li:nth-child(4) { background: var(--accent); color: var(--sobre-acc); }
.ws-cartoes li:hover { transform: translateY(-4px) rotate(calc(-.4deg * var(--giro))); }
.ws-cartoes .n { font-family: var(--display); font-weight: 800; font-stretch: 86%; font-size: 64px; line-height: .8; letter-spacing: -.05em; color: var(--accent); }
.ws-cartoes li:nth-child(4) .n { color: var(--sobre-acc); opacity: .55; }
.ws-cartoes b { margin-top: auto; font-family: var(--display); font-weight: 800; font-stretch: 88%; font-size: clamp(24px, 2.3vw, 30px); line-height: 1.02; letter-spacing: -.03em; text-wrap: balance; }
.ws-cartoes li > span:last-child { font-size: 15.5px; line-height: 1.5; opacity: .82; }
.ws-reel { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); align-items: center; padding: clamp(24px, 4vw, 56px); border-radius: 32px; background: var(--cartao); }
.ws-reel-video { position: relative; }
.ws-reel-som { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); padding: 10px 18px; border: 0; border-radius: 999px; background: rgb(0 0 0 / 62%); color: #fff; font: 700 13px/1 var(--sans); cursor: pointer; backdrop-filter: blur(6px); }
.ws-reel-som[aria-pressed="true"] .ws-reel-som-on, .ws-reel-som[aria-pressed="false"] .ws-reel-som-off { display: none; }
.ws-reel-logo { display: block; width: 200px; height: auto; margin-bottom: 22px; }
.ws-reel-texto h2 { max-width: 18ch; }
.ws-reel-temas { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }
.ws-reel-temas li { padding: 8px 14px; border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 1px var(--line-2); font-size: 14px; font-weight: 600; color: var(--text); }
.ws-livro2 { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 80px); align-items: center; padding: clamp(28px, 4.5vw, 64px); border-radius: 34px; background: var(--bloco); color: var(--sobre-bloco); }
.ws-livro2-visual { position: relative; padding: 0 0 60px 0; }
.ws-livro2-foto { display: block; width: 86%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 24px; filter: grayscale(.15); }
.ws-livro2-capa { position: absolute; right: 0; bottom: 0; width: 46%; height: auto; border-radius: 8px; box-shadow: 0 30px 50px -20px rgb(0 0 0 / 70%); transform: rotate(calc(5deg * var(--giro))); }
.ws-livro2 .kicker { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.ws-livro2 h2 { margin: 12px 0 18px; font-family: var(--display); font-weight: 800; font-stretch: 86%; font-size: clamp(38px, 4.6vw, 64px); line-height: .94; letter-spacing: -.04em; }
.ws-livro2-tese { font-family: var(--display); font-weight: 700; font-stretch: 92%; font-size: clamp(20px, 1.9vw, 25px); line-height: 1.25; letter-spacing: -.015em; color: var(--accent); }
.ws-livro2-texto > p:not(.kicker):not(.ws-livro2-tese) { margin-top: 14px; max-width: 54ch; font-size: 16.5px; line-height: 1.6; color: var(--sobre-bloco-2); }
.ws-livro2-dentro { display: grid; gap: 0; margin: 24px 0 0; padding: 0; list-style: none; border-top: 1px solid rgb(243 238 229 / 16%); }
.ws-livro2-dentro li { display: grid; grid-template-columns: 70px minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgb(243 238 229 / 16%); }
.ws-livro2-dentro b { font-family: var(--display); font-weight: 800; font-stretch: 86%; font-size: 34px; line-height: 1; color: var(--accent); }
.ws-livro2-dentro span { font-size: 15.5px; line-height: 1.45; color: var(--sobre-bloco); }
.ws-livro2 .ws-livro2-fecho { font-weight: 600; color: var(--sobre-bloco); }
.ws-livro2 .acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.ws-livro2 .button { border-color: var(--accent); background: var(--accent); color: var(--sobre-acc); }
.ws-livro2 .button:hover { border-color: var(--sobre-bloco); background: var(--sobre-bloco); color: var(--bloco); }
.ws-livro2 .button.outline { border-color: rgb(243 238 229 / 30%); background: transparent; color: var(--sobre-bloco); }
@media (max-width: 1040px) { .ws-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .ws-reel { grid-template-columns: minmax(0, 1fr); }
  .ws-livro2 { grid-template-columns: minmax(0, 1fr); }
  .ws-livro2-visual { max-width: 420px; }
}
@media (max-width: 600px) { .ws-cartoes { grid-template-columns: minmax(0, 1fr); } .ws-cartoes li { min-height: 0; } }
@media (prefers-reduced-motion: reduce) { .ws-cartoes li { transition: none; } .ws-cartoes li:hover { transform: none; } }

/* Workshop de futuros (alfinete do Gui, 30/10/2026: "estilo processo,
   fluxo"): os seis passos numa linha que corre da esquerda para a direita,
   agrupados em três fases. No celular, a linha desce. */
.ws-fluxo { padding: clamp(24px, 3.6vw, 48px); border-radius: 32px; background: var(--bloco); color: var(--sobre-bloco); }
.ws-fluxo-fases { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 16px; margin: 0 0 22px; padding: 0; list-style: none; }
.ws-fluxo-fases li { grid-column: var(--de) / var(--ate); padding-bottom: 10px; border-bottom: 2px solid var(--accent); font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.ws-fluxo-passos { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.ws-fluxo-passos::before { content: ''; position: absolute; top: 21px; left: 22px; right: 22px; height: 2px; background: linear-gradient(90deg, rgb(243 238 229 / 30%), var(--accent)); }
.ws-fluxo-passos li { position: relative; display: flex; flex-direction: column; gap: 8px; }
.ws-fluxo-passos .n { position: relative; display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 8px; border-radius: 50%; background: var(--accent); color: var(--sobre-acc); font-family: var(--display); font-weight: 800; font-size: 20px; box-shadow: 0 0 0 6px var(--bloco); }
.ws-fluxo-passos li:not(:last-child) .n::after { content: ''; position: absolute; left: calc(100% + 10px); top: 50%; width: 8px; height: 8px; border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); transform: translateY(-50%) rotate(45deg); }
.ws-fluxo-passos b { font-family: var(--display); font-weight: 800; font-stretch: 88%; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.05; letter-spacing: -.02em; }
.ws-fluxo-passos li > span:not(.n) { font-size: 14.5px; line-height: 1.5; color: var(--sobre-bloco-2); }
.ws-fluxo-passos em { margin-top: auto; padding-top: 10px; border-top: 1px solid rgb(243 238 229 / 14%); font-style: normal; font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--accent); }
@media (max-width: 1040px) {
  .ws-fluxo-fases { display: none; }
  .ws-fluxo-passos { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ws-fluxo-passos::before { top: 22px; bottom: 90px; left: 21px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, rgb(243 238 229 / 30%), var(--accent)); }
  .ws-fluxo-passos li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px; row-gap: 6px; padding-bottom: 24px; }
  .ws-fluxo-passos .n { grid-row: span 3; margin: 0; }
  .ws-fluxo-passos li:not(:last-child) .n::after { display: none; }
  .ws-fluxo-passos em { margin-top: 4px; }
}

/* Linhas feitas à mão (Gui, 30/10/2026: "fiz mudança nessas linhas na home
   ... replique para todas as páginas que têm esse ativo"). Mesmo traço dos
   números da home (--traco-h e --traco-v, em site.css): as réguas retas dos
   números e da jornada viram traço imperfeito, na mesma grossura. */
.pg-numeros, .ws-jornada { position: relative; border-block: 0; }
.pg-numeros::before, .pg-numeros::after, .ws-jornada::before, .ws-jornada::after {
  content: ''; position: absolute; left: 0; right: 0; height: 6px; background: var(--text); pointer-events: none;
  -webkit-mask: var(--traco-h) center / 100% 100% no-repeat; mask: var(--traco-h) center / 100% 100% no-repeat;
}
.pg-numeros::before, .ws-jornada::before { top: -3px; }
.pg-numeros::after, .ws-jornada::after { bottom: -3px; transform: scaleX(-1); }
.pg-numeros li, .ws-jornada li { position: relative; border-left: 0; }
.pg-numeros li + li::before, .ws-jornada li + li::before {
  content: ''; position: absolute; left: -2px; top: 16%; bottom: 16%; width: 4px; background: var(--line-2); pointer-events: none;
  -webkit-mask: var(--traco-v) center / 100% 100% no-repeat; mask: var(--traco-v) center / 100% 100% no-repeat;
}
.pg-numeros li:nth-child(odd)::before, .ws-jornada li:nth-child(odd)::before { transform: scaleY(-1); }
@media (max-width: 700px) {
  .pg-numeros li { border-top: 0; }
  .pg-numeros li + li::before { left: 0; right: 0; top: -2px; bottom: auto; width: auto; height: 4px; transform: none;
    -webkit-mask: var(--traco-h) center / 100% 100% no-repeat; mask: var(--traco-h) center / 100% 100% no-repeat; }
}
@media (max-width: 900px) {
  .ws-jornada li { border-top: 0; }
  .ws-jornada li + li::before { left: 0; right: 0; top: -2px; bottom: auto; width: auto; height: 4px; transform: none;
    -webkit-mask: var(--traco-h) center / 100% 100% no-repeat; mask: var(--traco-h) center / 100% 100% no-repeat; }
}
.pg-agora .pg-agora-acao { margin-top: 24px; }
.pg-agora .pg-agora-acao .button { border-color: var(--accent); background: var(--accent); color: var(--sobre-acc); }
.pg-agora .pg-agora-acao .button:hover { border-color: var(--sobre-bloco); background: var(--sobre-bloco); color: var(--bloco); }

/* Livro do Digital Thinkers, segunda versão (Gui, 30/10/2026: "dá para fazer
   muito melhor", "foto do Caito Maia, a logo da Chilli"). A capa vira a peça
   principal, sobre um halo no amarelo do livro; o prefácio do Caito entra
   como prova, com foto e logo; a tabela de números sai e o que tem dentro do
   livro vira uma linha de ferramentas. */
.ws-lv { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 96px); align-items: center; padding: clamp(32px, 5vw, 80px); border-radius: 34px; background: var(--bloco); color: var(--sobre-bloco); overflow: hidden; }
.ws-lv-capa { position: relative; display: grid; place-items: center; padding: 6% 0; }
.ws-lv-capa::before { content: ''; position: absolute; inset: 4% -10%; border-radius: 50%; background: radial-gradient(closest-side, rgb(228 212 0 / 42%), rgb(228 212 0 / 0)); }
.ws-lv-capa img { position: relative; width: min(100%, 380px); height: auto; border-radius: 6px 14px 14px 6px; box-shadow: -14px 0 0 -6px rgb(0 0 0 / 35%) inset, 0 50px 70px -30px rgb(0 0 0 / 85%), 0 0 0 1px rgb(255 255 255 / 6%); transform: rotate(calc(-4deg * var(--giro))); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.ws-lv:hover .ws-lv-capa img { transform: rotate(calc(-2deg * var(--giro))) translateY(-6px); }
.ws-lv-selo { position: absolute; right: 2%; bottom: 8%; padding: 10px 16px; border-radius: 999px; background: var(--accent); color: var(--sobre-acc); font: 800 13px/1.2 var(--sans); letter-spacing: .02em; box-shadow: 0 16px 28px -14px rgb(0 0 0 / 70%); transform: rotate(calc(5deg * var(--giro))); }
.ws-lv-texto .kicker { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.ws-lv-texto h2 { margin: 12px 0 6px; font-family: var(--display); font-weight: 800; font-stretch: 86%; font-size: clamp(40px, 4.8vw, 68px); line-height: .92; letter-spacing: -.04em; text-wrap: balance; }
.ws-lv-sub { font-family: var(--display); font-weight: 700; font-stretch: 92%; font-size: clamp(20px, 1.9vw, 26px); letter-spacing: -.015em; color: var(--accent); }
.ws-lv-texto > p:not(.kicker):not(.ws-lv-sub) { margin-top: 18px; max-width: 50ch; font-size: 17px; line-height: 1.6; color: var(--sobre-bloco-2); }
.ws-lv-prefacio { margin: 28px 0 0; padding: 24px 26px; border-radius: 22px; background: rgb(243 238 229 / 7%); box-shadow: inset 0 0 0 1px rgb(243 238 229 / 12%); }
.ws-lv-prefacio blockquote { margin: 0; font-family: var(--display); font-weight: 700; font-stretch: 92%; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.3; letter-spacing: -.015em; color: var(--sobre-bloco); }
.ws-lv-prefacio blockquote::before { content: '“'; display: block; height: 30px; font-size: 64px; line-height: 1; color: var(--accent); }
.ws-lv-prefacio figcaption { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.ws-lv-caito { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--accent); }
.ws-lv-prefacio figcaption span { display: grid; font-size: 13.5px; line-height: 1.35; color: var(--sobre-bloco-2); }
.ws-lv-prefacio figcaption b { font-size: 16px; color: var(--sobre-bloco); }
.ws-lv-chilli { width: 140px; height: auto; margin-left: auto; opacity: .92; }
.ws-lv-dentro { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.ws-lv-dentro li { padding: 8px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgb(243 238 229 / 22%); font-size: 13.5px; font-weight: 600; color: var(--sobre-bloco); }
.ws-lv .acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.ws-lv .button { border-color: var(--accent); background: var(--accent); color: var(--sobre-acc); }
.ws-lv .button:hover { border-color: var(--sobre-bloco); background: var(--sobre-bloco); color: var(--bloco); }
.ws-lv .button.outline { border-color: rgb(243 238 229 / 30%); background: transparent; color: var(--sobre-bloco); }
@media (max-width: 900px) {
  .ws-lv { grid-template-columns: minmax(0, 1fr); }
  .ws-lv-capa img { width: min(70%, 300px); }
  .ws-lv-chilli { width: 90px; }
}
@media (max-width: 480px) { .ws-lv-prefacio figcaption { flex-wrap: wrap; } .ws-lv-prefacio figcaption span { flex: 1; min-width: 0; } .ws-lv-chilli { flex-basis: 100%; max-width: 120px; margin: 6px 0 0 66px; } }
@media (prefers-reduced-motion: reduce) { .ws-lv-capa img { transition: none; } }

/* Logos dos workshops na grade-padrão de cartões (.tres), como nas páginas de
   palestra: a faixa .leve deixava o logo pequeno demais (Gui, 30/10/2026).
   Celular e tablet: três colunas de células iguais, logo centrado. */
@media (max-width: 900px) {
  .pg-logos.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .pg-logos.tres li { height: 78px; padding: 12px 14px; border-radius: 16px; }
  .pg-logos.tres img { max-height: 34px; }
}
@media (max-width: 360px) { .pg-logos.tres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Sobre (alfinetes do Gui, 30/10/2026) ── */

/* Logos da formação maiores (quase o dobro). */
.pg-linha .credencial img { height: 76px; }
@media (max-width: 560px) { .pg-linha .credencial img { height: 56px; } }

/* Fora do palco: a família ganha um bloco próprio, roxo, com a foto em
   moldura e o bilhete à mão — não mais uma foto solta embaixo do texto. */
.pg-familia { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; align-items: center; margin-block: 40px; padding: 44px 52px; border-radius: 30px; background: var(--violeta); color: #fff; }
.pg-familia-foto { position: relative; }
.pg-familia-foto::before { content: ''; position: absolute; inset: 8% -5% -6% 8%; border-radius: 24px; background: var(--accent); transform: rotate(calc(4deg * var(--giro))); }
.pg-familia-foto img { position: relative; display: block; width: 100%; height: auto; border: 10px solid var(--cartao); border-radius: 22px; transform: rotate(calc(-2deg * var(--giro))); box-shadow: 0 30px 60px -30px rgb(0 0 0 / 55%); }
.pg-familia-bilhete { position: absolute; z-index: 2; right: -18px; bottom: -14px; padding: 10px 16px; border-radius: 14px; background: var(--cartao); color: var(--text); font-family: var(--mao); font-size: 19px; line-height: 1.1; transform: rotate(calc(-4deg * var(--giro))); box-shadow: 0 16px 30px -16px rgb(0 0 0 / 50%); }
.pg-familia-kicker { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.pg-familia h2 { margin-top: 12px; font-family: var(--display); font-weight: 800; font-stretch: 86%; font-size: clamp(34px, 4vw, 56px); line-height: .95; letter-spacing: -.035em; text-wrap: balance; }
.pg-familia-texto > p:last-child { max-width: 46ch; margin-top: 18px; font-size: 19px; line-height: 1.55; color: rgb(255 255 255 / 88%); }
@media (max-width: 900px) {
  .pg-familia { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 32px 24px 36px; }
  .pg-familia-foto { max-width: 420px; }
  .pg-familia-bilhete { right: 6px; }
}

/* Redes: três cartões grandes logo depois da abertura. */
.pg-redes { margin-top: var(--gz-respiro); }
.pg-redes-cabeca h2 { margin-top: 8px; font-family: var(--display); font-weight: 800; font-stretch: 86%; font-size: clamp(32px, 3.6vw, 52px); line-height: .95; letter-spacing: -.035em; }
.pg-redes .pg-familia-kicker { color: var(--accent-texto); }
.pg-redes ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }
.pg-redes a { display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 6px; height: 100%; padding: 26px 26px 24px; border-radius: 26px; text-decoration: none; transition: transform .3s var(--sai), box-shadow .3s; }
.pg-redes a:hover { transform: translateY(-4px); box-shadow: 0 26px 46px -28px var(--sombra); }
.pg-redes svg:not(.ic) { width: 34px; height: 34px; margin-bottom: 14px; fill: currentColor; }
.pg-redes b { font-family: var(--display); font-weight: 800; font-stretch: 88%; font-size: 30px; line-height: 1; letter-spacing: -.03em; }
.pg-redes span { font-size: 15px; font-weight: 600; opacity: .8; }
.pg-redes em { margin-top: 8px; font-style: normal; font-size: 16px; line-height: 1.5; opacity: .9; }
.pg-redes i { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-style: normal; font-size: 15px; font-weight: 700; }
.pg-redes i .ic { width: 15px; height: 15px; }
.pg-redes .rede-in { background: var(--bloco); color: var(--sobre-bloco); }
.pg-redes .rede-ig { background: var(--accent); color: var(--sobre-acc); }
.pg-redes .rede-yt { background: var(--cartao); color: var(--text); box-shadow: 0 0 0 1px var(--line); }
@media (max-width: 900px) { .pg-redes ul { grid-template-columns: minmax(0, 1fr); } .pg-redes a { grid-template-rows: none; } }

/* Workshop de futuros, método em três fases (Gui, 30/10/2026: o fluxo de
   seis colunas "ficou muito espremido"). Cada fase é uma linha: à esquerda
   o cabeçalho da fase, à direita os passos dela em cartões com respiro.
   Uma linha vertical liga as três fases. No celular, tudo desce. */
.ws-fases { position: relative; display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.ws-fase { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 28px; align-items: stretch; padding: clamp(22px, 3vw, 36px); border-radius: 30px; background: var(--bloco); color: var(--sobre-bloco); }
.ws-fase-cab { display: flex; flex-direction: column; gap: 10px; padding-right: 8px; }
.ws-fase-n { align-self: flex-start; padding: 6px 12px; border-radius: 999px; background: var(--accent); color: var(--sobre-acc); font: 800 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.ws-fase-cab b { margin-top: 6px; font-family: var(--display); font-weight: 800; font-stretch: 86%; font-size: clamp(30px, 3vw, 42px); line-height: .96; letter-spacing: -.035em; }
.ws-fase-cab > span:last-child { font-size: 16px; line-height: 1.5; color: var(--sobre-bloco-2); }
.ws-passos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.ws-fase-fim .ws-passos { grid-template-columns: minmax(0, 1fr); }
.ws-passos:has(> li:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ws-passos li { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 22px; background: rgb(243 238 229 / 6%); box-shadow: inset 0 0 0 1px rgb(243 238 229 / 10%); }
.ws-passos .n { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 6px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--accent); color: var(--accent); font-family: var(--display); font-weight: 800; font-size: 18px; }
.ws-passos b { font-family: var(--display); font-weight: 800; font-stretch: 88%; font-size: clamp(20px, 1.7vw, 24px); line-height: 1.05; letter-spacing: -.02em; }
.ws-passos li > span:not(.n) { font-size: 15px; line-height: 1.55; color: var(--sobre-bloco-2); }
.ws-passos em { margin-top: auto; padding-top: 12px; font-style: normal; font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--accent); }
.ws-fase-fim { background: var(--accent); color: var(--sobre-acc); }
.ws-fase-fim .ws-fase-n { background: var(--bloco); color: var(--sobre-bloco); }
.ws-fase-fim .ws-fase-cab > span:last-child, .ws-fase-fim .ws-passos li > span:not(.n) { color: rgb(23 18 12 / 78%); }
.ws-fase-fim .ws-passos li { background: rgb(255 255 255 / 22%); box-shadow: none; }
.ws-fase-fim .ws-passos .n { box-shadow: inset 0 0 0 2px var(--sobre-acc); color: var(--sobre-acc); }
.ws-fase-fim .ws-passos em { color: var(--sobre-acc); }
@media (max-width: 1100px) { .ws-fase { grid-template-columns: minmax(0, 1fr); } .ws-fase-cab { padding-right: 0; } }
@media (max-width: 760px) { .ws-passos, .ws-passos:has(> li:nth-child(2):last-child) { grid-template-columns: minmax(0, 1fr); } }

/* Prospectiva no workshop de futuros (alfinete: "muito gap branco do lado
   direito"): o texto à esquerda e quatro estudos abertos à direita. */
.ws-pv2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(28px, 4.5vw, 60px); border-radius: 32px; background: var(--cartao); }
.ws-pv2 .kicker { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-texto); }
.ws-pv2 h2 { margin: 12px 0 16px; max-width: 14ch; font-family: var(--display); font-weight: 800; font-stretch: 86%; font-size: clamp(34px, 4vw, 54px); line-height: .96; letter-spacing: -.036em; text-wrap: balance; }
.ws-pv2-texto > p:not(.kicker) { max-width: 46ch; margin-top: 12px; font-size: 17px; line-height: 1.6; color: var(--body); }
.ws-pv2-texto .button { margin-top: 10px; }
.ws-pv2-lista { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--text); }
.ws-pv2-lista a { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; grid-template-areas: "s h seta" "t h seta"; column-gap: 16px; align-items: center; padding: 16px 4px; border-bottom: 1px solid var(--line-2); color: var(--text); text-decoration: none; transition: padding .2s; }
.ws-pv2-lista a:hover { padding-left: 12px; }
.ws-pv2-lista span { grid-area: s; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-texto); }
.ws-pv2-lista b { grid-area: t; font-family: var(--display); font-weight: 800; font-stretch: 90%; font-size: 21px; line-height: 1.15; letter-spacing: -.02em; }
.ws-pv2-lista small { grid-area: h; font-size: 13px; color: var(--muted); white-space: nowrap; }
.ws-pv2-lista .ic { grid-area: seta; width: 18px; height: 18px; color: var(--accent-texto); }
@media (max-width: 900px) { .ws-pv2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .ws-pv2-lista a { grid-template-columns: minmax(0, 1fr) 18px; grid-template-areas: "s seta" "t seta" "h seta"; } .ws-pv2-lista small { margin-top: 4px; } }

/* Livro do Digital Thinkers no violeta da marca (Gui, 30/10/2026: "o roxinho
   neste fundo fique melhor"). O laranja some no violeta: rótulo, subtítulo,
   aspas e o anel do Caito vão para o amarelo da capa; o botão segue laranja. */
.ws-lv { background: var(--violeta); color: #fff; }
.ws-lv-texto .kicker, .ws-lv-sub, .ws-lv-prefacio blockquote::before { color: #ffe14a; }
.ws-lv-caito { box-shadow: 0 0 0 2px #ffe14a; }
.ws-lv-texto > p:not(.kicker):not(.ws-lv-sub), .ws-lv-prefacio figcaption span { color: rgb(255 255 255 / 82%); }
.ws-lv-texto h2, .ws-lv-prefacio blockquote, .ws-lv-prefacio figcaption b, .ws-lv-dentro li { color: #fff; }
.ws-lv-prefacio { background: rgb(20 8 60 / 28%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 16%); }
.ws-lv-dentro li { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 32%); }
.ws-lv-capa::before { background: radial-gradient(closest-side, rgb(255 225 74 / 38%), rgb(255 225 74 / 0)); }
.ws-lv .button.outline { border-color: rgb(255 255 255 / 40%); color: #fff; }
.ws-lv .button:hover { border-color: #fff; background: #fff; color: var(--violeta); }
/* Selo do livro mais à vista (Gui, 30/10/2026: "destacar mais, talvez embaixo,
   no fundo branco e não laranja"): branco, letra maior, no pé da capa. */
.ws-lv-selo { right: auto; left: 50%; bottom: 0; translate: -50% 0; padding: 14px 24px; background: #fff; color: #16130f; font-size: 17px; letter-spacing: 0; white-space: nowrap; box-shadow: 0 18px 34px -14px rgb(20 8 60 / 75%); transform: rotate(calc(-2deg * var(--giro))); }

/* Pilha de abertura (Gui, 30/10/2026: "foto sobreposta, tem que cuidar com
   isso para tudo"): o recado da frente encosta no canto de baixo à direita,
   mais estreito e com no máximo três linhas, para não cobrir a foto de trás. */
.gz-pilha > .gz-recado:last-child:nth-child(3) { left: auto; right: -2%; width: 64%; }
.gz-pilha > .gz-recado p { -webkit-line-clamp: 3; }
/* Frase de cliente nunca corta: no celular o cartão cresce. */
@media (max-width: 700px) { .gz-pilha > .gz-recado p { display: block; overflow: visible; } }

/* Marca-texto nas respostas (Gui, 30/10/2026: "brinque como se tivesse uma
   canetinha marca-texto, use minha paleta, mas o laranja use bem pouco").
   Traço torto de caneta, que se desenha quando a resposta entra na tela. */
.mt { background-color: transparent; padding: 0 .18em; margin: 0 -.06em; border-radius: .35em .2em .4em .25em; color: inherit; background-repeat: no-repeat; background-size: 0% 82%; background-position: 0 60%; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .9s cubic-bezier(.2, .7, .2, 1) .25s; }
.mt-lilas { background-image: linear-gradient(100deg, rgb(91 46 230 / .26), rgb(91 46 230 / .18) 70%, rgb(91 46 230 / .3)); }
.mt-ciano { background-image: linear-gradient(100deg, rgb(47 227 218 / .55), rgb(47 227 218 / .4) 70%, rgb(47 227 218 / .6)); }
.mt-menta { background-image: linear-gradient(100deg, rgb(110 231 183 / .6), rgb(110 231 183 / .42) 70%, rgb(110 231 183 / .65)); }
.mt-rosa { background-image: linear-gradient(100deg, rgb(244 114 182 / .38), rgb(244 114 182 / .26) 70%, rgb(244 114 182 / .42)); }
.mt-laranja { background-image: linear-gradient(100deg, rgb(255 106 31 / .55), rgb(255 106 31 / .4) 70%, rgb(255 106 31 / .6)); }
.visible .mt, html:not(.js-reveal) .mt { background-size: 100% 82%; }
[data-tema="escuro"] .mt { color: #16130f; background-size: 100% 100%; }
@media (prefers-reduced-motion: reduce) { .mt { transition: none; background-size: 100% 82%; } }

/* Ações dentro das respostas: a pergunta já vira o próximo passo. */
.pg-faq-acao { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 18px; }
.pg-faq-link { font-size: 15px; font-weight: 700; color: var(--accent-texto); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.pg-faq-link:hover { color: var(--text); }

/* ── Peças sem caixa (Gui, 30/10/2026: "esse é o padrão", sobre /conteudos/) ──
   Segunda rodada no mesmo dia, depois de ver no ar: "tá tudo BEM torcido" e "a
   curvatura me dá uma sensação de tristeza". Regras em brand/PADRAO.md, seção 4b:
   faixa é reta, giro só em foto e adesivo (ajuste único em --giro, marca.css),
   texto fica sempre reto, e a seção é tipografia e fio, não grade de cartões. */

/* O pedido final: a faixa reta de ponta a ponta, com o raio saindo da borda (marca.css). */
.pg-pedido { position: relative; isolation: isolate; gap: 28px 64px; align-items: end; padding: clamp(72px, 8vw, 112px) 0; border-radius: 0; background: none; }
main:has(.pg-pedido) + .rodape { margin-top: 0; border-top: 0; }

/* O dilema: duas folhas retas, uma por cima da outra. */
.pg-escuro { align-items: center; gap: 0; padding: 0; border-radius: 0; background: none; color: var(--text); }
.pg-escuro > * { position: relative; padding: clamp(30px, 4vw, 54px); border-radius: 26px; }
.pg-escuro > :first-child { z-index: 1; background: var(--bloco); color: var(--sobre-bloco); box-shadow: 0 34px 60px -36px var(--sombra); }
.pg-escuro > :last-child { margin: 40px 0 0 -4%; padding-left: calc(clamp(30px, 4vw, 54px) + 4%); background: var(--cartao); box-shadow: 0 0 0 1px var(--line), 0 26px 46px -32px var(--sombra); }
.pg-escuro > :last-child .rotulo { color: var(--accent-texto); }
.pg-escuro > :last-child p:not(.rotulo) { color: var(--body); }
[data-tema="escuro"] .pg-escuro > :first-child { box-shadow: 0 0 0 1px var(--line-2); }
.pg-escuro > :last-child .pg-agora-passos li { border-color: var(--line); color: var(--text); }
.pg-escuro > :last-child small { color: var(--muted); }
.pg-escuro > :last-child small a { color: inherit; }

/* Três ideias (dicas de evento): colunas com fio à mão, sem folha. */
.pg-escuro.ev-tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px); align-items: start; }
.pg-escuro.ev-tres > :nth-child(n) { margin: 0; padding: 22px 0 0; border-radius: 0; background: none; box-shadow: none; color: var(--text); }
.pg-escuro.ev-tres > :nth-child(n)::before { content: ''; position: absolute; left: 0; right: 0; top: -2px; height: 5px; background: var(--text); -webkit-mask: var(--traco-h) center / 100% 100% no-repeat; mask: var(--traco-h) center / 100% 100% no-repeat; }
.pg-escuro.ev-tres .rotulo { color: var(--accent-texto); }
.pg-escuro.ev-tres p:not(.rotulo) { color: var(--body); }
@media (max-width: 860px) { .pg-escuro.ev-tres { grid-template-columns: minmax(0, 1fr); } }

/* Em um minuto: um passe, com canhoto, picote e entalhes. */
.ws-ficha { --corte: 24%; position: relative; display: grid; grid-template-columns: var(--corte) minmax(0, 1fr); padding: 0; border-radius: 28px; background: linear-gradient(90deg, var(--accent) 0 var(--corte), var(--bloco) var(--corte));
  -webkit-mask: radial-gradient(circle 15px at var(--corte) 0, transparent 98%, #000), radial-gradient(circle 15px at var(--corte) 100%, transparent 98%, #000); -webkit-mask-composite: source-in; mask: radial-gradient(circle 15px at var(--corte) 0, transparent 98%, #000) intersect, radial-gradient(circle 15px at var(--corte) 100%, transparent 98%, #000); }
.ws-ficha::after { content: ''; position: absolute; top: 24px; bottom: 24px; left: var(--corte); border-left: 2px dashed rgb(243 238 229 / 42%); }
.ws-ficha h2 { align-self: center; padding: 36px 30px 36px 40px; font-size: clamp(28px, 2.7vw, 38px); color: var(--sobre-acc); text-wrap: balance; }
.ws-ficha-grade { gap: 0; margin: 0; padding: 38px 40px 40px 12px; }
.ws-ficha-grade > div { padding: 0 26px 0 28px; border-top: 0; }
.ws-ficha-grade > div + div { border-left: 1px solid rgb(243 238 229 / 16%); }
@media (max-width: 900px) {
  .ws-ficha { display: block; padding: 0; background: var(--bloco); -webkit-mask: none; mask: none; }
  .ws-ficha::after { display: none; }
  .ws-ficha h2 { padding: 26px 24px; border-radius: 28px 28px 0 0; background: var(--accent); }
  .ws-ficha-grade { gap: 26px; padding: 26px 24px 30px; }
  .ws-ficha-grade > div, .ws-ficha-grade > div + div { padding: 0; border-left: 0; }
}

/* Logos: adesivos, com giro em um sim e um não. No celular, a grade alinhada. */
@media (min-width: 901px) {
  .pg-logos li { box-shadow: 0 0 0 1px var(--line), 0 18px 28px -22px var(--sombra); transition: rotate .4s var(--sai); }
  .pg-logos li:nth-child(6n+1) { rotate: calc(-1.4deg * var(--giro)); }
  .pg-logos li:nth-child(6n+3) { rotate: calc(1deg * var(--giro)); }
  .pg-logos li:nth-child(6n+5) { rotate: calc(-1deg * var(--giro)); }
  .pg-logos li:hover { rotate: 0deg; }
}

/* Cartões de foto: a capa com borda de papel e o texto direto no fundo. */
.pg-enfases { gap: 34px 26px; }
.pg-enfases .cartao, .pg-enfases a.cartao { overflow: visible; background: none; box-shadow: none; border-radius: 0; rotate: 0deg; translate: 0 0; }
.pg-enfases li:nth-child(n) .cartao { rotate: 0deg; translate: 0 0; }
.pg-enfases .foto { overflow: hidden; border: 8px solid var(--cartao); border-radius: 20px; box-shadow: 0 24px 40px -28px var(--sombra); transition: rotate .45s var(--sai), translate .45s var(--sai), box-shadow .3s; }
.pg-enfases li:nth-child(4n+1) .foto { rotate: calc(-1.4deg * var(--giro)); }
.pg-enfases li:nth-child(4n+3) .foto { rotate: calc(1.1deg * var(--giro)); }
.pg-enfases li:hover .foto { rotate: 0deg; translate: 0 -5px; box-shadow: 0 32px 50px -28px var(--sombra); }
.pg-enfases .txt { padding: 18px 4px 0; }

/* Galeria: mural de cópias impressas, de tamanhos diferentes e sobrepostas. */
@media (min-width: 901px) {
  .pg-galeria { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0; align-items: center; padding-block: 8px 24px; }
  .pg-galeria li:nth-child(6n+1) { grid-column: span 5; z-index: 1; transform: rotate(calc(-1.4deg * var(--giro))); }
  .pg-galeria li:nth-child(6n+2) { grid-column: span 4; z-index: 2; margin: 34px -2% 0 -3%; transform: none; }
  .pg-galeria li:nth-child(6n+3) { grid-column: span 3; z-index: 1; margin-left: -1%; transform: rotate(calc(1deg * var(--giro))); }
  .pg-galeria li:nth-child(6n+4) { grid-column: span 4; z-index: 2; margin: -18px 0 0 2%; transform: none; }
  .pg-galeria li:nth-child(6n+5) { grid-column: span 3; z-index: 3; margin: -6px -3% 0 -2%; transform: rotate(calc(-1.2deg * var(--giro))); }
  .pg-galeria li:nth-child(6n+6) { grid-column: span 5; z-index: 2; margin: -30px 0 0 -1%; transform: none; }
}

/* Perguntas: a lista de um lado e a resposta aberta do outro, como o glossário de
   /conteudos/. Quem monta é brand/marca.js a partir de [data-perguntas]; todo o
   texto segue no HTML. No celular vira sanfona, e sem script fica a lista corrida. */
.pg-faq { gap: 0 clamp(36px, 5vw, 76px); }
.pg-faq details, .pg-faq details[open] { position: relative; border-radius: 0; background: none; box-shadow: none; }
.pg-faq details::before { content: ''; position: absolute; left: 0; right: 0; top: -2px; height: 4px; background: var(--line-2); -webkit-mask: var(--traco-h) center / 100% 100% no-repeat; mask: var(--traco-h) center / 100% 100% no-repeat; }
.pg-faq summary { padding: 22px 0; }
.pg-faq h3 { font-size: 21px; }
.pg-faq .mais { background: var(--cartao); box-shadow: 0 0 0 1px var(--line); }
.pg-faq details[open] h3 { color: var(--violeta-texto); }
.pg-faq details > p { padding: 0 44px 26px 50px; }
@media (max-width: 760px) { .pg-faq details > p { padding: 0 0 24px; } }
.pg-linhas:has(> .gz-perguntas) { border-top: 0; }
.pg-faq:has(> .gz-perguntas) { display: block; }
.gz-perguntas { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 0 clamp(40px, 6vw, 96px); margin: 0; padding: 0; list-style: none; }
.gz-perguntas > li { display: contents; }
.gz-perguntas :is(h2, h3) { position: relative; grid-column: 1; margin: 0; font: inherit; scroll-margin-top: 170px; }
.gz-perguntas :is(h2, h3)::before { content: ''; position: absolute; left: 0; right: 0; top: -2px; height: 4px; background: var(--line-2); -webkit-mask: var(--traco-h) center / 100% 100% no-repeat; mask: var(--traco-h) center / 100% 100% no-repeat; }
.gz-perguntas > li:first-child :is(h2, h3)::before { background: var(--text); }
.gz-perguntas button { display: grid; grid-template-columns: 2.6ch minmax(0, 1fr); gap: 12px; align-items: baseline; width: 100%; padding: 20px 0 21px; border: 0; background: none; color: var(--muted); font-family: var(--display); font-weight: 800; font-stretch: 88%; font-size: clamp(23px, 2.35vw, 32px); line-height: 1.08; letter-spacing: -.028em; text-align: left; text-wrap: balance; cursor: pointer; transition: color .2s; }
.gz-perguntas button i { font: 700 13px/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--accent-texto); }
.gz-perguntas button:hover, .gz-perguntas .aberta button { color: var(--text); }
.gz-perguntas button em { font-style: normal; }
.gz-perguntas .aberta button em { background: linear-gradient(transparent 56%, var(--accent) 56%, var(--accent) 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; color: var(--sobre-acc); }
[data-tema="escuro"] .gz-perguntas .aberta button em { background: linear-gradient(transparent 4%, var(--accent) 4%, var(--accent) 97%, transparent 97%); }
.gz-resposta { display: none; grid-column: 2; grid-row: 1 / span 40; align-self: start; position: sticky; top: 158px; padding: clamp(28px, 3vw, 40px); border-radius: 24px; background: var(--cartao); box-shadow: 0 0 0 1px var(--line), 0 30px 54px -36px var(--sombra); animation: gz-resposta .35s var(--sai); }
.gz-perguntas .aberta .gz-resposta { display: block; }
.gz-resposta > b.n { display: block; margin-bottom: 14px; font-family: var(--display); font-weight: 800; font-stretch: 86%; font-size: 64px; line-height: .9; letter-spacing: -.04em; color: var(--accent); }
.gz-resposta p { max-width: 60ch; margin: 0; font-size: 18px; line-height: 1.62; color: var(--body); text-wrap: pretty; }
.gz-resposta p + p, .gz-resposta p + ul { margin-top: 14px; }
.gz-resposta p a { color: var(--accent-texto); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.gz-resposta .pg-faq-acao { margin-top: 20px; }
.gz-resposta .mt { background-size: 100% 82%; }
@keyframes gz-resposta { from { opacity: .4; transform: translateY(8px); } }
@media (max-width: 900px) {
  .gz-perguntas { display: block; }
  .gz-perguntas > li { display: block; }
  .gz-perguntas button { grid-template-columns: 2.6ch minmax(0, 1fr) 20px; font-size: 23px; }
  .gz-perguntas button::after { content: '+'; color: var(--accent-texto); font: 700 22px/1 var(--sans); transition: rotate .25s var(--sai); }
  .gz-perguntas .aberta button::after { rotate: 45deg; }
  .gz-resposta { position: static; padding: 0 0 24px; border-radius: 0; background: none; box-shadow: none; animation: none; }
  .gz-resposta > b.n { display: none; }
}
@media (prefers-reduced-motion: reduce) { .gz-resposta { animation: none; } .gz-perguntas button { transition: none; } }

/* Palcos do congresso: crachás pendurados pelo cordão. */
.pg-palcos { isolation: isolate; gap: 44px 20px; padding-top: 34px; }
.pg-palcos li { position: relative; padding-top: 46px; border: 0; box-shadow: 0 0 0 1px var(--line), 0 24px 40px -30px var(--sombra); transform-origin: 50% -30px; transition: rotate .5s var(--sai), box-shadow .3s; }
.pg-palcos li:hover { rotate: 0deg; transform: none; border-color: transparent; }
.pg-palcos li:nth-child(6n+3) { rotate: calc(-1.2deg * var(--giro)); }
.pg-palcos li:nth-child(6n+5) { rotate: calc(1deg * var(--giro)); }
.pg-palcos li::before { content: ''; position: absolute; left: 50%; top: 16px; width: 54px; height: 12px; margin-left: -27px; border-radius: 99px; background: var(--bg); box-shadow: inset 0 2px 3px rgb(22 19 15 / 22%); }
.pg-palcos li::after { content: ''; position: absolute; z-index: -1; left: 50%; top: -34px; width: 14px; height: 56px; margin-left: -7px; border-radius: 4px; background: var(--violeta); }
.pg-palcos li:nth-child(even)::after { background: var(--text); }

/* Outros workshops: ingressos para a próxima página. */
.ws-outros-lista a { border-radius: 20px; -webkit-mask: radial-gradient(circle 12px at 0 50%, transparent 98%, #000), radial-gradient(circle 12px at 100% 50%, transparent 98%, #000); -webkit-mask-composite: source-in; mask: radial-gradient(circle 12px at 0 50%, transparent 98%, #000) intersect, radial-gradient(circle 12px at 100% 50%, transparent 98%, #000); }

/* O número do setor: grande, direto no papel, com a leitura ao lado. */
.pg-numero { margin-bottom: 34px; padding: 0; border-radius: 0; background: none; color: var(--text); }
.pg-numero b { font-size: clamp(56px, 8.4vw, 118px); color: var(--violeta-texto); }
.pg-numero p { font-size: 19px; color: var(--body); }

/* Texto não fica em caixa: coluna, fio à mão no topo e tipografia. Temas, sinais,
   ferramentas e a trilha de encontros usam a mesma regra. */
.pg-sinais:not(.pl-aneis), .ws-temas, .ws-ferramentas, .ws-cartoes { gap: 34px clamp(28px, 4vw, 56px); }
.pg-sinais:not(.pl-aneis) li, .ws-temas li, .ws-ferramentas li, .ws-cartoes li { position: relative; min-height: 0; padding: 22px 0 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--text); overflow: visible; }
.pg-sinais:not(.pl-aneis) li::after, .ws-temas li::after, .ws-ferramentas li::after, .ws-cartoes li::after { content: ''; position: absolute; left: 0; right: 0; top: -2px; height: 5px; background: var(--text); -webkit-mask: var(--traco-h) center / 100% 100% no-repeat; mask: var(--traco-h) center / 100% 100% no-repeat; }
.ws-cartoes li:nth-child(n) { background: none; color: var(--text); }
.ws-cartoes li:hover { transform: none; }
.ws-cartoes li:nth-child(n) .n { color: var(--accent); opacity: 1; font-size: clamp(64px, 6.4vw, 88px); }
.ws-cartoes b { margin-top: 10px; }
.ws-cartoes li > span:last-child { opacity: 1; color: var(--body); }
.ws-ferramentas-fecho { padding: 0; border-radius: 0; background: none; color: var(--body); font-size: 19px; }
.ws-ferramentas-fecho b { color: var(--text); }

/* Método em fases: sem painel escuro. Cada fase é uma linha, ligada à próxima pelo
   traço à mão; os passos são colunas e só o último vira adesivo laranja. */
.ws-fases { gap: 0; }
.ws-fase { position: relative; padding: 34px 0; border-radius: 0; background: none; color: var(--text); }
.ws-fase::before { content: ''; position: absolute; left: 0; right: 0; top: -2px; height: 5px; background: var(--text); -webkit-mask: var(--traco-h) center / 100% 100% no-repeat; mask: var(--traco-h) center / 100% 100% no-repeat; }
.ws-fase:nth-child(even)::before { transform: scaleX(-1); }
.ws-fase-cab > span:last-child { color: var(--body); }
.ws-passos { gap: 18px 28px; }
.ws-passos li { padding: 0; border-radius: 0; background: none; box-shadow: none; }
.ws-passos li > span:not(.n) { color: var(--body); }
.ws-passos .n { box-shadow: inset 0 0 0 2px var(--accent-texto); color: var(--accent-texto); }
.ws-passos em { color: var(--violeta-texto); }
.ws-fase-fim { background: none; color: var(--text); }
.ws-fase-fim .ws-fase-n { background: var(--accent); color: var(--sobre-acc); }
.ws-fase-fim .ws-fase-cab > span:last-child { color: var(--body); }
.ws-fase-fim .ws-passos li { padding: 22px 24px; border-radius: 22px; background: var(--accent); box-shadow: 0 24px 40px -28px var(--sombra); }
.ws-fase-fim .ws-passos li > span:not(.n) { color: rgb(23 18 12 / 82%); }
.ws-fase-fim .ws-passos .n { box-shadow: inset 0 0 0 2px var(--sobre-acc); color: var(--sobre-acc); }
.ws-fase-fim .ws-passos em { color: var(--sobre-acc); }

/* Quiz: a ferramenta é uma folha de papel em cima da lâmina roxa. */
.pg-sec .wh-sel { position: relative; isolation: isolate; background: var(--cartao); box-shadow: 0 30px 56px -38px var(--sombra); }
.pg-sec .wh-sel::before { content: ''; position: absolute; z-index: -2; inset: 12px -10px -14px 16px; border-radius: 34px; background: var(--violeta); }
.pg-sec .wh-sel::after { content: ''; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: var(--cartao); }

/* Gráfico, vídeo e prospectiva do workshop direto no papel. */
.pl-grafico, .ws-reel { padding: 0; border-radius: 0; background: none; box-shadow: none; }
.pg-sec > .ws-pv2, .ws-pv2 { box-shadow: 0 0 0 1px var(--line), 0 26px 46px -32px var(--sombra); }

/* Cartas dos workshops: a capa e o texto no papel. */
.wh-cartas { gap: 36px 28px; }
.wh-cartas a { overflow: visible; background: none; box-shadow: none; border-radius: 0; transition: none; }
.wh-cartas a:hover { transform: none; box-shadow: none; }
.wh-cartas .foto { border: 8px solid var(--cartao); border-radius: 20px; box-shadow: 0 26px 44px -28px var(--sombra); transition: rotate .45s var(--sai), translate .45s var(--sai), box-shadow .3s; }
.wh-cartas li:nth-child(3n+1) .foto { rotate: calc(-1.3deg * var(--giro)); }
.wh-cartas li:nth-child(3n+3) .foto { rotate: calc(1deg * var(--giro)); }
.wh-cartas li:nth-child(2) a { translate: 0 0; }
.wh-cartas a:hover .foto { rotate: 0deg; translate: 0 -5px; box-shadow: 0 34px 54px -28px var(--sombra); }
.wh-cartas .txt { padding: 20px 4px 0; }
.wh-cartas .ic { top: 22px; right: 22px; box-shadow: 0 8px 18px -8px var(--sombra); }

@media (max-width: 860px) {
  .pg-escuro { grid-template-columns: minmax(0, 1fr); }
  .pg-escuro > :last-child { margin: -14px 0 0; padding-left: clamp(30px, 4vw, 54px); padding-top: 44px; }
  .pg-escuro > * + *, .pg-escuro > div + div { padding-left: clamp(30px, 4vw, 54px); border-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pg-logos li, .pg-enfases .foto, .pg-palcos li { transition: none; }
}