/* MARCA GUI ZANONI · sistema visual das páginas de conteúdo do site
   (artigos, minicursos e, depois, a home). Aprovado pelo Gui em 28/10/2026
   a partir da direção "revista" dos artigos.

   O que mora aqui: letras, cores claro/escuro, o raio do logo, botões, o
   botão de tema e o título de seção. O desenho de cada área (coluna de
   leitura, cartões de curso…) fica no CSS dela, sempre usando estes papéis.

   Cores são papéis, não valores. O escuro só remapeia os papéis:
     --bg, --cartao, --surface   papel, cartão e cartão rebaixado
     --text, --body, --muted     título, texto corrido, apoio
     --accent / --accent-texto   laranja de bloco / laranja para letra e link
     --sobre-acc                 letra em cima do laranja (sempre escura)
     --bloco / --sobre-bloco     bloco escuro e a letra nele
     --violeta                   terceira cor, em bloco com letra branca

   Ligar numa página:
     <script>try{if(localStorage.getItem('gz-tema')==='escuro')document.documentElement.dataset.tema='escuro'}catch(e){}</script>
     <link rel="stylesheet" href="/brand/marca.css?v=…">
     <script src="/brand/marca.js?v=…" defer></script>
   e o botão <button class="tema" data-tema-botao hidden>…</button> no topo. */

@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; src: url("/fonts/bricolage-grotesque.woff2?v=20261028") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("/fonts/figtree.woff2?v=20261028") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: italic; font-weight: 300 900; font-display: swap; src: url("/fonts/figtree-italic.woff2?v=20261028") format("woff2"); }
@font-face { font-family: "Shantell Sans"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("/fonts/shantell-sans.woff2?v=20261028") format("woff2"); }

:root {
  color-scheme: light;
  --gz-bg: #f1ece2;
  --gz-surface: #e8e0d1;
  --gz-cartao: #faf6ee;
  --gz-text: #16130f;
  --gz-body: #2d2924;
  --gz-muted: #5d564d;
  --gz-label: #5d564d;
  --gz-line: rgb(22 19 15 / 13%);
  --gz-line-2: rgb(22 19 15 / 24%);
  --gz-accent: #ff6a1f;
  --gz-accent-texto: #b23c08;
  --gz-sobre-acc: #16130f;
  --gz-bloco: #16130f;
  --gz-sobre-bloco: #f1ece2;
  --gz-sobre-bloco-2: #c9c1b3;
  --gz-violeta: #5b2ee6;
  --gz-violeta-texto: #5b2ee6;
  --gz-sombra: rgb(22 19 15 / 50%);
  --display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mao: "Shantell Sans", "Figtree", cursive;
  --raio: polygon(60% 0, 15% 58%, 45% 58%, 35% 100%, 85% 40%, 55% 40%, 72% 0);
  /* O raio em tamanho grande, o mesmo das capas. --raio é o desenho do ícone e deforma quando
     cresce. Usar com aspect-ratio: .5, sem esticar, e com o objeto da frente cobrindo quase tudo:
     só as pontas escapam e a cabeça completa a forma. */
  --raio-grande: polygon(38% 0, 72% 0, 52% 42%, 96% 42%, 30% 100%, 44% 54%, 4% 54%);
  --sai: cubic-bezier(.16, 1, .3, 1);
  /* Ajuste único da torção do site (Gui, 30/10/2026: "tá tudo BEM torcido"). Todo giro
     de foto e adesivo é multiplicado por este número: 1 é o desenho cheio, 0 é tudo reto. */
  --giro: .5;
  /* O traço feito à mão: as réguas e os fios do site. */
  --traco-h: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 6' preserveAspectRatio='none'%3E%3Cpath d='M0 2.6C90 1.9 170 2.9 260 2.2S430 1.6 520 2.5 700 3.2 790 2.3 930 1.7 1000 2.4L1000 4.3C930 4.9 860 3.9 760 4.6S560 4.1 470 4.9 300 3.8 210 4.5 60 4.1 0 4.7Z'/%3E%3C/svg%3E");
  --traco-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 1000' preserveAspectRatio='none'%3E%3Cpath d='M2.7 0C2.1 120 3.1 240 2.4 380S1.9 640 2.6 760 3.2 920 2.5 1000L3.6 1000C4.2 900 3.4 780 4 640S3.5 400 4.1 260 3.6 80 3.9 0Z'/%3E%3C/svg%3E");
}
:root[data-tema="escuro"] {
  color-scheme: dark;
  --gz-bg: #12100d;
  --gz-surface: #1d1a16;
  --gz-cartao: #1f1b17;
  --gz-text: #f3eee5;
  --gz-body: #d9d2c5;
  --gz-muted: #a89f91;
  --gz-label: #a89f91;
  --gz-line: rgb(243 238 229 / 12%);
  --gz-line-2: rgb(243 238 229 / 22%);
  --gz-accent-texto: #ff8f55;
  --gz-bloco: #262019;
  --gz-sobre-bloco: #f3eee5;
  --gz-sobre-bloco-2: #bdb4a6;
  --gz-violeta-texto: #a991ff;
  --gz-sombra: rgb(0 0 0 / 70%);
}


