/* Lab B3D: landing de chaveiros 3D */

:root {
  --laranja: #FF4A1C;
  --laranja-escuro: #E03A10;
  --pessego: #FFE2D7;
  --tinta: #12171B;
  --tinta-2: #1E262D;
  --estudio: #E6E7E9;
  --papel: #F7F7F5;
  --texto-suave: #575E66;

  --f-display: "Unbounded", system-ui, sans-serif;
  --f-corpo: "Onest", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;

  --r-g: 56px;
  --r-m: 36px;
  --r-p: 22px;
  --sombra: 0 30px 60px -30px rgba(18, 23, 27, .45);
  --margem: clamp(16px, 4vw, 56px);
  --largura: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--estudio);
  color: var(--tinta);
  font-family: var(--f-corpo);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--f-display); font-weight: 700; letter-spacing: -.035em; line-height: .98; }
p { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--laranja); outline-offset: 4px; border-radius: 999px; }
.mono { font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; }

.pular {
  position: fixed; left: 16px; top: -60px; z-index: 100;
  background: var(--tinta); color: var(--papel); padding: 10px 18px; border-radius: 999px;
}
.pular:focus { top: 16px; }

/* ---------- Botões ---------- */
.botao {
  --bg: var(--tinta); --fg: var(--papel);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 30px; border-radius: 999px;
  background: var(--bg); color: var(--fg);
  font-weight: 600; font-size: 16px; text-decoration: none; white-space: nowrap;
  border: 2px solid transparent; cursor: pointer;
  transition: background .3s, color .3s, border-color .3s, box-shadow .3s;
  will-change: transform;
}
.botao::after {
  content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor;
  transition: transform .35s cubic-bezier(.3, 1.6, .5, 1);
}
.botao:hover::after { transform: scale(1.7); }
.botao-tinta:hover { --bg: var(--tinta-2); box-shadow: 0 14px 30px -12px rgba(18, 23, 27, .6); }
.botao-laranja { --bg: var(--laranja); --fg: var(--tinta); }
.botao-laranja:hover { --bg: var(--tinta); --fg: var(--papel); }
.botao-vazado { --bg: transparent; --fg: var(--tinta); border-color: var(--tinta); }
.botao-vazado:hover { --bg: var(--tinta); --fg: var(--laranja); }
.botao-p { min-height: 46px; padding: 0 22px; font-size: 15px; }
.botao-g { min-height: 64px; padding: 0 36px; font-size: 17px; width: 100%; }

/* ---------- Cabeçalho ---------- */
.topo {
  position: fixed; z-index: 50; top: 14px; left: 50%;
  width: min(calc(100% - 28px), 1080px);
  translate: -50% 0;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 8px 8px 8px 14px;
  border-radius: 999px;
  background: rgba(247, 247, 245, .72);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 10px 40px -18px rgba(18, 23, 27, .35), inset 0 0 0 1px rgba(255, 255, 255, .6);
  transition: translate .5s cubic-bezier(.2, .8, .2, 1);
}
.topo-oculto .topo { translate: -50% -140%; }
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--f-display); font-weight: 700; font-size: 18px; letter-spacing: -.03em; }
.marca img { border-radius: 50%; }
.marca b { color: var(--laranja); }
.topo-links { display: flex; gap: 4px; }
.topo-links a {
  text-decoration: none; font-weight: 500; font-size: 15px; padding: 10px 16px; border-radius: 999px;
  transition: background .25s;
}
.topo-links a:hover { background: rgba(18, 23, 27, .07); }

/* ---------- Seções ---------- */
section { position: relative; }
.secao-cabeca { max-width: var(--largura); margin: 0 auto; padding: 0 var(--margem); text-align: center; }
.selo {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 9px 16px; border-radius: 999px;
  background: rgba(18, 23, 27, .07); color: var(--tinta);
  margin-bottom: 24px;
}
.selo i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .6; }
.selo-claro { background: rgba(247, 247, 245, .1); color: var(--papel); }
.titulo-secao { font-size: clamp(34px, 5.4vw, 72px); max-width: 15ch; margin: 0 auto; text-wrap: balance; }
.secao-sub { margin: 22px auto 0; max-width: 46ch; color: var(--texto-suave); font-size: 18px; }

