:root {
  --preto: #0a0a0b;
  --preto-2: #121214;
  --preto-3: #1b1b1e;
  --linha-esc: #26262a;
  --marfim: #f6f3ec;
  --branco: #ffffff;
  --linha: #e6dfcf;
  --tinta: #17150f;
  --tinta-2: #5f5a50;
  --tinta-clara: #f5f1e8;
  --tinta-clara-2: #a9a59c;
  --ouro: #e6be73;
  --ouro-esc: #a87a35;
  --ouro-1: #fbe7b0;
  --ouro-3: #c9965a;
  --alerta: #fff6e3;
  --whats: #25d366;
  --raio: 18px;
  --display: "Montserrat", "Inter", system-ui, sans-serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --suave: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--marfim); color: var(--tinta); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--display); margin: 0; line-height: 1.15; letter-spacing: -0.02em; }
p { margin: 0; }
.wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }

/* ---------- botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 26px; border-radius: 999px; font: 600 16px/1 var(--display); letter-spacing: .01em; border: 1px solid transparent; cursor: pointer; transition: transform .25s var(--suave), box-shadow .25s, background .25s; white-space: nowrap; }
.btn:hover { transform: translateY(-2px); }
.btn-ouro { color: #1a1408; background: linear-gradient(135deg, var(--ouro-1), var(--ouro) 45%, var(--ouro-3)); box-shadow: 0 8px 28px -10px #e6be73aa, inset 0 1px 0 #fff8; position: relative; overflow: hidden; }
.btn-ouro::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, #fff9 50%, transparent 70%); transform: translateX(-120%); animation: brilho 4.5s ease-in-out infinite; }
.btn-ouro:hover { box-shadow: 0 14px 36px -10px #e6be73cc, inset 0 1px 0 #fff8; }
.btn-linha { color: var(--tinta-clara); border-color: #ffffff2e; background: #ffffff08; }
.btn-linha:hover { border-color: var(--ouro); }
.btn-sm { padding: 11px 20px; font-size: 14px; }
.btn-full { width: 100%; }
@keyframes brilho { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }

/* ---------- marca ---------- */
.marca { display: inline-flex; align-items: center; gap: 10px; }
.marca img { display: block; width: auto; }