/* Os nomes curtos apontam para os valores --gz-*. Uma área que redefine --bg
   ou --text no próprio CSS (as edições do /mini/) volta para a marca com
   --bg: var(--gz-bg), sem copiar cor. */
:root {
  --erro: #b42318;
  --bg: var(--gz-bg);
  --surface: var(--gz-surface);
  --cartao: var(--gz-cartao);
  --text: var(--gz-text);
  --body: var(--gz-body);
  --muted: var(--gz-muted);
  --label: var(--gz-label);
  --line: var(--gz-line);
  --line-2: var(--gz-line-2);
  --accent: var(--gz-accent);
  --accent-texto: var(--gz-accent-texto);
  --sobre-acc: var(--gz-sobre-acc);
  --bloco: var(--gz-bloco);
  --sobre-bloco: var(--gz-sobre-bloco);
  --sobre-bloco-2: var(--gz-sobre-bloco-2);
  --violeta: var(--gz-violeta);
  --violeta-texto: var(--gz-violeta-texto);
  --sombra: var(--gz-sombra);
  --ink: var(--gz-sobre-acc);
}
:root[data-tema="escuro"] { --erro: #ff9d8f; }

/* Rede de proteção: enfeite girado ou sangrado nunca cria rolagem lateral. */
html { overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
body { background: var(--bg); color: var(--text); font-family: var(--sans); transition: background-color .3s, color .3s; }
/* Base do topo e dos botões em toda página, mesmo as que não carregam o
   site.css (Prospectiva, glossário, Talks): sem isso o padding somava à
   altura e a letra perdia a suavização, e o menu ficava "gordo" (alfinete do
   Gui, 30/10/2026). */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.gz-topo, .gz-topo *, .gz-topo *::before, .gz-topo *::after, .gz-menu, .gz-menu *, .button { box-sizing: border-box; }
.gz-topo a, .gz-menu a { text-decoration: none; color: inherit; }
::selection { background: var(--accent); color: var(--sobre-acc); }
:focus-visible { outline: 2px solid var(--accent-texto); outline-offset: 4px; border-radius: 4px; }

/* Ícones desenhados em traço (seta, sol, lua…): SVG com a classe .ic. */
.ic { display: inline-block; width: 1em; height: 1em; flex: none; vertical-align: -.12em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* A marca: nome em Bricolage e o raio laranja no lugar do ponto. */
.brand { display: inline-flex; align-items: center; gap: 4px; font-family: var(--display); font-weight: 800; font-stretch: 86%; letter-spacing: -.035em; color: var(--text); }
.brand span { width: 13px; height: 22px; margin: 0; font-size: 0; background: var(--accent); clip-path: var(--raio); }

/* Botões em pílula: tinta cheia, contorno, e o claro para fundo escuro. */
.button {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 18px;
  min-height: 50px; padding: 13px 24px; border: 1px solid var(--violeta); border-radius: 999px;
  /* O botão principal é roxo (Gui, 29/10/2026: "no nosso roxinho, para dar mais
     vibração ao site"). Era o grafite do texto. */
  background: var(--violeta); color: #fff; font: 600 15px/1.3 var(--sans); text-decoration: none; cursor: pointer;
  transition: background-color .18s, border-color .18s, color .18s;
}
.button .ic { width: 17px; height: 17px; }
.button:hover { border-color: var(--accent); background: var(--accent); color: var(--sobre-acc); }
.button.outline { border-color: var(--line-2); background: transparent; color: var(--text); }
.button.outline:hover { border-color: var(--text); background: var(--text); color: var(--bg); }
.button.claro { border-color: var(--sobre-bloco); background: var(--sobre-bloco); color: var(--bloco); }

/* Claro ou escuro: o leitor escolhe; sem script o botão não aparece. */
.tema {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 14px 6px 10px;
  border: 1px solid var(--line-2); border-radius: 999px; background: transparent; cursor: pointer;
  font: 600 13px/1 var(--sans); color: var(--text); transition: border-color .18s, background-color .18s;
}
.tema:hover { border-color: var(--text); }
.tema .ic { width: 18px; height: 18px; }
.tema .lua { display: none; }
[data-tema="escuro"] .tema .sol { display: none; }
[data-tema="escuro"] .tema .lua { display: inline-block; }

/* ---------- Cabeçalho único do site (brand/topo.html) ----------
   O mesmo em todas as páginas: home, artigos, minicursos, newsletter e
   conteúdos. Quem monta é tools/topo/aplicar.py (páginas estáticas) e
   newsletter/_pub.php (lê o mesmo brand/topo.html). Nas áreas de conteúdo
   entra a segunda linha (.gz-sub) com Artigos, Minicursos, Newsletter e
   Glossário. Prefixo gz- para não colidir com o CSS de cada área. */
.gz-topo { position: sticky; top: 0; z-index: 60; background: var(--bg); color: var(--text); font-family: var(--sans); transition: box-shadow .3s; }
.gz-topo.rolou { box-shadow: 0 1px 0 var(--line), 0 14px 30px -26px var(--sombra); }
.gz-topo a { color: inherit; text-decoration: none; }
.gz-topo-in, .gz-sub-in { width: var(--gz-largura); margin-inline: auto; }
.gz-topo-in { display: flex; align-items: center; gap: 26px; min-height: 84px; }
.gz-logo { flex: none; width: 98px; height: 68px; background: var(--text); -webkit-mask: url(/brand/gui-zanoni.png?v=1) center / contain no-repeat; mask: url(/brand/gui-zanoni.png?v=1) center / contain no-repeat; }
.gz-topo .gz-logo { color: transparent; }
.gz-links { display: flex; gap: 24px; margin-left: auto; font-size: 15px; font-weight: 500; line-height: 1.2; }
.gz-links a { padding-block: 6px; box-shadow: inset 0 -2px transparent; transition: color .18s, box-shadow .18s; }
.gz-links a:hover { color: var(--accent-texto); }
.gz-links a[aria-current] { box-shadow: inset 0 -2px var(--accent); }
.gz-acoes { display: flex; align-items: center; gap: 10px; }
.gz-alt { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 14px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1; }
.gz-alt::before { content: ''; width: 9px; height: 15px; background: var(--violeta); clip-path: var(--raio); }
.gz-alt:hover { border-color: var(--text); }
/* Prospectiva com o efeito holográfico do site antigo (pedido do Gui,
   29/10/2026): gradiente pastel que corre devagar e um brilho que atravessa.
   Texto escuro fixo, porque o fundo é claro nos dois temas. */
.gz-topo .gz-alt { position: relative; overflow: hidden; border-color: transparent; background: linear-gradient(115deg, #a7f3d0, #93c5fd, #e9d5ff, #fbcfe8, #93c5fd, #a7f3d0); background-size: 300% 300%; color: #0b0c16; animation: gz-holo 7s ease-in-out infinite; }
.gz-topo .gz-alt::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(120deg, transparent 32%, rgb(255 255 255 / 80%) 50%, transparent 68%); background-size: 230% 100%; animation: gz-holo-brilho 3.4s linear infinite; pointer-events: none; }
.gz-topo .gz-alt:hover { border-color: transparent; filter: brightness(1.06); }
@keyframes gz-holo { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes gz-holo-brilho { 0% { background-position: 190% 0; } 100% { background-position: -90% 0; } }
@media (prefers-reduced-motion: reduce) { .gz-topo .gz-alt, .gz-topo .gz-alt::after { animation: none; } }
.gz-topo .gz-contratar { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 20px; border: 1px solid var(--accent); border-radius: 999px; background: var(--accent); color: var(--sobre-acc); font: 600 14px/1.2 var(--sans); white-space: nowrap; transition: background-color .18s, border-color .18s, color .18s; }
.gz-topo .gz-contratar:hover { border-color: var(--text); background: var(--text); color: var(--bg); }
/* O tema no topo é só o ícone, entre Contratar palestra e a área de membros. */
.gz-acoes .gz-tema { justify-content: center; width: 40px; height: 40px; min-height: 0; padding: 0; border-radius: 50%; }
.gz-acoes .gz-tema span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gz-membro { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line-2); border-radius: 50%; }
.gz-membro:hover { border-color: var(--text); }
.gz-membro svg { width: 18px; height: 18px; }
.gz-burger { display: none; width: 44px; height: 44px; margin-left: 2px; padding: 12px 10px; border: 0; border-radius: 12px; background: transparent; cursor: pointer; }
.gz-burger span { display: block; height: 2px; margin: 4px 0; border-radius: 2px; background: var(--text); transition: transform .3s var(--sai), opacity .2s; }
.gz-burger.aberto span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.gz-burger.aberto span:nth-child(2) { opacity: 0; }
.gz-burger.aberto span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* A segunda linha das áreas de conteúdo. */
.gz-sub { border-top: 1px solid var(--line); }
.gz-sub-in { display: flex; align-items: center; gap: 24px; min-height: 50px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; font-size: 14px; font-weight: 600; white-space: nowrap; }
.gz-sub-in::-webkit-scrollbar { display: none; }
.gz-sub a { color: var(--muted); padding-block: 14px; box-shadow: inset 0 -2px transparent; transition: color .18s, box-shadow .18s; }
.gz-sub a:hover { color: var(--text); }
.gz-sub a[aria-current] { color: var(--text); box-shadow: inset 0 -2px var(--accent); }
.gz-sub .gz-sub-casa { display: inline-flex; align-items: center; gap: 8px; padding-right: 24px; border-right: 1px solid var(--line-2); color: var(--text); font-family: var(--display); font-weight: 800; font-stretch: 88%; font-size: 18px; letter-spacing: -.015em; box-shadow: none; }
.gz-sub .gz-sub-casa::before { content: ''; width: 10px; height: 17px; background: var(--accent); clip-path: var(--raio); }

/* O menu do celular e do tablet. */
.gz-menu {
  position: fixed; inset: 68px 0 0; z-index: 59; display: flex; flex-direction: column; gap: 2px; padding: 20px 20px 40px;
  overflow-y: auto; background: var(--bg); color: var(--text); font-family: var(--sans); visibility: hidden; opacity: 0; transform: translateY(-8px);
  transition: opacity .25s, transform .3s var(--sai), visibility 0s .3s;
}
.gz-menu.aberto { visibility: visible; opacity: 1; transform: none; transition: opacity .25s, transform .3s var(--sai); }
.gz-menu a { padding: 12px 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; font-family: var(--display); font-weight: 750; font-stretch: 90%; font-size: 26px; letter-spacing: -.02em; }
.gz-menu .button { margin-top: 18px; justify-content: center; border: 1px solid var(--accent); background: var(--accent); color: var(--sobre-acc); font-family: var(--sans); font-size: 16px; }

@media (max-width: 1160px) {
  .gz-links { display: none; }
  .gz-acoes { margin-left: auto; }
  .gz-burger { display: block; }
  .gz-alt, .gz-membro { display: none; }
}
@media (max-width: 700px) {
  .gz-topo-in { min-height: 68px; gap: 10px; }
  .gz-logo { width: 78px; height: 54px; }
  .gz-topo .gz-contratar { display: none; }
  .gz-sub-in { gap: 20px; min-height: 46px; font-size: 13px; }
  .gz-sub .gz-sub-casa { padding-right: 18px; font-size: 16px; }
}

/* ---------- Rodapé único das páginas de conteúdo (brand/rodape.html) ----------
   Conteúdos, Artigos, Minicursos, Newsletter e Glossário. Páginas
   institucionais (home, imprensa, NPS) usam o rodapé completo da home. */
.gz-rodape { margin-top: var(--gz-respiro); color: var(--muted); font-family: var(--sans); }
.gz-rodape-in { display: flex; align-items: center; justify-content: space-between; gap: 18px 36px; width: var(--gz-largura); margin-inline: auto; padding-block: 30px 40px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.6; }
.gz-rodape-marca { display: inline-flex; flex: none; align-items: center; gap: 4px; font-family: var(--display); font-weight: 800; font-stretch: 86%; font-size: 27px; line-height: 1; letter-spacing: -.035em; color: var(--text); text-decoration: none; }
.gz-rodape-marca span { width: 13px; height: 22px; background: var(--accent); clip-path: var(--raio); }
.gz-rodape p { flex: 0 1 46ch; min-width: 0; margin: 0; text-wrap: pretty; }
.gz-rodape nav { display: flex; flex: none; flex-wrap: wrap; gap: 6px 20px; }
.gz-rodape nav a { color: var(--muted); text-decoration: none; }
.gz-rodape nav a:hover { color: var(--accent-texto); }
.gz-rodape nav button { padding: 0; border: 0; background: none; color: var(--muted); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (max-width: 1000px) {
  .gz-rodape-in { flex-wrap: wrap; }
  .gz-rodape p { flex-basis: 60%; }
  .gz-rodape nav { flex: 1 1 100%; }
}
@media (max-width: 700px) {
  .gz-rodape-in { font-size: 12px; }
  .gz-rodape p { flex-basis: 100%; }
}

/* ---------- Pedido de PDF (brand/pdf-lead.js) ---------- */
.gz-lead { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; font-family: var(--sans); }
.gz-lead[hidden] { display: none; }
.gz-lead, .gz-lead * { box-sizing: border-box; }
.gz-lead .button { width: 100%; border-color: var(--accent); background: var(--accent); color: var(--sobre-acc); }
.gz-lead .button:hover { border-color: var(--text); background: var(--text); color: var(--bg); }
.gz-lead-fundo { position: absolute; inset: 0; background: rgb(18 16 13 / 70%); }
.gz-lead-caixa { position: relative; width: min(500px, 100%); max-height: calc(100dvh - 40px); overflow: auto; padding: 30px 30px 26px; border-radius: 26px; background: var(--cartao); color: var(--text); box-shadow: 0 30px 80px -24px var(--sombra); }
.gz-lead-caixa .gz-logo { display: block; width: 74px; height: 50px; margin-bottom: 16px; }
.gz-lead-x { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--surface); color: var(--text); font-size: 24px; line-height: 1; cursor: pointer; }
.gz-lead-kicker { display: flex; align-items: center; gap: 10px; margin: 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-texto); }
.gz-lead-kicker::before { content: ''; width: 10px; height: 17px; background: var(--accent); clip-path: var(--raio); }
.gz-lead-ok .gz-lead-kicker { padding-top: 0; border-top: 0; }
.gz-lead h2 { margin: 10px 0 8px; font-family: var(--display); font-weight: 800; font-stretch: 88%; font-size: 30px; line-height: 1.02; letter-spacing: -.03em; }
.gz-lead-sub { margin: 0; font-size: 15px; line-height: 1.55; color: var(--body); }
.gz-lead-form { display: grid; gap: 10px; margin-top: 18px; }
.gz-lead-form label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--muted); }
.gz-lead-form input { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--bg); color: var(--text); font: inherit; font-size: 16px; }
.gz-lead-form input:focus { outline: 2px solid var(--accent-texto); outline-offset: 1px; }
.gz-lead-form .button, .gz-lead-ok .button { justify-content: center; margin-top: 6px; text-decoration: none; }
.gz-lead-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.gz-lead-msg { min-height: 1.3em; margin: 0; font-size: 14px; }
.gz-lead-msg.erro { color: var(--erro); }
.gz-lead-ok { text-align: left; }

