/* Animação das páginas da Gráfica (js/motion-grafica.js): arte → impressão → peças prontas.
   Mesmo esquema do motion-chatbot: palco quadrado de 96cqmin dentro da área visual (container),
   então o desenho é igual em 16:9 (computador) e 3:4 (celular). */

.mgr {
  --base: #0a0d14;
  --red: #e3101b;
  --red2: #ff4a52;
  --c: #22c3f0; --m: #ff3d8b; --y: #ffd23f; --k: #1b1d24;
  position: relative;
  aspect-ratio: 16 / 9;
  container-type: size;
  overflow: hidden;
  isolation: isolate;
  border-radius: 16px;
  border: 1px solid rgba(227, 16, 27, .25);
  background:
    radial-gradient(55% 70% at 74% 50%, rgba(227, 16, 27, .2), transparent 70%),
    radial-gradient(120% 90% at 30% 40%, #15101a 0%, var(--base) 65%);
  color: #fff;
  font-family: Inter, -apple-system, "Segoe UI", system-ui, sans-serif;
  user-select: none;
  -webkit-user-select: none;
}
@media (max-width: 640px) { .mgr { aspect-ratio: 3 / 4; } }
.mgr::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(rgba(143, 153, 179, .06) 1px, transparent 1px) 0 0 / 5cqmin 5cqmin,
    linear-gradient(90deg, rgba(143, 153, 179, .06) 1px, transparent 1px) 0 0 / 5cqmin 5cqmin;
  -webkit-mask-image: radial-gradient(60% 70% at 72% 50%, #000, transparent 85%);
  mask-image: radial-gradient(60% 70% at 72% 50%, #000, transparent 85%);
}
.mgr__cam { position: absolute; inset: 0; }

/* ---------- texto ---------- */
.mgr__txt { position: absolute; left: 7cqmin; top: 0; bottom: 0; width: 72cqmin; }
.mgr .tx { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); }
.mgr .tx__n { display: flex; align-items: center; gap: 2cqmin; color: var(--red2); font: 700 2.8cqmin/1 ui-monospace, "Cascadia Code", Consolas, monospace; letter-spacing: .14em; }
.mgr .tx__n i { display: block; width: 10cqmin; height: 2px; background: linear-gradient(90deg, var(--red2), transparent); }
.mgr .tx__t { margin: 2.4cqmin 0 0; font-size: 6.2cqmin; line-height: 1.05; font-weight: 800; letter-spacing: -0.035em; }
.mgr .tx__t em { font-style: normal; color: var(--red2); }
/* frase final sobe para dar lugar ao botão */
.mgr .tx4 { top: 40%; }
.mgr .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.mgr .wi { display: inline-block; }

.mgr__cta {
  --pulse: 0;
  position: absolute; z-index: 6; left: 7cqmin; top: calc(50% + 13cqmin);
  display: inline-flex; align-items: center; gap: 1.6cqmin;
  padding: 2.2cqmin 3.6cqmin; border-radius: 99px;
  background: var(--red); color: #fff; text-decoration: none;
  font-size: 3cqmin; font-weight: 700;
  box-shadow: 0 0 0 calc(1.6cqmin * var(--pulse)) rgba(227, 16, 27, .28), 0 1cqmin 4cqmin rgba(227, 16, 27, .35);
  visibility: hidden; pointer-events: none;
}
.mgr__cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---------- área visual ---------- */
.mgr__vis { position: absolute; left: 84cqmin; right: 3cqmin; top: 3cqmin; bottom: 3cqmin; container-type: size; }
.mgr__stg { position: absolute; left: calc(50% - 48cqmin); top: calc(50% - 48cqmin); width: 96cqmin; height: 96cqmin; font-size: 2.6cqmin; }
.mgr__stg > * { position: absolute; }

@media (max-width: 640px) {
  .mgr__txt { left: 7cqmin; right: 7cqmin; width: auto; top: 7cqmin; bottom: auto; height: 34cqmin; }
  .mgr .tx { top: 0; transform: none; }
  .mgr .tx4 { top: 0; }
  .mgr .tx__t { font-size: 6.6cqmin; }
  .mgr__cta { top: auto; bottom: 9cqmin; left: 0; right: 0; width: max-content; margin: 0 auto; font-size: 3.6cqmin; }
  .mgr__vis { left: 2cqmin; right: 2cqmin; top: 36cqmin; bottom: 2cqmin; }
}

/* ---------- a peça (a arte) ---------- */
.mgr .peca { border-radius: 1.2cqmin; }
.mgr .peca__wire, .mgr .peca__cor { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.mgr .peca__wire { background: rgba(255, 255, 255, .04); outline: 1.5px dashed rgba(255, 255, 255, .35); outline-offset: 0; }
.mgr .peca__wire * { color: transparent !important; background: rgba(143, 153, 179, .26) !important; border-color: rgba(143, 153, 179, .3) !important; box-shadow: none !important; text-shadow: none !important; }
.mgr .peca__wire .el { border-radius: .6cqmin; }
.mgr .peca__cor { box-shadow: 0 3cqmin 8cqmin rgba(0, 0, 0, .55); }
.mgr .el { position: absolute; display: block; line-height: 1.05; white-space: nowrap; }
.mgr .el--logo { border-radius: 50% !important; display: grid; place-items: center; }
.mgr .el--logo::before { content: ""; width: 46%; height: 46%; border-radius: 50%; border: .5cqmin solid currentColor; }
.mgr .el--linha { height: .9cqmin; border-radius: 1cqmin; }
/* sacola: alça; ingresso: canhoto picotado */
.mgr .peca--sacola::before {
  content: ""; position: absolute; left: 30%; right: 30%; top: -9cqmin; height: 11cqmin;
  border: 1.1cqmin solid #8a6a46; border-bottom: 0; border-radius: 8cqmin 8cqmin 0 0;
}
.mgr .peca--ingresso .peca__cor::after, .mgr .peca--ingresso .peca__wire::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 74%; border-left: .45cqmin dashed rgba(255, 255, 255, .55);
}

/* cabeçote da impressora e marcas de corte */
.mgr .cab {
  left: 0; top: 0; height: 3.4cqmin; margin-top: -1.7cqmin; z-index: 3; border-radius: .8cqmin;
  background: linear-gradient(90deg, var(--c) 0 25%, var(--m) 25% 50%, var(--y) 50% 75%, #ddd 75%);
  box-shadow: 0 0 2cqmin rgba(255, 255, 255, .55), 0 0 5cqmin rgba(255, 61, 139, .45);
}
.mgr .corte { width: 3cqmin; height: 3cqmin; border-color: rgba(255, 255, 255, .55); border-style: solid; border-width: 0; }
.mgr .corte--1 { border-width: 0 1.5px 1.5px 0; } .mgr .corte--2 { border-width: 0 0 1.5px 1.5px; }
.mgr .corte--3 { border-width: 1.5px 1.5px 0 0; } .mgr .corte--4 { border-width: 1.5px 0 0 1.5px; }

/* paleta e cursor (cena da arte) */
.mgr .pal { display: flex; flex-direction: column; gap: 1.2cqmin; padding: 1.4cqmin; border-radius: 1.6cqmin; background: #10141f; border: 1px solid rgba(255, 255, 255, .1); }
.mgr .pal i { display: block; width: 3.6cqmin; height: 3.6cqmin; border-radius: 50%; }
.mgr .sel { border: 1.5px solid #60a5fa; border-radius: .4cqmin; box-shadow: 0 0 0 9999px transparent; }
.mgr .sel::before, .mgr .sel::after { content: ""; position: absolute; width: 1.4cqmin; height: 1.4cqmin; background: #fff; border: 1px solid #60a5fa; }
.mgr .sel::before { left: -.8cqmin; top: -.8cqmin; } .mgr .sel::after { right: -.8cqmin; bottom: -.8cqmin; }
.mgr .cur { width: 5cqmin; height: 5cqmin; z-index: 5; visibility: hidden; filter: drop-shadow(0 .6cqmin 1cqmin rgba(0, 0, 0, .5)); }
.mgr .cur svg { width: 100%; height: 100%; }

/* fichas de papel e acabamento */
.mgr .chips { left: 4cqmin; right: 4cqmin; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4cqmin; }
.mgr .chip { display: inline-flex; align-items: center; gap: 1cqmin; padding: 1.1cqmin 2cqmin; border-radius: 99px; background: #10141f; border: 1px solid rgba(255, 74, 82, .45); font-weight: 600; font-size: .95em; }
.mgr .chip::before { content: ""; width: 1.4cqmin; height: 1.4cqmin; border-radius: 50%; background: var(--red2); }

/* fotos dos materiais (cena final) */
.mgr .foto { width: 28cqmin; border-radius: 2cqmin; overflow: hidden; background: #10141f; border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 3cqmin 7cqmin rgba(0, 0, 0, .55); }
.mgr .foto img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.mgr .foto b { display: block; padding: 1.4cqmin 1.6cqmin 1.6cqmin; font-size: .92em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mgr .foto1 { left: 3cqmin; top: 20cqmin; } .mgr .foto2 { left: 34cqmin; top: 12cqmin; z-index: 2; } .mgr .foto3 { left: 65cqmin; top: 20cqmin; }

/* ---------- controles ---------- */
.mgr__bar { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, .06); }
.mgr__bar i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--red), var(--red2)); transform-origin: 0 50%; transform: scaleX(0); }
.mgr__btn {
  position: absolute; z-index: 6; right: 12px; bottom: 12px; display: grid; place-items: center;
  width: 36px; height: 36px; padding: 0; border: 1px solid rgba(255, 255, 255, .18); border-radius: 50%;
  background: rgba(10, 13, 20, .6); color: #fff; cursor: pointer; opacity: .7; transition: opacity .2s;
}
.mgr__btn:hover, .mgr__btn:focus-visible { opacity: 1; }
.mgr__btn svg { width: 14px; height: 14px; fill: currentColor; }
.mgr__btn .i-play, .mgr__btn[data-on="false"] .i-pause { display: none; }
.mgr__btn[data-on="false"] .i-play { display: block; }
.mgr__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }