/* COMPARTILHAR: o menu de três pontos que acompanha a leitura nos artigos e
   nas edições da newsletter (pedido do Gui, 30/10/2026). Copiar link, enviar
   por e-mail e compartilhar com o post já escrito. Comportamento em
   brand/compartilhar.js; o envio do e-mail em brand/compartilhar.php.
   No computador ele mora na margem esquerda, fora da coluna de leitura; no
   celular vira um botão redondo no canto, que some quando a pessoa desce lendo. */

.gzc { position: fixed; z-index: 62; left: max(16px, calc((100vw - var(--gz-largura)) / 2)); top: 42vh;
  font-family: var(--sans); opacity: 0; visibility: hidden; transform: translate3d(-8px, var(--gzc-y, 0px), 0);
  transition: opacity .35s ease, visibility .35s, transform .35s cubic-bezier(.2, .8, .2, 1); }
.gzc.visivel { opacity: 1; visibility: visible; transform: translate3d(0, var(--gzc-y, 0px), 0); }
.gzc.seguindo { transition: opacity .35s ease, visibility .35s; }

/* (botão e leque: ver "O selo" no fim do arquivo) */

/* Aviso curto: "Link copiado", "Enviado". */
.gzc-aviso { position: fixed; z-index: 120; left: 50%; bottom: 28px; padding: 12px 20px; border-radius: 999px; background: var(--gz-text); color: var(--gz-bg);
  font: 600 15px/1.2 var(--sans); box-shadow: 0 14px 40px -16px var(--gz-sombra); opacity: 0; transform: translate(-50%, 12px);
  transition: opacity .25s, transform .3s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.gzc-aviso.ver { opacity: 1; transform: translate(-50%, 0); }
.gzc-aviso::before { content: ""; display: inline-block; width: 9px; height: 15px; margin-right: 9px; vertical-align: -2px; background: var(--gz-accent); clip-path: var(--raio); }

/* Diálogos: e-mail e compartilhar. */
.gzc-dialogo { width: min(520px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--gz-line-2); border-radius: 24px;
  background: var(--gz-cartao); color: var(--gz-text); font-family: var(--sans); box-shadow: 0 30px 80px -30px var(--gz-sombra); overflow: auto; }
.gzc-dialogo::backdrop { background: rgb(22 19 15 / 45%); backdrop-filter: blur(3px); }
.gzc-dialogo[open] { animation: gzc-entra .28s cubic-bezier(.2, .8, .2, 1); }
@keyframes gzc-entra { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.gzc-dialogo form { display: grid; gap: 16px; padding: 30px; }
.gzc-topo { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.gzc-kicker { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; font: 700 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--gz-accent-texto); }
.gzc-kicker::before { content: ""; width: 9px; height: 15px; background: var(--gz-accent); clip-path: var(--raio); }
.gzc-dialogo h2 { margin: 0; font-family: var(--display); font-weight: 800; font-stretch: 86%; font-size: 30px; line-height: 1; letter-spacing: -.035em; }
.gzc-artigo { margin: 6px 0 0; font-size: 15px; line-height: 1.45; color: var(--gz-muted); }
.gzc-fechar { display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 1px solid var(--gz-line-2); border-radius: 999px;
  background: none; color: var(--gz-text); cursor: pointer; }
.gzc-fechar:hover { border-color: var(--gz-accent); color: var(--gz-accent-texto); }
.gzc-fechar svg { width: 18px; height: 18px; }
.gzc-campo { display: grid; gap: 7px; font-size: 14px; font-weight: 600; }
.gzc-campo small { font-weight: 400; color: var(--gz-muted); }
.gzc-campo input, .gzc-campo textarea { width: 100%; padding: 13px 16px; border: 1px solid var(--gz-line-2); border-radius: 14px; background: var(--gz-bg);
  color: var(--gz-text); font: 400 16px/1.45 var(--sans); }
.gzc-campo textarea { min-height: 96px; resize: vertical; }
.gzc-campo input:focus, .gzc-campo textarea:focus { outline: none; border-color: var(--gz-accent); box-shadow: 0 0 0 4px rgb(255 106 31 / 18%); }
.gzc-mel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.gzc-acoes { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.gzc-enviar { display: inline-flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--gz-accent);
  color: var(--gz-sobre-acc); font: 700 16px/1 var(--sans); cursor: pointer; transition: filter .15s; }
.gzc-enviar:hover { filter: brightness(1.05); }
.gzc-enviar[disabled] { opacity: .6; cursor: progress; }
.gzc-status { margin: 0; font-size: 14px; color: var(--gz-muted); }
.gzc-status.erro { color: var(--erro, #b3261e); }
.gzc-nota { margin: 0; font-size: 12px; line-height: 1.5; color: var(--gz-muted); }

/* Compartilhar: o post pronto e as redes. */
.gzc-post { min-height: 150px; }
.gzc-redes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gzc-redes button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 10px; border: 1px solid var(--gz-line-2);
  border-radius: 14px; background: var(--gz-bg); color: var(--gz-text); font: 600 14px/1 var(--sans); cursor: pointer; transition: border-color .15s, color .15s, background-color .15s; }
.gzc-redes button:hover { border-color: var(--gz-accent); color: var(--gz-accent-texto); }
.gzc-redes svg { width: 18px; height: 18px; flex: none; }
.gzc-redes .gzc-mais { grid-column: 1 / -1; }

/* Tablet e celular: botão no canto de baixo; o menu abre para cima. */
@media (max-width: 1180px) {
  .gzc { left: auto; right: 16px; top: auto; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translate3d(0, 14px, 0); }
  .gzc.visivel { transform: none; }
  .gzc.escondido { opacity: 0; visibility: hidden; transform: translate3d(0, 14px, 0); }
  .gzc-dialogo form { padding: 24px 20px; }
  .gzc-redes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media print { .gzc, .gzc-aviso { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
  .gzc-botao, .gzc-menu li { animation: none !important; }
  .gzc, .gzc-menu, .gzc-aviso { transition: opacity .2s; }
  .gzc-dialogo[open] { animation: none; }
}

/* ── O selo (Gui, 30/10/2026: a lista "parecia plugin de WordPress"; pediu
   algo divertido e dinâmico) ──────────────────────────────────────────────
   Selo escuro com o aviãozinho laranja no miolo, a frase "Espalhe a ideia"
   girando em volta e um anel que enche conforme a leitura (--gzc-p, do JS).
   No clique o avião vira X e três bolhas coloridas saltam em leque, cada uma
   com uma etiqueta de papel inclinada. Copiar o link solta faíscas de raio. */
.gzc-botao { position: relative; display: grid; place-items: center; width: 84px; height: 84px; padding: 0; border: 0; border-radius: 50%;
  background: #5b2ee6; color: #fff; cursor: pointer; box-shadow: 0 18px 38px -16px rgb(22 19 15 / 70%), inset 0 0 0 1px rgb(255 255 255 / 12%);
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), background-color .25s; }
@media (hover: hover) { .gzc-botao:hover { transform: scale(1.06) rotate(-3deg); } }
.gzc-botao:active { transform: scale(.95); }
.gzc-selo { position: absolute; inset: -7px; width: calc(100% + 14px); height: calc(100% + 14px); overflow: visible; pointer-events: none; }
.gzc-trilha, .gzc-lido { fill: none; stroke-width: 4; }
.gzc-trilha { stroke: rgb(91 46 230 / 18%); }
.gzc-lido { stroke: #ff6a1f; stroke-linecap: round; stroke-dasharray: 352; stroke-dashoffset: calc(352 * (1 - var(--gzc-p, 0)));
  transform: rotate(-90deg); transform-origin: 60px 60px; transition: stroke-dashoffset .25s linear; }
/* A logo branca no miolo, grande o bastante para ler; no clique ela sai
   girando e entra o X laranja. */
.gzc-miolo { position: relative; display: grid; place-items: center; width: 100%; height: 100%; }
.gzc-logo { width: 62%; height: auto; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), opacity .2s; }
@media (hover: hover) { .gzc-botao:hover .gzc-logo { transform: rotate(-6deg) scale(1.05); } }
.gzc-x { position: absolute; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #ff6a1f; color: #16130f;
  opacity: 0; transform: rotate(-90deg) scale(.4); transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), opacity .2s; }
.gzc-x svg { width: 21px; height: 21px; }
.gzc.aberto .gzc-botao { background: #16130f; }
.gzc.aberto .gzc-logo { opacity: 0; transform: rotate(120deg) scale(.4); }
.gzc.aberto .gzc-x { opacity: 1; transform: none; }
/* "Compartilhe": etiqueta que sai de trás do botão no passar do mouse. */
.gzc-dica { position: absolute; left: calc(100% + 14px); top: 50%; padding: 9px 15px 10px; border-radius: 999px; background: #16130f; color: #f1ece2;
  font: 700 14px/1 var(--sans); letter-spacing: .01em; white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translate(-14px, -50%) scale(.85); transform-origin: left center;
  transition: opacity .2s, transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.gzc-dica::before { content: ""; display: inline-block; width: 8px; height: 13px; margin-right: 7px; vertical-align: -1px; background: #ff6a1f; clip-path: var(--raio); }
.gzc-botao:focus-visible .gzc-dica { opacity: 1; transform: translate(0, -50%) scale(1) rotate(3deg); }
@media (hover: hover) { .gzc-botao:hover .gzc-dica { opacity: 1; transform: translate(0, -50%) scale(1) rotate(3deg); } }
.gzc.aberto .gzc-dica { opacity: 0 !important; }

/* O leque: bolhas em arco, à direita do selo no computador. */
.gzc-menu { position: absolute; left: 50%; top: 50%; width: 0; height: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.gzc-menu li { --c: #ff6a1f; --t: #16130f; --ang: calc(-52deg + var(--i) * 52deg); position: absolute; left: 0; top: 0;
  transform: translate(-50%, -50%) scale(.2); opacity: 0;
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1) calc(var(--i) * 60ms), opacity .2s calc(var(--i) * 60ms); }
.gzc-menu li:nth-child(2) { --c: #5b2ee6; --t: #fff; }
.gzc-menu li:nth-child(3) { --c: #2fe3da; }
.gzc.aberto .gzc-menu { pointer-events: auto; }
.gzc.aberto .gzc-menu li { opacity: 1; transform: translate(-50%, -50%) rotate(var(--ang)) translateX(104px) rotate(calc(-1 * var(--ang))); }
.gzc-menu button { position: relative; display: flex; align-items: center; gap: 0; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; }
.gzc-bolha { position: relative; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--c); color: var(--t);
  box-shadow: 0 14px 26px -12px rgb(22 19 15 / 60%); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.gzc-bolha svg { width: 23px; height: 23px; transition: opacity .2s, transform .3s; }
.gzc-ok { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: scale(.3); }
@media (hover: hover) { .gzc-menu button:hover .gzc-bolha { transform: scale(1.12) rotate(-6deg); } }
.gzc-tag { position: absolute; left: calc(100% + 10px); top: 50%; padding: 7px 12px 8px; border-radius: 3px; background: #fbf8f1; color: #16130f;
  font: 700 13.5px/1 var(--sans); white-space: nowrap; box-shadow: 0 8px 18px -10px rgb(22 19 15 / 55%), 0 0 0 1px rgb(22 19 15 / 8%);
  transform: translateY(-50%) rotate(calc(-3deg + var(--i) * 3deg)); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.gzc-tag::before { content: ""; position: absolute; left: -5px; top: 50%; width: 10px; height: 10px; background: inherit; transform: translateY(-50%) rotate(45deg); }
@media (hover: hover) { .gzc-menu button:hover .gzc-tag { transform: translateY(-50%) rotate(0) translateX(3px); } }
.gzc-menu button.feito .gzc-bolha > svg:first-child { opacity: 0; transform: scale(.3); }
.gzc-menu button.feito .gzc-ok { opacity: 1; transform: none; transition: opacity .2s, transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.gzc-menu button.feito .gzc-bolha { transform: scale(1.18); }
.gzc-menu button:focus-visible { outline: none; }
.gzc-menu button:focus-visible .gzc-bolha { outline: 3px solid #16130f; outline-offset: 3px; }
.gzc-botao:focus-visible { outline: 3px solid #ff6a1f; outline-offset: 6px; }

/* Faíscas de raio ao copiar o link. */
.gzc-faisca { position: fixed; z-index: 130; width: 12px; height: 20px; margin: -10px 0 0 -6px; background: var(--c); clip-path: polygon(60% 0, 15% 58%, 45% 58%, 35% 100%, 85% 40%, 55% 40%, 72% 0);
  pointer-events: none; animation: gzc-faisca .75s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes gzc-faisca { 0% { transform: translate(0, 0) rotate(var(--rot)) scale(.4); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(1); opacity: 0; } }

/* Celular: selo menor no canto; as bolhas sobem em coluna, com a etiqueta do
   lado de dentro e a página escurecida atrás. O leque em arco não cabia: as
   etiquetas batiam nas bolhas vizinhas e brigavam com o texto (Gui, 30/10/2026). */
@media (max-width: 1180px) {
  .gzc-botao { width: 68px; height: 68px; }
  .gzc-x { width: 38px; height: 38px; }
  .gzc-dica { left: auto; right: calc(100% + 12px); transform-origin: right center; transform: translate(14px, -50%) scale(.85); }
  .gzc-botao:focus-visible .gzc-dica { transform: translate(0, -50%) scale(1) rotate(-3deg); }
  .gzc.aberto .gzc-menu li { transform: translate(-50%, -50%) translateY(calc(-84px - var(--i) * 66px)); }
  .gzc-bolha { width: 54px; height: 54px; }
  .gzc-tag { left: auto; right: calc(100% + 10px); }
  .gzc-tag::before { left: auto; right: -5px; }
}
/* O véu mora fora do .gzc, direto no body: dentro dele o fixed ficava preso ao
   transform e cobria a página pela metade. Só existe no celular. */
.gzc-veu { position: fixed; inset: 0; z-index: 61; background: rgb(22 19 15 / 55%); backdrop-filter: blur(3px); cursor: pointer;
  opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s; }
.gzc-veu.ver { opacity: 1; visibility: visible; transition: opacity .25s; }
@media (min-width: 1181px) { .gzc-veu { display: none; } }
@media print { .gzc-veu { display: none; } }

/* ── As janelas (Gui, 30/10/2026: os popups estavam "meio sem sal") ──────────
   Cabeçalho violeta com um raio laranja grande e o título em branco; corpo
   creme. Na de redes, cada botão na cor da rede, entrando um por um; na de
   e-mail, o botão de enviar laranja que empurra a seta. Entrada com mola. */
.gzc-dialogo { width: min(560px, calc(100% - 28px)); border: 0; border-radius: 30px; background: #faf6ee; color: #16130f; box-shadow: 0 40px 90px -30px rgb(22 19 15 / 60%); }
.gzc-dialogo::backdrop { background: rgb(22 19 15 / 55%); backdrop-filter: blur(5px); }
.gzc-dialogo[open] { animation: gzc-salta .55s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes gzc-salta { from { opacity: 0; transform: translateY(40px) rotate(-2deg) scale(.94); } }
.gzc-dialogo form { gap: 18px; padding: 0 30px 30px; }
.gzc-topo { position: relative; overflow: hidden; margin: 0 -30px 4px; padding: 30px 30px 28px; background: #5b2ee6; color: #fff; }
.gzc-topo::after { content: ""; position: absolute; right: 54px; top: -18px; width: 96px; height: 190px; background: #ff6a1f; opacity: .95;
  clip-path: polygon(38% 0, 72% 0, 52% 42%, 96% 42%, 30% 100%, 44% 54%, 4% 54%); transform: rotate(12deg); pointer-events: none; }
.gzc-topo > div { position: relative; z-index: 1; max-width: 72%; }
.gzc-kicker { color: #ffd84a; }
.gzc-kicker::before { background: #ffd84a; }
.gzc-dialogo h2 { color: #fff; font-size: clamp(30px, 6vw, 38px); line-height: .95; }
.gzc-artigo { color: rgb(255 255 255 / 86%); }
.gzc-fechar { position: relative; z-index: 2; width: 44px; height: 44px; border: 0; background: #fff; color: #16130f; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.gzc-fechar:hover { transform: rotate(90deg) scale(1.08); color: #16130f; }
.gzc-campo { color: #16130f; }
.gzc-campo small, .gzc-nota, .gzc-status { color: #5d564d; }
.gzc-campo input, .gzc-campo textarea { border: 2px solid transparent; background: #fff; color: #16130f; box-shadow: 0 0 0 1px rgb(22 19 15 / 12%); }
.gzc-campo input:focus, .gzc-campo textarea:focus { border-color: #5b2ee6; box-shadow: 0 0 0 5px rgb(91 46 230 / 16%); }
.gzc-enviar { min-height: 54px; padding: 0 26px; background: #ff6a1f; color: #16130f; font-size: 17px; box-shadow: 0 14px 28px -14px rgb(255 106 31 / 80%);
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s; }
.gzc-enviar:hover { filter: none; transform: translateY(-2px) rotate(-1deg); }
.gzc-enviar svg { transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.gzc-enviar:hover svg { transform: translateX(5px); }

/* O post: um cartão branco, como no feed. */
.gzc-post { min-height: 160px; border-radius: 18px !important; font-size: 16px !important; }

/* As redes: cada uma na sua cor, entrando uma por uma. */
.gzc-redes { gap: 10px; }
.gzc-redes button { --c: #16130f; --t: #fff; min-height: 54px; border: 0; border-radius: 16px; background: var(--c); color: var(--t); font-size: 15px; font-weight: 700;
  box-shadow: 0 12px 22px -14px rgb(22 19 15 / 60%); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), filter .2s; }
.gzc-redes button:hover { border: 0; color: var(--t); transform: translateY(-3px) rotate(-1.5deg); filter: brightness(1.08); }
.gzc-redes button:nth-child(even):hover { transform: translateY(-3px) rotate(1.5deg); }
.gzc-redes [data-rede="linkedin"] { --c: #0a66c2; }
.gzc-redes [data-rede="whatsapp"] { --c: #25d366; --t: #0b3d1f; }
.gzc-redes [data-rede="instagram"] { --c: #e1306c; background: linear-gradient(45deg, #f9a825, #e1306c 55%, #833ab4); }
.gzc-redes [data-rede="x"], .gzc-redes [data-rede="threads"] { --c: #16130f; }
.gzc-redes [data-rede="facebook"] { --c: #1877f2; }
.gzc-redes .gzc-mais { --c: transparent; --t: #16130f; box-shadow: inset 0 0 0 2px rgb(22 19 15 / 18%); border-style: dashed; }
.gzc-redes svg { width: 20px; height: 20px; }
.gzc-dialogo[open] .gzc-redes button { animation: gzc-pula .5s cubic-bezier(.34, 1.56, .64, 1) both; }
.gzc-dialogo[open] .gzc-redes button:nth-child(2) { animation-delay: .05s; }
.gzc-dialogo[open] .gzc-redes button:nth-child(3) { animation-delay: .1s; }
.gzc-dialogo[open] .gzc-redes button:nth-child(4) { animation-delay: .15s; }
.gzc-dialogo[open] .gzc-redes button:nth-child(5) { animation-delay: .2s; }
.gzc-dialogo[open] .gzc-redes button:nth-child(6) { animation-delay: .25s; }
.gzc-dialogo[open] .gzc-redes button:nth-child(7) { animation-delay: .3s; }
@keyframes gzc-pula { from { opacity: 0; transform: translateY(16px) scale(.85); } }
@media (max-width: 560px) {
  .gzc-dialogo form { padding: 0 20px 22px; }
  .gzc-topo { margin: 0 -20px 4px; padding: 24px 20px 22px; }
  .gzc-topo::after { right: 40px; width: 70px; height: 150px; }
}
@media (prefers-reduced-motion: reduce) { .gzc-dialogo[open], .gzc-dialogo[open] .gzc-redes button { animation: none; } }