/* REGRA (Gui, 28/10/2026): nenhuma abertura de página deixa metade da tela
   vazia. Texto sozinho no topo é refeito com .gz-abre + .gz-pilha (ou visual
   próprio). Ver CLAUDE.md, "Marca nova: regras de página". */
/* ---------- Abertura das portas de conteúdo (.gz-abre) ----------
   A mesma em Conteúdos, Artigos, Minicursos, Newsletter e Glossário: texto à
   esquerda (kicker, título com o trecho grifado, apoio, ação) e, à direita, a
   pilha de capas reais (.gz-pilha) sobre o bloco laranja. Largura de todas as
   áreas: --gz-largura, a mesma do cabeçalho. */
/* Medidas que valem para o site inteiro: a coluna (--gz-largura, a mesma do
   cabeçalho) e o respiro entre blocos grandes (--gz-respiro). */
:root { --gz-largura: min(1240px, calc(100% - 64px)); --gz-respiro: clamp(72px, 9vw, 120px); }
.gz-abre { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(32px, 4vw, 64px); align-items: center; padding-block: clamp(36px, 4.5vw, 64px); }
.gz-abre-kicker { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-texto); }
.gz-abre-kicker::before { content: ''; flex: none; width: 11px; height: 19px; background: var(--accent); clip-path: var(--raio); }
.gz-abre-kicker a { color: inherit; text-decoration: none; }
.gz-abre-kicker a:hover { text-decoration: underline; text-underline-offset: 3px; }
.gz-abre h1 { margin: 18px 0 24px; font-family: var(--display); font-weight: 800; font-stretch: 86%; font-size: clamp(44px, 5vw, 80px); line-height: .93; letter-spacing: -.04em; text-wrap: balance; color: var(--text); }
.gz-abre-lead { max-width: 52ch; margin: 0; font-size: clamp(18px, 1.5vw, 20px); line-height: 1.6; color: var(--body); text-wrap: pretty; }
.gz-abre-meta { margin: 14px 0 0; font-size: 14px; color: var(--muted); }
.gz-abre-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.gz-abre-visual { position: relative; align-self: center; }

