/* Página do Gerador de roteiros (/pt-br/gerador/, /en/gerador/, /es/gerador/).
   Carregado depois do clipador.css e do produtos.css: só acrescenta e sobrescreve, sem mexer nos dois.
   Cor por bloco do roteiro: gancho rosa, tensão âmbar, prova ciano, virada verde, chamada lilás. */
body.produto[data-tone="gerador"] {
  --k-hook: var(--t3); --k-tension: var(--t4); --k-proof: var(--t2); --k-turn: var(--t5); --k-cta: var(--t7);
  --g-grad: linear-gradient(110deg, var(--t3), var(--t7) 45%, var(--t2));
}
.gx-grad { background: var(--g-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .gx-grad { background-image: linear-gradient(110deg, #c81e5a, #6d3fe0 50%, #0b7a95); } }
:root[data-theme="light"] .gx-grad { background-image: linear-gradient(110deg, #c81e5a, #6d3fe0 50%, #0b7a95); }

/* hero */
.gx-hero { padding-bottom: 72px; }
.gx-hero::before { background:
  radial-gradient(42% 52% at 82% 30%, color-mix(in srgb, var(--t7) 26%, transparent), transparent 70%),
  radial-gradient(30% 40% at 62% 88%, color-mix(in srgb, var(--t3) 16%, transparent), transparent 70%),
  radial-gradient(34% 44% at 6% 12%, color-mix(in srgb, var(--t2) 12%, transparent), transparent 70%); }
.gx-hero .wrap { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
.gx-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 26px 0 0; list-style: none; }
.gx-chips li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--muted); background: color-mix(in srgb, var(--surface) 70%, transparent); font-size: 13px; font-weight: 600; }
.gx-chips li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.gx-stage { position: relative; padding-right: 150px; }
.gx-stage .phone { position: absolute; right: 0; bottom: -28px; width: 176px; max-width: none; transform: rotate(3deg); box-shadow: 0 0 0 1px rgb(255 255 255 / 12%), 0 40px 80px -30px rgb(0 0 0 / 70%), 0 0 0 6px color-mix(in srgb, var(--t7) 18%, transparent); }
.gx-stage .phone .tt-cap { font-size: 13px; -webkit-text-stroke-width: 4px; top: 56%; right: 22%; }
.gx-stage .phone .rail { transform: scale(.82); transform-origin: 100% 100%; bottom: 58px; right: 6px; }
.gx-stage .phone .post { font-size: 10.5px; bottom: 10px; left: 10px; right: 46px; }
.gx-stage .phone .feed-tabs { font-size: 10.5px; top: 10px; }
.gx-stage .phone .heart { bottom: 150px; right: 10px; }

/* o roteiro sendo escrito */
.gx-doc { position: relative; display: grid; align-content: start; gap: 12px; padding: 18px; border: 1px solid var(--ui-line-2); border-radius: 24px; color: var(--ui-ink); background: radial-gradient(90% 60% at 100% 0%, color-mix(in srgb, var(--t7) 20%, transparent), transparent 60%), radial-gradient(60% 50% at 0% 100%, color-mix(in srgb, var(--t3) 10%, transparent), transparent 70%), var(--ui-panel); box-shadow: 0 50px 100px -50px color-mix(in srgb, var(--t7) 70%, transparent); }
.gx-doc-top { display: flex; align-items: center; gap: 10px; }
.gx-dots { display: flex; gap: 5px; }
.gx-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--ui-line-2); }
.gx-dots i:first-child { background: #ff5f57; } .gx-dots i:nth-child(2) { background: #febc2e; } .gx-dots i:nth-child(3) { background: #28c840; }
.gx-doc-top b { flex: 1; min-width: 0; font-size: 13px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gx-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; color: #160d2b; background: var(--t7); font: 600 11px var(--mono); white-space: nowrap; }
.gx-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.gx-doc[data-state="writing"] .gx-status { color: var(--ui-ink); background: var(--ui-tint); }
.gx-doc[data-state="writing"] .gx-status::before { background: var(--t3); }
.gx-doc-title { font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.gx-meta { display: flex; flex-wrap: wrap; align-items: center; align-content: start; gap: 6px; }
.gx-meta span { padding: 3px 9px; border: 1px solid var(--ui-line-2); border-radius: 999px; color: var(--ui-soft); font: 500 11px var(--mono); }
.gx-blocks { display: grid; gap: 8px; padding: 0; margin: 0; list-style: none; }
.gx-b { --c: var(--k-hook); position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 12px; padding: 11px 12px 11px 14px; border-radius: 6px 14px 14px 6px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 16%, transparent), var(--ui-tint) 60%); box-shadow: inset 3px 0 0 var(--c); transition: opacity .3s ease, transform .3s ease; }
.gx-b[data-k="tension"] { --c: var(--k-tension); } .gx-b[data-k="proof"] { --c: var(--k-proof); } .gx-b[data-k="turn"] { --c: var(--k-turn); } .gx-b[data-k="cta"] { --c: var(--k-cta); }
.gx-b time { grid-row: span 3; color: color-mix(in srgb, var(--c) var(--ui-hue), #000); font: 600 11px/1.6 var(--mono); }
.gx-b .k { justify-self: start; padding: 1px 8px; border-radius: 999px; color: #0d0b12; background: var(--c); font-size: 11px; font-weight: 750; letter-spacing: .01em; }
.gx-b .say { color: var(--ui-ink); font-size: 14px; line-height: 1.45; font-weight: 550; }
.gx-b .say::before { content: "“"; } .gx-b .say::after { content: "”"; }
.gx-b .say:empty::before, .gx-b .say:empty::after { content: none; }
.gx-b .notes span:empty { display: none; }
.gx-b .notes { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--ui-mute); font-size: 11.5px; line-height: 1.4; }
.gx-b .notes span::before { content: attr(data-l) " · "; color: color-mix(in srgb, var(--c) var(--ui-hue), #000); font-weight: 650; }
.gx-caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; vertical-align: -2px; background: currentColor; animation: blink .8s step-end infinite; }
.gx-doc.is-typing .gx-b:not(.is-on) { opacity: .28; }
.gx-doc.is-typing .gx-b.is-on { transform: translateX(3px); }

/* ferramenta: moldura colorida */
.gx-tool-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.gx-tool-head .section-head { margin-bottom: 0; }
.gx-free { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; color: var(--ink); background: color-mix(in srgb, var(--t5) 16%, var(--surface)); border: 1px solid color-mix(in srgb, var(--t5) 40%, transparent); font-size: 13.5px; font-weight: 650; }
.gx-free::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--t5); box-shadow: 0 0 0 4px color-mix(in srgb, var(--t5) 25%, transparent); }
.gen-section { position: relative; isolation: isolate; }
.gen-section::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(40% 40% at 90% 10%, color-mix(in srgb, var(--t7) 10%, transparent), transparent 70%); }
.gen-tool .generate-button { background: linear-gradient(115deg, var(--t3), var(--t7) 50%, var(--t1)); }
.gen-tool .preview-spine li:nth-child(1) { border-color: color-mix(in srgb, var(--t3) 50%, transparent); } .gen-tool .preview-spine li:nth-child(1) time { color: color-mix(in srgb, var(--t3) var(--ui-hue), #000); }
.gen-tool .preview-spine li:nth-child(2) { border-color: color-mix(in srgb, var(--t4) 50%, transparent); } .gen-tool .preview-spine li:nth-child(2) time { color: color-mix(in srgb, var(--t4) var(--ui-hue), #000); }
.gen-tool .preview-spine li:nth-child(3) { border-color: color-mix(in srgb, var(--t2) 50%, transparent); } .gen-tool .preview-spine li:nth-child(3) time { color: color-mix(in srgb, var(--t2) var(--ui-hue), #000); }
.gen-tool .preview-spine li:nth-child(4) { border-color: color-mix(in srgb, var(--t5) 50%, transparent); } .gen-tool .preview-spine li:nth-child(4) time { color: color-mix(in srgb, var(--t5) var(--ui-hue), #000); }

/* passo a passo: ideia → roteiro → vídeo → publicar */
.gx-flow { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 0; margin: 0; list-style: none; counter-reset: gf; }
.gx-flow::before { content: ""; position: absolute; top: 34px; left: 6%; right: 6%; height: 2px; background: linear-gradient(90deg, var(--t2), var(--t7), var(--t3), var(--t5)); opacity: .5; }
.gx-flow > li { --c: var(--t2); counter-increment: gf; position: relative; display: grid; gap: 10px; align-content: start; padding: 22px 20px; border: 1px solid color-mix(in srgb, var(--c) 30%, var(--line)); border-radius: 22px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 12%, var(--surface)), var(--surface) 65%); }
.gx-flow > li:nth-child(2) { --c: var(--t7); } .gx-flow > li:nth-child(3) { --c: var(--t3); } .gx-flow > li:nth-child(4) { --c: var(--t5); }
.gx-flow .n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #0d0b12; background: var(--c); font: 600 12px var(--mono); }
.gx-flow .n::before { content: counter(gf); }
.gx-flow .ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); }
.gx-flow .ico svg { width: 26px; height: 26px; }
.gx-flow .hd { display: flex; align-items: center; justify-content: space-between; }
.gx-flow h3 { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.gx-flow p { color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.gx-flow .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.gx-flow .tags span { padding: 3px 9px; border-radius: 999px; color: var(--ink); background: color-mix(in srgb, var(--c) 14%, transparent); font-size: 12px; font-weight: 600; }

/* anatomia do roteiro */
.gx-anatomy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.gx-bars { display: grid; gap: 10px; padding: 22px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); }
.gx-bars .row { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 12px; align-items: center; font-size: 13.5px; font-weight: 650; }
.gx-bars .row i { --c: var(--t3); position: relative; display: block; height: 30px; border-radius: 9px; background: color-mix(in srgb, var(--c) 22%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent); }
.gx-bars .row i::after { content: attr(data-t); position: absolute; z-index: 1; left: 10px; top: 50%; translate: 0 -50%; color: var(--ink); font: 500 11.5px var(--mono); white-space: nowrap; }
.gx-bars .row i::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--s, 0%); width: var(--w); border-radius: 9px; background: color-mix(in srgb, var(--c) 55%, transparent); transform-origin: 0 50%; }
.gx-bars .r2 i { --c: var(--t4); } .gx-bars .r3 i { --c: var(--t2); } .gx-bars .r4 i { --c: var(--t5); } .gx-bars .r5 i { --c: var(--t7); }
.gx-bars .lanes { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 12px; margin-top: 8px; padding-top: 14px; border-top: 1px dashed var(--line-strong); color: var(--soft); font: 500 12px var(--mono); }
.gx-bars .lanes div { display: flex; flex-wrap: wrap; gap: 6px; }
.gx-bars .lanes div span { padding: 3px 9px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--muted); }
.gx-parts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0; margin: 0; list-style: none; }
.gx-parts li { --c: var(--t7); display: grid; gap: 6px; align-content: start; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.gx-parts li:nth-child(1) { --c: var(--t3); } .gx-parts li:nth-child(2) { --c: var(--t4); } .gx-parts li:nth-child(3) { --c: var(--t2); } .gx-parts li:nth-child(4) { --c: var(--t5); } .gx-parts li:nth-child(5) { --c: var(--t1); } .gx-parts li:nth-child(6) { --c: var(--t7); }
.gx-parts li::before { content: ""; width: 26px; height: 4px; border-radius: 4px; background: var(--c); }
.gx-parts b { font-size: 15.5px; font-weight: 750; }
.gx-parts span { color: var(--muted); font-size: 14px; line-height: 1.5; }

/* tecnologias por trás */
.gx-tech { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 0; margin: 0; list-style: none; }
.gx-tech li { --c: var(--t7); position: relative; display: grid; gap: 10px; align-content: start; padding: 22px; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); transition: border-color .25s ease, transform .25s var(--ease-out); }
.gx-tech li::after { content: ""; position: absolute; top: -40%; right: -30%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 22%, transparent), transparent); pointer-events: none; }
.gx-tech li:hover { border-color: color-mix(in srgb, var(--c) 60%, transparent); transform: translateY(-3px); }
.gx-tech .ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 55%, #000)); box-shadow: 0 12px 26px -14px var(--c); }
.gx-tech .ico svg { width: 24px; height: 24px; }
.gx-tech h3 { font-size: 17px; font-weight: 800; letter-spacing: -.015em; }
.gx-tech p { color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.gx-tech .stack { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.gx-tech .stack span { padding: 3px 9px; border: 1px solid color-mix(in srgb, var(--c) 40%, var(--line)); border-radius: 8px; color: var(--ink); background: color-mix(in srgb, var(--c) 8%, transparent); font: 500 11.5px var(--mono); }
.gx-tech li:nth-child(6n+1) { --c: var(--t7); } .gx-tech li:nth-child(6n+2) { --c: var(--t2); } .gx-tech li:nth-child(6n+3) { --c: var(--t3); }
.gx-tech li:nth-child(6n+4) { --c: var(--t4); } .gx-tech li:nth-child(6n+5) { --c: var(--t5); } .gx-tech li:nth-child(6n+6) { --c: var(--t1); }

/* exemplos por nicho */
.gx-niches { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.gx-niches button { --c: var(--t7); display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--muted); background: var(--surface); font: 650 14px var(--body); cursor: pointer; transition: color .2s ease, border-color .2s ease, background-color .2s ease; }
.gx-niches button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.gx-niches button:hover { color: var(--ink); border-color: var(--c); }
.gx-niches button[aria-selected="true"] { color: #0d0b12; border-color: transparent; background: var(--c); }
.gx-niches button[aria-selected="true"]::before { background: #0d0b12; }
.gx-niches button:focus-visible { outline: 3px solid color-mix(in srgb, var(--c) 60%, transparent); outline-offset: 2px; }
.gx-panels { display: grid; gap: 40px; }
.gx-panel { --c: var(--t7); display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 40px; align-items: center; }
.gx-panel .phone { justify-self: center; max-width: 280px; box-shadow: 0 0 0 1px rgb(255 255 255 / 10%), 0 40px 80px -36px var(--shadow), 0 0 0 6px color-mix(in srgb, var(--c) 22%, transparent); }
.gx-panel .who { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.gx-panel .who b { padding: 4px 12px; border-radius: 999px; color: #0d0b12; background: var(--c); font-size: 13px; font-weight: 750; }
.gx-panel .who span { color: var(--soft); font: 500 12.5px var(--mono); }
.gx-panel h3 { margin-bottom: 18px; font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; letter-spacing: -.03em; line-height: 1.12; }
.gx-panel .gx-blocks { gap: 8px; }
.gx-panel .gx-b { background: linear-gradient(90deg, color-mix(in srgb, var(--c) 13%, var(--surface)), var(--surface) 70%); color: var(--ink); border: 1px solid var(--line); }
.gx-panel .gx-b .say { color: var(--ink); }
.gx-panel .gx-b .notes { color: var(--muted); }
.gx-panel .gx-b .k { color: #0d0b12; }
.gx-panel .fine { margin-top: 12px; }
.gx-panel[hidden], .gx-niches[hidden] { display: none; }
.gx-panel[data-n="dentista"] { --c: var(--t2); } .gx-panel[data-n="corretora"] { --c: var(--t4); } .gx-panel[data-n="personal"] { --c: var(--t5); } .gx-panel[data-n="restaurante"] { --c: var(--t3); }
.gx-niches [data-n="dentista"] { --c: var(--t2); } .gx-niches [data-n="corretora"] { --c: var(--t4); } .gx-niches [data-n="personal"] { --c: var(--t5); } .gx-niches [data-n="restaurante"] { --c: var(--t3); }

/* resultado: três celulares */
.gx-feed { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; align-items: end; justify-items: center; padding: 0; margin: 0; list-style: none; }
.gx-feed li { display: grid; gap: 14px; justify-items: center; width: 100%; }
.gx-feed .phone { max-width: 260px; }
.gx-feed li:nth-child(2) .phone { max-width: 290px; box-shadow: 0 0 0 2px var(--t7), 0 40px 90px -34px color-mix(in srgb, var(--t7) 60%, transparent); }
.gx-feed figcaption { display: grid; gap: 2px; text-align: center; }
.gx-feed figcaption b { font-size: 15px; }
.gx-feed figcaption span { color: var(--muted); font-size: 13.5px; }
.gx-feed figure { display: grid; gap: 14px; justify-items: center; width: 100%; margin: 0; }

/* números do produto */
.gx-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding: 0; margin: 0; list-style: none; }
.gx-nums li { --c: var(--t7); display: grid; gap: 4px; padding: 22px; border: 1px solid color-mix(in srgb, var(--c) 30%, var(--line)); border-radius: 20px; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 14%, var(--surface)), var(--surface) 70%); }
.gx-nums li:nth-child(1) { --c: var(--t3); } .gx-nums li:nth-child(2) { --c: var(--t4); } .gx-nums li:nth-child(3) { --c: var(--t2); } .gx-nums li:nth-child(4) { --c: var(--t5); }
.gx-nums b { font-size: clamp(32px, 4vw, 46px); font-weight: 900; letter-spacing: -.04em; line-height: 1; color: var(--c); font-variant-numeric: tabular-nums; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .gx-nums b { color: color-mix(in srgb, var(--c) 70%, #000); } }
:root[data-theme="light"] .gx-nums b { color: color-mix(in srgb, var(--c) 70%, #000); }
.gx-nums span { color: var(--muted); font-size: 14px; }
.gx-nums-note { margin-top: 14px; }

/* chamada final */
.gx-final { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 28px; align-items: center; padding: clamp(28px, 5vw, 56px); overflow: hidden; border-radius: 32px; color: #fff; background: linear-gradient(125deg, #2a1065 0%, #5b2bd6 45%, #c42e72 100%); }
.gx-final::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(40% 70% at 100% 0%, rgb(34 184 217 / 35%), transparent 70%), radial-gradient(rgb(255 255 255 / 10%) 1px, transparent 1px) 0 0 / 18px 18px; }
.gx-final h2 { color: #fff; font-size: clamp(30px, 4vw, 50px); line-height: 1.02; font-weight: 900; letter-spacing: -.045em; }
.gx-final p { max-width: 48ch; margin-top: 14px; color: rgb(255 255 255 / 82%); font-size: 17px; }
.gx-final .gx-final-note { margin-top: 14px; color: rgb(255 255 255 / 72%); }
.gx-final .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
body.produto .gx-final .button-primary { color: #2a1065; background: #fff; box-shadow: 0 14px 30px -14px rgb(0 0 0 / 60%); }
.gx-final .button-ghost { color: #fff; background: rgb(255 255 255 / 10%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 35%); }
.gx-final .button-ghost:hover { box-shadow: inset 0 0 0 1px #fff; }
.gx-final .mini { display: grid; gap: 8px; padding: 16px; border-radius: 20px; background: rgb(10 6 20 / 45%); border: 1px solid rgb(255 255 255 / 14%); }
.gx-final .mini .gx-b { padding: 9px 10px 9px 12px; }
.gx-final .mini .gx-b .say { font-size: 13px; }

/* movimento */
@media (prefers-reduced-motion: no-preference) {
  .cl-js .gx-flow.is-live > li { animation: tl-in .55s ease-out both; animation-delay: calc(var(--i) * .18s); }
  .cl-js .gx-flow:not(.is-live) > li { opacity: 0; transform: translateY(14px); }
  .cl-js .gx-bars.is-live .row i::before { animation: grow-bar 1s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * .22s); }
  .cl-js .gx-bars:not(.is-live) .row i::before { transform: scaleX(0); }
  .cl-js .gx-nums.is-live li { animation: tl-in .5s ease-out both; animation-delay: calc(var(--i) * .12s); }
  .cl-js .gx-nums:not(.is-live) li { opacity: 0; transform: translateY(12px); }
  .cl-js .gx-panel:not([hidden]) { animation: gx-fade .4s ease-out both; }
  .cl-js .gx-final .mini .gx-b { animation: gx-glow 6s ease-in-out infinite; animation-delay: calc(var(--i) * 1.2s); }
}
@keyframes gx-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes gx-glow { 0%, 30%, 100% { box-shadow: inset 3px 0 0 var(--c); } 12% { box-shadow: inset 3px 0 0 var(--c), 0 0 0 1px var(--c), 0 10px 30px -12px var(--c); } }
@media (prefers-reduced-motion: reduce) {
  .gx-caret { display: none; }
  .gx-tech li, .gx-b { transition: none; }
}

/* responsivo */
@media (max-width: 1080px) {
  .gx-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gx-flow::before { display: none; }
  .gx-tech { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .gx-hero .wrap { grid-template-columns: 1fr; }
  .gx-stage { max-width: 620px; }
  .gx-anatomy, .gx-final { grid-template-columns: 1fr; }
  .gx-panel { grid-template-columns: 220px minmax(0, 1fr); gap: 28px; }
  .gx-panel .phone { max-width: 220px; }
  .gx-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gx-feed { gap: 14px; }
}
@media (max-width: 760px) {
  .gx-stage { padding-right: 0; padding-bottom: 0; }
  .gx-stage .phone { display: none; }
  .gx-flow, .gx-tech, .gx-parts { grid-template-columns: 1fr; }
  .gx-panel { grid-template-columns: 1fr; gap: 24px; }
  .gx-panel .phone { max-width: 230px; }
  .gx-feed { grid-template-columns: 1fr; gap: 36px; }
  .gx-feed .phone, .gx-feed li:nth-child(2) .phone { max-width: 240px; }
  .gx-feed li:nth-child(n+3) { display: none; }
  .gx-final .mini { display: none; }
  .gx-tool-head { display: grid; }
}
@media (max-width: 420px) {
  .gx-b { grid-template-columns: 1fr; padding-left: 12px; }
  .gx-b time { grid-row: auto; }
  .gx-nums { grid-template-columns: 1fr 1fr; gap: 10px; }
  .gx-nums li { padding: 16px; }
  .gx-bars { padding: 16px; }
  .gx-bars .row, .gx-bars .lanes { grid-template-columns: 64px minmax(0, 1fr); gap: 8px; font-size: 12.5px; }
  .gx-niches button { min-height: 40px; padding: 0 13px; font-size: 13.5px; }
}

/* chamada final no tema claro: cartão claro, como os demais */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .gx-final { color: var(--ink); background: radial-gradient(70% 90% at 100% 0%, color-mix(in srgb, var(--t7) 30%, transparent), transparent 70%), radial-gradient(60% 80% at 0% 100%, color-mix(in srgb, var(--t3) 16%, transparent), transparent 70%), var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }
  :root:not([data-theme="dark"]) .gx-final::before { background: radial-gradient(40% 70% at 100% 0%, rgb(34 184 217 / 18%), transparent 70%), radial-gradient(rgb(24 19 33 / 8%) 1px, transparent 1px) 0 0 / 18px 18px; }
  :root:not([data-theme="dark"]) .gx-final h2 { color: var(--ink); }
  :root:not([data-theme="dark"]) .gx-final p { color: var(--muted); }
  :root:not([data-theme="dark"]) .gx-final .gx-final-note { color: var(--soft); }
  :root:not([data-theme="dark"]) body.produto .gx-final .button-primary { color: #fff; background: var(--primary); }
  :root:not([data-theme="dark"]) .gx-final .button-ghost { color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }
  :root:not([data-theme="dark"]) .gx-final .button-ghost:hover { box-shadow: inset 0 0 0 1px var(--primary-text); }
  :root:not([data-theme="dark"]) .gx-final .mini { background: var(--ui-panel); border-color: var(--ui-line-2); }
}
:root[data-theme="light"] .gx-final { color: var(--ink); background: radial-gradient(70% 90% at 100% 0%, color-mix(in srgb, var(--t7) 30%, transparent), transparent 70%), radial-gradient(60% 80% at 0% 100%, color-mix(in srgb, var(--t3) 16%, transparent), transparent 70%), var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }
:root[data-theme="light"] .gx-final::before { background: radial-gradient(40% 70% at 100% 0%, rgb(34 184 217 / 18%), transparent 70%), radial-gradient(rgb(24 19 33 / 8%) 1px, transparent 1px) 0 0 / 18px 18px; }
:root[data-theme="light"] .gx-final h2 { color: var(--ink); }
:root[data-theme="light"] .gx-final p { color: var(--muted); }
:root[data-theme="light"] .gx-final .gx-final-note { color: var(--soft); }
:root[data-theme="light"] body.produto .gx-final .button-primary { color: #fff; background: var(--primary); }
:root[data-theme="light"] .gx-final .button-ghost { color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }
:root[data-theme="light"] .gx-final .button-ghost:hover { box-shadow: inset 0 0 0 1px var(--primary-text); }
:root[data-theme="light"] .gx-final .mini { background: var(--ui-panel); border-color: var(--ui-line-2); }