/* =========================================================================
   NÁH Produtos 3D — proposta de site
   Identidade tirada do Instagram: degradê ciano → azul → roxo → rosa do logo,
   fundo grafite da versão escura, letras pesadas e um toque cursivo.
   ========================================================================= */

:root {
  --grafite: #16171c;
  --grafite-2: #1d1f26;
  --grafite-3: #2a2d36;
  --papel: #f4f2f7;
  --branco: #fdfcfe;
  --tinta: #1b1c23;
  --cinza: #6c7080;
  --nevoa: #a3a7b5;
  --linha-c: rgba(27, 28, 35, .12);
  --linha-e: rgba(255, 255, 255, .1);

  --ciano: #3cbcd5;
  --azul: #5888c8;
  --roxo: #9b59ba;
  --rosa: #d634b5;
  --degrade: linear-gradient(90deg, #3cbcd5 0%, #5888c8 36%, #9b59ba 64%, #d634b5 100%);

  --fonte: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --script: 'Pacifico', 'Segoe Script', cursive;
  --margem: clamp(16px, 4vw, 64px);
  --raio: 22px;
  --ease: cubic-bezier(.22, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; background: var(--grafite); color: var(--branco); font-family: var(--fonte); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
::selection { background: var(--roxo); color: #fff; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--roxo); color: #fff; padding: 10px 16px; border-radius: 10px; }
.pular:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--ciano); outline-offset: 3px; }

.script { font-family: var(--script); font-weight: 400; letter-spacing: 0; }
.degrade-texto { background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 .08em .12em; }

.rotulo { font-size: .74rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--cinza); display: flex; align-items: center; gap: 12px; }
.rotulo::before { content: ''; width: 28px; height: 3px; border-radius: 3px; background: var(--degrade); }
.rotulo-claro { color: var(--nevoa); }
.titulo-secao { font-weight: 800; font-size: clamp(2rem, 4.8vw, 4.2rem); line-height: 1.05; letter-spacing: -.035em; margin-top: 16px; }
.titulo-secao .script { font-size: .92em; letter-spacing: 0; }
.secao-topo { max-width: 860px; }
.secao-intro { margin-top: 16px; font-size: 1.06rem; color: var(--cinza); max-width: 52ch; }

/* ---------- botões ---------- */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; border: 1px solid transparent; font-weight: 700; font-size: .92rem; text-decoration: none; cursor: pointer; position: relative; isolation: isolate; overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s; }
.botao svg { width: 19px; height: 19px; fill: currentColor; flex: none; }
.botao:hover { transform: translateY(-2px); }
.botao-degrade { background: var(--degrade); color: #fff; box-shadow: 0 10px 30px -10px rgba(155, 89, 186, .8); }
.botao-degrade::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #d634b5, #9b59ba, #5888c8, #3cbcd5); opacity: 0; transition: opacity .4s; }
.botao-degrade:hover::after { opacity: 1; }
.botao-degrade > * { position: relative; z-index: 1; }
.botao-linha { background: transparent; color: var(--branco); border-color: rgba(255, 255, 255, .28); }
.botao-linha:hover { border-color: #fff; }
.botao-pequeno { min-height: 40px; padding: 0 18px; font-size: .82rem; }

/* =========================================================================
   ABERTURA
   ========================================================================= */
.abertura { position: fixed; inset: 0; z-index: 300; background: var(--grafite); display: grid; place-items: center; }
.abertura::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 48px 48px; mask: radial-gradient(circle at 50% 50%, #000 0, transparent 70%); -webkit-mask: radial-gradient(circle at 50% 50%, #000 0, transparent 70%); }
.abertura-logo { position: relative; width: min(420px, 72vw); display: flex; flex-direction: column; align-items: center; }
.abertura-quadro { position: relative; width: 100%; }
.abertura-svg { width: 100%; height: auto; overflow: visible; display: block; }
.abertura-bico { position: absolute; left: 0; right: 0; height: 2px; top: 100%; background: var(--degrade); box-shadow: 0 0 18px rgba(155, 89, 186, .9); opacity: 0; }
.abertura-sub { margin-top: 10px; font-size: clamp(1rem, 2.6vw, 1.5rem); color: #8d91a0; font-weight: 600; letter-spacing: .02em; opacity: 0; }
.abertura-sub b { font-weight: 800; color: #b9bcc8; }
html:not(.js) .abertura, html.sem-abertura .abertura { display: none; }

/* =========================================================================
   NAVEGAÇÃO
   ========================================================================= */
.topo { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 16px; border-radius: 999px; background: rgba(29, 31, 38, .72); border: 1px solid var(--linha-e); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); box-shadow: 0 14px 40px -18px rgba(0, 0, 0, .7); }
.topo-marca { display: block; width: 62px; margin-right: 6px; }
.topo-marca svg { width: 100%; height: auto; display: block; }
.topo-nav { display: flex; }
.topo-nav a { padding: 10px 14px; font-size: .84rem; font-weight: 600; text-decoration: none; border-radius: 999px; color: #d9dbe3; transition: background .25s, color .25s; }
.topo-nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.topo-menu { display: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--degrade); cursor: pointer; position: relative; }
.topo-menu span { position: absolute; left: 13px; right: 13px; height: 2px; border-radius: 2px; background: #fff; transition: transform .4s var(--ease); }
.topo-menu span:first-child { top: 18px; }
.topo-menu span:nth-child(2) { top: 25px; }
.topo-menu[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.topo-menu[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }
.menu-cheio { position: fixed; inset: 0; z-index: 55; background: var(--grafite); padding: 110px var(--margem) 40px; display: flex; flex-direction: column; gap: 32px; }
.menu-cheio[hidden] { display: none; }
.menu-cheio nav { display: flex; flex-direction: column; }
.menu-cheio nav a { font-size: clamp(2.2rem, 10vw, 3.4rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.25; text-decoration: none; border-bottom: 1px solid var(--linha-e); padding: 6px 0; }
.menu-cheio .botao { align-self: flex-start; }
.menu-rodape { margin-top: auto; color: var(--nevoa); }

/* =========================================================================
   CAPA
   ========================================================================= */
.capa { position: relative; height: 100vh; height: 100svh; min-height: 660px; overflow: hidden; background: radial-gradient(ellipse 60% 55% at 70% 75%, rgba(155, 89, 186, .18), transparent 70%), radial-gradient(ellipse 40% 40% at 85% 20%, rgba(60, 188, 213, .12), transparent 70%), var(--grafite); }
.capa::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 56px 56px; mask: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); -webkit-mask: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); pointer-events: none; }
#impressora { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; }
#impressora.girando { cursor: grabbing; }

.capa-texto { position: absolute; z-index: 2; left: var(--margem); top: 50%; transform: translateY(-44%); width: min(640px, 50vw); pointer-events: none; }
.capa-texto a, .capa-texto button { pointer-events: auto; }
.sobretitulo { display: inline-flex; align-items: center; gap: 10px; font-size: .74rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--nevoa); padding: 8px 14px; border: 1px solid var(--linha-e); border-radius: 999px; background: rgba(255, 255, 255, .03); }
.ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--ciano); box-shadow: 0 0 0 0 rgba(60, 188, 213, .7); animation: pulsa 2s infinite; }
@keyframes pulsa { 0% { box-shadow: 0 0 0 0 rgba(60, 188, 213, .7); } 70% { box-shadow: 0 0 0 10px rgba(60, 188, 213, 0); } 100% { box-shadow: 0 0 0 0 rgba(60, 188, 213, 0); } }
.capa-titulo { margin-top: 22px; font-weight: 800; font-size: clamp(2.4rem, min(4.7vw, 8.6vh), 4.9rem); line-height: 1; letter-spacing: -.045em; }
.capa-titulo .linha { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.capa-titulo .linha > span { display: inline-block; }
.capa-titulo .linha-script { padding-bottom: .22em; margin-bottom: -.12em; }
.capa-titulo .script { font-size: .78em; background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; padding: .05em .12em .15em 0; }
.capa-desc { margin-top: 22px; font-size: clamp(1rem, 1.15vw, 1.12rem); color: #c3c6d1; max-width: 44ch; }
.capa-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

.painel-impressora { position: absolute; z-index: 2; right: var(--margem); top: 100px; width: 312px; padding: 14px 16px; border-radius: 16px; background: rgba(22, 23, 28, .8); border: 1px solid var(--linha-e); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-variant-numeric: tabular-nums; }
.painel-topo { display: flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; }
.painel-luz { width: 8px; height: 8px; border-radius: 50%; background: var(--ciano); box-shadow: 0 0 10px var(--ciano); animation: pisca 1s steps(2) infinite; }
.painel-topo.pronto .painel-luz { background: #6fe3a0; box-shadow: 0 0 10px #6fe3a0; animation: none; }
@keyframes pisca { 50% { opacity: .35; } }
.painel-peca { margin-left: auto; font-weight: 500; color: var(--nevoa); }
.painel-barra { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .08); margin: 12px 0; overflow: hidden; }
.painel-barra i { display: block; height: 100%; background: var(--degrade); transform-origin: left; transform: scaleX(0); }
.painel-dados { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 4px 10px; margin: 0; }
.painel-dados dt { font-size: .58rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #7d8190; }
.painel-dados dd { margin: 2px 0 0; font-size: .86rem; font-weight: 700; white-space: nowrap; }

.capa-pecas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linha-e); }
.capa-pecas-rotulo { width: 100%; font-size: .58rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #7d8190; }
.peca-chip { border: 1px solid var(--linha-e); background: rgba(255, 255, 255, .04); border-radius: 999px; padding: 7px 12px; font-size: .76rem; font-weight: 600; cursor: pointer; color: #d9dbe3; transition: background .25s, border-color .25s, color .25s; }
.peca-chip:hover { border-color: rgba(255, 255, 255, .35); }
.peca-chip[aria-pressed="true"] { background: var(--degrade); border-color: transparent; color: #fff; }
.capa-dica { position: absolute; z-index: 2; right: var(--margem); bottom: 26px; font-size: .78rem; color: #7d8190; font-weight: 500; pointer-events: none; }
.so-toque { display: none; }
@media (hover: none) { .so-mouse { display: none; } .so-toque { display: inline; } }

/* =========================================================================
   FAIXA
   ========================================================================= */
.faixa { background: var(--degrade); color: #fff; overflow: hidden; padding: 22px 0; }
.faixa-trilho { display: flex; align-items: center; gap: 30px; width: max-content; font-size: clamp(1.4rem, 3vw, 2.6rem); font-weight: 800; letter-spacing: -.02em; white-space: nowrap; will-change: transform; }
.faixa-trilho i { display: block; width: 18px; height: 18px; border: 2.5px solid rgba(255, 255, 255, .85); transform: rotate(30deg) skewY(-12deg); border-radius: 3px; }

/* =========================================================================
   PRODUTOS
   ========================================================================= */
.produtos { background: var(--papel); color: var(--tinta); padding: clamp(90px, 13vh, 150px) var(--margem); border-radius: 34px 34px 0 0; margin-top: -1px; }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(30px, 5vh, 50px); }
.filtro { border: 1px solid var(--linha-c); background: var(--branco); border-radius: 999px; padding: 10px 16px; font-size: .86rem; font-weight: 600; cursor: pointer; color: var(--tinta); transition: background .25s, color .25s, border-color .25s, transform .3s var(--ease); }
.filtro:hover { border-color: var(--roxo); transform: translateY(-1px); }
.filtro[aria-pressed="true"] { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: clamp(14px, 1.8vw, 24px); margin-top: 30px; }
.card { background: var(--branco); border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--linha-c); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.card:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -28px rgba(91, 52, 140, .45); }
.card[hidden] { display: none; }
.card-foto { aspect-ratio: 4 / 5; overflow: hidden; background: #ece8f2; }
.card-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.card:hover .card-foto img { transform: scale(1.05); }
.card-corpo { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-tag { font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--roxo); }
.card h3 { font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; }
.card-corpo > p:not(.card-tag) { color: var(--cinza); font-size: .94rem; }
.card-pedir { margin-top: auto; padding-top: 10px; font-weight: 700; font-size: .9rem; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; color: var(--tinta); }
.card-pedir span { transition: transform .3s var(--ease); }
.card-pedir:hover span { transform: translate(2px, -2px); }
.card-ideia { background: var(--grafite); color: #fff; border-color: transparent; }
.card-ideia .card-tag { color: var(--ciano); }
.card-ideia .card-corpo > p:not(.card-tag) { color: var(--nevoa); }
.card-ideia .card-pedir { color: #fff; }
.card-ideia-arte { aspect-ratio: 4 / 3; display: grid; place-items: center; background: radial-gradient(circle at 50% 60%, rgba(155, 89, 186, .35), transparent 65%); border-bottom: 1px solid var(--linha-e); }
.card-ideia-arte svg { width: 58%; height: auto; }

/* =========================================================================
   PERSONALIZE
   ========================================================================= */
.personalize { background: var(--grafite); padding: clamp(90px, 13vh, 150px) var(--margem); position: relative; overflow: hidden; }
.personalize .secao-intro { color: var(--nevoa); }
.personalize-corpo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); gap: clamp(28px, 5vw, 70px); margin-top: clamp(40px, 6vh, 70px); align-items: start; }

.previa { position: relative; border-radius: 28px; min-height: 520px; background: radial-gradient(circle at 50% 45%, rgba(155, 89, 186, .22), transparent 60%), linear-gradient(180deg, #1f2129, #17181d); border: 1px solid var(--linha-e); overflow: hidden; display: grid; place-items: center; }
.previa::before { content: ''; position: absolute; left: -10%; right: -10%; bottom: -30%; height: 70%; background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 40px 40px; transform: perspective(500px) rotateX(62deg); transform-origin: top; mask: linear-gradient(180deg, #000, transparent 80%); -webkit-mask: linear-gradient(180deg, #000, transparent 80%); }
.previa-palco { position: relative; width: 100%; height: 420px; perspective: 1100px; display: grid; place-items: center; cursor: grab; touch-action: pan-y; }
.previa-palco:active { cursor: grabbing; }
.previa-objeto { position: relative; transform-style: preserve-3d; transform: rotateX(18deg) rotateY(-22deg); transition: transform .08s linear; --cor-nome: #f39ac0; --cor-base: #f4f4f2; --lado-nome: color-mix(in srgb, var(--cor-nome) 62%, #000); --lado-base: color-mix(in srgb, var(--cor-base) 70%, #000); }
.previa-pilha { position: relative; transform-style: preserve-3d; }
.previa-pilha .c { position: absolute; left: 0; top: 0; white-space: nowrap; line-height: 1; pointer-events: none; user-select: none; }
.previa-pilha .c-medida { position: relative; visibility: hidden; }
.previa-objeto[data-letra="cursiva"] .c { font-family: var(--script); font-size: clamp(3.2rem, 7.4vw, 6.4rem); padding: .1em .32em .25em; }
.previa-objeto[data-letra="bastao"] .c { font-family: var(--fonte); font-weight: 900; font-size: clamp(3rem, 7vw, 6rem); letter-spacing: -.02em; padding: .12em .3em; }
.previa-pilha .c-base { color: var(--cor-base); -webkit-text-stroke: .34em var(--cor-base); paint-order: stroke fill; }
.previa-pilha .c-base.lado { color: var(--lado-base); -webkit-text-stroke-color: var(--lado-base); }
.previa-pilha .c-nome { color: var(--cor-nome); }
.previa-pilha .c-nome.lado { color: var(--lado-nome); }
.previa-pilha .c-nome.face { text-shadow: 0 -1px 0 rgba(255, 255, 255, .35); }
.previa-objeto.degrade .c-nome.face { background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; }
.argola { position: absolute; left: -46px; top: 50%; width: 54px; height: 54px; margin-top: -27px; border-radius: 50%; border: 5px solid #c9ccd6; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25), 0 2px 0 #8f93a0; transform: translateZ(-6px) rotateY(55deg); }
.previa-objeto[data-tipo="mesa"] .argola { display: none; }
.plinto { display: none; position: absolute; left: 4%; right: 4%; bottom: -12px; height: 26px; background: var(--cor-base); transform: rotateX(90deg) translateZ(-6px); transform-origin: bottom; border-radius: 6px; box-shadow: inset 0 -6px 0 var(--lado-base); }
.previa-objeto[data-tipo="mesa"] .plinto { display: block; }
.previa-sombra { position: absolute; left: 50%; bottom: 70px; width: 60%; height: 40px; margin-left: -30%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent); filter: blur(4px); }
.previa-dica { position: absolute; left: 22px; top: 18px; font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #7d8190; }
.previa-real { position: absolute; right: 16px; bottom: 16px; width: 120px; margin: 0; background: #fff; border-radius: 14px; padding: 6px 6px 8px; transform: rotate(4deg); box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .6); }
.previa-real img { border-radius: 9px; aspect-ratio: 4 / 5; object-fit: cover; }
.previa-real figcaption { color: var(--tinta); font-size: .62rem; font-weight: 700; text-align: center; margin-top: 6px; line-height: 1.2; }

.montador { display: flex; flex-direction: column; gap: 20px; }
.campo { border: 0; padding: 0; margin: 0; }
.campo legend, .campo-rotulo { display: flex; justify-content: space-between; width: 100%; font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--nevoa); margin-bottom: 10px; padding: 0; }
.campo legend span { letter-spacing: .04em; text-transform: none; color: #fff; font-weight: 600; }
.opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.opcao { border: 1px solid var(--linha-e); background: rgba(255, 255, 255, .03); border-radius: 14px; padding: 14px; font-weight: 700; cursor: pointer; transition: border-color .25s, background .25s; }
.opcao:hover { border-color: rgba(255, 255, 255, .3); }
.opcao[aria-pressed="true"] { border-color: transparent; background: linear-gradient(var(--grafite-2), var(--grafite-2)) padding-box, var(--degrade) border-box; border: 2px solid transparent; }
.opcao-cursiva { font-family: var(--script); font-weight: 400; font-size: 1.1rem; }
.opcao-bastao { font-weight: 900; letter-spacing: .02em; }
.campo-nome { position: relative; display: block; }
.campo-nome input { width: 100%; font-size: 1.4rem; font-weight: 700; padding: 14px 64px 14px 18px; border-radius: 14px; border: 1px solid var(--linha-e); background: var(--grafite-2); color: #fff; }
.campo-nome input:focus { outline: none; border-color: var(--roxo); box-shadow: 0 0 0 3px rgba(155, 89, 186, .3); }
.campo-nome small { position: absolute; right: 16px; bottom: 18px; font-size: .78rem; color: #7d8190; font-variant-numeric: tabular-nums; }
.cores { display: flex; flex-wrap: wrap; gap: 8px; }
.cor { width: 38px; height: 38px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .14); cursor: pointer; padding: 0; position: relative; transition: transform .25s var(--ease); }
.cor:hover { transform: scale(1.08); }
.cor[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--grafite), 0 0 0 5px #fff; }
.campo-qtd { display: flex; align-items: center; justify-content: space-between; }
.campo-qtd .campo-rotulo { width: auto; margin: 0; }
.qtd { display: flex; align-items: center; border: 1px solid var(--linha-e); border-radius: 999px; overflow: hidden; }
.qtd button { width: 44px; height: 44px; border: 0; background: transparent; font-size: 1.3rem; cursor: pointer; }
.qtd button:hover { background: rgba(255, 255, 255, .07); }
.qtd output { min-width: 40px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.montador-enviar { width: 100%; margin-top: 4px; }
.montador-nota { font-size: .8rem; color: #7d8190; text-align: center; }

/* =========================================================================
   COMO FUNCIONA
   ========================================================================= */
.como { background: var(--papel); color: var(--tinta); padding: clamp(90px, 13vh, 150px) var(--margem); }
.passos { list-style: none; margin: clamp(46px, 7vh, 80px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); position: relative; }
.passos-filamento { position: absolute; left: 0; right: 0; top: 18px; width: 100%; height: 40px; overflow: visible; pointer-events: none; }
.passos-filamento path { fill: none; stroke: url(#filamento-degrade); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1 1.02; stroke-dashoffset: 1; }
/* sem vector-effect: non-scaling-stroke — com ele o tracejado é medido na tela e o pathLength="1"
   deixa de cobrir a linha inteira (o fim aparecia antes da hora e faltava no final) */
html:not(.js) .passos-filamento path { stroke-dashoffset: 0; }
.passo { position: relative; padding-top: 70px; }
.passo-num { position: absolute; top: 14px; left: 0; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .9rem; background: var(--branco); border: 2px solid transparent; background: linear-gradient(var(--branco), var(--branco)) padding-box, var(--degrade) border-box; box-shadow: 0 10px 24px -12px rgba(91, 52, 140, .5); }
.passo h3 { font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; }
.passo p { margin-top: 6px; color: var(--cinza); font-size: .95rem; }

/* =========================================================================
   RODAPÉ
   ========================================================================= */
.rodape { background: var(--grafite); padding: clamp(80px, 12vh, 130px) var(--margem) 36px; overflow: hidden; position: relative; }
.rodape::before { content: ''; position: absolute; left: 50%; bottom: -40%; width: 120%; height: 90%; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(155, 89, 186, .25), transparent 60%); pointer-events: none; }
.rodape-chamada { position: relative; display: flex; flex-direction: column; gap: 16px; }
.rodape-whats { font-size: clamp(2.4rem, 7vw, 6.2rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; text-decoration: none; width: fit-content; background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 6px; }
.rodape-texto { color: var(--nevoa); }
.rodape-texto a { color: #fff; }
.rodape-marca { position: relative; margin: clamp(50px, 9vh, 100px) auto 0; width: min(520px, 78vw); }
.rodape-marca svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 20px 60px rgba(155, 89, 186, .35)); }
.rodape-base { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 30px; margin-top: 50px; padding-top: 24px; border-top: 1px solid var(--linha-e); font-size: .86rem; color: var(--nevoa); }
.rodape-base a { color: #fff; text-decoration: none; }

.whats-flutuante { position: fixed; right: 18px; bottom: 18px; z-index: 50; width: 58px; height: 58px; border-radius: 50%; background: var(--degrade); color: #fff; display: grid; place-items: center; box-shadow: 0 14px 30px -10px rgba(155, 89, 186, .8); transform: scale(0); transition: transform .45s var(--ease); }
.whats-flutuante svg { width: 26px; height: 26px; fill: currentColor; }
html.rolou .whats-flutuante { transform: scale(1); }
html.no-montador .whats-flutuante, html.no-rodape .whats-flutuante { transform: scale(0); }

/* =========================================================================
   RESPONSIVO
   ========================================================================= */
@media (max-width: 1080px) {
  .topo-nav a { padding: 10px 10px; }
  .capa-texto { width: min(560px, 50vw); }
  .painel-impressora { width: 240px; }
}
@media (max-width: 900px) {
  .topo { left: 12px; right: 12px; transform: none; justify-content: space-between; }
  .topo-nav, .topo-pedir { display: none; }
  .topo-menu { display: block; }
  .capa { min-height: 720px; }
  .capa-texto { top: auto; bottom: 26px; transform: none; left: var(--margem); right: var(--margem); width: auto; }
  .capa-titulo { font-size: clamp(2.3rem, 10vw, 3.4rem); margin-top: 14px; }
  .capa-desc { font-size: .96rem; margin-top: 14px; }
  .capa-acoes { margin-top: 18px; }
  .capa-acoes .botao { flex: 1 1 auto; }
  .sobretitulo { font-size: .62rem; letter-spacing: .14em; }
  .painel-impressora { top: 72px; left: 12px; right: 12px; width: auto; padding: 10px 12px; }
  .painel-barra { margin: 8px 0 0; }
  .painel-dados { display: none; }
  .capa-pecas { flex-wrap: nowrap; overflow-x: auto; margin-top: 8px; padding-top: 8px; scrollbar-width: none; }
  .capa-pecas::-webkit-scrollbar { display: none; }
  .capa-pecas-rotulo { display: none; }
  .peca-chip { flex: none; padding: 6px 11px; font-size: .74rem; }
  .capa-dica { display: none; }
  .personalize-corpo { grid-template-columns: 1fr; }
  .previa { min-height: 380px; }
  .previa-palco { height: 320px; }
  .previa-real { width: 74px; top: 14px; bottom: auto; right: 14px; padding: 4px 4px 6px; }
  .previa-real figcaption { font-size: .5rem; }
  .previa-dica { left: 16px; top: 16px; }
  .passos { grid-template-columns: 1fr; gap: 0; }
  .passos-filamento { display: none; }
  .passo { padding: 0 0 26px 66px; min-height: 80px; border-left: 3px solid transparent; }
  .passo-num { top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}