/* InventoLab 3D — site. Sem dependências. Cores e fonte do Manual de Identidade (27/10/2026). */
@font-face { font-family: 'Montserrat'; font-weight: 400; font-display: swap; src: url('/assets/fontes/montserrat-400.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 500; font-display: swap; src: url('/assets/fontes/montserrat-500.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 600; font-display: swap; src: url('/assets/fontes/montserrat-600.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 700; font-display: swap; src: url('/assets/fontes/montserrat-700.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 800; font-display: swap; src: url('/assets/fontes/montserrat-800.woff2') format('woff2'); }

:root {
  --lima: #E9F056;
  --lima-suave: #F5F8C2;
  --nevoa: #D7EFFF;
  --magenta: #E6007E;
  --magenta-escuro: #B8005F;
  --magenta-suave: #FCE3F0;
  --carvao: #2B2B2B;
  --carvao-fundo: #222222;
  --creme: #FFF4D6;
  --papel: #FFFCF4;
  --tinta: #2B2B2B;
  --tinta-2: #55524B;
  --linha: rgba(43, 43, 43, .12);
  --whats: #25D366;
  --ease: cubic-bezier(.22, .8, .2, 1);
  --topo: 72px;
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1240px;
  --dobra: clamp(56px, 6.5vw, 96px);
  --raio: 28px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; color: var(--tinta); background: var(--papel); font-size: 17px; line-height: 1.6; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--magenta); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; }
.dobra { padding-block: var(--dobra); position: relative; }
.i { width: 1em; height: 1em; flex: none; }

h1, h2, h3 { line-height: 1.08; letter-spacing: -.025em; font-weight: 800; }
h2 { font-size: clamp(30px, 4.2vw, 54px); }
h3 { font-size: clamp(19px, 1.6vw, 23px); font-weight: 700; letter-spacing: -.015em; }
.kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--magenta); margin-bottom: 18px; }
.kicker::before { content: ''; width: 26px; height: 3px; border-radius: 3px; background: currentColor; }
.lead { font-size: clamp(17px, 1.35vw, 20px); color: var(--tinta-2); max-width: 56ch; }
em.destaque { font-style: normal; color: var(--magenta); }

/* ---------- botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 14px 26px; border-radius: 999px; border: 0; font-weight: 700; font-size: 16px; text-decoration: none; letter-spacing: -.005em; transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s; }
.btn .i { font-size: 20px; transition: transform .35s var(--ease); }
.btn:hover .i { transform: translateX(4px); }
.btn--lima { background: var(--lima); color: var(--carvao); box-shadow: 0 10px 30px rgba(233, 240, 86, .28), inset 0 -3px 0 rgba(0, 0, 0, .12); }
.btn--lima:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(233, 240, 86, .4), inset 0 -3px 0 rgba(0, 0, 0, .12); }
.btn--magenta { background: var(--magenta); color: #fff; box-shadow: 0 10px 30px rgba(230, 0, 126, .25), inset 0 -3px 0 rgba(0, 0, 0, .18); }
.btn--magenta:hover { transform: translateY(-2px); background: #D10073; }
.btn--carvao { background: var(--carvao); color: #fff; }
.btn--carvao:hover { transform: translateY(-2px); }
.btn--linha { background: transparent; color: var(--carvao); box-shadow: inset 0 0 0 2px var(--carvao); }
.btn--linha:hover { background: var(--carvao); color: #fff; }

/* ---------- entradas na rolagem (padrão Factory) ---------- */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0s); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal="clip"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 1.3s var(--ease); transition-delay: var(--d, 0s); }
[data-reveal="clip"].is-in { clip-path: inset(0 0 0 0); }

/* ---------- topo ---------- */
.topo { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--topo); display: flex; align-items: center; transition: background .4s, box-shadow .4s; }
.topo.is-solid { background: rgba(34, 34, 34, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(255, 255, 255, .06); }
.topo__in { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.topo__logo img { height: 40px; width: auto; }
.menu { display: flex; gap: 4px; padding: 6px; border-radius: 999px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.menu a { color: rgba(255, 255, 255, .82); text-decoration: none; font-size: 14px; font-weight: 600; padding: 8px 16px; border-radius: 999px; transition: background .3s, color .3s; }
.menu a:hover, .menu a[aria-current] { background: rgba(255, 255, 255, .12); color: #fff; }
.topo .btn { min-height: 44px; padding: 10px 20px; font-size: 14px; white-space: nowrap; }
.topo .curto { display: none; }

/* ---------- abertura ---------- */
.hero { position: relative; min-height: 560px; height: 100svh; padding-top: var(--topo); background: var(--carvao-fundo); color: #fff; overflow: hidden; isolation: isolate; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -2; background:
  radial-gradient(60% 70% at 78% 45%, rgba(230, 0, 126, .22), transparent 70%),
  radial-gradient(40% 50% at 95% 90%, rgba(215, 239, 255, .14), transparent 70%),
  radial-gradient(45% 55% at 60% 10%, rgba(233, 240, 86, .12), transparent 70%); }
.hero::after { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .5; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 7px); mask-image: linear-gradient(90deg, transparent, #000 55%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%); }
.hero__in { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 24px; }
.hero__texto { position: relative; z-index: 3; max-width: 620px; padding-block: 24px; }
.hero .kicker { color: var(--lima); }
.hero h1 { font-size: clamp(36px, min(5.4vw, 8.6vh), 80px); }
.hero h1 em { display: block; font-style: normal; color: var(--lima); }
.hero__apoio { margin: clamp(14px, 2.4vh, 24px) 0 clamp(20px, 3.6vh, 34px); font-size: clamp(16px, min(1.35vw, 2.4vh), 20px); color: rgba(255, 255, 255, .78); max-width: 48ch; }
.hero__selo { display: flex; align-items: center; gap: 10px; margin-top: clamp(16px, 3vh, 28px); font-size: 14px; color: rgba(255, 255, 255, .62); }
.hero__selo .i { color: var(--lima); font-size: 20px; }
.palco { position: relative; height: min(100%, 720px); z-index: 1; }
.peca { position: absolute; width: var(--w); left: var(--x); top: var(--y); z-index: var(--z, 1); will-change: transform; }
.peca img { width: 100%; height: auto; animation: flutua var(--t, 7s) ease-in-out infinite; animation-delay: var(--atraso, 0s); filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .45)); }
@keyframes flutua { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-16px) rotate(calc(var(--r, 0deg) + 4deg)); } }
/* imagem contínua da abertura (27/10/2026): ancorada à direita, o lado esquerdo dela é fundo liso sob o texto */
.hero__palco { position: absolute; inset: 0; height: auto; z-index: 0; overflow: hidden; }
.hero__img.peca { left: auto; right: 0; top: 0; bottom: 0; width: auto; height: 100%; }
.hero__img img { height: 100%; width: auto; max-width: none; filter: none; animation: zoomLento 22s ease-in-out infinite alternate; transform-origin: 70% 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%); mask-image: linear-gradient(90deg, transparent, #000 22%); }
@keyframes zoomLento { from { transform: scale(1); } to { transform: scale(1.06); } }

/* ---------- faixa passando ---------- */
.faixa { background: var(--lima); color: var(--carvao); overflow: hidden; padding-block: 18px; border-block: 2px solid var(--carvao); }
.marquee { display: flex; width: max-content; animation: marquee var(--dur, 38s) linear infinite; }
.marquee > div { display: flex; gap: 44px; padding-right: 44px; white-space: nowrap; font-weight: 800; font-size: clamp(17px, 1.8vw, 24px); letter-spacing: -.01em; }
.marquee span::after { content: '✦'; margin-left: 44px; color: var(--magenta); font-size: .7em; vertical-align: middle; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- o que fazemos: cartões 3D ---------- */
.fazemos { background: var(--creme); }
.cab { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 24px 48px; align-items: end; margin-bottom: clamp(56px, 7vw, 96px); }
.cab .lead { justify-self: end; }
.cards3d { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; perspective: 1200px; }
.card3d { --rx: 0deg; --ry: 0deg; position: relative; padding: 150px 24px 26px; border-radius: var(--raio); background: var(--bg); color: var(--fg, var(--carvao)); transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 -6px 0 rgba(0, 0, 0, .06) inset, 0 24px 40px -18px rgba(43, 43, 43, .35), 0 6px 14px -6px rgba(43, 43, 43, .2); }
.card3d[data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease) var(--d, 0s), transform 1s var(--ease) var(--d, 0s), box-shadow .5s var(--ease); }
.card3d[data-reveal].is-in { opacity: 1; transform: rotateX(var(--rx)) rotateY(var(--ry)); }
.card3d.is-tilt { transition: transform .12s linear, box-shadow .5s var(--ease); }
.card3d:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 -6px 0 rgba(0, 0, 0, .06) inset, 0 40px 60px -22px rgba(43, 43, 43, .45), 0 10px 20px -8px rgba(43, 43, 43, .25); }
.card3d__img { position: absolute; width: 58%; right: -4%; top: -78px; transform: translateZ(60px); pointer-events: none; transition: transform .6s var(--ease); }
.card3d__img img { filter: drop-shadow(0 22px 22px rgba(0, 0, 0, .28)); }
.card3d:hover .card3d__img { transform: translateZ(80px) translateY(-8px) rotate(-3deg); }
.icone { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; font-size: 26px; margin-bottom: 18px; background: var(--bg); transform: translateZ(30px);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, .14), -3px -3px 8px rgba(255, 255, 255, .55), inset 0 0 0 1px rgba(255, 255, 255, .25); }
.card3d--escuro .icone { box-shadow: 4px 4px 10px rgba(0, 0, 0, .45), -3px -3px 8px rgba(255, 255, 255, .08); }
.card3d h3 { margin-bottom: 10px; transform: translateZ(24px); }
.card3d p { font-size: 15px; line-height: 1.55; opacity: .82; transform: translateZ(18px); }
.card3d .btn { margin-top: 20px; min-height: 46px; padding: 10px 18px; font-size: 14px; transform: translateZ(36px); }

