:root {
  --ouro: #b8923a;
  --ouro-claro: #e8d9b5;
  --fundo: #ffffff;
  --fundo-2: #f6f2ea;
  --superficie: #fff;
  --titulo: #1f3157;
  --primario: #1f3157;
  --primario-hover: #2f4a7a;
  --primario-texto: #fff;
  --texto: #2a2a2a;
  --suave: #6b6458;
  --linha: #ebe4d6;
  --borda-ouro: #e8d9b5;
  --arte-fundo: #f6f2ea;
  --topo-bg: rgba(255, 255, 255, .94);
  --faixa-bg: #1f3157;
  --rodape-bg: #1f3157;
  --sombra-cor: rgba(31, 49, 87, .12);
  --hero-brilho: #fff;
  --raio: 10px;
  --lateral: 250px;
  --topo-h: 72px;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  color-scheme: light;
}

/* Modo escuro: noite azul com dourado */
:root[data-tema="escuro"] {
  --ouro: #c9a24a;
  --ouro-claro: #e9d6a6;
  --fundo: #11152a;
  --fundo-2: #181d36;
  --superficie: #1a2040;
  --titulo: #ecdcb4;
  --primario: #c9a24a;
  --primario-hover: #dcb862;
  --primario-texto: #11152a;
  --texto: #e6e2d8;
  --suave: #a9a497;
  --linha: #2b3358;
  --borda-ouro: #4b4430;
  --arte-fundo: #e9e1d0;
  --topo-bg: rgba(17, 21, 42, .9);
  --faixa-bg: #0b0e1d;
  --rodape-bg: #0b0e1d;
  --sombra-cor: rgba(0, 0, 0, .45);
  --hero-brilho: #1f2650;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--sans); color: var(--texto); background: var(--fundo); line-height: 1.55; transition: background .35s, color .35s; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
.foto { width: 100%; height: 100%; }
.foto-arte { object-fit: cover; object-position: top center; }
.foto-foto { object-fit: contain; padding: 6%; }
.rodape a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); color: var(--titulo); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; }
h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); }
a { color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.container { width: min(1180px, 100% - 32px); margin-inline: auto; }

/* Barra de progresso do scroll */
.progresso { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: var(--ouro); transform-origin: 0 50%; transform: scaleX(0); z-index: 70; }

/* Topo (faixa + cabeçalho) */
.topo { position: sticky; top: 0; z-index: 30; background: var(--topo-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linha); transition: background .35s; }
.faixa-piloto { background: var(--faixa-bg); color: var(--ouro-claro); text-align: center; font-size: .82rem; padding: 8px 40px; position: relative; }
.faixa-piloto button { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: inherit; font-size: 1.2rem; cursor: pointer; }
.topo-linha { display: flex; align-items: center; gap: 16px; padding: 12px 20px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.emblema { width: 46px; height: 46px; }
.emblema .fundo-emblema { fill: var(--superficie); }
.emblema .letra { fill: var(--titulo); }
.marca strong { display: block; font-family: var(--serif); font-size: 1.35rem; color: var(--titulo); line-height: 1.1; }
.marca small { color: var(--suave); font-size: .75rem; letter-spacing: .04em; }
.busca { flex: 1; max-width: 440px; margin-left: auto; }
.busca input { width: 100%; padding: 10px 14px; border: 1px solid var(--linha); border-radius: 999px; background: var(--superficie); color: var(--texto); font: inherit; font-size: .92rem; }
.busca input:focus { outline: 2px solid var(--ouro); outline-offset: 1px; }
.btn-icone { display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--linha); background: var(--superficie); color: var(--titulo); cursor: pointer; transition: border-color .2s, transform .2s; }
.btn-icone:hover { border-color: var(--ouro); }
.btn-icone svg { width: 20px; height: 20px; }
.btn-tema .lua { display: none; }
:root[data-tema="escuro"] .btn-tema .sol { display: none; }
:root[data-tema="escuro"] .btn-tema .lua { display: block; }
.btn-pontos[aria-expanded="true"] { background: var(--primario); color: var(--primario-texto); border-color: var(--primario); }
.btn-sacola { display: flex; align-items: center; gap: 8px; border: 1px solid var(--primario); background: var(--primario); color: var(--primario-texto); padding: 9px 16px; border-radius: 999px; font: inherit; font-weight: 500; cursor: pointer; flex-shrink: 0; }
.btn-sacola svg { width: 18px; height: 18px; }
.contador { background: var(--ouro); color: #fff; border-radius: 999px; min-width: 22px; padding: 0 6px; font-size: .78rem; text-align: center; }
:root[data-tema="escuro"] .contador { background: var(--primario-texto); color: var(--ouro); }
.contador.pulo { animation: pulo .4s; }
@keyframes pulo { 50% { transform: scale(1.35); } }

/* Barra lateral de categorias */
.lateral { position: fixed; top: var(--topo-h); left: 0; bottom: 0; width: var(--lateral); z-index: 25; background: var(--superficie); border-right: 1px solid var(--linha); overflow-y: auto; padding: 20px 14px 28px; transform: translateX(-100%); transition: transform .35s ease, background .35s, top .2s; }
body.lateral-aberta .lateral { transform: none; }
.lateral h2 { font-size: 1.35rem; margin: 0 8px 12px; }
.lateral ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lateral-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 7px 8px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: .92rem; color: var(--texto); cursor: pointer; text-align: left; transition: background .2s; }
.lateral-item:hover { background: var(--fundo-2); }
.lateral-item[aria-current="true"] { background: var(--fundo-2); color: var(--titulo); font-weight: 600; box-shadow: inset 3px 0 0 var(--ouro); }
.lateral-item small { margin-left: auto; color: var(--suave); font-size: .75rem; }
.lateral-item .mini-circulo { background: #fff; width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; overflow: hidden; border: 1.5px solid var(--borda-ouro); }
.lateral-item .mini-circulo.simbolo { display: grid; place-items: center; background: var(--fundo-2); color: var(--ouro); font-size: 1rem; }
.lateral hr { border: 0; border-top: 1px solid var(--linha); margin: 12px 8px; }
.lateral-rodape { margin: 18px 8px 0; font-size: .82rem; color: var(--suave); }
.lateral-rodape a { color: var(--ouro); }
.sombra-lateral { position: fixed; inset: 0; background: rgba(10, 14, 30, .45); z-index: 24; }

.conteudo { transition: margin-left .35s ease; }
@media (min-width: 1000px) {
  body.lateral-aberta .conteudo { margin-left: var(--lateral); }
  .sombra-lateral { display: none; }
}

/* Botões */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 22px; border-radius: 999px; font: inherit; font-weight: 500; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background .2s, color .2s; }
.btn-primario { background: var(--primario); color: var(--primario-texto); }
.btn-primario:hover { background: var(--primario-hover); }
.btn-secundario { border-color: var(--primario); color: var(--titulo); background: transparent; }
.btn-secundario:hover { background: var(--primario); color: var(--primario-texto); }
.btn-largo { width: 100%; }

/* Hero com parallax */
.hero { position: relative; overflow: hidden; padding: 72px 0 80px; background: radial-gradient(ellipse at 80% 20%, var(--hero-brilho) 0, var(--fundo) 55%); }
.hero-fundo { position: absolute; inset: -10% -5%; pointer-events: none; will-change: transform; }
.hero-fundo svg { position: absolute; color: var(--ouro); opacity: .12; }
.hero-fundo .orn-1 { width: 520px; right: -120px; top: -80px; }
.hero-fundo .orn-2 { width: 260px; left: -60px; bottom: 0; }
.hero-fundo .estrela { width: 18px; opacity: .35; }
.hero-grade { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.hero-texto { will-change: transform, opacity; }
.sobretitulo { color: var(--ouro); text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 600; margin: 0 0 12px; }
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.lead { font-size: 1.08rem; color: var(--suave); max-width: 520px; }
.hero-acoes { display: flex; gap: 12px; flex-wrap: wrap; margin: 28px 0; }
.selos { list-style: none; padding: 0; margin: 0; display: flex; gap: 18px; flex-wrap: wrap; font-size: .86rem; color: var(--suave); }
.selos li::before { content: "✦ "; color: var(--ouro); }
.hero-arte { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hero-arte > div { cursor: pointer; aspect-ratio: 4 / 5; background: #fff; --mx: 0px; --my: 0px; --sy: 0px; border-radius: var(--raio); overflow: hidden; box-shadow: 0 14px 34px var(--sombra-cor); transform: translate3d(var(--mx), calc(var(--my) + var(--sy)), 0); transition: transform .25s ease-out; will-change: transform; }
.hero-arte > div:nth-child(even) { margin-top: 28px; margin-bottom: -28px; }

/* Revelar ao rolar */
.revelar { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.revelar.visto { opacity: 1; transform: none; }

/* Seções */
.secao { padding: 64px 0; }
.secao-clara { background: var(--superficie); border-block: 1px solid var(--linha); transition: background .35s; }

/* Vitrine */
.vitrine-topo { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.vitrine-topo h2 { margin: 0; }
.filtros { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; max-width: 100%; }
.filtro { white-space: nowrap; border: 1px solid var(--linha); background: var(--fundo); padding: 7px 14px; border-radius: 999px; font: inherit; font-size: .85rem; cursor: pointer; color: var(--texto); }
.filtro[aria-selected="true"] { background: var(--primario); color: var(--primario-texto); border-color: var(--primario); }
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px; }
.card { display: flex; flex-direction: column; background: var(--fundo); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; transition: box-shadow .25s, transform .25s, opacity .7s ease, background .35s; }
.card.revelar { transform: translateY(28px); }
.card.revelar.visto { transform: none; }
.card.revelar.visto:hover, .card:not(.revelar):hover { box-shadow: 0 14px 30px var(--sombra-cor); transform: translateY(-4px); }
.card-img { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; cursor: pointer; background: #fff; border: 0; padding: 0; overflow: hidden; }
.card-img .foto { transition: transform .5s ease; }
.card:hover .card-img .foto { transform: scale(1.05); }
.selo-fotos { position: absolute; bottom: 10px; right: 10px; z-index: 1; background: rgba(17, 21, 42, .75); color: #fff; font-size: .68rem; padding: 2px 8px; border-radius: 999px; }
.selo-destaque { position: absolute; top: 10px; left: 10px; z-index: 1; background: var(--ouro); color: #fff; font-size: .7rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; letter-spacing: .04em; }
.card-info { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-cat { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ouro); font-weight: 600; }
.card h3 { font-size: 1.18rem; margin: 0; cursor: pointer; }
.preco { font-weight: 600; color: var(--titulo); font-size: 1.05rem; margin-top: auto; }
.preco.consulta { color: var(--ouro); font-size: .95rem; }
.preco small { display: block; font-weight: 400; color: var(--suave); font-size: .76rem; }
.card .btn { margin-top: 8px; padding: 9px 14px; font-size: .9rem; }
.vazio { text-align: center; color: var(--suave); padding: 40px 0; }

/* Sobre */
.sobre { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.sobre p { color: var(--suave); margin-bottom: 24px; }
.vantagens { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.vantagens li { background: var(--superficie); border: 1px solid var(--linha); border-left: 3px solid var(--ouro); border-radius: 6px; padding: 14px 18px; }
.vantagens strong { display: block; color: var(--titulo); }
.vantagens span { color: var(--suave); font-size: .92rem; }

/* Rodapé */
.rodape { background: var(--rodape-bg); color: #d6dbe6; padding: 40px 0; font-size: .9rem; }
.rodape-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.rodape strong { color: var(--ouro-claro); font-family: var(--serif); font-size: 1.15rem; }
.rodape p { margin: 6px 0 0; }

/* Modal */
.modal { border: 0; border-radius: 14px; padding: 0; width: min(860px, 100% - 32px); max-height: 90vh; background: var(--fundo); color: var(--texto); }
.modal::backdrop { background: rgba(10, 14, 30, .6); }
.modal-corpo { display: grid; grid-template-columns: 1fr 1fr; position: relative; }
.galeria { background: #fff; display: flex; flex-direction: column; }
.foto-principal { display: block; flex: 1; min-height: 360px; max-height: 78vh; cursor: zoom-in; }
.foto-principal .foto { object-fit: contain; object-position: center; }
.miniaturas { display: flex; gap: 8px; padding: 10px; background: var(--fundo-2); }
.miniaturas button { width: 64px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; cursor: pointer; background: #fff; }
.miniaturas button[aria-current="true"] { border-color: var(--ouro); }
.lista-info h4 { margin: 4px 0 6px; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ouro); }
.lista-info ul { margin: 0; padding-left: 18px; color: var(--suave); font-size: .9rem; display: grid; gap: 3px; }
.variante { display: grid; gap: 4px; font-size: .78rem; color: var(--suave); }
.variante select { padding: 10px; border: 1px solid var(--linha); border-radius: 8px; font: inherit; font-size: .92rem; background: var(--superficie); color: var(--texto); }
.modal-acoes { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.modal-acoes .btn { flex: 1; }
.link-whats { font-size: .85rem; color: var(--ouro); }
.btn-whats { gap: 8px; background: #1f8f4e; color: #fff; }
.btn-whats:hover { background: #187a42; }
.btn-whats svg { width: 18px; height: 18px; flex-shrink: 0; }
.card .btn-whats { padding: 9px 12px; }
.modal-info { padding: 32px 28px; display: flex; flex-direction: column; gap: 12px; }
.modal-info h3 { font-size: 1.8rem; margin: 0; }
.modal-info p { color: var(--suave); margin: 0; }
.qtd { display: inline-flex; align-items: center; border: 1px solid var(--linha); border-radius: 999px; background: var(--superficie); align-self: flex-start; }
.qtd button { border: 0; background: none; width: 34px; height: 34px; font-size: 1.1rem; cursor: pointer; color: var(--titulo); }
.qtd span { min-width: 26px; text-align: center; font-weight: 600; }
.qtd-campo { width: 36px; border: 0; background: none; text-align: center; font: inherit; font-weight: 600; color: var(--texto); -moz-appearance: textfield; padding: 0; }
.qtd-campo::-webkit-inner-spin-button, .qtd-campo::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.qtd-campo:focus { outline: 2px solid var(--ouro); border-radius: 4px; }
.modal .fechar { position: absolute; top: 10px; right: 12px; z-index: 2; }
.fechar { background: var(--superficie); border: 1px solid var(--linha); width: 34px; height: 34px; border-radius: 50%; font-size: 1.2rem; cursor: pointer; color: var(--titulo); }

/* Sacola */
.sombra { position: fixed; inset: 0; background: rgba(10, 14, 30, .5); z-index: 40; }
.sacola { position: fixed; top: 0; right: 0; height: 100%; width: min(420px, 100%); background: var(--fundo); z-index: 50; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .3s ease; box-shadow: -10px 0 30px rgba(0, 0, 0, .18); }
.sacola.aberta { transform: none; }
.sacola-topo { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--linha); }
.sacola-topo h2 { margin: 0; font-size: 1.6rem; }
.sacola-itens { flex: 1; overflow-y: auto; padding: 8px 20px; }
.item { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--linha); }
.item .mini { border-radius: 6px; overflow: hidden; width: 64px; height: 64px; background: #fff; }
.item .opcao { margin: 0 0 4px; font-size: .78rem; color: var(--suave); }
.item h4 { margin: 0 0 4px; font-size: .9rem; font-weight: 500; }
.item .qtd button { width: 28px; height: 28px; }
.remover { background: none; border: 0; color: var(--suave); font-size: .78rem; cursor: pointer; text-decoration: underline; }
.sacola-rodape { padding: 16px 20px 20px; border-top: 1px solid var(--linha); background: var(--superficie); }
.frete-barra { height: 6px; background: var(--fundo-2); border-radius: 99px; overflow: hidden; }
.frete-barra div { height: 100%; background: var(--ouro); width: 0; transition: width .3s; }
.frete-texto { font-size: .82rem; color: var(--suave); margin: 6px 0 10px; }
.linha-total { display: flex; justify-content: space-between; font-size: 1.05rem; margin-bottom: 12px; }
.form-pedido { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.form-pedido label { display: grid; gap: 4px; font-size: .78rem; color: var(--suave); }
.form-pedido label:first-child { grid-column: span 2; }
.form-pedido input, .form-pedido select { width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid var(--linha); border-radius: 6px; font: inherit; font-size: .9rem; background: var(--fundo); color: var(--texto); }
.form-pedido .btn, .form-pedido .nota { grid-column: span 2; }
.nota { font-size: .75rem; color: var(--suave); margin: 0; text-align: center; }
.sacola-vazia { text-align: center; color: var(--suave); padding: 48px 0; }

.aviso { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 140%); background: var(--primario); color: var(--primario-texto); padding: 12px 20px; border-radius: 999px; font-size: .9rem; z-index: 60; transition: transform .3s, opacity .3s; opacity: 0; pointer-events: none; }
.aviso.visivel { transform: translate(-50%, 0); opacity: 1; }

@media (max-width: 860px) {
  .hero-grade, .sobre { grid-template-columns: 1fr; }
  .hero-arte { max-width: 420px; }
  .modal-corpo { grid-template-columns: 1fr; }
  .foto-principal { flex: none; min-height: 0; height: 58vh; }
  .rodape-grade { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .topo-linha { flex-wrap: wrap; gap: 8px; padding: 10px 16px; }
  .busca { order: 5; max-width: none; flex-basis: 100%; }
  .btn-tema { margin-left: auto; }
  .marca small { display: none; }
  .marca { flex-shrink: 1; min-width: 0; }
  .marca strong { font-size: 1.05rem; }
  .emblema { display: none; }
  .btn-icone { width: 38px; height: 38px; }
  .btn-sacola { padding: 8px 12px; }
  .txt-sacola { display: none; }
  .hero { padding-top: 40px; }
  .grade { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .card h3 { font-size: 1rem; }
  .card-info { padding: 10px 12px 12px; }
  .card .btn { font-size: .8rem; padding: 8px 10px; }
  .card h3 { font-size: .95rem; }
}

/* ---------- Checkout (demonstração) ---------- */
.checkout { width: min(980px, 100% - 24px); max-height: 92vh; display: none; }
.checkout[open] { display: flex; flex-direction: column; }
.checkout-topo { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px 8px; }
.checkout-topo h2 { margin: 0; font-size: 1.7rem; }
.etapas { list-style: none; margin: 0; padding: 6px 24px 16px; display: flex; gap: 8px; counter-reset: etapa; border-bottom: 1px solid var(--linha); }
.etapas li { counter-increment: etapa; flex: 1; display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--suave); position: relative; }
.etapas li::before { content: counter(etapa); display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid var(--linha); font-weight: 600; font-size: .8rem; transition: background .3s, border-color .3s, color .3s; }
.etapas li:not(:last-child)::after { content: ""; flex: 1; height: 2px; background: var(--linha); border-radius: 2px; }
.etapas li.ativa { color: var(--titulo); font-weight: 600; }
.etapas li.ativa::before { border-color: var(--ouro); color: var(--ouro); }
.etapas li.feita::before { content: "✓"; background: var(--ouro); border-color: var(--ouro); color: #fff; }
.etapas li.feita::after { background: var(--ouro); }
.checkout-grade { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); min-height: 0; flex: 1; }
.checkout-corpo { padding: 20px 24px 24px; overflow-y: auto; overflow-x: hidden; }
.etapa { animation: entrar .35s ease; }
@keyframes entrar { from { opacity: 0; transform: translateX(14px); } }
.campos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.campos label { display: grid; gap: 4px; align-content: start; font-size: .78rem; color: var(--suave); }
.campos .largo { grid-column: span 2; }
.campos input, .campos select { width: 100%; padding: 10px 12px; border: 1px solid var(--linha); border-radius: 8px; font: inherit; font-size: .92rem; background: var(--superficie); color: var(--texto); }
.campos input:focus, .campos select:focus { outline: 2px solid var(--ouro); outline-offset: 0; border-color: transparent; }
.campos small { color: var(--ouro); font-size: .72rem; min-height: 1em; }
.checkout-acoes { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.checkout-acoes .btn-primario { margin-left: auto; }
.erro-checkout { margin: 14px 0 0; padding: 10px 14px; border-radius: 8px; font-size: .85rem; color: #a33a3a; background: #f7e2e2; }
.aviso-demo { margin: 0 0 16px; padding: 10px 14px; border-radius: 8px; font-size: .8rem; color: var(--suave); background: var(--fundo-2); border-left: 3px solid var(--ouro); }

.opcoes-pagamento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.opcao-pag { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px; border: 1.5px solid var(--linha); border-radius: 10px; background: var(--superficie); cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s; }
.opcao-pag:hover { border-color: var(--borda-ouro); transform: translateY(-1px); }
.opcao-pag input { position: absolute; opacity: 0; pointer-events: none; }
.opcao-pag:has(input:checked) { border-color: var(--ouro); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ouro) 18%, transparent); }
.opcao-pag:has(input:focus-visible) { outline: 2px solid var(--ouro); outline-offset: 2px; }
.opcao-icone { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; background: var(--fundo-2); color: var(--ouro); }
.opcao-icone svg { width: 20px; height: 20px; }
.opcao-pag strong { display: block; font-size: .92rem; color: var(--titulo); }
.opcao-pag small { color: var(--suave); font-size: .75rem; }
.painel-pag { animation: entrar .3s ease; }
.painel-pag > p { color: var(--suave); font-size: .9rem; margin: 0; }

/* Cartão que acompanha a digitação */
.cartao-visual { position: relative; width: min(320px, 100%); aspect-ratio: 1.586; margin: 0 auto 18px; perspective: 900px; }
.cartao-face { position: absolute; inset: 0; border-radius: 14px; padding: 18px 20px; color: #f4ead2; background: linear-gradient(135deg, #1f3157, #11152a 60%, #3a2f17); box-shadow: 0 14px 30px rgba(0, 0, 0, .25); backface-visibility: hidden; transition: transform .6s ease; display: flex; flex-direction: column; justify-content: space-between; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.cartao-verso { transform: rotateY(180deg); padding: 22px 0; justify-content: flex-start; gap: 18px; }
.cartao-visual.virado .cartao-frente { transform: rotateY(-180deg); }
.cartao-visual.virado .cartao-verso { transform: rotateY(0); }
.cartao-chip { width: 40px; height: 30px; border-radius: 6px; background: linear-gradient(135deg, #e9d6a6, #b8923a); }
.cartao-bandeira { position: absolute; top: 18px; right: 20px; font-family: var(--sans); font-weight: 700; letter-spacing: .08em; font-size: .85rem; }
.cartao-numero { font-size: 1.15rem; letter-spacing: .06em; }
.cartao-rodape { display: flex; justify-content: space-between; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; }
.cartao-tarja { height: 40px; background: #0b0e1d; }
.cartao-cvv { align-self: flex-end; margin-right: 20px; background: #f4ead2; color: #11152a; padding: 4px 12px; border-radius: 4px; }

.girando { display: inline-block; width: 14px; height: 14px; margin-right: 8px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: girar .7s linear infinite; vertical-align: -2px; }
@keyframes girar { to { transform: rotate(360deg); } }

/* Resumo */
.resumo { padding: 20px 22px; background: var(--fundo-2); border-left: 1px solid var(--linha); overflow-y: auto; }
.resumo h3 { font-size: 1.3rem; margin: 0 0 12px; }
.resumo-itens { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.resumo-itens li { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; font-size: .84rem; }
.resumo-itens .mini { width: 44px; height: 44px; border-radius: 6px; overflow: hidden; background: #fff; }
.resumo-nome small { display: block; color: var(--suave); font-size: .74rem; }
.resumo-linha { display: flex; justify-content: space-between; padding: 6px 0; font-size: .9rem; border-top: 1px solid var(--linha); }
.resumo-total { font-weight: 600; font-size: 1.05rem; color: var(--titulo); }
.resumo-nota { font-size: .76rem; color: var(--suave); margin: 8px 0 0; }

/* Confirmação */
.confirmacao-topo { text-align: center; margin-bottom: 18px; }
.confirmacao-topo h3 { font-size: 1.8rem; margin: 10px 0 4px; }
.confirmacao-topo p { margin: 0; color: var(--suave); }
.selo-ok { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #3f8a5a; color: #fff; font-size: 1.2rem; flex-shrink: 0; }
.selo-ok.grande { width: 64px; height: 64px; font-size: 2rem; animation: surgir .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes surgir { from { transform: scale(0); } }
.pag-resultado { display: flex; gap: 18px; align-items: center; padding: 18px; border: 1px solid var(--linha); border-radius: 12px; background: var(--superficie); margin-bottom: 14px; }
.pag-resultado h4 { margin: 0 0 6px; font-family: var(--serif); font-size: 1.3rem; color: var(--titulo); }
.pag-resultado p { margin: 0 0 8px; font-size: .88rem; color: var(--suave); }
.qr { width: 160px; flex-shrink: 0; border-radius: 8px; border: 1px solid var(--linha); }
.copia-cola { display: flex; gap: 8px; margin-bottom: 8px; }
.copia-cola input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--linha); border-radius: 8px; font: inherit; font-size: .78rem; background: var(--fundo); color: var(--texto); }
.copia-cola .btn { padding: 8px 14px; font-size: .85rem; }
.expira { font-size: .8rem !important; }
.codigo-barras { width: 110px; height: 70px; flex-shrink: 0; background: repeating-linear-gradient(90deg, var(--texto) 0 2px, transparent 2px 4px, var(--texto) 4px 5px, transparent 5px 8px, var(--texto) 8px 11px, transparent 11px 12px); border-radius: 2px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

@media (max-width: 760px) {
  .checkout { max-height: 100dvh; height: 100dvh; width: 100%; max-width: 100%; margin: 0; border-radius: 0; }
  .checkout-grade { grid-template-columns: 1fr; overflow-y: auto; }
  .checkout-corpo { overflow: visible; padding: 16px; }
  .resumo { border-left: 0; border-top: 1px solid var(--linha); order: -1; padding: 14px 16px; }
  .resumo-itens { display: none; }
  .checkout[data-etapa="3"] .resumo { display: none; }
  .resumo h3 { font-size: 1.05rem; margin-bottom: 6px; }
  .etapas { padding: 4px 16px 12px; }
  .etapas li { font-size: .75rem; }
  .checkout-topo { padding: 14px 16px 6px; }
  .opcoes-pagamento { grid-template-columns: 1fr; }
  .pag-resultado { flex-direction: column; text-align: center; }
  .copia-cola { flex-direction: column; }
}

/* ---------- Banners rotativos do topo ---------- */
/* Tamanhos relativos à largura do próprio banner (funciona com ou sem a barra de categorias) */
.banners { position: relative; overflow: hidden; color: #f4ead2; container-type: inline-size; }
.banners .hero-fundo { z-index: 1; }
.banners .hero-fundo svg { color: #e9d6a6; opacity: .1; }
.banners-janela { overflow: hidden; }
.banners-trilho { display: flex; transition: transform .8s cubic-bezier(.65, 0, .35, 1); will-change: transform; }
.banner { position: relative; flex: 0 0 100%; overflow: hidden; display: flex; align-items: center; min-height: clamp(380px, 40cqw, 500px); padding: 40px 0 60px; }
.banner-azul { background: linear-gradient(115deg, #121b35 0%, #1f3157 55%, #3a3220 100%); }
.banner-vinho { background: linear-gradient(115deg, #3a0a16 0%, #6e1a2d 60%, #8a3a2a 100%); }
.banner-verde { background: linear-gradient(115deg, #0f2219 0%, #1f3f33 60%, #3a3a22 100%); }
.banner-grade { position: relative; z-index: 2; width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: clamp(20px, 7cqw, 80px); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 3cqw; align-items: center; }
.banner-sobre { margin: 0 0 10px; color: #e9c66f; text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; font-weight: 600; }
.banner-titulo { margin: 0; color: #fbf3df; font-size: clamp(2rem, 5.2cqw, 3.8rem); line-height: 1.04; }
.banner-subtitulo { margin: 10px 0 0; font-family: var(--serif); font-size: clamp(1.1rem, 2.2cqw, 1.55rem); color: #e9d6a6; font-style: italic; }
.banner-descricao { margin: 14px 0 0; max-width: 460px; color: rgba(244, 234, 210, .82); font-size: clamp(.88rem, 1.3cqw, 1rem); }
.banner-preco { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 18px 0 20px; }
.banner-preco strong { font-size: clamp(1.5rem, 2.8cqw, 2.1rem); color: #fff; }
.banner-preco span { padding: 3px 10px; border-radius: 999px; background: rgba(233, 198, 111, .18); color: #f0d38c; font-size: .8rem; font-weight: 600; }
.banner-botao { background: linear-gradient(180deg, #f3d891, #d9ab45); color: #2a1d05; font-weight: 700; padding: 13px 28px; font-size: 1rem; box-shadow: 0 8px 22px rgba(0, 0, 0, .3); }
.banner-botao:hover { background: linear-gradient(180deg, #f8e3a8, #e2b652); }
.banner-arte { position: relative; height: clamp(260px, 32cqw, 400px); container-type: inline-size; }
.banner-foto { --mx: 0px; --my: 0px; --sy: 0px; --x: 0cqw; --y: 0px; position: absolute; inset: 0; margin: auto; width: min(52cqw, 250px); height: auto; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 22px 46px rgba(0, 0, 0, .45); border: 3px solid rgba(255, 255, 255, .85); transition: transform .3s ease-out; translate: calc(var(--x) + var(--mx)) calc(var(--y) + var(--my) + var(--sy)); }
.fotos-1 .banner-foto { width: min(72cqw, 300px); rotate: -3deg; }
.fotos-2 .banner-foto:nth-child(1) { --x: -17cqw; rotate: -6deg; z-index: 2; }
.fotos-2 .banner-foto:nth-child(2) { --x: 19cqw; --y: 16px; rotate: 5deg; }
.fotos-3 .banner-foto { width: min(44cqw, 220px); }
.fotos-3 .banner-foto:nth-child(1) { --x: -27cqw; --y: 18px; rotate: -9deg; }
.fotos-3 .banner-foto:nth-child(2) { z-index: 2; --y: -8px; }
.fotos-3 .banner-foto:nth-child(3) { --x: 27cqw; --y: 18px; rotate: 9deg; }
.banner-foto .foto { height: 100%; }
.banner-seta { position: absolute; top: 50%; z-index: 3; translate: 0 -50%; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); background: rgba(0, 0, 0, .25); color: #fff; cursor: pointer; backdrop-filter: blur(4px); transition: background .2s; }
.banner-seta:hover { background: rgba(0, 0, 0, .45); }
.banner-seta svg { width: 22px; height: 22px; }
.banner-seta.anterior { left: 12px; }
.banner-seta.proxima { right: 12px; }
.banner-pontos { position: absolute; left: 0; right: 0; bottom: 20px; z-index: 3; display: flex; justify-content: center; gap: 8px; }
.banner-pontos button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .4); cursor: pointer; transition: width .3s, background .3s; }
.banner-pontos button[aria-selected="true"] { width: 30px; background: #e9c66f; }
@container (max-width: 700px) {
  .banner { padding: 26px 0 54px; }
  .banner-grade { grid-template-columns: 1fr; gap: 6px; text-align: center; }
  .banner-texto { order: 2; }
  .banner-descricao { margin-inline: auto; }
  .banner-preco { justify-content: center; margin: 14px 0 16px; }
  .banner-arte { height: 230px; max-width: 420px; width: 100%; margin-inline: auto; }
  .banner-seta { display: none; }
}

/* Faixa de vantagens abaixo dos banners */
.beneficios { border-bottom: 1px solid var(--linha); background: var(--superficie); }
.beneficios-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 22px 0; }
.beneficio { display: flex; align-items: center; gap: 12px; font-size: .82rem; color: var(--suave); }
.beneficio svg { width: 34px; height: 34px; flex-shrink: 0; color: var(--ouro); }
.beneficio strong { display: block; color: var(--titulo); font-size: .95rem; }

@media (max-width: 860px) {
  .beneficios-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .beneficio svg { width: 28px; height: 28px; }
  .beneficio { font-size: .74rem; }
}

/* Estoque e prazos na loja */
.selo-estoque { position: absolute; left: 10px; bottom: 10px; z-index: 1; padding: 3px 9px; border-radius: 999px; font-size: .7rem; font-weight: 700; letter-spacing: .02em; }
.selo-estoque.esgotado { background: #5a5a5a; color: #fff; }
.selo-estoque.ultimas { background: #fbe9d0; color: #8a4b00; }
.estoque-produto { margin: 0; }
.estoque-produto .selo-estoque { position: static; }
.selo-prazo { align-self: flex-start; padding: 2px 8px; border-radius: 6px; background: var(--fundo-2); color: var(--suave); font-size: .72rem; font-weight: 600; }
.btn-esgotado { background: var(--fundo-2); color: var(--suave); border: 1px dashed var(--linha); }
.btn-esgotado:hover { color: var(--titulo); border-color: var(--ouro); }
.card .btn-esgotado { margin-top: 8px; padding: 9px 12px; font-size: .85rem; }
.prazo-produto { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 8px; background: var(--fundo-2); color: var(--texto) !important; font-size: .86rem; }
.prazo-produto svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--ouro); margin-top: 1px; }
.prazo-produto small { display: block; color: var(--suave); font-size: .76rem; margin-top: 2px; }
.previsao-confirmacao { margin-top: 8px !important; font-size: .9rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .revelar { opacity: 1; transform: none; transition: none; }
  .hero-arte > div, .hero-fundo, .hero-texto { transform: none !important; transition: none; }
  .etapa, .painel-pag, .selo-ok.grande { animation: none; }
  .banners-trilho { transition: none; }
}