/* Efeito de impressão em camadas (assinatura da página) */
.impresso { display: block; position: relative; }
.impresso > span { display: inline-block; }
.js .impresso > span, .js .impresso-bloco { clip-path: inset(100% 0 0 0); }
.impresso-bloco { position: relative; }
.cabecote {
  position: absolute; z-index: 4; height: 3px; pointer-events: none;
  border-radius: 999px; background: rgba(18, 23, 27, .35);
}
.cabecote-ponta {
  position: absolute; bottom: 1px; width: 18px; height: 22px; translate: -50% 0;
  background: var(--tinta);
  border-radius: 6px 6px 50% 50% / 6px 6px 70% 70%;
  box-shadow: 0 6px 14px -2px rgba(255, 74, 28, .9);
}
.processo .cabecote { background: rgba(247, 247, 245, .3); }
.processo .cabecote-ponta { background: var(--laranja); box-shadow: 0 6px 18px 0 rgba(255, 74, 28, .8); }

/* ---------- Hero ---------- */
.hero {
  min-height: 100svh;
  background: var(--laranja);
  border-radius: 0 0 50% 50% / 0 0 110px 110px;
  padding: clamp(118px, 15vh, 150px) var(--margem) 0;
  overflow: hidden;
  isolation: isolate;
  z-index: 2;
}
.hero-bolha {
  position: absolute; z-index: -1; width: 70vmax; height: 70vmax; left: 50%; top: 40%;
  translate: -50% -50%;
  background: #FF5D30;
  border-radius: 43% 57% 61% 39% / 46% 38% 62% 54%;
  animation: bolha 18s ease-in-out infinite alternate;
}
@keyframes bolha {
  50% { border-radius: 60% 40% 35% 65% / 55% 62% 38% 45%; rotate: 40deg; }
  100% { border-radius: 38% 62% 56% 44% / 40% 45% 55% 60%; rotate: -20deg; scale: 1.1; }
}
.hero-texto { text-align: center; position: relative; z-index: 3; }
.hero-titulo {
  font-size: clamp(42px, 7.6vw, 124px);
  letter-spacing: -.055em;
  line-height: .94;
  font-weight: 800;
}
.hero-titulo em {
  font-style: normal; color: var(--papel);
  position: relative;
}
.hero-sub { max-width: 40ch; margin: 28px auto 0; font-size: clamp(17px, 1.5vw, 20px); font-weight: 500; }
.hero-acoes { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }

/* Anel 3D de fotos */
.anel {
  position: relative; z-index: 2;
  height: clamp(330px, 40vw, 520px);
  margin: clamp(-110px, -7vw, -20px) calc(var(--margem) * -1) 0;
  perspective: 1600px;
  perspective-origin: 50% 20%;
  cursor: grab;
  touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
}
.anel:active { cursor: grabbing; }
.anel-pista {
  position: absolute; left: 50%; top: 42%;
  width: 0; height: 0;
  transform-style: preserve-3d;
}
.anel-card {
  position: absolute;
  width: var(--card-l, 210px); height: var(--card-a, 262px);
  left: calc(var(--card-l, 210px) / -2); top: calc(var(--card-a, 262px) / -2);
  transform-style: preserve-3d;
}
.anel-face, .anel-verso {
  position: absolute; inset: 0;
  border-radius: var(--r-m);
  overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.anel-face { background: var(--estudio); box-shadow: 0 40px 50px -30px rgba(18, 23, 27, .55); }
.anel-face img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.anel-verso {
  transform: rotateY(180deg);
  background: var(--tinta);
  display: grid; place-items: center;
}
.anel-verso img { width: 56%; border-radius: 50%; pointer-events: none; }
.anel-mesa {
  position: absolute; left: 50%; bottom: 4%;
  width: min(90vw, 980px); height: 90px; translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(18, 23, 27, .28), transparent);
  filter: blur(6px);
}