/* ---------- destaques / catálogo ---------- */
.destaques { background: var(--papel); }
.destaques__in { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.5fr); gap: 32px clamp(28px, 4vw, 64px); }
.destaques__lado { align-self: start; position: sticky; top: calc(var(--topo) + 24px); }
.destaques__lado .lead { margin: 18px 0 26px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.chip { border: 0; padding: 9px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; background: #fff; box-shadow: inset 0 0 0 1.5px var(--linha); transition: background .3s, color .3s, box-shadow .3s; }
.chip:hover { box-shadow: inset 0 0 0 1.5px var(--carvao); }
.chip[aria-pressed="true"] { background: var(--carvao); color: #fff; box-shadow: none; }
.chip small { font-weight: 500; opacity: .6; margin-left: 4px; }
.bento { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; min-height: 560px; transition: opacity .35s var(--ease), transform .35s var(--ease); }
.bento > :first-child { grid-row: span 2; }
.fileira { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: -16px; transition: opacity .35s var(--ease), transform .35s var(--ease); }
.is-swap { opacity: 0; transform: translateY(14px); }
.produto { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 250px; padding: 18px 20px 20px; border-radius: 24px; background: var(--bg, var(--nevoa)); overflow: hidden; text-align: left; border: 0; width: 100%; isolation: isolate; box-shadow: 0 18px 34px -22px rgba(43, 43, 43, .45); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.produto:hover { transform: translateY(-4px); box-shadow: 0 30px 44px -22px rgba(43, 43, 43, .5); }
.produto__img { position: absolute; inset: 7% 12% 36%; z-index: -1; display: grid; place-items: center; }
.produto__img img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .22)); transition: transform .7s var(--ease); }
.produto:hover .produto__img img { transform: scale(1.07) rotate(-3deg); }
.produto__nome { font-weight: 700; font-size: 16px; line-height: 1.25; padding-right: 52px; }
.produto__frase { font-size: 13.5px; line-height: 1.45; color: var(--tinta-2); margin-top: 4px; padding-right: 52px; }
.produto__seta { position: absolute; right: 16px; bottom: 18px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--carvao); color: #fff; font-size: 19px; transition: transform .4s var(--ease), background .3s; }
.produto:hover .produto__seta { transform: rotate(-45deg); background: var(--magenta); }
.bento > :first-child .produto__img { inset: 5% 6% 24%; }
.bento > :first-child .produto__nome { font-size: 21px; }
.legenda { margin-top: 18px; font-size: 13px; color: var(--tinta-2); }

/* ---------- Natal (faixa) ---------- */
.natal { background: var(--magenta); color: #fff; overflow: hidden; }
.natal__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.natal .kicker { color: var(--lima); }
.natal p { color: rgba(255, 255, 255, .88); margin: 16px 0 28px; font-size: clamp(16px, 1.3vw, 19px); max-width: 46ch; }
.varal { position: relative; height: clamp(300px, 34vw, 440px); }
.enfeite { position: absolute; left: var(--x); top: -2px; width: var(--w); transform-origin: 50% 0; animation: balanca var(--t, 5s) ease-in-out infinite alternate; animation-delay: var(--atraso, 0s); }
.enfeite::before { content: ''; display: block; width: 2px; height: var(--fio); margin: 0 auto; background: rgba(255, 255, 255, .55); }
.enfeite img { margin-top: -6%; filter: drop-shadow(0 20px 20px rgba(0, 0, 0, .3)); }
@keyframes balanca { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }

/* ---------- como funciona ---------- */
.como { background: var(--carvao-fundo); color: #fff; overflow: hidden; }
.como .kicker { color: var(--lima); }
.como__cab { text-align: center; max-width: 760px; margin: 0 auto clamp(40px, 5vw, 72px); }
.como__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) minmax(0, 1fr); gap: 24px clamp(20px, 3vw, 48px); align-items: center; }
.etapas { display: grid; gap: clamp(26px, 3.4vw, 46px); }
.etapa { position: relative; padding-left: 92px; min-height: 78px; }
.etapa__n { position: absolute; left: 0; top: -10px; font-size: 84px; font-weight: 800; line-height: 1; color: transparent; -webkit-text-stroke: 2px rgba(233, 240, 86, .7); letter-spacing: -.04em; }
.etapa h3 { font-size: 19px; margin-bottom: 6px; color: #fff; }
.etapa p { font-size: 15px; color: rgba(255, 255, 255, .7); }
.como__centro { position: relative; display: grid; place-items: center; aspect-ratio: 1; }
.como__centro::before { content: ''; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, rgba(233, 240, 86, .22), transparent 68%); }
.como__centro img { position: relative; width: 92%; filter: drop-shadow(0 40px 40px rgba(0, 0, 0, .5)); will-change: transform; }
.como .btn { margin-top: 8px; }

/* ---------- empresas ---------- */
.empresas { background: var(--nevoa); }
.empresas__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px clamp(32px, 5vw, 80px); align-items: center; }
.empresas .lead { margin: 18px 0 22px; }
.lista { list-style: none; display: grid; gap: 12px; margin-bottom: 30px; }
.lista li { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; font-size: 16px; }
.lista li::before { content: ''; flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: var(--magenta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E") center / 13px no-repeat; }
.colagem { position: relative; aspect-ratio: 1 / .9; }
.blob { position: absolute; display: grid; place-items: center; overflow: hidden; background: var(--bg); box-shadow: 0 30px 50px -26px rgba(43, 43, 43, .5); }
.blob img { width: 82%; filter: drop-shadow(0 14px 14px rgba(0, 0, 0, .25)); transition: transform .8s var(--ease); }
.blob:hover img { transform: scale(1.06) rotate(4deg); }
.blob--1 { left: 0; top: 4%; width: 54%; aspect-ratio: 1; border-radius: 42% 58% 55% 45% / 48% 40% 60% 52%; }
.blob--2 { right: 0; top: 0; width: 42%; aspect-ratio: 1; border-radius: 58% 42% 38% 62% / 55% 60% 40% 45%; }
.blob--3 { right: 8%; bottom: 0; width: 50%; aspect-ratio: 1.1; border-radius: 40% 60% 62% 38% / 52% 44% 56% 48%; }

/* ---------- manifesto ---------- */
.manifesto { background: var(--carvao); color: #fff; overflow: hidden; text-align: center; }
.manifesto__simbolo { position: absolute; left: 50%; top: 50%; width: min(980px, 120vw); transform: translate(-50%, -50%); opacity: .13; pointer-events: none; }
.manifesto__in { position: relative; max-width: 900px; margin-inline: auto; }
.manifesto p { font-size: clamp(20px, 2.2vw, 30px); line-height: 1.45; font-weight: 500; color: rgba(255, 255, 255, .78); }
.manifesto p + p { margin-top: 16px; }
.manifesto p strong { display: block; margin-top: 18px; font-weight: 800; color: #fff; font-size: clamp(24px, 3vw, 40px); letter-spacing: -.02em; line-height: 1.2; }
.manifesto p strong em { font-style: normal; color: var(--lima); }

/* ---------- dúvidas ---------- */
.duvidas { background: var(--creme); }
.duvidas__in { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 32px clamp(32px, 5vw, 80px); align-items: start; }
.faq details { border-bottom: 1.5px solid var(--linha); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; font-weight: 700; font-size: clamp(17px, 1.4vw, 19px); cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .i { font-size: 24px; flex: none; transition: transform .4s var(--ease); color: var(--magenta); }
.faq details[open] summary .i { transform: rotate(45deg); }
.faq details p { padding: 0 48px 24px 0; color: var(--tinta-2); font-size: 16px; }

/* ---------- chamada final ---------- */
.final { background: var(--magenta); color: #fff; text-align: center; overflow: hidden; }
.final h2 { font-size: clamp(32px, 5vw, 64px); max-width: 16ch; margin-inline: auto; }
.final p { margin: 18px auto 32px; max-width: 52ch; color: rgba(255, 255, 255, .9); font-size: clamp(16px, 1.3vw, 19px); }
.final .wrap { position: relative; z-index: 2; }
.final .peca { z-index: 1; }

/* ---------- rodapé ---------- */
.rodape { background: var(--carvao-fundo); color: rgba(255, 255, 255, .72); padding: 64px 0 40px; font-size: 14px; }
.rodape__in { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, .7fr)); gap: 32px; }
.rodape__logo { width: 210px; margin-bottom: 18px; }
.rodape h4 { color: #fff; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 14px; }
.rodape ul { list-style: none; display: grid; gap: 8px; }
.rodape a { text-decoration: none; }
.rodape a:hover { color: var(--lima); }
.rodape__base { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: 13px; color: rgba(255, 255, 255, .5); }

/* ---------- páginas de catálogo ---------- */
.pagina-topo { background: var(--carvao-fundo); color: #fff; padding: calc(var(--topo) + clamp(28px, 7vh, 80px)) 0 clamp(36px, 7vh, 80px); position: relative; overflow: hidden; isolation: isolate; }
.pagina-topo::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 80% at 85% 30%, rgba(230, 0, 126, .25), transparent 70%), radial-gradient(40% 60% at 10% 100%, rgba(233, 240, 86, .12), transparent 70%); }
.pagina-topo .kicker { color: var(--lima); }
.pagina-topo h1 { font-size: clamp(32px, min(5vw, 8vh), 64px); max-width: 18ch; }
.pagina-topo p { margin: clamp(10px, 2.4vh, 18px) 0 clamp(18px, 3.6vh, 28px); max-width: 58ch; color: rgba(255, 255, 255, .78); font-size: clamp(16px, 1.3vw, 19px); }
.pagina-topo__pecas { position: absolute; right: 0; top: 0; bottom: 0; width: 46%; z-index: -1; pointer-events: none; }
.migalha { font-size: 13px; color: rgba(255, 255, 255, .55); margin-bottom: clamp(10px, 2.6vh, 22px); }
.migalha a { text-decoration: none; } .migalha a:hover { color: #fff; }
.catalogo__barra { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; margin-bottom: 28px; }
.catalogo__barra .chips { margin: 0; }
.contador { font-size: 14px; color: var(--tinta-2); font-weight: 600; }
.grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; transition: opacity .35s var(--ease), transform .35s var(--ease); }
.grade .produto { min-height: 330px; }
.grade .produto__img { inset: 5% 8% 34%; }
.grade .produto__cat { position: absolute; top: 14px; left: 16px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-2); }
.fim-catalogo { margin-top: clamp(48px, 6vw, 80px); padding: clamp(28px, 4vw, 48px); border-radius: var(--raio); background: var(--carvao); color: #fff; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.fim-catalogo h2 { font-size: clamp(24px, 2.6vw, 34px); max-width: 24ch; }
.aviso { margin-top: 18px; font-size: 14px; color: var(--tinta-2); }
.natal-topo { background: #1E1E1E; }
.natal-topo::before { background: radial-gradient(50% 80% at 85% 20%, rgba(230, 0, 126, .35), transparent 70%), radial-gradient(40% 60% at 5% 100%, rgba(233, 240, 86, .14), transparent 70%); }
.natal-topo .varal { position: absolute; right: 2%; top: var(--topo); width: 44%; height: 100%; z-index: -1; }

/* ---------- formulário em janela ---------- */
.modal { border: 0; padding: 0; margin: auto; width: min(560px, calc(100% - 24px)); max-height: calc(100svh - 24px); border-radius: 24px; background: var(--papel); color: var(--tinta); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); overflow: auto; }
.modal::backdrop { background: rgba(20, 20, 20, .72); backdrop-filter: blur(4px); }
.modal[open] { animation: modalIn .5s var(--ease); }
@keyframes modalIn { from { opacity: 0; transform: translateY(24px) scale(.98); } }
.modal__cab { background: var(--carvao); color: #fff; padding: 26px 30px 22px; position: relative; overflow: hidden; }
.modal__cab::after { content: ''; position: absolute; right: -30px; top: -40px; width: 160px; height: 160px; background: url('/assets/logo/simbolo.svg') center / contain no-repeat; opacity: .18; }
.modal__cab h2 { font-size: 26px; }
.modal__cab p { font-size: 14px; margin-top: 6px; color: rgba(255, 255, 255, .72); }
.modal__fechar { position: absolute; z-index: 2; right: 14px; top: 14px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; display: grid; place-items: center; font-size: 20px; }
.modal__fechar:hover { background: rgba(255, 255, 255, .25); }
.form { padding: 22px 30px 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.form.is-hidden { display: none; }
.campo { display: grid; gap: 5px; }
.campo--cheio { grid-column: 1 / -1; }
.campo label { font-size: 13px; font-weight: 700; }
.campo input, .campo select { width: 100%; min-height: 46px; padding: 10px 14px; border-radius: 12px; border: 1.5px solid rgba(43, 43, 43, .2); background: #fff; font: inherit; font-size: 16px; color: var(--tinta); }
.campo select { appearance: none; -webkit-appearance: none; padding-right: 38px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B2B2B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E") right 12px center / 18px no-repeat; }
.campo input:focus, .campo select:focus { outline: none; border-color: var(--magenta); box-shadow: 0 0 0 3px rgba(230, 0, 126, .15); }
.campo [aria-invalid="true"] { border-color: #C4002B; }
.erro { font-size: 12px; color: #B00027; min-height: 0; }
.erro:empty { display: none; }
.produto-escolhido { grid-column: 1 / -1; display: none; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--lima-suave); font-size: 14px; }
.produto-escolhido.is-on { display: flex; }
.produto-escolhido img { width: 48px; height: 48px; object-fit: contain; }
.produto-escolhido strong { display: block; font-size: 15px; }
.form .btn { grid-column: 1 / -1; margin-top: 6px; width: 100%; background: var(--whats); color: #fff; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15); }
.form .btn:hover { background: #1EBE5A; }
.form__nota { grid-column: 1 / -1; text-align: center; font-size: 12.5px; color: var(--tinta-2); }
.sucesso { display: none; padding: 34px 30px; text-align: center; }
.sucesso.is-visible { display: block; }
.sucesso h3 { font-size: 24px; margin-bottom: 10px; }
.sucesso p { color: var(--tinta-2); margin-bottom: 22px; }
.sucesso .btn { background: var(--whats); color: #fff; }

/* botão fixo: abre o formulário, aparece depois da abertura (padrão TraQ) */
.flutuante { position: fixed; right: 20px; bottom: 20px; z-index: 40; width: 62px; height: 62px; border-radius: 50%; border: 0; background: var(--whats); color: #fff; display: grid; place-items: center; font-size: 32px; box-shadow: 0 12px 30px rgba(0, 0, 0, .3); opacity: 0; transform: translateY(24px) scale(.8); pointer-events: none; transition: opacity .4s var(--ease), transform .4s var(--ease); }
.flutuante.is-on { opacity: 1; transform: none; pointer-events: auto; }

/* ---------- responsivo ---------- */
@media (max-width: 1100px) {
  .menu { display: none; }
  .cards3d { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 96px; }
  .destaques__in { grid-template-columns: 1fr; }
  .destaques__lado { position: static; }
  .grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .como__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .como__centro { grid-column: 1 / -1; grid-row: 1; max-width: 340px; justify-self: center; }
}
@media (max-width: 860px) {
  .hero { height: auto; min-height: 100svh; padding-bottom: 36px; }
  .hero__in { grid-template-columns: 1fr; grid-template-rows: auto auto; gap: 0; }
  .palco { order: -1; height: 46svh; min-height: 280px; width: 100%; }
  .hero__palco { position: relative; inset: auto; width: 100vw; margin-left: calc(50% - 50vw); margin-top: calc(-1 * var(--topo)); height: calc(40svh + var(--topo)); min-height: 300px; }
  .hero__img.peca { left: 0; width: 100%; }
  .hero__img img { width: 100%; object-fit: cover; object-position: 86% 50%; transform-origin: 70% 60%; -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.35) 0, #000 22%, #000 72%, transparent); mask-image: linear-gradient(180deg, rgba(0,0,0,.35) 0, #000 22%, #000 72%, transparent); }
  .hero__texto { padding-top: 0; }
  .hero h1 { font-size: clamp(34px, 9.6vw, 52px); }
  .cab, .natal__in, .empresas__in, .duvidas__in { grid-template-columns: 1fr; }
  .cab .lead { justify-self: start; }
  .varal { height: 300px; }
  .rodape__in { grid-template-columns: 1fr 1fr; }
  .rodape__in > :first-child { grid-column: 1 / -1; }
  .pagina-topo__pecas, .natal-topo .varal { opacity: .35; width: 70%; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  :root { --topo: 64px; --raio: 22px; }
  .topo__logo img { height: 34px; }
  .topo .btn { min-height: 40px; padding: 8px 14px; font-size: 13px; }
  .topo .btn .i { display: none; }
  .topo .longo { display: none; }
  .topo .curto { display: inline; }
  .final .palco { display: none; }
  .hero .btn, .natal .btn, .final .btn { width: 100%; }
  .cards3d { grid-template-columns: 1fr; row-gap: 80px; margin-top: 70px; }
  .card3d { padding-top: 120px; }
  .card3d__img { width: 56%; top: -56px; }
  .bento { grid-template-columns: 1fr 1fr; grid-template-rows: auto; min-height: 0; gap: 12px; }
  .bento > :first-child { grid-column: 1 / -1; grid-row: auto; min-height: 320px; }
  .fileira { grid-template-columns: 1fr 1fr; gap: 12px; }
  .produto { min-height: 220px; padding: 14px 14px 16px; border-radius: 20px; }
  .produto__nome { font-size: 14.5px; padding-right: 0; }
  .produto__frase { display: none; }
  .produto__seta { width: 34px; height: 34px; font-size: 16px; right: 10px; top: 10px; bottom: auto; }
  .grade { grid-template-columns: 1fr 1fr; gap: 12px; }
  .grade .produto { min-height: 250px; }
  .grade .produto__img { inset: 12% 6% 34%; }
  .como__in { grid-template-columns: 1fr; }
  .etapa { padding-left: 74px; }
  .etapa__n { font-size: 64px; }
  .faq details p { padding-right: 0; }
  .rodape__in { grid-template-columns: 1fr; }
  .form { padding: 12px 16px 14px; gap: 6px 10px; }
  .campo { gap: 3px; }
  .campo label { font-size: 12.5px; }
  .form__nota { display: none; }
  .modal { width: calc(100% - 16px); max-height: calc(100dvh - 16px); border-radius: 20px; }
  .modal__cab { padding: 16px 18px 14px; }
  .modal__cab h2 { font-size: 21px; }
  .modal__cab p { font-size: 13px; margin-top: 2px; }
  .modal__fechar { width: 34px; height: 34px; top: 10px; right: 10px; }
  .campo input, .campo select { min-height: 42px; padding-block: 8px; }
  .form .btn { min-height: 50px; }
  .flutuante { width: 56px; height: 56px; font-size: 28px; right: 14px; bottom: 14px; }
}
@media (max-width: 380px), (max-height: 640px) and (max-width: 640px) {
  .modal__cab p, .form__nota { display: none; }
  .modal__cab { padding-block: 10px; }
  .modal__cab h2 { font-size: 19px; }
  .form { gap: 4px 8px; padding-block: 8px 10px; }
  .campo label { font-size: 12px; }
  .campo input, .campo select { min-height: 38px; padding-block: 6px; font-size: 15px; }
  .form .btn { min-height: 46px; margin-top: 4px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  [data-reveal], [data-reveal="clip"] { opacity: 1; transform: none; clip-path: none; }
}