/* Vitrine /palestras/ (Gui, 30/10/2026: "a mesma dinâmica de /workshops"):
   o seletor por clique, cópia do desenho do hub de workshops
   (brand/workshops-hub.css). Mudou lá, conferir aqui. */
.wh-sel-res .wh-tempo a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Duração em etiquetas pequenas, no pé do cartão e no resultado do seletor. */
.wh-tempo { display: flex; flex-wrap: wrap; gap: 6px; margin: auto 0 0; padding: 6px 0 0; list-style: none; }
.wh-tempo i, .wh-tempo li { padding: 6px 12px; border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 1px var(--line-2); font-style: normal; font-size: 13px; font-weight: 700; color: var(--text); }

/* Seletor: uma pergunta por tela, respostas em botões grandes, sem digitar.
   Fundo ciano da paleta do Gui (alfinete de 30/10/2026: no preto as respostas
   ficavam sem contraste; laranja e roxo não). Respostas em duas colunas e sem
   altura mínima, para não sobrar espaço vazio embaixo. */
.wh-sel { --ciano: #2fe3da; --tinta: #16130f; padding: 30px 40px 36px; border-radius: 30px; background: var(--ciano); color: var(--tinta); }
.wh-sel-topo { display: flex; align-items: center; gap: 18px; min-height: 40px; }
.wh-sel-volta { padding: 8px 14px; border: 1px solid rgb(22 19 15 / .35); border-radius: 999px; background: none; color: inherit; font: 600 14px/1 var(--texto, inherit); cursor: pointer; }
.wh-sel-volta:hover { background: var(--tinta); color: var(--ciano); }
.wh-sel-pontos { display: flex; gap: 6px; flex: 1; margin: 0; padding: 0; list-style: none; }
.wh-sel-pontos li { flex: 1; max-width: 70px; height: 5px; border-radius: 3px; background: rgb(22 19 15 / .16); transition: background .3s; }
.wh-sel-pontos li.feito { background: var(--tinta); }
.wh-sel-pontos li.agora { background: rgb(22 19 15 / .5); }
.wh-sel-conta { font-size: 14px; font-weight: 700; white-space: nowrap; }
.wh-sel-palco { padding-top: 22px; }
.wh-sel-palco > * { animation: wh-entra .35s var(--sai, ease) both; }
.wh-sel-q { margin: 0 0 20px; font-family: var(--display); font-weight: 800; font-stretch: 88%; font-size: clamp(28px, 3.2vw, 44px); line-height: 1; letter-spacing: -.03em; text-wrap: balance; }
.wh-sel-ops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wh-sel-op { min-height: 68px; padding: 16px 22px; border: 0; border-radius: 18px; background: #fff; box-shadow: 0 10px 22px -16px rgb(22 19 15 / .55); color: var(--tinta); font: 600 18px/1.3 inherit; text-align: left; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s, transform .2s; }
.wh-sel-op:hover, .wh-sel-op:focus-visible { box-shadow: inset 0 0 0 2px var(--tinta), 0 10px 22px -16px rgb(22 19 15 / .55); outline: none; transform: translateY(-2px); }
.wh-sel-op.escolhido { background: var(--tinta); color: #fff; transform: scale(.98); }
.wh-sel-res { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 40px; align-items: start; }
.wh-sel-res > div { grid-row: 1; grid-column: 1; }
.wh-sel-foto { grid-row: 1; grid-column: 2; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; rotate: calc(1.5deg * var(--giro)); box-shadow: 0 24px 40px -24px rgb(22 19 15 / .6); }
.wh-sel-res .kicker { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.wh-sel-res h3 { margin: 8px 0 0; font-family: var(--display); font-weight: 800; font-stretch: 86%; font-size: clamp(40px, 5vw, 68px); line-height: .95; letter-spacing: -.04em; }
.wh-sel-res p:not(.kicker) { max-width: 640px; font-size: 17px; line-height: 1.55; }
.wh-sel-res p.wh-sel-pq { font-weight: 700; }
.wh-sel-res .wh-tempo { margin: 14px 0 4px; }
.wh-sel-res .wh-tempo li { background: #fff; box-shadow: none; color: var(--tinta); }
.wh-sel-aviso { padding: 12px 16px; border-left: 3px solid var(--tinta); background: rgb(255 255 255 / .45); }
.wh-sel-seg a { color: var(--tinta); font-weight: 800; }
.wh-sel-res .acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.wh-sel-res .button { border-color: var(--tinta); background: var(--tinta); color: #fff; }
.wh-sel-res .button.outline { border-color: rgb(22 19 15 / .4); background: transparent; color: var(--tinta); }
.wh-sel-refaz { margin-top: 18px; padding: 0; border: 0; background: none; color: var(--tinta); font: 600 14px/1 inherit; text-decoration: underline; cursor: pointer; }
@keyframes wh-entra { from { opacity: 0; translate: 0 8px; } }

@media (max-width: 900px) {
  .wh-sel { padding: 22px 20px 28px; border-radius: 24px; }
  .wh-sel-ops { grid-template-columns: minmax(0, 1fr); }
  .wh-sel-op { min-height: 64px; font-size: 17px; }
  .wh-sel-res { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .wh-sel-foto { grid-row: 1; grid-column: 1; aspect-ratio: 16 / 9; rotate: none; }
  .wh-sel-res > div { grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) { .wh-sel-palco > * { animation: none; } }

/* Resultado do seletor (Gui, 30/10/2026): botões com fundo branco (o preto
   e o contorno brigavam com o ciano), entrada em cascata e o envio da
   indicação por e-mail. */
.wh-sel-res .button, .wh-sel-res .button.outline { border-color: #fff; background: #fff; color: var(--tinta); box-shadow: 0 10px 22px -16px rgb(22 19 15 / .55); }
.wh-sel-res .acoes .button:first-child { box-shadow: inset 0 0 0 2px var(--tinta), 0 10px 22px -16px rgb(22 19 15 / .55); }
.wh-sel-res .button:hover, .wh-sel-res .button.outline:hover { border-color: var(--tinta); background: var(--tinta); color: #fff; }
.wh-sel-res > div > * { animation: wh-entra .5s var(--sai, ease) both; }
.wh-sel-res > div > :nth-child(2) { animation-name: wh-salta; animation-delay: .08s; }
.wh-sel-res > div > :nth-child(3) { animation-delay: .16s; }
.wh-sel-res > div > :nth-child(4) { animation-delay: .24s; }
.wh-sel-res > div > :nth-child(5) { animation-delay: .32s; }
.wh-sel-res > div > :nth-child(n+6) { animation-delay: .4s; }
.wh-sel-foto { animation: wh-foto .7s var(--sai, ease) .1s both; }
@keyframes wh-salta { 0% { opacity: 0; transform: scale(.85) translateY(10px); } 60% { opacity: 1; transform: scale(1.04); } 100% { transform: none; } }
@keyframes wh-foto { from { opacity: 0; transform: translateY(24px) rotate(6deg) scale(.94); } to { opacity: 1; transform: none; } }
.wh-sel-mail { margin-top: 18px; padding: 20px; border-radius: 20px; background: rgb(255 255 255 / .55); }
.wh-sel-mail[hidden] { display: none; }
.wh-sel-mail-t { margin: 0 0 12px; font-weight: 800; }
.wh-sel-mail-campos { display: flex; flex-wrap: wrap; gap: 10px; }
.wh-sel-mail input:not(.hp) { flex: 1 1 220px; min-height: 50px; padding: 0 18px; border: 0; border-radius: 999px; background: #fff; color: var(--tinta); font: 500 16px/1 inherit; box-shadow: inset 0 0 0 1px rgb(22 19 15 / .18); }
.wh-sel-mail input:focus { outline: 2px solid var(--tinta); outline-offset: 1px; }
.wh-sel-mail .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.wh-sel-mail .button { background: var(--tinta) !important; border-color: var(--tinta) !important; color: #fff !important; }
.wh-sel-mail-msg { margin: 10px 0 0; font-size: 14px; font-weight: 700; }
.wh-sel-mail-msg:empty { display: none; }
.wh-sel-mail-msg.erro { color: #8a1c10; }
@media (prefers-reduced-motion: reduce) { .wh-sel-res > div > *, .wh-sel-foto { animation: none; } }

/* Cor do seletor (Gui, 30/10/2026: o ciano ficou "over"). Fundo lilás claro,
   da família do violeta da marca; o violeta fica só para o que pede ação
   (o botão principal do resultado e a barra de progresso). */
.wh-sel { --ciano: #efe9ff; background: var(--ciano); box-shadow: 0 0 0 1px rgb(91 46 230 / .14); }
.wh-sel-pontos li { background: rgb(91 46 230 / .16); }
.wh-sel-pontos li.feito { background: var(--violeta, #5b2ee6); }
.wh-sel-pontos li.agora { background: rgb(91 46 230 / .45); }
.wh-sel-volta:hover { background: var(--violeta, #5b2ee6); border-color: var(--violeta, #5b2ee6); color: #fff; }
.wh-sel-op:hover, .wh-sel-op:focus-visible { box-shadow: inset 0 0 0 2px var(--violeta, #5b2ee6), 0 10px 22px -16px rgb(22 19 15 / .4); }
.wh-sel-op.escolhido { background: var(--violeta, #5b2ee6); color: #fff; }
.wh-sel-res .kicker { color: var(--violeta, #5b2ee6); }
.wh-sel-res .acoes .button:first-child { border-color: var(--violeta, #5b2ee6); background: var(--violeta, #5b2ee6); color: #fff; box-shadow: 0 10px 22px -14px rgb(91 46 230 / .7); }
.wh-sel-aviso { border-left-color: var(--violeta, #5b2ee6); background: #fff; }
.wh-sel-mail .button { background: var(--violeta, #5b2ee6) !important; border-color: var(--violeta, #5b2ee6) !important; }