/* Faixa que corre */
.faixa {
  position: relative; z-index: 3;
  margin: -64px -2vw 0; padding: 18px 0;
  background: var(--tinta); color: var(--papel);
  rotate: -2.2deg;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 30px 50px -30px rgba(18, 23, 27, .6);
}
.faixa-trilho { display: flex; width: max-content; will-change: transform; }
.faixa-item {
  display: inline-flex; align-items: center; gap: 28px; padding-right: 28px;
  font-family: var(--f-display); font-weight: 700; font-size: clamp(20px, 2.6vw, 34px); letter-spacing: -.02em; white-space: nowrap;
}
.faixa-item svg { width: .9em; height: .9em; flex: none; }

/* ---------- Modelos ---------- */
.modelos { padding: clamp(90px, 10vw, 130px) 0 clamp(60px, 8vw, 120px); }
.modelos-nav {
  position: sticky; top: 92px; z-index: 20;
  display: flex; gap: 6px; justify-content: center;
  width: max-content; max-width: calc(100% - 32px);
  margin: 44px auto 0; padding: 6px;
  border-radius: 999px;
  background: rgba(247, 247, 245, .8);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px -16px rgba(18, 23, 27, .35);
  overflow-x: auto; scrollbar-width: none;
  transition: top .5s cubic-bezier(.2, .8, .2, 1);
}
.modelos-nav::-webkit-scrollbar { display: none; }
.topo-oculto .modelos-nav { top: 14px; }
.modelos-nav a {
  position: relative; flex: none;
  padding: 10px 18px; border-radius: 999px;
  text-decoration: none; font-weight: 600; font-size: 15px;
  transition: color .3s;
}
.modelos-nav a.ativo { color: var(--papel); }
.modelos-nav .nav-pilula {
  position: absolute; z-index: -1; top: 6px; left: 0; height: calc(100% - 12px);
  border-radius: 999px; background: var(--tinta);
  transition: transform .5s cubic-bezier(.2, .9, .25, 1.1), width .5s cubic-bezier(.2, .9, .25, 1.1);
}
.modelos-nav { isolation: isolate; }

.modelos-lista { max-width: var(--largura); margin: 0 auto; padding: 0 var(--margem); }
.modelo {
  display: grid; grid-template-columns: 1.08fr 1fr; gap: clamp(32px, 6vw, 96px);
  align-items: center;
  padding: clamp(60px, 9vw, 120px) 0;
  scroll-margin-top: 80px;
}
.modelo:nth-child(even) .vitrine { order: 2; }