/* A pilha mostra cada imagem inteira (Gui, 30/10/2026: "espremido, imagens
   sobrepostas"): a principal grande em cima, a segunda embaixo à esquerda e o recado
   à direita. Elas só se tocam no canto. */
.gz-pilha { position: relative; width: 100%; max-width: 640px; aspect-ratio: 1 / .86; margin-left: auto; }
/* Atrás das peças, o raio da marca, a mesma ideia do baralho do toolkit em /conteudos/. */
.gz-pilha::before { content: ''; position: absolute; left: 25%; top: -7%; width: 58%; aspect-ratio: .5; background: var(--accent); clip-path: var(--raio-grande); transition: transform .6s var(--sai); }
.gz-pilha, .gz-pilha > * { box-sizing: border-box; }
.gz-pilha > * { position: absolute; margin: 0; overflow: hidden; border: 8px solid var(--cartao); border-radius: 20px; background: var(--cartao); color: var(--text); box-shadow: 0 30px 60px -34px var(--sombra); transition: transform .6s var(--sai); }
.gz-pilha > :nth-child(2) { right: 0; top: 0; width: 76%; transform: rotate(calc(1.6deg * var(--giro))); }
.gz-pilha > :nth-child(1) { left: 0; top: 45%; z-index: 1; width: 49%; transform: rotate(calc(-2.4deg * var(--giro))); }
.gz-pilha > :nth-child(3) { right: 2%; bottom: 0; z-index: 2; width: 56%; transform: rotate(calc(-1deg * var(--giro))); }
/* Com duas capas só, cada uma fica com a sua metade. */
.gz-pilha > :nth-child(1):nth-last-child(2) { top: 44%; left: 0; width: 62%; }
.gz-pilha > :nth-child(2):last-child { top: 0; width: 70%; }
.gz-pilha img { display: block; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: 12px; }
.gz-pilha > * img { width: 100%; }
@media (hover: hover) and (pointer: fine) {
  .gz-abre:hover .gz-pilha > :nth-child(1) { transform: translate(-6px, 4px); }
  .gz-abre:hover .gz-pilha > :nth-child(2) { transform: translate(6px, -4px); }
  .gz-abre:hover .gz-pilha > :nth-child(3) { transform: translateY(-4px); }
}
/* Um recado (depoimento) como cartão da pilha. */
.gz-recado { padding: 18px 22px 20px; }
.gz-recado::before { content: "\201C"; display: block; height: 30px; font-family: var(--display); font-weight: 800; font-size: 60px; line-height: 1; color: var(--accent); }
.gz-recado p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; margin: 0; font-family: var(--display); font-weight: 700; font-stretch: 92%; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.3; letter-spacing: -.01em; color: var(--text); }
.gz-recado small { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; font-size: 12px; color: var(--muted); }
.gz-recado small b { padding: 2px 9px; border-radius: 999px; background: #1f9d55; color: #fff; font-size: 11px; }
/* Um verbete do glossário como cartão da pilha. */
.gz-verbete { padding: 20px 22px 22px; }
.gz-verbete small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-texto); }
.gz-verbete b { display: block; margin: 8px 0 8px; font-family: var(--display); font-weight: 800; font-stretch: 88%; font-size: clamp(22px, 2.2vw, 30px); line-height: 1; letter-spacing: -.03em; }
.gz-verbete span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: 14px; line-height: 1.5; color: var(--body); }
@media (max-width: 900px) {
  .gz-abre { grid-template-columns: minmax(0, 1fr); gap: 44px; padding-top: 40px; }
  .gz-pilha { max-width: 460px; margin-inline: auto; }
}
@media (max-width: 700px) {
  :root { --gz-largura: calc(100% - 40px); }
  .gz-abre h1 { font-size: clamp(40px, 11.5vw, 60px); }
  .gz-pilha > * { border-width: 6px; border-radius: 16px; }
  .gz-pilha { aspect-ratio: 1 / 1.02; }
}
@media (prefers-reduced-motion: reduce) {
  .gz-pilha::before, .gz-pilha > * { transition: none; }
}