/* ---------- topo ---------- */
.topo { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .3s, border-color .3s, backdrop-filter .3s; border-bottom: 1px solid transparent; }
.topo.rolou { background: #0a0a0bd9; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: var(--linha-esc); }
.topo-in { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.menu { display: flex; align-items: center; gap: 30px; }
.menu a:not(.btn) { color: var(--tinta-clara-2); font-size: 15px; font-weight: 500; transition: color .2s; }
.menu a:not(.btn):hover { color: var(--ouro); }
.burger { display: none; width: 44px; height: 44px; border: 1px solid var(--linha-esc); border-radius: 12px; background: transparent; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 6px; }
.burger span { width: 18px; height: 2px; background: var(--tinta-clara); border-radius: 2px; transition: transform .3s; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero { position: relative; background: var(--preto); color: var(--tinta-clara); padding: 100px 0 72px; overflow: hidden; }
.hero-luz { position: absolute; inset: 0; background:
  radial-gradient(600px 420px at 78% 40%, #e6be7326, transparent 70%),
  radial-gradient(500px 300px at 10% 0%, #c9965a1a, transparent 70%); pointer-events: none; }
.hero::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(#ffffff06 1px, transparent 1px), linear-gradient(90deg, #ffffff06 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at 60% 40%, #000 20%, transparent 75%); pointer-events: none; }
.hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.selo { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border: 1px solid #e6be7340; border-radius: 999px; background: #e6be730d; color: var(--ouro); font-size: 14px; font-weight: 500; margin-bottom: 18px; }
.ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--ouro); box-shadow: 0 0 0 0 #e6be73aa; animation: ping 2s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 10px #e6be7300; } 100% { box-shadow: 0 0 0 0 #e6be7300; } }
.hero h1 { font-size: clamp(36px, 4.6vw, 58px); font-weight: 800; letter-spacing: -0.035em; }
.hero h1 em { font-style: normal; background: linear-gradient(100deg, var(--ouro-1), var(--ouro) 40%, var(--ouro-3) 70%, var(--ouro-1)); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: ouro 6s linear infinite; }
@keyframes ouro { to { background-position: 200% center; } }
.lead { margin-top: 16px; font-size: 19px; color: var(--tinta-clara-2); max-width: 560px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.hero-provas { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 10px 26px; color: var(--tinta-clara-2); font-size: 15px; }
.hero-provas li { display: flex; align-items: center; gap: 8px; }
.hero-provas svg { color: var(--ouro); }

.hero-visual { position: relative; height: 380px; perspective: 1200px; }
.flutua { position: absolute; display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; border-radius: 14px; background: #16161acc; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid #ffffff14; font-size: 13px; color: var(--tinta-clara-2); box-shadow: 0 20px 40px -20px #000; animation: flutuar2 6s ease-in-out infinite; }
.flutua b { color: var(--tinta-clara); font: 600 15px var(--display); }
.f1 { top: 14px; left: 0; }
.f2 { bottom: 20px; right: 0; animation-delay: -3s; }
@keyframes flutuar2 { 50% { transform: translateY(-10px); } }

/* ---------- faixa público ---------- */
.faixa { background: var(--preto-2); border-block: 1px solid var(--linha-esc); color: var(--tinta-clara-2); }
.faixa-in { display: flex; align-items: center; gap: 28px; padding-block: 22px; flex-wrap: wrap; }
.faixa-in > span { font: 700 12px var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--ouro); }
.faixa ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 30px; font-size: 15px; }
.faixa li { display: flex; align-items: center; gap: 10px; }
.faixa li::before { content: ""; width: 6px; height: 6px; rotate: 45deg; background: var(--ouro-3); }

/* ---------- seções ---------- */
.sec { padding: 110px 0; }
.sec-escura { background: var(--preto); color: var(--tinta-clara); }
.sec-cab { max-width: 700px; margin-bottom: 56px; }
.sobre { font: 700 13px var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--ouro-esc); margin-bottom: 14px; }
.sec-escura .sobre { color: var(--ouro); }
.sec h2 { font-size: clamp(30px, 3.8vw, 44px); font-weight: 800; }
.sec-cab > p:not(.sobre) { margin-top: 16px; color: var(--tinta-2); font-size: 18px; }
.sec-escura .sec-cab > p:not(.sobre) { color: var(--tinta-clara-2); }

/* produtos */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.card { position: relative; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 30px 26px 26px; display: flex; flex-direction: column; transition: transform .35s var(--suave), box-shadow .35s; }
.card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px #17150f40; }
@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes borda { to { --ang: 360deg; } }
.card-ico { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; background: #a87a3514; color: var(--ouro-esc); margin-bottom: 24px; }
.card h3 { font-size: 22px; font-weight: 700; }
.card > p { margin-top: 12px; color: var(--tinta-2); font-size: 16px; }
.lista { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; font-size: 15px; }
.lista li { display: flex; gap: 10px; align-items: flex-start; }
.lista li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; background: #a87a351f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23a87a35' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat; }
.lista-clara li::before { background-color: #e6be731f; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23e6be73' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E"); }
.card-link { margin-top: auto; padding-top: 28px; display: inline-flex; align-items: center; gap: 8px; font: 600 15px var(--display); color: var(--ouro-esc); }
.card-link svg { transition: transform .25s; }
.card-link:hover svg { transform: translateX(4px); }
.nota { margin-top: 26px; font-size: 13px; color: var(--tinta-2); }

/* passos */
.passos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: p; }
.passos li { position: relative; padding: 30px 26px; border: 1px solid var(--linha-esc); border-radius: var(--raio); background: linear-gradient(180deg, var(--preto-2), var(--preto)); }
.passos li:not(:last-child)::after { content: ""; position: absolute; top: 50px; right: -21px; width: 20px; height: 1px; background: linear-gradient(90deg, var(--ouro-3), transparent); }
.n { display: inline-block; font: 800 34px/1 var(--display); background: linear-gradient(135deg, var(--ouro-1), var(--ouro-3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.passos h3 { margin-top: 18px; font-size: 19px; font-weight: 700; }
.passos p { margin-top: 10px; color: var(--tinta-clara-2); font-size: 15px; }

/* diferenciais */
.dif { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: center; }
.dif-txt > p:not(.sobre) { margin-top: 18px; color: var(--tinta-2); font-size: 18px; }
.dif-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.dif-grid > div { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 26px; }
.dif-grid h3 { font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.dif-grid h3::before { content: ""; width: 10px; height: 10px; rotate: 45deg; border-radius: 2px; background: linear-gradient(135deg, var(--ouro-1), var(--ouro-3)); }
.dif-grid p { margin-top: 10px; color: var(--tinta-2); font-size: 15px; }

/* alerta */
.sec-alerta { padding: 0 0 110px; }
.alerta { display: flex; gap: 26px; align-items: flex-start; padding: 34px 38px; border-radius: var(--raio); background: var(--alerta); border: 1px solid #ecd9ae; }
.alerta-ico { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--preto); color: var(--ouro); font: 800 26px var(--display); }
.alerta h2 { font-size: 24px; font-weight: 800; }
.alerta p { margin-top: 8px; color: var(--tinta-2); }

/* simular */
.simular { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: center; }
.simular-txt > p:not(.sobre) { margin-top: 18px; color: var(--tinta-clara-2); font-size: 18px; }
.simular .lista { margin-top: 28px; color: var(--tinta-clara-2); }
.form { display: grid; gap: 18px; padding: 34px; border-radius: 22px; background: var(--preto-2); border: 1px solid var(--linha-esc); box-shadow: 0 40px 80px -40px #000, 0 0 120px -60px #e6be7355; }
.form label { display: grid; gap: 8px; font-size: 14px; font-weight: 500; color: var(--tinta-clara-2); }
.form input:not([type=radio]):not([type=checkbox]), .form select { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--linha-esc); background: var(--preto); color: var(--tinta-clara); font: 400 16px var(--sans); outline: none; transition: border-color .2s, box-shadow .2s; appearance: none; }
.form select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23a9a59c' stroke-width='2' d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 42px; }
.form input::placeholder { color: #6b6862; }
.form input:focus, .form select:focus { border-color: var(--ouro); box-shadow: 0 0 0 4px #e6be731f; }
.form input.invalido { border-color: #f08a80; }
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
fieldset { border: 0; margin: 0; padding: 0; }
legend { font-size: 14px; font-weight: 500; color: var(--tinta-clara-2); margin-bottom: 10px; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { display: block; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips span { display: inline-block; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--linha-esc); color: var(--tinta-clara-2); font-size: 14px; cursor: pointer; transition: all .2s; }
.chips input:checked + span { border-color: var(--ouro); color: var(--ouro); background: #e6be7314; }
.chips input:focus-visible + span { box-shadow: 0 0 0 3px #e6be7340; }
.form .aceite { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; font-weight: 400; line-height: 1.5; cursor: pointer; }
.aceite input { margin-top: 3px; accent-color: var(--ouro); width: 16px; height: 16px; flex: none; }
.aceite a { color: var(--ouro); text-decoration: underline; text-underline-offset: 2px; }
.erro { min-height: 0; color: #f08a80; font-size: 14px; }
.erro:empty { display: none; }

/* faq */
.faq-wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; }
.faq { display: grid; gap: 12px; }
.faq details { background: var(--branco); border: 1px solid var(--linha); border-radius: 14px; padding: 0 24px; transition: border-color .2s; }
.faq details[open] { border-color: var(--ouro-3); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 0; font: 600 17px var(--display); display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #a87a3514; color: var(--ouro-esc); font-size: 20px; transition: transform .3s var(--suave); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 22px; color: var(--tinta-2); font-size: 16px; }

/* rodapé */
.rodape { background: var(--preto); color: var(--tinta-clara-2); padding: 72px 0 40px; font-size: 15px; }
.rodape-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid var(--linha-esc); }
.rodape-desc { margin-top: 16px; max-width: 320px; }
.rodape h4 { font: 700 12px var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--ouro); margin-bottom: 16px; }
.rodape-top > div:not(:first-child) { display: flex; flex-direction: column; gap: 10px; }
.rodape-top a:hover { color: var(--ouro); }
.legal { padding-top: 30px; display: grid; gap: 12px; font-size: 13px; line-height: 1.65; color: #8a867e; }
.legal b { color: var(--tinta-clara-2); }

/* whats flutuante */
.whats-flutua { position: fixed; right: 20px; bottom: 20px; z-index: 40; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: var(--whats); color: #fff; box-shadow: 0 14px 30px -10px #25d366aa; transition: transform .25s var(--suave); }
.whats-flutua:hover { transform: scale(1.08); }

/* entrada ao rolar */
.revela { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--suave), transform .8s var(--suave); }
.revela.visivel { opacity: 1; transform: none; }

/* ---------- responsivo ---------- */
@media (max-width: 1000px) {
  .hero-in, .dif, .simular, .faq-wrap { grid-template-columns: 1fr; gap: 44px; }
  .hero-visual { height: 340px; }
  .cards { grid-template-columns: 1fr 1fr; }
  .passos { grid-template-columns: 1fr 1fr; }
  .passos li::after { display: none; }
  .rodape-top { grid-template-columns: 1fr 1fr; }
  .rodape-top > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
  .burger { display: flex; }
  .menu { position: fixed; top: 76px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 12px 16px 24px; background: #0a0a0bf2; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--linha-esc); transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
  .menu.aberto { opacity: 1; transform: none; pointer-events: auto; }
  .menu a:not(.btn) { padding: 14px 4px; font-size: 17px; border-bottom: 1px solid var(--linha-esc); }
  .menu .btn { margin-top: 16px; }
  .topo:has(.menu.aberto) { background: #0a0a0bf2; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .topo .marca img { height: 36px; }
  .hero { padding: 96px 0 64px; }
  .lead { font-size: 17px; }
  .hero-cta .btn { flex: 1 1 100%; }
  .hero-visual { height: 280px; }
  .flutua { padding: 10px 14px; font-size: 12px; }
  .flutua b { font-size: 13px; }
  .sec { padding: 80px 0; }
  .sec-alerta { padding-bottom: 80px; }
  .passos, .dif-grid, .duas, .cards { grid-template-columns: 1fr; }
  .alerta { flex-direction: column; padding: 28px 24px; }
  .form { padding: 24px 20px; }
  .rodape-top { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .revela { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}
@media (max-width: 600px) { .f1 { top: 0; } .f2 { bottom: 0; } }
@media (min-width: 1001px) and (max-height: 860px) {
  .hero { padding: 92px 0 56px; }
  .hero h1 { font-size: clamp(34px, 4vw, 50px); }
  .lead { font-size: 17px; }
  .hero-visual { height: 330px; }
}
/* abertura ocupa a tela inteira: a faixa "Atendemos" só aparece ao rolar */
.hero { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; }

/* ---------- abertura (splash) ---------- */
.splash { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; align-content: center; background: #070708; overflow: hidden; cursor: pointer; transition: opacity .7s cubic-bezier(.65, 0, .35, 1), transform .7s cubic-bezier(.65, 0, .35, 1), filter .7s; }
.splash.saindo { opacity: 0; transform: scale(1.04); filter: blur(8px); pointer-events: none; }
.sem-splash .splash { display: none; }
.splash-luz { position: absolute; width: 680px; height: 680px; border-radius: 50%; background: radial-gradient(circle, #f7c55a33, transparent 60%); animation: sp-luz 1.6s var(--suave) both; }
.splash-pontos { position: absolute; inset: 0; background-image: radial-gradient(#e6be73 1px, transparent 1px); background-size: 26px 26px; animation: sp-pontos 1.2s ease both; }
.splash-marca { position: relative; display: flex; align-items: center; gap: 18px; }
.splash-emblema { position: relative; animation: sp-emblema 1.1s cubic-bezier(.34, 1.56, .64, 1) .2s both; }
.splash-emblema::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, #fff9 50%, transparent 60%) 150% 0 / 300% 100% no-repeat; -webkit-mask: url(img/doura-emblema.png) center/contain no-repeat; mask: url(img/doura-emblema.png) center/contain no-repeat; animation: sp-brilho 1.2s ease-in-out 1.3s both; }
.splash-emblema img { display: block; filter: drop-shadow(0 0 22px #e6be7366); }
.splash-palavra { overflow: hidden; clip-path: inset(0 100% 0 0); animation: sp-escreve 1s cubic-bezier(.65, 0, .35, 1) .8s forwards; }
.splash-palavra img { display: block; }
.splash-linha { width: 224px; height: 1px; margin-top: 44px; background: linear-gradient(90deg, transparent, #e6be73, transparent); transform: scaleX(0); animation: sp-linha .8s var(--suave) 1.5s forwards; }
.splash-txt { margin-top: 18px; font: 500 11px var(--display); letter-spacing: .4em; text-transform: uppercase; color: #6b6862; opacity: 0; animation: sp-fade .6s ease 1.8s forwards; }
@keyframes sp-luz { from { transform: scale(.3); opacity: 0; } }
@keyframes sp-pontos { from { opacity: 0; } to { opacity: .07; } }
@keyframes sp-emblema { from { transform: scale(0) rotate(-120deg); opacity: 0; } }
@keyframes sp-brilho { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@keyframes sp-escreve { to { clip-path: inset(0 0 0 0); } }
@keyframes sp-linha { to { transform: scaleX(1); } }
@keyframes sp-fade { to { opacity: 1; } }
@media (max-width: 600px) {
  .splash-emblema img { width: 80px; height: auto; }
  .splash-palavra img { width: 160px; height: auto; }
  .splash-marca { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { .splash-palavra { clip-path: none; } .splash-linha { transform: none; } .splash-txt { opacity: 1; } }

/* painel com os selos logo abaixo, sem sobrepor */
.hero-visual { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 440px; justify-self: end; width: 100%; perspective: none; }
.flutua { position: relative; inset: auto; }
@media (max-width: 1000px) { .hero-visual { justify-self: stretch; margin-inline: auto; } }
@media (max-width: 600px) { .hero-visual { grid-template-columns: 1fr; } }

/* cartão dourado (ilustrativo, sem produto específico) */
.cena { grid-column: 1 / -1; perspective: 1200px; padding: 20px 10px 28px; }
.cartao { position: relative; width: 100%; aspect-ratio: 1.586; border-radius: 22px; padding: 26px; color: #1a1408; display: flex; flex-direction: column; overflow: hidden; background:
  linear-gradient(135deg, #fff3cf 0%, #f2cf86 28%, #d9a75a 55%, #f6dc9c 78%, #c9965a 100%);
  box-shadow: 0 40px 80px -30px #000, 0 0 0 1px #fff5 inset, 0 30px 70px -40px #e6be73;
  transform: rotateY(-14deg) rotateX(9deg) rotate(-3deg); animation: flutuar 7s ease-in-out infinite; }
.cartao::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, #ffffffa0 48%, transparent 60%); transform: translateX(-100%); animation: brilho 5s ease-in-out infinite; }
.cartao-topo { display: flex; align-items: center; gap: 9px; font: 700 15px var(--display); letter-spacing: .02em; }
.cartao-topo img { filter: brightness(0); opacity: .78; }
.chip { width: 46px; height: 34px; border-radius: 7px; margin-top: 22px; background: linear-gradient(135deg, #e8d3a0, #b8904f); box-shadow: inset 0 0 0 1px #0002; }
.cartao-num { margin-top: auto; font: 600 19px/1 var(--display); letter-spacing: .12em; }
.cartao-pe { display: flex; justify-content: space-between; margin-top: 14px; font: 600 11px var(--display); letter-spacing: .16em; opacity: .75; }
@keyframes flutuar { 50% { transform: rotateY(-8deg) rotateX(5deg) rotate(-1.5deg) translateY(-10px); } }
@media (max-width: 600px) { .cartao { padding: 20px; } .cartao-num { font-size: 16px; } .cena { padding: 10px 6px 18px; } }