/* Vitrine (carrossel de cada modelo) */
.vitrine { position: relative; }
.vitrine-bolha {
  position: absolute; inset: 8% -4% -6% 6%; z-index: 0;
  background: var(--laranja);
  border-radius: 62% 38% 46% 54% / 48% 56% 44% 52%;
  animation: bolha 14s ease-in-out infinite alternate;
  opacity: .9;
}
.modelo:nth-child(even) .vitrine-bolha { inset: 6% 6% -4% -6%; background: var(--tinta); animation-duration: 16s; }
.vitrine-moldura {
  position: relative; z-index: 1;
  aspect-ratio: var(--proporcao, 1 / 1);
  border-radius: var(--r-g);
  overflow: hidden;
  background: var(--papel);
  box-shadow: var(--sombra);
  touch-action: pan-y;
  cursor: grab;
}
.vitrine-moldura:active { cursor: grabbing; }
.vitrine-slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
}
.vitrine-slide.ativo { opacity: 1; visibility: visible; }
.vitrine-slide img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; }
.vitrine-contador {
  position: absolute; z-index: 2; left: 20px; top: 20px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(247, 247, 245, .85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: 11px;
}
.vitrine-setas { position: absolute; z-index: 2; right: 18px; bottom: 18px; display: flex; gap: 8px; }
.seta {
  width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(247, 247, 245, .9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background .25s, color .25s, transform .25s;
}
.seta:hover { background: var(--tinta); color: var(--laranja); transform: scale(1.06); }
.seta svg { width: 20px; height: 20px; }
.vitrine-miniaturas { position: relative; z-index: 1; display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.mini {
  width: 58px; height: 58px; padding: 0; border-radius: 50%; overflow: hidden; cursor: pointer;
  border: 3px solid transparent; background: var(--papel);
  box-shadow: 0 0 0 1px rgba(18, 23, 27, .1);
  transition: border-color .3s, transform .3s cubic-bezier(.3, 1.6, .5, 1);
}
.mini img { width: 100%; height: 100%; object-fit: cover; }
.mini:hover { transform: translateY(-4px); }
.mini.ativo { border-color: var(--laranja); transform: scale(1.08); }
.mini-progresso {
  position: absolute; z-index: 2; left: 50%; bottom: 22px; translate: -50% 0;
  width: 84px; height: 5px; border-radius: 999px; background: rgba(18, 23, 27, .15); overflow: hidden;
}
.mini-progresso i { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--tinta); transform-origin: left; transform: scaleX(0); }

/* Ficha do modelo */
.ficha-chamada {
  display: inline-block; padding: 9px 16px; border-radius: 999px;
  background: var(--pessego); color: var(--laranja-escuro); font-weight: 600; font-size: 15px;
}
.ficha h3 { font-size: clamp(40px, 5.6vw, 76px); margin: 20px 0 22px; }
.ficha-texto { font-size: 18px; color: var(--texto-suave); max-width: 44ch; }
.ficha-detalhes { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; list-style: none; }
.ficha-detalhes li {
  padding: 10px 16px; border-radius: 999px; background: var(--papel);
  font-weight: 500; font-size: 15px;
  box-shadow: inset 0 0 0 1px rgba(18, 23, 27, .08);
}
.ficha-preco {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 34px; padding: 18px 18px 18px 30px;
  border-radius: 999px; background: var(--tinta); color: var(--papel);
}
.ficha-preco .rotulo { display: block; font-size: 11px; opacity: .65; margin-bottom: 2px; }
.ficha-preco .valor { font-family: var(--f-display); font-weight: 700; font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -.03em; }
.ficha-preco .valor small { font-family: var(--f-corpo); font-size: 15px; font-weight: 500; opacity: .7; letter-spacing: 0; margin-left: 4px; }
.ficha-preco .botao { min-height: 50px; }

/* ---------- Galeria ---------- */
.galeria {
  padding: clamp(80px, 10vw, 140px) 0;
  background: var(--papel);
  border-radius: var(--r-g) var(--r-g) 0 0;
  overflow: hidden;
}
.galeria .secao-cabeca { margin-bottom: clamp(40px, 5vw, 64px); }
.galeria-linha { overflow: hidden; padding: 14px 0; }
.galeria-trilho { display: flex; gap: 18px; width: max-content; will-change: transform; padding-right: 18px; }
.galeria-card {
  flex: none; display: block;
  width: clamp(200px, 22vw, 300px); aspect-ratio: 4 / 5;
  border-radius: var(--r-m); overflow: hidden;
  background: var(--estudio);
  transition: transform .5s cubic-bezier(.2, .9, .25, 1.1), border-radius .5s;
}
.galeria-linha:nth-child(odd) .galeria-card:nth-child(odd),
.galeria-linha:nth-child(even) .galeria-card:nth-child(even) { border-radius: 50% 50% var(--r-m) var(--r-m) / 36% 36% var(--r-m) var(--r-m); }
.galeria-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.galeria-card:hover { transform: translateY(-8px) rotate(-1.5deg); }
.galeria-card:hover img { transform: scale(1.08); }

/* ---------- Como funciona ---------- */
.processo {
  background: var(--tinta); color: var(--papel);
  border-radius: var(--r-g);
  margin: 0 clamp(8px, 1.5vw, 20px);
  padding: clamp(80px, 10vw, 140px) var(--margem);
  overflow: hidden;
  z-index: 2;
}
.processo .titulo-secao { color: var(--papel); }
.processo-corpo { position: relative; max-width: var(--largura); margin: clamp(56px, 7vw, 96px) auto 0; }
.processo-linha { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.processo-linha path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.processo-linha .trilha { stroke: rgba(247, 247, 245, .14); stroke-width: 2; stroke-dasharray: 2 10; }
.processo-linha .tinta { stroke: var(--laranja); stroke-width: 5; }
.bico {
  position: absolute; z-index: 2; left: 0; top: 0;
  width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
  background: var(--laranja);
  box-shadow: 0 0 0 8px rgba(255, 74, 28, .2), 0 0 40px 6px rgba(255, 74, 28, .55);
}
.passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; z-index: 1; }
.passo { text-align: center; padding-top: 0; }
.passo-n {
  display: grid; place-items: center; margin: 46px auto 34px;
  width: 68px; height: 68px; border-radius: 50%;
  background: var(--tinta-2); color: var(--papel);
  font-family: var(--f-display); font-weight: 700; font-size: 24px;
  box-shadow: 0 0 0 6px var(--tinta), inset 0 0 0 2px rgba(247, 247, 245, .12);
  transition: background .4s, color .4s, transform .5s cubic-bezier(.3, 1.6, .5, 1);
}
.passo.feito .passo-n { background: var(--laranja); color: var(--tinta); transform: scale(1.1); }
.passo h3 { font-size: clamp(20px, 1.8vw, 24px); letter-spacing: -.025em; line-height: 1.15; margin-bottom: 12px; }
.passo p { color: rgba(247, 247, 245, .7); max-width: 26ch; margin: 0 auto; }

/* ---------- Orçamento ---------- */
.orcamento { padding: clamp(100px, 12vw, 170px) var(--margem) clamp(60px, 8vw, 110px); }
.montador {
  max-width: 1100px; margin: clamp(44px, 5vw, 70px) auto 0;
  display: grid; grid-template-columns: 1.25fr 1fr; gap: 16px;
  padding: 16px; border-radius: calc(var(--r-g) + 8px);
  background: var(--papel);
  box-shadow: var(--sombra);
}
.montador-escolhas { padding: clamp(18px, 3vw, 36px); display: grid; gap: 34px; align-content: start; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; margin-bottom: 14px; color: var(--texto-suave); }
.opcoes { display: flex; flex-wrap: wrap; gap: 10px; }
.opcao {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 6px 20px 6px 6px;
  border-radius: 999px; border: 0; cursor: pointer;
  background: var(--estudio); font-weight: 600; font-size: 15px;
  transition: background .3s, color .3s, transform .3s cubic-bezier(.3, 1.6, .5, 1);
}
.opcao img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.opcoes-qtd .opcao { padding: 6px 22px; }
.opcao:hover { transform: translateY(-2px); }
.opcao[aria-checked="true"] { background: var(--tinta); color: var(--papel); }
.montador-resultado {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: clamp(24px, 3vw, 38px);
  border-radius: var(--r-g);
  background: var(--laranja);
  isolation: isolate;
}
.resultado-foto {
  position: absolute; z-index: -1; right: -40px; top: -40px;
  width: 220px; height: 220px; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 10px rgba(255, 255, 255, .18);
  animation: girar 30s linear infinite;
}
.resultado-foto img { width: 100%; height: 100%; object-fit: cover; }
@keyframes girar { to { rotate: 360deg; } }
.resultado-rotulo { margin-top: 140px; }
.resultado-valor { font-family: var(--f-display); font-weight: 800; font-size: clamp(32px, 3.6vw, 48px); letter-spacing: -.045em; line-height: 1; }
.resultado-valor small { display: block; font-family: var(--f-corpo); font-weight: 600; font-size: 16px; letter-spacing: 0; margin-top: 10px; }
.resultado-nota { font-weight: 500; max-width: 34ch; margin-bottom: 16px; }
.montador-resultado .botao-laranja { --bg: var(--tinta); --fg: var(--papel); margin-top: auto; }
.montador-resultado .botao-laranja:hover { --bg: var(--papel); --fg: var(--tinta); }

.tabela-caixa { max-width: 1100px; margin: 28px auto 0; padding: clamp(22px, 3vw, 40px); border-radius: var(--r-g); background: var(--papel); }
.tabela-titulo { font-size: 24px; margin-bottom: 18px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.tabela-titulo .mono { color: var(--texto-suave); }
.tabela-rolagem { overflow-x: auto; }
.tabela { width: 100%; border-collapse: separate; border-spacing: 0 8px; min-width: 560px; }
.tabela th, .tabela td { padding: 14px 18px; text-align: right; white-space: nowrap; }
.tabela th:first-child, .tabela td:first-child { text-align: left; }
.tabela thead th { font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-suave); font-weight: 500; }
.tabela tbody td { background: var(--estudio); font-weight: 600; }
.tabela tbody td:first-child { border-radius: 999px 0 0 999px; font-family: var(--f-display); letter-spacing: -.02em; }
.tabela tbody td:last-child { border-radius: 0 999px 999px 0; }
.tabela .consulta { color: var(--texto-suave); font-weight: 500; }

/* ---------- Dúvidas ---------- */
.duvidas { padding: clamp(60px, 8vw, 110px) var(--margem) clamp(100px, 12vw, 160px); }
.perguntas { max-width: 860px; margin: clamp(40px, 5vw, 64px) auto 0; display: grid; gap: 12px; }
.pergunta { border-radius: var(--r-m); background: var(--papel); overflow: hidden; transition: background .3s; }
.pergunta[open] { background: var(--tinta); color: var(--papel); }
.pergunta summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 24px 24px 32px;
  font-family: var(--f-display); font-weight: 600; font-size: clamp(17px, 1.6vw, 21px); letter-spacing: -.02em;
  border-radius: var(--r-m);
}
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary::after {
  content: "+"; flex: none;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--laranja); color: var(--tinta); font-family: var(--f-corpo); font-size: 26px; font-weight: 500;
  transition: rotate .4s cubic-bezier(.3, 1.6, .5, 1);
}
.pergunta[open] summary::after { rotate: 135deg; }
.resposta { padding: 0 32px 28px; max-width: 60ch; color: rgba(247, 247, 245, .78); font-size: 17px; }

