/* RE.CREATE v7 — Pacotes de skills + Agentes ChatGPT (carrossel e órbita). */

/* ---------- Pacotes de skills ---------- */
.skpac__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); align-items: stretch; }
.skpac__card { position: relative; display: flex; flex-direction: column; gap: var(--s3); padding: var(--s5); border: 1px solid var(--line-d); border-radius: 22px; overflow: hidden;
  background: radial-gradient(120% 70% at 0% 0%, rgba(255,255,255,.05) 0%, transparent 60%), linear-gradient(180deg, #121212 0%, #090909 100%);
  transition: border-color .3s, transform .35s var(--ease), box-shadow .35s; }
.skpac__card::after { content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent); opacity: .5; }
.skpac__card:hover { border-color: rgba(255,255,255,.28); transform: translateY(-4px); box-shadow: 0 24px 50px -28px rgba(0,0,0,.9); }
.skpac__card.is-hot { border-color: var(--accent); background: radial-gradient(120% 80% at 0% 0%, rgba(255,106,43,.16) 0%, transparent 60%), linear-gradient(180deg, #151110 0%, #0a0908 100%); box-shadow: 0 0 0 1px rgba(255,106,43,.25), 0 30px 60px -32px rgba(255,106,43,.45); }
.skpac__card.is-hot::after { background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 1; }
.skpac__card.is-soon { opacity: .62; }
.skpac__top { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); min-height: 7.2rem; justify-content: flex-end; }
.skpac__top .selo { order: -1; }
.skpac__num { font-family: var(--display); font-variation-settings: 'wdth' 118; font-weight: 700; font-size: clamp(3.4rem, 5.5vw, 4.8rem); line-height: .85; letter-spacing: -0.05em; display: flex; align-items: baseline; gap: 8px; }
.skpac__num small { font-family: var(--body); font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--mute-d); }
.skpac__card.is-hot .skpac__num { color: var(--accent); }
.skpac__n { font-family: var(--display); font-weight: 650; font-size: 1.15rem; letter-spacing: -0.01em; margin-top: var(--s2); }
.skpac__d { color: var(--mute-d); font-size: .92rem; line-height: 1.55; }
.skpac__cats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: var(--s2); }
.skpac__cats li { font-size: .72rem; color: #cfcfcf; padding: 5px 10px; border: 1px solid var(--line-d); border-radius: 999px; background: rgba(255,255,255,.03); }
.skpac__cats b { color: #fff; margin-right: 2px; }
.skpac__foot { display: grid; gap: var(--s3); padding-top: var(--s4); border-top: 1px solid var(--line-d); }
.skpac__p { font-family: var(--display); font-weight: 650; font-size: 1.25rem; color: #fff; }
.skpac__btn { width: 100%; }
@media (max-width: 860px) { .skpac__grid { grid-template-columns: minmax(0, 1fr); } }

.skdlg__sub { color: var(--mute-d); font-size: .9rem; margin: var(--s1) 0 var(--s5); }
.skdlg__list { display: grid; gap: var(--s3); }
.skdlg__item { border: 1px solid var(--line-d); border-radius: var(--r-s); padding: var(--s3) var(--s4); background: rgba(255,255,255,.02); }
.skdlg__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.skdlg__top b { font-size: 1rem; }
.skdlg__type { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.skdlg__cat { color: var(--mute-d); font-size: .78rem; margin-top: 2px; }
.skdlg__desc { color: #dcdcdc; font-size: .88rem; line-height: 1.55; margin-top: var(--s2); }
.skdlg__cmd { display: block; margin-top: var(--s2); padding: 8px 10px; background: #000; border: 1px solid var(--line-d); border-radius: 6px; font-size: .78rem; color: #9fe870; overflow-x: auto; white-space: pre; }
.skdlg__acts { display: flex; gap: var(--s4); margin-top: var(--s2); }
.skdlg__acts a { font-size: .82rem; text-decoration: underline; text-underline-offset: 3px; color: var(--mute-d); }
.skdlg__acts a:hover { color: #fff; }
.skdlg__cta { margin-top: var(--s5); text-align: center; }


@media (prefers-reduced-motion: reduce) { .skpac__card { transition: none; } }

/* RE.CREATE — Agentes ChatGPT: carrossel com preço + painel de controle orbital. */
.gpx {
  --v: #9b6bff;
  --v-soft: rgba(155, 107, 255, .16);
  --v-line: rgba(155, 107, 255, .32);
  --hud: rgba(255, 255, 255, .07);
  --mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Consolas, monospace;
}
.gpx-kx { color: var(--v); }
.gpx-kx::before { background: var(--v); }
.gpx-mono { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; color: var(--mute-d); display: flex; gap: var(--s3); justify-content: space-between; align-items: center; }
.gpx .btn--sm { height: 36px; padding: 0 14px; font-size: .82rem; }
.gpx .btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- Carrossel ---------- */
.gpx-car { position: relative; margin-bottom: var(--s7); }
.gpx-track { display: flex; gap: var(--s3); overflow-x: auto; scroll-snap-type: x proximity; padding: 4px 2px var(--s2); scrollbar-width: none; cursor: grab; }
.gpx-track::-webkit-scrollbar { display: none; }
.gpx-card { flex: 0 0 212px; scroll-snap-align: start; display: grid; gap: var(--s3); }
.gpx-card__img { position: relative; display: block; padding: 0; aspect-ratio: 3 / 4.4; border-radius: var(--r-m); overflow: hidden; border: 1px solid var(--line-d); background: #000; cursor: pointer; transition: border-color .3s, box-shadow .3s; }
.gpx-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); pointer-events: none; }
.gpx-card__img:hover, .gpx-card__img:focus-visible { border-color: var(--v); box-shadow: 0 0 0 1px var(--v), 0 16px 36px -16px rgba(155, 107, 255, .6); }
.gpx-card__img:hover img { transform: scale(1.04); }
.gpx-card.is-soon .gpx-card__img img { filter: grayscale(.5); opacity: .55; }
.gpx-soon { position: absolute; top: 10px; right: 10px; }
.gpx-card__meta { display: grid; gap: var(--s2); padding: 0 2px; }
.gpx-card__price { font-family: var(--display); font-weight: 650; font-size: 1.05rem; color: var(--v); }
.gpx-card__acts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s1); }
.gpx-card__acts .btn { width: 100%; padding: 0 8px; }
.gpx-nav { position: absolute; top: calc(50% - 60px); translate: 0 -50%; z-index: 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.8); border: 1px solid var(--line-d); color: #fff; transition: border-color .2s; }
.gpx-nav svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.gpx-nav:hover { border-color: var(--v); }
.gpx-nav--p { left: -10px; }
.gpx-nav--n { right: -10px; }

/* ---------- Painel de controle ---------- */
.gpx-console { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--s6); align-items: center; padding: var(--s6); border: 1px solid var(--line-d); border-radius: 24px;
  background:
    radial-gradient(circle at 30% 50%, rgba(155,107,255,.10) 0%, transparent 55%),
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px) 0 0 / 28px 28px,
    #060609; }

.gpx-stage { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1 / 1; justify-self: center; --ang: 0deg; }
.gpx-dial { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gpx-dial__c { fill: none; stroke: var(--hud); stroke-width: .25; }
.gpx-dial__c--d { stroke-dasharray: .6 1.4; stroke: rgba(255,255,255,.12); }
.gpx-dial__t line { stroke: rgba(255,255,255,.16); stroke-width: .22; }
.gpx-dial__t line.is-l { stroke: var(--v-line); stroke-width: .35; }
.gpx-ln { stroke: rgba(255,255,255,.06); stroke-width: .22; transition: stroke .4s, stroke-width .4s; }
.gpx-ln.is-on { stroke: var(--v); stroke-width: .45; filter: drop-shadow(0 0 1.2px var(--v)); }
.gpx-pkt { fill: #fff; opacity: 0; filter: drop-shadow(0 0 1.5px var(--v)); }
.gpx-pkt.is-go { animation: gpx-pkt 1.6s var(--ease) infinite; }
@keyframes gpx-pkt { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)); opacity: 0; } }

.gpx-sweep { position: absolute; inset: 1.4%; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, rgba(155,107,255,.22) 0deg, rgba(155,107,255,0) 55deg, transparent 360deg);
  -webkit-mask: radial-gradient(circle, transparent 26%, #000 27%); mask: radial-gradient(circle, transparent 26%, #000 27%);
  animation: gpx-sweep 7s linear infinite; }
@keyframes gpx-sweep { to { transform: rotate(360deg); } }

.gpx-node { position: absolute; width: 13%; aspect-ratio: 1 / 1; translate: -50% -50%; padding: 0; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.2); background: #0a0a0a; cursor: pointer; z-index: 2; transition: border-color .3s, scale .3s var(--ease), box-shadow .3s; }
.gpx-node img, .gpx-node .gpx-ph { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 14%; }
.gpx-node__n { position: absolute; left: 50%; top: calc(100% + 6px); translate: -50% 0; font-family: var(--mono); font-size: .58rem; letter-spacing: .1em; color: rgba(255,255,255,.35); transition: color .3s; }
.gpx-node:hover, .gpx-node:focus-visible { border-color: var(--v); scale: 1.1; }
.gpx-node.is-on { border-color: var(--v); scale: 1.18; box-shadow: 0 0 0 4px var(--v-soft), 0 0 22px rgba(155,107,255,.55); }
.gpx-node.is-on .gpx-node__n { color: var(--v); }
.gpx-node.is-soon img { filter: grayscale(.6); opacity: .55; }

.gpx-core { position: absolute; left: 50%; top: 50%; width: 34%; aspect-ratio: 1 / 1; translate: -50% -50%; z-index: 1; }
.gpx-core__ring { position: absolute; inset: -9%; border-radius: 50%; border: 1px solid var(--v-line); rotate: var(--ang); transition: rotate .7s var(--ease); }
.gpx-core__ring::before { content: ""; position: absolute; left: 50%; top: -4px; width: 7px; height: 7px; translate: -50% 0; border-radius: 50%; background: var(--v); box-shadow: 0 0 10px var(--v); }
.gpx-core__img { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; border: 2px solid var(--v); box-shadow: 0 0 40px -6px rgba(155,107,255,.6), inset 0 0 30px rgba(0,0,0,.6); background: #000; }
.gpx-core__img img, .gpx-core__img .gpx-ph { width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; animation: gpx-in .45s var(--ease); }
@keyframes gpx-in { from { opacity: 0; scale: 1.08; } to { opacity: 1; scale: 1; } }
.gpx-ph { display: grid; place-items: center; font-family: var(--display); font-weight: 700; color: #fff; background: #1b1430; }

/* ---------- Leitura do agente ---------- */
.gpx-panel__in { display: grid; gap: var(--s2); animation: gpx-up .4s var(--ease); }
@keyframes gpx-up { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
.gpx-panel .gpx-mono { padding-bottom: var(--s3); border-bottom: 1px solid var(--line-d); margin-bottom: var(--s2); }
.gpx-st { display: inline-flex; align-items: center; gap: 6px; }
.gpx-st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mute-d); }
.gpx-st.is-on { color: #8fe28a; }
.gpx-st.is-on::before { background: #4ade80; box-shadow: 0 0 8px #4ade80; animation: gpx-blink 1.8s ease-in-out infinite; }
@keyframes gpx-blink { 50% { opacity: .35; } }
.gpx-panel__n { font-family: var(--display); font-variation-settings: "wdth" 112; font-weight: 600; font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -0.02em; line-height: 1.05; }
.gpx-panel__f { color: var(--v); font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; }
.gpx-panel__d { color: #d6d6d6; line-height: 1.65; margin: var(--s2) 0 var(--s3); max-width: 46ch; }
.gpx-panel__foot { display: grid; gap: var(--s3); padding-top: var(--s4); border-top: 1px solid var(--line-d); }
.gpx-panel__price { font-family: var(--display); font-weight: 650; font-size: 1.5rem; }
.gpx-panel__acts { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* ---------- Pacote completo ---------- */
.gpx-bundle { margin-top: var(--s5); display: flex; flex-wrap: wrap; gap: var(--s4); justify-content: space-between; align-items: center; padding: var(--s5) var(--s6); border-radius: 24px; border: 1px solid var(--v-line); background: linear-gradient(110deg, rgba(155,107,255,.14) 0%, rgba(10,10,14,1) 60%); }
.gpx-bundle .gpx-mono { color: var(--v); justify-content: flex-start; }
.gpx-bundle__t { font-family: var(--display); font-weight: 650; font-size: 1.35rem; margin-top: var(--s2); }
.gpx-bundle__p { color: var(--mute-d); margin-top: 4px; max-width: 52ch; }
.gpx-bundle__acts { display: flex; align-items: center; gap: var(--s4); }
.gpx-bundle__price { font-family: var(--display); font-weight: 650; font-size: 1.2rem; }

/* ---------- Modal ---------- */
.gpx-dlg__in { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--s5); align-items: start; padding-top: var(--s3); }
.gpx-dlg__img { margin: 0; aspect-ratio: 3 / 4.4; border-radius: var(--r-m); overflow: hidden; border: 1px solid var(--v-line); }
.gpx-dlg__img img { width: 100%; height: 100%; object-fit: cover; }
.gpx-dlg__in .gpx-mono { color: var(--v); justify-content: flex-start; margin-bottom: var(--s1); }
.gpx-dlg__d { color: #d6d6d6; line-height: 1.7; margin: var(--s3) 0 var(--s4); }
.gpx-dlg .gpx-panel__price { margin-bottom: var(--s3); }

@media (max-width: 900px) {
  .gpx-console { grid-template-columns: minmax(0, 1fr); padding: var(--s4); }
  .gpx-panel__d { max-width: none; }
}
@media (max-width: 560px) {
  .gpx-nav { display: none; }
  .gpx-card { flex-basis: 168px; }
  .gpx-node__n { display: none; }
  .gpx-dlg__in { grid-template-columns: minmax(0, 1fr); }
  .gpx-dlg__img { max-width: 180px; }
  .gpx-bundle { padding: var(--s4); }
}
@media (prefers-reduced-motion: reduce) {
  .gpx-sweep, .gpx-pkt.is-go, .gpx-st.is-on::before, .gpx-core__img img, .gpx-panel__in { animation: none; }
  .gpx-card__img, .gpx-card__img img, .gpx-node, .gpx-core__ring, .gpx-ln { transition: none; }
}


/* ---------- Painel "Seu projeto" ---------- */
.pjd { position: fixed; right: 16px; top: 92px; z-index: 40; width: min(320px, calc(100vw - 32px)); display: grid; justify-items: end; gap: 10px; pointer-events: none; }
.pjd > * { pointer-events: auto; }
.pjd[hidden] { display: none; }
.pjd__tab { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 16px; border-radius: 999px; background: rgba(12,12,12,.92); border: 1px solid rgba(255,255,255,.2); color: #fff; backdrop-filter: blur(10px); font-size: .9rem; box-shadow: 0 12px 30px -12px rgba(0,0,0,.8); cursor: pointer; transition: border-color .25s; }
.pjd__tab:hover { border-color: var(--accent); }
.pjd__tab i { font-style: normal; min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center; border-radius: 999px; background: var(--accent); color: #111; font-size: .75rem; font-weight: 700; }
.pjd__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.pjd__body { width: 100%; display: none; flex-direction: column; max-height: calc(100dvh - 190px); border: 1px solid rgba(255,255,255,.16); border-radius: 22px; overflow: hidden;
  background: radial-gradient(120% 60% at 0% 0%, rgba(255,106,43,.12) 0%, transparent 60%), rgba(10,10,10,.96); backdrop-filter: blur(14px); box-shadow: 0 30px 70px -24px rgba(0,0,0,.95); }
.pjd.is-open .pjd__body { display: flex; animation: pjd-in .4s var(--ease); }
@keyframes pjd-in { from { opacity: 0; translate: 24px 0; } to { opacity: 1; translate: 0 0; } }
.pjd__head { padding: var(--s4) var(--s4) var(--s2); }
.pjd__k { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.pjd__t { font-family: var(--display); font-weight: 650; font-size: 1.35rem; letter-spacing: -0.02em; margin-top: 2px; }
.pjd__list { overflow-y: auto; padding: 0 var(--s3); display: grid; gap: 8px; align-content: start; }
.pjd__item { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 8px; border: 1px solid var(--line-d); border-radius: 14px; background: rgba(255,255,255,.03); }
.pjd__item.is-new { animation: pjd-item .55s var(--ease); border-color: rgba(255,106,43,.6); }
@keyframes pjd-item { from { opacity: 0; translate: 28px 0; scale: .96; } to { opacity: 1; translate: 0 0; scale: 1; } }
.pjd__img { width: 44px; height: 44px; border-radius: 10px; overflow: hidden; background: #1a1a1a; }
.pjd__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; }
.pjd__info { display: grid; min-width: 0; }
.pjd__info b { font-size: .82rem; line-height: 1.25; }
.pjd__info small { color: var(--accent); font-size: .76rem; }
.pjd__rm { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-d); color: var(--mute-d); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.pjd__rm:hover { color: #fff; border-color: #fff; }
.pjd__foot { display: grid; gap: var(--s2); padding: var(--s3) var(--s4) var(--s4); border-top: 1px solid var(--line-d); margin-top: var(--s3); }
.pjd__sum { display: flex; justify-content: space-between; align-items: baseline; font-size: .85rem; color: var(--mute-d); }
.pjd__sum b { font-family: var(--display); font-size: 1.35rem; color: #fff; }
.pjd__note { font-size: .74rem; color: var(--mute-d); }
.pjd__note:empty { display: none; }
.pjd__go { width: 100%; }
.pjd__more { font-size: .8rem; color: var(--mute-d); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; justify-self: center; }
@media (max-width: 640px) { .pjd { top: auto; bottom: 76px; right: 12px; } }
@media (prefers-reduced-motion: reduce) { .pjd.is-open .pjd__body, .pjd__item.is-new { animation: none; } }

.pjd__rm, .pjd__more, .pjd__tab { background-color: transparent; }
.pjd__tab { background-color: rgba(12,12,12,.92); }
.pjd__rm:hover { background: rgba(255,255,255,.08); }

/* ---------- Oferta do Squad ---------- */
.sq__offer { margin: var(--s4) 0 var(--s2); display: grid; gap: var(--s2); justify-items: start; }
.sq__price { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; }
.sq__de { position: relative; font-size: 1.15rem; color: var(--mute-d); transition: opacity .6s; }
.sq__de em { font-style: normal; font-size: .8rem; }
.sq__de::after { content: ''; position: absolute; left: -4px; right: -4px; top: 55%; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 1.3s cubic-bezier(.65,0,.35,1); }
.sq__offer.is-go .sq__de::after { transform: scaleX(1); }
.sq__offer.is-go .sq__de { opacity: .65; }
.sq__por { font-family: var(--display); font-variation-settings: 'wdth' 118; font-weight: 800; font-size: clamp(2.8rem, 5vw, 4rem); line-height: 1; letter-spacing: -0.045em; font-variant-numeric: tabular-nums;
  background: linear-gradient(100deg, #fff 30%, #ffb08a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sq__offer.is-done .sq__por { animation: sq-pop .7s var(--ease); }
@keyframes sq-pop { 0% { scale: 1; } 40% { scale: 1.08; } 100% { scale: 1; } }
.sq__save { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #111; background: var(--accent); border-radius: 999px; padding: 6px 12px; font-weight: 700; opacity: 0; translate: -8px 0; transition: opacity .5s .2s, translate .5s .2s var(--ease); }
.sq__offer.is-done .sq__save { opacity: 1; translate: 0 0; }
.sq__each { font-size: .88rem; color: #d6d6d6; opacity: 0; transition: opacity .6s .35s; }
.sq__offer.is-done .sq__each { opacity: 1; }
.sq__timer { display: inline-flex; align-items: center; gap: 12px; padding: 8px 14px; border: 1px solid rgba(255,106,43,.5); border-radius: 12px; background: rgba(255,106,43,.08); opacity: 0; translate: 0 6px; transition: opacity .6s .5s, translate .6s .5s var(--ease); }
.sq__timer[hidden] { display: none; }
.sq__offer.is-done .sq__timer { opacity: 1; translate: 0 0; }
.sq__timer span { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.sq__timer b { font-family: ui-monospace, Consolas, monospace; font-size: 1.15rem; letter-spacing: .06em; color: #fff; }
.sq__offer.is-over .sq__por { background: none; color: #fff; }
.skpac__btns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s1); }
.skpac__btns .btn { padding: 0 10px; }
@media (prefers-reduced-motion: reduce) { .sq__de::after, .sq__save, .sq__each, .sq__timer { transition: none; } .sq__offer.is-done .sq__por { animation: none; } }

/* ---------- Selos de plataforma: roxo = ChatGPT, laranja = Claude ---------- */
.plat-row { margin: 0 0 var(--s2); }
.plat { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 14px 0 10px; border-radius: 999px; font-size: .78rem; font-weight: 600; letter-spacing: .02em; border: 1px solid; }
.plat svg { width: 16px; height: 16px; flex: none; }
.plat--gpt { color: #b79bff; border-color: rgba(155,107,255,.5); background: rgba(155,107,255,.12); }
.plat--claude { color: #ff8a55; border-color: rgba(255,106,43,.5); background: rgba(255,106,43,.12); }
.plat--mini { position: absolute; top: 10px; left: 10px; height: 28px; width: 28px; padding: 0; justify-content: center; border-radius: 50%; backdrop-filter: blur(6px); background: rgba(10,8,20,.7); }
.plat--mini svg { width: 16px; height: 16px; }
.pjd__item.is-gpt { border-color: rgba(155,107,255,.35); }
.pjd__item.is-gpt .pjd__info small { color: #b79bff; }
.pjd__item.is-gpt.is-new { border-color: #9b6bff; }

.gpx-card__cargo { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mute-d); line-height: 1.35; }
.gpx-card__nome { font-family: var(--display); font-weight: 650; font-size: 1rem; letter-spacing: -0.01em; margin-top: -4px; }

.gpx-card__cargo { min-height: 2.7em; }

/* pagamento único */
.agc__price small, .skpac__p small, .gpx-card__price small, .gpx-panel__price small { display: block; font-family: var(--body); font-weight: 500; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mute-d); margin-top: 2px; }
.gpx-panel__price small { margin-top: 4px; }
.cart-once { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mute-d); margin-top: 6px; }

.plat-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Apresentação do Claude ---------- */
.cld { padding-block: clamp(56px, 7vw, 96px); border-top: 1px solid var(--line-d); background: radial-gradient(90% 120% at 100% 0%, rgba(255,106,43,.10) 0%, transparent 55%); }
.cld__in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: var(--s6) var(--s7); align-items: center; }
.cld__txt { display: grid; gap: var(--s3); justify-items: start; }
.cld__txt .lead { max-width: 56ch; color: #d6d6d6; }
.cld__acts { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.cld__alt { color: var(--mute-d); font-size: .9rem; max-width: 56ch; }
.cld__pts { display: grid; gap: var(--s3); }
.cld__pts li { display: flex; align-items: center; gap: var(--s3); padding: var(--s4); border: 1px solid rgba(255,106,43,.28); border-radius: 18px; background: rgba(255,106,43,.05); }
.cld__pts b { font-weight: 600; line-height: 1.35; }
.cld__n { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
@media (max-width: 860px) { .cld__in { grid-template-columns: minmax(0, 1fr); } }

/* título do topo da página Agentes: menor, cabe em menos linhas */
.ag-hero .phead__t--m { font-size: clamp(2rem, 4.2vw, 3.6rem); line-height: 1.02; max-width: 18ch; }

/* selos de plataforma com os símbolos oficiais enviados + selo verde "Autorais Re.create" */
.plat__ico { width: 16px; height: 16px; object-fit: contain; flex: none; }
.plat--gpt { color: #b79bff; }
.plat--claude { color: #ff8a55; }
.plat--autoral { color: #6bff9c; border-color: rgba(80,255,140,.5); background: rgba(80,255,140,.1); }
.plat--autoral svg { width: 14px; height: 14px; }
.plat--mini .plat__ico { width: 16px; height: 16px; }

/* ---------- Janela "Sobre" do agente: ficha técnica animada ---------- */
.sbr { width: min(1080px, calc(100% - 24px)); background: #050507; border: 1px solid rgba(255,255,255,.14); border-radius: 26px; --acc: var(--accent); --acc-soft: rgba(255,106,43,.14); --acc-line: rgba(255,106,43,.4); }
.sbr:has(.sbr--gpt) { --acc: #9b6bff; --acc-soft: rgba(155,107,255,.16); --acc-line: rgba(155,107,255,.42); }
.sbr[open] { animation: sbr-in .5s var(--ease); }
@keyframes sbr-in { from { opacity: 0; translate: 0 22px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
.sbr::backdrop { background: rgba(0,0,0,.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.sbr__shell { position: relative; background:
  radial-gradient(60% 50% at 0% 0%, var(--acc-soft), transparent 70%),
  linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px) 0 0 / 28px 28px,
  linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px) 0 0 / 28px 28px; padding: clamp(18px, 3vw, 34px); }
.sbr__x { position: absolute; right: 16px; top: 16px; z-index: 5; background: #0b0b0d; }
.sbr__grid { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(22px, 3.2vw, 44px); align-items: start; }
.sbr__side { position: sticky; top: 0; display: grid; gap: var(--s3); }
.sbr__photo { position: relative; margin: 0; aspect-ratio: 3 / 4.2; border-radius: 20px; overflow: hidden; border: 1px solid var(--acc-line); background: #000; box-shadow: 0 0 60px -18px var(--acc), inset 0 0 40px rgba(0,0,0,.6); }
.sbr__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; animation: sbr-img .9s var(--ease); }
@keyframes sbr-img { from { opacity: 0; scale: 1.12; filter: blur(8px); } to { opacity: 1; scale: 1; filter: blur(0); } }
.sbr__ph { display: grid; place-items: center; height: 100%; font: 700 3rem var(--display); color: #fff; background: #1b1430; }
.sbr__scan { position: absolute; left: 0; right: 0; top: 0; height: 34%; pointer-events: none; background: linear-gradient(180deg, transparent, var(--acc-soft) 70%, var(--acc) 100%); opacity: .55; mix-blend-mode: screen; animation: sbr-scan 3.4s ease-in-out infinite; }
@keyframes sbr-scan { 0% { translate: 0 -100%; } 100% { translate: 0 300%; } }
.sbr__corner { position: absolute; width: 22px; height: 22px; border: 2px solid var(--acc); opacity: .9; }
.sbr__corner--a { left: 10px; top: 10px; border-right: 0; border-bottom: 0; border-top-left-radius: 8px; }
.sbr__corner--b { right: 10px; top: 10px; border-left: 0; border-bottom: 0; border-top-right-radius: 8px; }
.sbr__corner--c { left: 10px; bottom: 10px; border-right: 0; border-top: 0; border-bottom-left-radius: 8px; }
.sbr__corner--d { right: 10px; bottom: 10px; border-left: 0; border-top: 0; border-bottom-right-radius: 8px; }
.sbr__tag { display: flex; flex-wrap: wrap; gap: 8px; }
.sbr__id { display: flex; justify-content: space-between; font: .68rem ui-monospace, Consolas, monospace; letter-spacing: .14em; color: var(--mute-d); }
.sbr__st { display: inline-flex; align-items: center; gap: 6px; }
.sbr__st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mute-d); }
.sbr__st.is-on { color: #8fe28a; }
.sbr__st.is-on::before { background: #4ade80; box-shadow: 0 0 8px #4ade80; animation: gpx-blink 1.8s ease-in-out infinite; }
.sbr__main { display: grid; gap: var(--s4); min-width: 0; }
.sbr__head { padding-right: 48px; display: grid; gap: 6px; }
.sbr__fun { font: .7rem ui-monospace, Consolas, monospace; letter-spacing: .18em; text-transform: uppercase; color: var(--acc); }
.sbr__nome { font-family: var(--display); font-variation-settings: "wdth" 118; font-weight: 700; font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: .95; letter-spacing: -0.045em; overflow: hidden; white-space: nowrap; animation: sbr-type .9s steps(14) both; }
@keyframes sbr-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.sbr__cargo { font-size: 1.05rem; color: #e4e4e4; }
.sbr__blk { padding: var(--s4); border: 1px solid var(--line-d); border-radius: 18px; background: rgba(255,255,255,.03); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: sbr-up .6s var(--ease) both; animation-delay: calc(var(--i) * 70ms + 250ms); }
.sbr__quote, .sbr__buy, .sbr__duv { animation: sbr-up .6s var(--ease) both; animation-delay: calc(var(--i) * 70ms + 250ms); }
@keyframes sbr-up { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
.sbr__h { font: .68rem ui-monospace, Consolas, monospace; letter-spacing: .18em; text-transform: uppercase; color: var(--acc); margin-bottom: var(--s2); display: flex; align-items: center; gap: 10px; }
.sbr__h::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--acc-line), transparent); }
.sbr__p { color: #dcdcdc; line-height: 1.7; }
.sbr__two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.sbr__ul { display: grid; gap: 8px; }
.sbr__ul li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; font-size: .9rem; line-height: 1.5; color: #e2e2e2; }
.sbr__ul svg { width: 16px; height: 16px; margin-top: 3px; fill: none; stroke: var(--acc); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sbr__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sbr__chips li { font-size: .82rem; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--acc-line); background: var(--acc-soft); color: #fff; }
.sbr__quote { margin: 0; padding: var(--s4) var(--s5); border-left: 3px solid var(--acc); border-radius: 0 18px 18px 0; background: linear-gradient(90deg, var(--acc-soft), transparent); }
.sbr__qk { font: .66rem ui-monospace, Consolas, monospace; letter-spacing: .18em; text-transform: uppercase; color: var(--acc); margin-bottom: 6px; }
.sbr__qt { font-family: var(--display); font-size: 1.2rem; line-height: 1.4; color: #fff; }
.sbr__quote footer { margin-top: var(--s2); font-size: .8rem; color: var(--mute-d); }
.sbr__buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s4) var(--s5); border: 1px solid var(--acc-line); border-radius: 20px; background: radial-gradient(80% 140% at 0% 0%, var(--acc-soft), transparent), rgba(10,10,12,.9); }
.sbr__de { font-size: 1rem; color: var(--mute-d); }
.sbr__de s { text-decoration-color: var(--acc); text-decoration-thickness: 2px; }
.sbr__por { font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 3.6vw, 2.8rem); line-height: 1; letter-spacing: -0.04em; }
.sbr__por small { font: 500 .72rem var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--mute-d); display: block; margin-bottom: 4px; }
.sbr__once { margin-top: 6px; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--acc); }
.sbr__acts { display: flex; flex-wrap: wrap; gap: var(--s2); }
.sbr__duv { font-size: .92rem; color: #cfcfcf; }
.sbr__duv a { color: #fff; text-decoration: underline; text-underline-offset: 3px; margin-left: 6px; }
.agc__sobre { height: 36px; padding: 0 16px; font-size: .84rem; }
@media (max-width: 820px) {
  .sbr__grid { grid-template-columns: minmax(0, 1fr); }
  .sbr__side { position: static; grid-template-columns: 120px minmax(0, 1fr); align-items: center; }
  .sbr__photo { grid-row: span 2; }
  .sbr__two { grid-template-columns: minmax(0, 1fr); }
  .sbr__head { padding-right: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .sbr[open], .sbr__photo img, .sbr__scan, .sbr__nome, .sbr__blk, .sbr__quote, .sbr__buy, .sbr__duv { animation: none; }
}

/* Cards de agentes: moldura laranja no hover, botões na ordem Conhecer, Adicionar */
.agc { transition: border-color .25s, box-shadow .25s; }
.agc:hover, .agc:focus-within { border-color: #ff6a2b; box-shadow: 0 0 0 1px rgba(255,106,43,.5), 0 24px 50px -30px rgba(255,106,43,.35); }
.agc__buy { height: 36px; padding: 0 16px; font-size: .84rem; }

/* Botões dos cards: glass, borda branca (Conhecer) e borda laranja (Adicionar) */
.agc__sobre, .agc__buy { background: rgba(255,255,255,.06); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; transition: background .25s, border-color .25s; }
.agc__sobre { border: 1px solid rgba(255,255,255,.7); }
.agc__sobre:hover { background: rgba(255,255,255,.14); border-color: #fff; }
.agc__buy { border: 1px solid #ff6a2b; }
.agc__buy:hover { background: rgba(255,106,43,.16); border-color: #ff6a2b; }

/* Inversão: Conhecer Agente em laranja, Adicionar ao meu projeto em branco */
.agc__sobre { border-color: #ff6a2b; }
.agc__sobre:hover { background: rgba(255,106,43,.16); border-color: #ff6a2b; }
.agc__buy { border-color: rgba(255,255,255,.7); }
.agc__buy:hover { background: rgba(255,255,255,.14); border-color: #fff; }

.sbr__ok { margin: 8px 0 0; font-size: .84rem; color: #ff8a55; animation: sbrok .35s var(--ease) both; }
@keyframes sbrok { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .sbr__ok { animation: none; } }

/* Carrossel GPT: um bloco único por agente (foto + dados juntos) */
.gpx-card { gap: 0; border: 1px solid var(--line-d); border-radius: var(--r-m); overflow: hidden; background: linear-gradient(180deg, #0f0f12, #0a0a0c); box-shadow: 0 24px 44px -30px rgba(0,0,0,.9); transition: border-color .3s, box-shadow .3s, transform .4s var(--ease); }
.gpx-card:hover, .gpx-card:focus-within { border-color: var(--v); box-shadow: 0 0 0 1px var(--v), 0 22px 44px -22px rgba(155,107,255,.45); transform: translateY(-3px); }
.gpx-card__img { border: 0; border-radius: 0; aspect-ratio: 3 / 4; }
.gpx-card__img:hover, .gpx-card__img:focus-visible { box-shadow: none; }
.gpx-card__meta { gap: 6px; padding: 12px 14px 14px; border-top: 1px solid var(--line-d); }
.gpx-card__cargo { min-height: 2.7em; }
.gpx-b-sobre { background: rgba(155,107,255,.22); border-color: var(--v); color: #fff; }
.gpx-b-sobre:hover { background: rgba(155,107,255,.38); border-color: var(--v); }
.gpx-b-add { background: #000; border-color: rgba(255,255,255,.22); color: #fff; }
.gpx-b-add:hover { background: #161616; border-color: rgba(255,255,255,.5); }
@media (prefers-reduced-motion: reduce) { .gpx-card { transition: none; } .gpx-card:hover { transform: none; } }

.gpx-card__meta { gap: 4px; padding: 10px 12px 12px; }
.gpx-card__price { font-size: .9rem; }
.gpx-card__price small { font-size: .58rem; margin-top: 1px; }

.gpx-card__img { aspect-ratio: 3 / 4.5; }
.gpx-card__img img { object-position: center bottom; }

.gpx-card__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.plat--inline { position: static; flex: 0 0 auto; }
.gpx-card__price { font-family: var(--display); display: grid; gap: 1px; }
.gpx-de { font-family: var(--display); font-weight: 400; font-size: .66rem; color: #7d7d85; text-decoration: line-through; letter-spacing: 0; }
.gpx-por { font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--v); letter-spacing: -.01em; line-height: 1.1; }

/* Sobre: foto sem cortar o nome e o logo na base */
.sbr__photo { aspect-ratio: 3 / 4.5; }
.sbr__photo img { object-position: 50% 100%; }

/* Claude: cena de um agente trabalhando no computador (ciclo de 12s) */
.cld__side { display: grid; gap: var(--s3); min-width: 0; }
.cld__pts { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); }
.cld__pts li { padding: 8px 14px; gap: 10px; border-radius: 999px; }
.cld__pts b { font-size: .8rem; font-weight: 600; }
.cld__n { width: 7px; height: 7px; }
.wk { border: 1px solid rgba(255,106,43,.3); border-radius: 18px; background: linear-gradient(180deg, #120d0a, #0a0807); box-shadow: 0 30px 60px -36px rgba(255,106,43,.45), inset 0 1px 0 rgba(255,255,255,.05); overflow: hidden; font-size: .84rem; }
.wk__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line-d); background: rgba(255,255,255,.025); color: var(--mute-d); font-size: .72rem; letter-spacing: .06em; }
.wk__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.16); }
.wk__bar span { margin-left: 8px; }
.wk__bar em { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-style: normal; color: #ff8a55; }
.wk__bar em b { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: wk-blink 1.6s ease-in-out infinite; }
.wk__body { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1.25fr); padding: 18px 14px 8px; }
.wk__col { display: grid; gap: 8px; }
.wk__col > li { height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(255,255,255,.03); color: #cfcfcf; position: relative; overflow: hidden; }
.wk__steps > li { color: #9a9a9a; }
.wk__dir { width: 16px; height: 12px; border-radius: 3px 3px 2px 2px; background: rgba(255,255,255,.28); position: relative; flex: none; }
.wk__dir::before { content: ""; position: absolute; left: 0; top: -3px; width: 7px; height: 4px; border-radius: 2px 2px 0 0; background: inherit; }
.wk__lane { position: relative; }
.wk__lane::before { content: ""; position: absolute; left: 50%; top: 22px; bottom: 22px; width: 1px; background: repeating-linear-gradient(180deg, rgba(255,106,43,.5) 0 4px, transparent 4px 8px); }
.wk__agent { position: absolute; left: 50%; top: 0; width: 34px; height: 34px; margin: 5px 0 0 -17px; border-radius: 50%; display: grid; place-items: center; background: #1a110c; border: 1px solid var(--accent); box-shadow: 0 0 22px rgba(255,106,43,.6); animation: wk-agent 12s var(--ease) infinite; z-index: 2; }
.wk__agent img { width: 18px; height: 18px; }
.wk__pkt { position: absolute; left: 50%; top: 0; width: 8px; height: 8px; margin: 18px 0 0 -4px; border-radius: 50%; background: #ffb48f; box-shadow: 0 0 12px var(--accent); opacity: 0; }
.wk__ck { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); flex: none; position: relative; }
.wk__ck::after { content: ""; position: absolute; left: 5px; top: 2px; width: 5px; height: 9px; border: solid #000; border-width: 0 2px 2px 0; rotate: 45deg; opacity: 0; }
.wk__t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk__bar2 { position: absolute; left: 0; bottom: 0; right: 0; height: 2px; }
.wk__bar2 u { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); box-shadow: 0 0 10px var(--accent); opacity: 0; }
.wk__log { position: relative; height: 34px; margin: 6px 14px 14px; border-top: 1px solid var(--line-d); font: 500 .72rem/34px ui-monospace, monospace; letter-spacing: .08em; color: #ff8a55; }
.wk__log span { position: absolute; left: 0; opacity: 0; }
.wk__log span::before { content: "> "; color: var(--mute-d); }
@keyframes wk-blink { 50% { opacity: .35; } }
@keyframes wk-agent { 0%,22%{transform:translateY(0)} 27%,47%{transform:translateY(52px)} 52%,72%{transform:translateY(104px)} 77%,95%{transform:translateY(156px)} 100%{transform:translateY(0)} }
@keyframes wk-f0 { 0%,21%{border-color:var(--accent);background:rgba(255,106,43,.14);color:#fff} 22%,92%{border-color:rgba(255,106,43,.35);background:rgba(255,106,43,.05);color:#e8e8e8} 100%{border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.03);color:#cfcfcf} }
@keyframes wk-s0 { 0%,21%{border-color:var(--accent);color:#fff} 22%,92%{border-color:rgba(255,106,43,.4);color:#fff} 100%{border-color:rgba(255,255,255,.1);color:#9a9a9a} }
@keyframes wk-b0 { 0%{transform:scaleX(0);opacity:1} 21%{transform:scaleX(1);opacity:1} 22%,100%{transform:scaleX(1);opacity:0} }
@keyframes wk-c0 { 0%,20%{background:transparent;border-color:rgba(255,255,255,.25)} 21%,92%{background:var(--accent);border-color:var(--accent)} 100%{background:transparent;border-color:rgba(255,255,255,.25)} }
@keyframes wk-a0 { 0%,20%{opacity:0} 21%,92%{opacity:1} 100%{opacity:0} }
@keyframes wk-p0 { 0%,3%{opacity:0;transform:translate(-10px,0px)} 5%{opacity:1;transform:translate(-10px,0px)} 11%{opacity:1;transform:translate(26px,0px)} 13%,100%{opacity:0;transform:translate(26px,0px)} }
.wk__f0 { animation: wk-f0 12s linear infinite; }
.wk__s0 { animation: wk-s0 12s linear infinite; }
.wk__s0 .wk__bar2 u { animation: wk-b0 12s linear infinite; }
.wk__s0 .wk__ck { animation: wk-c0 12s linear infinite; }
.wk__s0 .wk__ck::after { animation: wk-a0 12s linear infinite; }
.wk__pkt0 { animation: wk-p0 12s linear infinite; }
@keyframes wk-f1 { 0%,24%{border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.03);color:#cfcfcf} 26%,46%{border-color:var(--accent);background:rgba(255,106,43,.14);color:#fff} 47%,92%{border-color:rgba(255,106,43,.35);background:rgba(255,106,43,.05);color:#e8e8e8} 100%{border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.03);color:#cfcfcf} }
@keyframes wk-s1 { 0%,24%{border-color:rgba(255,255,255,.1);color:#9a9a9a} 26%,46%{border-color:var(--accent);color:#fff} 47%,92%{border-color:rgba(255,106,43,.4);color:#fff} 100%{border-color:rgba(255,255,255,.1);color:#9a9a9a} }
@keyframes wk-b1 { 0%,24%{transform:scaleX(0);opacity:0} 26%{transform:scaleX(0);opacity:1} 46%{transform:scaleX(1);opacity:1} 47%,100%{transform:scaleX(1);opacity:0} }
@keyframes wk-c1 { 0%,45%{background:transparent;border-color:rgba(255,255,255,.25)} 46%,92%{background:var(--accent);border-color:var(--accent)} 100%{background:transparent;border-color:rgba(255,255,255,.25)} }
@keyframes wk-a1 { 0%,45%{opacity:0} 46%,92%{opacity:1} 100%{opacity:0} }
@keyframes wk-p1 { 0%,28%{opacity:0;transform:translate(-10px,52px)} 30%{opacity:1;transform:translate(-10px,52px)} 36%{opacity:1;transform:translate(26px,52px)} 38%,100%{opacity:0;transform:translate(26px,52px)} }
.wk__f1 { animation: wk-f1 12s linear infinite; }
.wk__s1 { animation: wk-s1 12s linear infinite; }
.wk__s1 .wk__bar2 u { animation: wk-b1 12s linear infinite; }
.wk__s1 .wk__ck { animation: wk-c1 12s linear infinite; }
.wk__s1 .wk__ck::after { animation: wk-a1 12s linear infinite; }
.wk__pkt1 { animation: wk-p1 12s linear infinite; }
@keyframes wk-f2 { 0%,49%{border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.03);color:#cfcfcf} 51%,71%{border-color:var(--accent);background:rgba(255,106,43,.14);color:#fff} 72%,92%{border-color:rgba(255,106,43,.35);background:rgba(255,106,43,.05);color:#e8e8e8} 100%{border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.03);color:#cfcfcf} }
@keyframes wk-s2 { 0%,49%{border-color:rgba(255,255,255,.1);color:#9a9a9a} 51%,71%{border-color:var(--accent);color:#fff} 72%,92%{border-color:rgba(255,106,43,.4);color:#fff} 100%{border-color:rgba(255,255,255,.1);color:#9a9a9a} }
@keyframes wk-b2 { 0%,49%{transform:scaleX(0);opacity:0} 51%{transform:scaleX(0);opacity:1} 71%{transform:scaleX(1);opacity:1} 72%,100%{transform:scaleX(1);opacity:0} }
@keyframes wk-c2 { 0%,70%{background:transparent;border-color:rgba(255,255,255,.25)} 71%,92%{background:var(--accent);border-color:var(--accent)} 100%{background:transparent;border-color:rgba(255,255,255,.25)} }
@keyframes wk-a2 { 0%,70%{opacity:0} 71%,92%{opacity:1} 100%{opacity:0} }
@keyframes wk-p2 { 0%,53%{opacity:0;transform:translate(-10px,104px)} 55%{opacity:1;transform:translate(-10px,104px)} 61%{opacity:1;transform:translate(26px,104px)} 63%,100%{opacity:0;transform:translate(26px,104px)} }
.wk__f2 { animation: wk-f2 12s linear infinite; }
.wk__s2 { animation: wk-s2 12s linear infinite; }
.wk__s2 .wk__bar2 u { animation: wk-b2 12s linear infinite; }
.wk__s2 .wk__ck { animation: wk-c2 12s linear infinite; }
.wk__s2 .wk__ck::after { animation: wk-a2 12s linear infinite; }
.wk__pkt2 { animation: wk-p2 12s linear infinite; }
@keyframes wk-f3 { 0%,74%{border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.03);color:#cfcfcf} 76%,96%{border-color:var(--accent);background:rgba(255,106,43,.14);color:#fff} 97%,99%{border-color:rgba(255,106,43,.35);background:rgba(255,106,43,.05);color:#e8e8e8} 100%{border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.03);color:#cfcfcf} }
@keyframes wk-s3 { 0%,74%{border-color:rgba(255,255,255,.1);color:#9a9a9a} 76%,96%{border-color:var(--accent);color:#fff} 97%,99%{border-color:rgba(255,106,43,.4);color:#fff} 100%{border-color:rgba(255,255,255,.1);color:#9a9a9a} }
@keyframes wk-b3 { 0%,74%{transform:scaleX(0);opacity:0} 76%{transform:scaleX(0);opacity:1} 96%{transform:scaleX(1);opacity:1} 97%,100%{transform:scaleX(1);opacity:0} }
@keyframes wk-c3 { 0%,95%{background:transparent;border-color:rgba(255,255,255,.25)} 96%,99%{background:var(--accent);border-color:var(--accent)} 100%{background:transparent;border-color:rgba(255,255,255,.25)} }
@keyframes wk-a3 { 0%,95%{opacity:0} 96%,99%{opacity:1} 100%{opacity:0} }
@keyframes wk-p3 { 0%,78%{opacity:0;transform:translate(-10px,156px)} 80%{opacity:1;transform:translate(-10px,156px)} 86%{opacity:1;transform:translate(26px,156px)} 88%,100%{opacity:0;transform:translate(26px,156px)} }
.wk__f3 { animation: wk-f3 12s linear infinite; }
.wk__s3 { animation: wk-s3 12s linear infinite; }
.wk__s3 .wk__bar2 u { animation: wk-b3 12s linear infinite; }
.wk__s3 .wk__ck { animation: wk-c3 12s linear infinite; }
.wk__s3 .wk__ck::after { animation: wk-a3 12s linear infinite; }
.wk__pkt3 { animation: wk-p3 12s linear infinite; }
@keyframes wk-l0 { 0%,23%{opacity:1} 24%,100%{opacity:0} }
.wk__log span:nth-child(1) { animation: wk-l0 12s linear infinite; }
@keyframes wk-l1 { 0%,24%{opacity:0} 25%,48%{opacity:1} 49%,100%{opacity:0} }
.wk__log span:nth-child(2) { animation: wk-l1 12s linear infinite; }
@keyframes wk-l2 { 0%,49%{opacity:0} 50%,73%{opacity:1} 74%,100%{opacity:0} }
.wk__log span:nth-child(3) { animation: wk-l2 12s linear infinite; }
@keyframes wk-l3 { 0%,74%{opacity:0} 75%,92%{opacity:1} 96%,100%{opacity:0} }
.wk__log span:nth-child(4) { animation: wk-l3 12s linear infinite; }
@media (max-width: 520px) { .wk__body { grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1.3fr); padding-inline: 10px; } .wk__col > li { padding: 0 9px; gap: 7px; } .wk__pkt { display: none; } .wk { font-size: .78rem; } }
@media (prefers-reduced-motion: reduce) {
  .wk *, .wk { animation: none !important; }
  .wk__steps > li { border-color: rgba(255,106,43,.4); color: #fff; }
  .wk__ck { background: var(--accent); border-color: var(--accent); }
  .wk__ck::after { opacity: 1; }
  .wk__agent { transform: translateY(156px); }
  .wk__log span:last-child { opacity: 1; }
}