/* Resultado dos seletores de /workshops/ e /palestras/ e o popup de indicação
   (Gui, 30/10/2026: "muito botão", "o que é tag", "a ideia era popup,
   elegante"). Vem depois de workshops-hub.css e palestras-hub.css.

   Resultado: um botão só (pedir proposta); ver a página, enviar para alguém e
   refazer viram links discretos numa linha. As etiquetas viram uma ficha com
   rótulo e valor, como numa ficha técnica. */
.wh-sel-res .wh-ficha-res { display: flex; flex-wrap: wrap; gap: 0; margin: 18px 0 6px; padding: 0; border-block: 1px solid rgb(91 46 230 / .2); }
.wh-sel-res .wh-ficha-res > div { padding: 12px 22px 12px 0; margin-right: 22px; border-right: 1px solid rgb(91 46 230 / .2); }
.wh-sel-res .wh-ficha-res > div:last-child { border-right: 0; margin-right: 0; }
.wh-sel-res .wh-ficha-res dt { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--violeta, #5b2ee6); }
.wh-sel-res .wh-ficha-res dd { margin: 4px 0 0; font-family: var(--display); font-weight: 800; font-stretch: 90%; font-size: 20px; line-height: 1.15; letter-spacing: -.015em; color: var(--tinta, #16130f); }
.wh-sel-res .wh-ficha-res dd a { color: inherit; text-decoration: underline; text-decoration-color: rgb(91 46 230 / .45); text-underline-offset: 4px; }
.wh-sel-res p.wh-sel-aviso { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border: 0; border-radius: 14px; background: rgb(255 255 255 / .7); font-size: 15px; line-height: 1.5; }
.wh-sel-res p.wh-sel-aviso::before { content: 'i'; flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--violeta, #5b2ee6); color: #fff; font: italic 800 13px/1 Georgia, serif; }
.wh-sel-res .acoes { display: block; margin-top: 24px; }
.wh-sel-res .acoes .button { min-height: 56px; padding: 16px 28px; font-size: 16px; }
.wh-sel-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; }
.wh-sel-links a, .wh-sel-links button { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: var(--tinta, #16130f); font: 700 15px/1.3 inherit; text-decoration: none; cursor: pointer; }
.wh-sel-links a:hover, .wh-sel-links button:hover { color: var(--violeta, #5b2ee6); }
.wh-sel-links svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wh-sel-res .wh-sel-refaz { margin: 0; font-weight: 600; color: rgb(22 19 15 / .62); text-decoration: none; }

/* Popup de indicação */
.gz-indica { width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 28px; background: var(--cartao, #faf6ee); color: var(--text, #16130f); box-shadow: 0 40px 90px -30px rgb(22 19 15 / .55); }
.gz-indica::backdrop { background: rgb(22 19 15 / .5); backdrop-filter: blur(4px); }
.gz-indica[open] { animation: gz-indica-entra .35s cubic-bezier(.2, .8, .2, 1); }
@keyframes gz-indica-entra { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.gz-indica-in { position: relative; display: grid; gap: 14px; padding: 30px 30px 28px; }
.gz-indica-x { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--surface, #e8e0d1); color: inherit; font: 400 24px/1 inherit; cursor: pointer; }
.gz-indica-x:hover { background: var(--text, #16130f); color: var(--bg, #f1ece2); }
.gz-indica-rot { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--violeta, #5b2ee6); }
.gz-indica-t { margin: -6px 44px 0 0; font-family: var(--display); font-weight: 800; font-stretch: 86%; font-size: 30px; line-height: 1; letter-spacing: -.03em; }
.gz-indica-sub { margin: 0 0 4px; font-size: 15px; line-height: 1.5; color: var(--muted, #5d564d); }
.gz-indica-campo { display: grid; gap: 6px; }
.gz-indica-campo span { font-size: 14px; font-weight: 700; }
.gz-indica-campo small { font-weight: 500; color: var(--muted, #5d564d); }
.gz-indica input:not(.gz-indica-hp), .gz-indica textarea { width: 100%; padding: 14px 16px; border: 1px solid var(--line-2, #c9c1b3); border-radius: 14px; background: #fff; color: #16130f; font: 500 16px/1.4 inherit; resize: vertical; }
.gz-indica input:focus, .gz-indica textarea:focus { outline: 2px solid var(--violeta, #5b2ee6); outline-offset: 1px; border-color: transparent; }
.gz-indica-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.gz-indica-pe { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 4px; }
.gz-indica-msg { margin: 0; font-size: 14px; font-weight: 700; }
.gz-indica-msg.ok { color: #1f7a45; }
.gz-indica-msg.erro { color: #8a1c10; }
.gz-indica-env { flex: none; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; margin-left: auto; padding: 0 24px; border: 0; border-radius: 999px; background: var(--violeta, #5b2ee6); color: #fff; font: 700 16px/1 inherit; cursor: pointer; }
.gz-indica-env:hover { background: #16130f; }
.gz-indica-env:disabled { opacity: .6; cursor: progress; }
@media (max-width: 560px) {
  .gz-indica-in { padding: 24px 20px 22px; }
  .gz-indica-pe { flex-direction: column-reverse; align-items: stretch; }
  .gz-indica-env { justify-content: center; margin-left: 0; }
  .wh-sel-res .wh-ficha-res > div { padding-right: 14px; margin-right: 14px; }
}
@media (prefers-reduced-motion: reduce) { .gz-indica[open] { animation: none; } }

/* Perguntas com cara de brincadeira (Gui, 30/10/2026: "deveria ser uma
   brincadeira legal, está boring"). Contador em cima da pergunta, respostas
   em cartões com emoji e letra de atalho; o cartão sobe no mouse e "pula"
   quando é escolhido; as opções entram em cascata. */
.wh-sel-conta { display: none; }
.wh-sel-k { margin: 0 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--violeta, #5b2ee6); }
.wh-sel-q { margin-bottom: 24px; }
.wh-sel-ops { gap: 14px; }
.wh-sel-op { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 86px; padding: 14px 18px 14px 14px; border-radius: 22px; font-size: 19px; font-weight: 600; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), box-shadow .2s, background-color .2s, color .2s; }
.wh-op-emo { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: #f4f0ff; font-size: 28px; line-height: 1; transition: transform .35s cubic-bezier(.3, 1.8, .5, 1), background-color .2s; }
.wh-sel-op kbd { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; border: 1px solid rgb(91 46 230 / .25); background: #fff; color: var(--violeta, #5b2ee6); font: 800 13px/1 var(--sans, inherit); }
.wh-sel-op:hover, .wh-sel-op:focus-visible { transform: translateY(-3px) rotate(-.4deg); }
.wh-sel-op:hover .wh-op-emo, .wh-sel-op:focus-visible .wh-op-emo { transform: rotate(-10deg) scale(1.15); background: #e9e1ff; }
.wh-sel-op.escolhido { transform: scale(1.03); background: var(--violeta, #5b2ee6); color: #fff; animation: wh-pula .4s cubic-bezier(.3, 1.8, .5, 1); }
.wh-sel-op.escolhido .wh-op-emo { background: #fff; transform: scale(1.25) rotate(8deg); }
.wh-sel-op.escolhido kbd { border-color: transparent; background: rgb(255 255 255 / .2); color: #fff; }
@keyframes wh-pula { 40% { transform: scale(.94); } 100% { transform: scale(1.03); } }
.wh-sel-ops .wh-sel-op { animation: wh-entra .45s cubic-bezier(.2, .8, .2, 1) both; }
.wh-sel-ops .wh-sel-op:nth-child(2) { animation-delay: .06s; }
.wh-sel-ops .wh-sel-op:nth-child(3) { animation-delay: .12s; }
.wh-sel-ops .wh-sel-op:nth-child(4) { animation-delay: .18s; }
.wh-sel-palco > .wh-sel-ops { animation: none; }
@media (max-width: 900px) {
  .wh-sel-op { min-height: 72px; font-size: 17px; gap: 12px; }
  .wh-op-emo { width: 46px; height: 46px; font-size: 23px; border-radius: 13px; }
  .wh-sel-op kbd { display: none; }
}
@media (prefers-reduced-motion: reduce) { .wh-sel-op, .wh-op-emo, .wh-sel-ops .wh-sel-op { transition: none; animation: none; } }

/* Popup de indicação na linguagem dos outros popups do site (30/10/2026,
   "mais sal"): cabeçalho violeta com rótulo e raio amarelos e título branco,
   raio laranja grande no canto, fechar em círculo branco que gira, campos
   brancos com foco violeta, botão laranja que pula e entrada com mola. */
.gz-indica { overflow: hidden; border-radius: 30px; }
.gz-indica[open] { animation: gz-indica-mola .55s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes gz-indica-mola { from { opacity: 0; transform: translateY(40px) rotate(-2deg) scale(.94); } }
.gz-indica-in { gap: 0; padding: 0; }
.gz-indica-cab { position: relative; overflow: hidden; display: grid; gap: 10px; padding: 30px 30px 28px; background: #5b2ee6; color: #fff; }
.gz-indica-raio { position: absolute; top: -26px; right: 54px; width: 76px; height: 128px; background: #ff6a1f; clip-path: polygon(60% 0, 15% 58%, 45% 58%, 35% 100%, 85% 40%, 55% 40%, 72% 0); transform: rotate(12deg); opacity: .95; pointer-events: none; }
.gz-indica-rot { display: inline-flex; align-items: center; gap: 8px; color: #ffd84a; }
.gz-indica-rot i { width: 10px; height: 17px; background: #ffd84a; clip-path: polygon(60% 0, 15% 58%, 45% 58%, 35% 100%, 85% 40%, 55% 40%, 72% 0); }
.gz-indica-t { position: relative; margin: 0 72px 0 0; color: #fff; font-size: 34px; }
.gz-indica-sub { position: relative; margin: 0; color: #e4dcff; }
.gz-indica-x { z-index: 2; top: 16px; right: 16px; background: #fff; color: #5b2ee6; font-weight: 700; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background-color .2s; }
.gz-indica-x:hover { transform: rotate(90deg); background: #ffd84a; color: #16130f; }
.gz-indica-corpo { display: grid; gap: 14px; padding: 24px 30px 28px; }
.gz-indica input:not(.gz-indica-hp), .gz-indica textarea { border-color: #e3dccf; background: #fff; }
.gz-indica-env { background: #ff6a1f; color: #16130f; font-weight: 800; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), background-color .2s; }
.gz-indica-env:hover { background: #ff6a1f; transform: translateY(-4px) scale(1.03); }
@media (max-width: 560px) { .gz-indica-cab { padding: 26px 20px 22px; } .gz-indica-corpo { padding: 20px 20px 22px; } .gz-indica-t { font-size: 28px; } }
@media (prefers-reduced-motion: reduce) { .gz-indica-x, .gz-indica-env { transition: none; } }

/* Ações do resultado em hierarquia (Gui, 30/10/2026: "muito sem destaque"):
   1. conhecer (roxo cheio), 2. pedir proposta (branco com contorno),
   3. enviar para alguém (lilás com ícone). Refazer fica como link. */
.wh-sel-res .wh-sel-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 26px; }
.wh-sel-res .wh-sel-acoes .button { min-height: 58px; padding: 16px 28px; font-size: 17px; }
.wh-sel-res .wh-sel-acoes .button:first-child { border-color: var(--violeta, #5b2ee6); background: var(--violeta, #5b2ee6); color: #fff; box-shadow: 0 14px 26px -14px rgb(91 46 230 / .75); }
.wh-sel-res .wh-sel-acoes .button:first-child:hover { background: #16130f; border-color: #16130f; transform: translateY(-2px); }
.wh-sel-res .wh-sel-acoes .wh-sel-prop { border: 2px solid #16130f; background: #fff; color: #16130f; box-shadow: none; }
.wh-sel-res .wh-sel-acoes .wh-sel-prop:hover { background: #16130f; color: #fff; }
.wh-sel-env { display: inline-flex; align-items: center; gap: 10px; min-height: 58px; padding: 0 22px; border: 0; border-radius: 999px; background: #e3d9ff; color: var(--violeta, #5b2ee6); font: 700 16px/1 inherit; cursor: pointer; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), background-color .2s; }
.wh-sel-env svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wh-sel-env:hover { background: #d4c6ff; transform: translateY(-2px); }
.wh-sel-res > div > .wh-sel-refaz { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 0; border: 0; background: none; color: rgb(22 19 15 / .6); font: 600 14px/1 inherit; text-decoration: none; cursor: pointer; }
.wh-sel-res > div > .wh-sel-refaz svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wh-sel-res > div > .wh-sel-refaz:hover { color: var(--violeta, #5b2ee6); }
@media (max-width: 560px) { .wh-sel-res .wh-sel-acoes > * { width: 100%; justify-content: center; } }

/* Ações numa faixa de ponta a ponta embaixo do texto e da foto (Gui,
   30/10/2026: "tem gaps, dá para distribuir melhor os botões"): os três
   botões numa linha e o "Refazer" encostado à direita. */
.wh-sel-res { row-gap: 26px; }
.wh-sel-res > .wh-sel-pe { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding-top: 24px; border-top: 1px solid rgb(91 46 230 / .18); }
.wh-sel-res .wh-sel-pe .wh-sel-acoes { margin-top: 0; }
.wh-sel-res .wh-sel-pe > .wh-sel-refaz { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 0; border: 0; background: none; color: rgb(22 19 15 / .6); font: 600 14px/1 inherit; cursor: pointer; }
.wh-sel-res .wh-sel-pe > .wh-sel-refaz svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wh-sel-res .wh-sel-pe > .wh-sel-refaz:hover { color: var(--violeta, #5b2ee6); }
.wh-sel-foto { align-self: stretch; height: 100%; aspect-ratio: auto; min-height: 280px; }
@media (max-width: 900px) { .wh-sel-res > .wh-sel-pe { grid-row: 3; } .wh-sel-foto { height: auto; aspect-ratio: 16 / 9; min-height: 0; } }