/* ---------- Chamada final ---------- */
.final {
  margin: 0 clamp(8px, 1.5vw, 20px);
  padding: clamp(110px, 14vw, 190px) var(--margem);
  border-radius: var(--r-g);
  background: var(--laranja);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.final .selo { background: rgba(18, 23, 27, .1); }
.final-titulo { font-size: clamp(36px, 12vw, 184px); font-weight: 800; letter-spacing: -.06em; line-height: .9; }
.final-sub { max-width: 38ch; margin: 30px auto 44px; font-size: clamp(17px, 1.5vw, 20px); font-weight: 500; }
.final-fotos { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.final-foto {
  position: absolute; width: clamp(110px, 13vw, 190px); aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  box-shadow: 0 30px 50px -24px rgba(18, 23, 27, .55);
  border: 6px solid rgba(247, 247, 245, .5);
}
.final-foto img { width: 100%; height: 100%; object-fit: cover; }
.botao-redondo {
  display: inline-grid; place-items: center;
  width: 190px; height: 190px; border-radius: 50%;
  background: var(--tinta); color: var(--papel);
  text-decoration: none; font-weight: 600; font-size: 17px; line-height: 1.25; text-align: center;
  padding: 30px;
  box-shadow: 0 30px 60px -25px rgba(18, 23, 27, .7);
  transition: background .3s, color .3s;
  position: relative;
}
.botao-redondo::before {
  content: ""; position: absolute; inset: -12px; border-radius: 50%;
  border: 2px dashed rgba(18, 23, 27, .4);
  animation: girar 22s linear infinite;
}
.botao-redondo:hover { background: var(--papel); color: var(--tinta); }

/* ---------- Rodapé ---------- */
.rodape {
  max-width: var(--largura); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 44px var(--margem) 56px;
  color: var(--texto-suave); font-size: 15px;
}
.rodape .marca { color: var(--tinta); }
.rodape-links { display: flex; gap: 8px; flex-wrap: wrap; }
.rodape-insta { font-weight: 600; color: var(--tinta); text-decoration: none; padding: 12px 20px; border-radius: 999px; background: var(--papel); }
.rodape-insta:hover { background: var(--tinta); color: var(--papel); }

/* Aviso flutuante */
.aviso {
  position: fixed; z-index: 90; left: 50%; bottom: 24px;
  translate: -50% calc(100% + 40px);
  visibility: hidden;
  max-width: calc(100% - 32px);
  padding: 14px 22px; border-radius: 999px;
  background: var(--tinta); color: var(--papel); font-weight: 500;
  box-shadow: 0 20px 40px -16px rgba(18, 23, 27, .6);
  transition: translate .5s cubic-bezier(.2, .9, .25, 1.15), visibility .5s;
}
.aviso.on { translate: -50% 0; visibility: visible; }
.faixa-exemplo {
  position: fixed; z-index: 60; left: 50%; bottom: 20px; translate: -50% 0;
  padding: 10px 18px; border-radius: 999px; background: #FFE07A; color: var(--tinta);
  font-weight: 600; font-size: 14px; box-shadow: var(--sombra);
}

/* ---------- Responsivo ---------- */
@media (max-width: 960px) {
  .topo-links { display: none; }
  .modelo, .modelo:nth-child(even) { grid-template-columns: 1fr; }
  .modelo:nth-child(even) .vitrine { order: 0; }
  .montador { grid-template-columns: 1fr; }
  .passos { grid-template-columns: 1fr; gap: 8px; padding-left: 84px; }
  .passo { text-align: left; padding: 18px 0 30px; position: relative; }
  .passo-n { position: absolute; left: -84px; top: 8px; margin: 0; width: 58px; height: 58px; font-size: 20px; }
  .passo p { margin: 0; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .hero { border-radius: 0 0 50% 50% / 0 0 56px 56px; padding-top: 112px; }
  .hero-acoes .botao { width: 100%; }
  .faixa { margin-top: -40px; padding: 13px 0; }
  .topo { padding-left: 10px; }
  .marca span { font-size: 16px; }
  .modelos-nav { justify-content: flex-start; top: 84px; }
  .modelo { padding: 48px 0 56px; gap: 34px; }
  .vitrine-moldura { border-radius: var(--r-m); }
  .seta { width: 46px; height: 46px; }
  .mini { width: 50px; height: 50px; }
  .ficha-preco { border-radius: var(--r-m); padding: 20px; }
  .ficha-preco .botao { width: 100%; }
  .resultado-foto { width: 160px; height: 160px; right: -24px; top: -24px; }
  .resultado-rotulo { margin-top: 110px; }
  .pergunta summary { padding: 18px 16px 18px 22px; }
  .resposta { padding: 0 22px 22px; }
  .botao-redondo { width: 168px; height: 168px; }
  .final { padding-top: 150px; padding-bottom: 150px; }
  .final-foto { width: 92px; border-width: 4px; }
  .final-foto:nth-child(3), .final-foto:nth-child(4) { display: none; }
  .rodape { flex-direction: column; align-items: flex-start; }
}

.sem-movimento .bico, .sem-movimento .processo-linha { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .js .impresso > span, .js .impresso-bloco { clip-path: none; }
}