/* Título de seção: raio na frente e a linha de revista até a margem. */
.secao {
  display: flex; align-items: center; gap: 20px; margin: 0 0 22px;
  font-family: var(--display); font-weight: 800; font-stretch: 88%;
  font-size: clamp(22px, 2.2vw, 28px); line-height: 1.1; letter-spacing: -.03em; color: var(--text);
}
.secao::before { content: ''; flex: none; order: -1; width: 15px; height: 26px; background: var(--accent); clip-path: var(--raio); }
.secao::after { content: ''; flex: 1; height: 2px; background: var(--text); }

/* Marca-texto laranja em palavra de título. No escuro cobre a letra inteira. */
.marca-texto {
  font-style: normal; color: var(--sobre-acc); padding-inline: .04em;
  background: linear-gradient(transparent 52%, var(--accent) 52%, var(--accent) 94%, transparent 94%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
[data-tema="escuro"] .marca-texto { background: linear-gradient(transparent 4%, var(--accent) 4%, var(--accent) 97%, transparent 97%); }

@media (max-width: 700px) {
  .tema { padding: 6px 9px; }
  .tema span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
}

/* ---------- As faixas de ponta a ponta ----------
   Retas (Gui, 30/10/2026: "essa curvatura me dá uma sensação de tristeza"). A energia
   vem do raio da marca, da mesma cor da faixa, saindo pela borda de cima. */
.pg-pedido::before, .c-fim::before, .tk-cta::before, .palestra-cta::before, .pv5-fecho::before, .contato::before, .fim-laranja::before {
  content: ''; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); background: var(--accent);
}
.contato::before { background: var(--bloco); }
.pg-pedido::after, .c-fim::after, .tk-cta::after, .palestra-cta::after, .pv5-fecho::after, .fim-laranja::after {
  content: ''; position: absolute; z-index: -1; right: clamp(8px, 6vw, 96px); top: 0; width: clamp(72px, 7vw, 100px); aspect-ratio: .5; translate: 0 -60%; background: var(--accent); clip-path: var(--raio-grande);
}