/* Loja: primeira dobra em duas colunas (frase gigante + vídeo do painel); abaixo, blocos de uma tarefa cada,
   com o resumo do pedido em um cartão preto que imita o painel. */
:root {
  --bg: #F5F2EC; --surface: #FFFFFF; --ink: #17131F; --muted: #4A4458; --line: #D9D3E0;
  --accent: #6D28D9; --accent-soft: #EFE8FC; --accent-ink: #FFFFFF;
  --panel: #141118; --panel-ink: #FFFFFF; --panel-muted: #BDB6CC; --panel-line: #332C3D;
  --erro: #B3261E; --ok: #1F7A45;
  --display: 'Bricolage Grotesque', 'Arial Narrow', sans-serif; --body: 'Figtree', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 1rem; line-height: 1.5; }
[hidden] { display: none !important; }
.wrap { max-width: 1160px; margin: 0 auto; padding-inline: 20px; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

header.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-block: 20px; }
.brand { font-family: var(--display); font-weight: 800; font-size: 1.375rem; text-decoration: none; }
nav { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; font-weight: 500; font-size: .9375rem; }
nav a { text-decoration: none; padding: 10px 0; }
nav a.pill { border: 1px solid var(--line); border-radius: 999px; padding: 10px 18px; }

.hero { display: flex; flex-wrap: wrap; align-items: center; gap: 48px; padding-block: 24px 72px; }
.hero-text { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.eyebrow { font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
h1 { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(3rem, 8.5vw, 6.75rem); line-height: .92; letter-spacing: -.03em; text-wrap: balance; }
.lead { margin: 0; max-width: 30em; font-size: 1.1875rem; color: var(--muted); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 28px; border: 0; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: 600 1.0625rem var(--body); text-decoration: none; cursor: pointer; }
.btn:hover { filter: brightness(1.1); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; filter: none; }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn.ghost.claro { color: var(--panel-ink); border-color: var(--panel-muted); min-height: 52px; }
.from { font-size: .9375rem; color: var(--muted); }
.from strong { color: var(--ink); font-weight: 600; }
.hero-media { flex: 1 1 320px; min-width: 0; display: flex; justify-content: center; }
.hero-media video { display: block; width: 100%; max-width: 380px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 28px; background: var(--panel); box-shadow: 0 36px 70px rgba(23, 19, 31, .28); }

section { padding-block: 64px; border-top: 1px solid var(--line); }
h2 { margin: 0 0 8px; font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1; letter-spacing: -.02em; text-wrap: balance; }
.sub { margin: 0 0 32px; color: var(--muted); max-width: 38em; }

/* Monte o seu */
.build { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.build-left { flex: 1 1 380px; min-width: 0; display: grid; gap: 20px; align-content: start; }
.chips { display: flex; flex-wrap: wrap; gap: 12px; }
.chip { min-height: 52px; padding: 0 22px; border-radius: 14px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); font: 600 1.0625rem var(--body); cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--panel); border-color: var(--panel); color: var(--panel-ink); }
.chip:disabled { opacity: .4; cursor: not-allowed; }
.hint { margin: 0; font-size: .9375rem; color: var(--muted); }
.nomes { display: grid; gap: 10px; }
.nomes:empty { display: none; }
.nome-opcao { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .9375rem; color: var(--muted); }
.nome-opcao > span:first-child { flex-basis: 100%; }
.mini { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); font: 600 .9375rem var(--body); cursor: pointer; }
.mini[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }

.extra-card { position: relative; display: grid; grid-template-columns: 26px 1fr auto; gap: 2px 14px; align-items: center; padding: 16px 18px; background: var(--surface); border: 2px dashed #B9A6F2; border-radius: 16px; cursor: pointer; }
.extra-card input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.marca-check { grid-row: 1 / 3; width: 24px; height: 24px; border: 2px solid var(--accent); border-radius: 7px; background: var(--surface); }
.extra-titulo { font-weight: 600; font-size: 1.0625rem; }
.extra-desc { grid-column: 2; color: var(--muted); font-size: .9375rem; }
.extra-preco { grid-row: 1 / 3; grid-column: 3; font-weight: 600; color: var(--accent); white-space: nowrap; }
.extra-card:has(input:checked) { border-style: solid; border-color: var(--accent); background: var(--accent-soft); }
.extra-card:has(input:checked) .marca-check { background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.extra-card:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }

/* Cartão preto do resumo */
.summary { flex: 1 1 320px; min-width: 0; max-width: 440px; background: var(--panel); color: var(--panel-ink); border-radius: 22px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.summary .label { font-family: var(--display); font-weight: 800; font-size: .8125rem; letter-spacing: .2em; text-transform: uppercase; color: var(--panel-muted); }
.rows { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rows li { display: flex; justify-content: space-between; gap: 12px; font-family: var(--display); font-weight: 800; font-size: 1.25rem; letter-spacing: .04em; text-transform: uppercase; border-bottom: 1px solid var(--panel-line); padding-bottom: 8px; }
.rows li span:last-child { color: var(--panel-muted); font-variant-numeric: tabular-nums; }
.rows li.vazia span:first-child { color: #6E667D; }
.rows li.nome { justify-content: center; font-size: 1.5rem; }
.total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 6px; }
.total b { font-family: var(--display); font-size: 2.25rem; font-variant-numeric: tabular-nums; }
.summary .btn { width: 100%; }
.note { margin: 0; font-size: .875rem; color: var(--panel-muted); }

/* Entrega e pagamento */
.checkout { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.checkout-campos { flex: 1 1 420px; min-width: 0; display: grid; gap: 32px; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 16px; }
legend { padding: 0; margin-bottom: 4px; font-family: var(--display); font-weight: 800; font-size: 1.5rem; }
label { display: block; font-weight: 600; font-size: .9375rem; margin-bottom: 6px; }
input:not([type=checkbox]), textarea { width: 100%; min-height: 52px; padding: 0 16px; border: 2px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); font: 500 1.0625rem var(--body); }
textarea { padding: 12px 16px; resize: vertical; }
input:focus, textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(109, 40, 217, .18); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.larga { grid-column: 1 / -1; }
.field { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.field > div { flex: 0 1 220px; }
.field .btn { min-height: 52px; }
.fretes { display: grid; gap: 10px; }
.frete { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; width: 100%; text-align: left; padding: 14px 18px; background: var(--surface); border: 2px solid var(--line); border-radius: 14px; font: 500 1rem var(--body); color: var(--ink); cursor: pointer; }
.frete .nome { font-weight: 600; }
.frete .prazo { grid-row: 2; color: var(--muted); font-size: .9375rem; }
.frete .preco { grid-row: 1 / 3; grid-column: 2; align-self: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.frete[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.fechamento { position: sticky; top: 20px; }
.fechamento input { background: #211C27; border-color: var(--panel-line); color: var(--panel-ink); }
.fechamento label { color: var(--panel-muted); }
.cupom-linha { display: flex; gap: 10px; align-items: flex-end; }
.cupom-linha .campo { flex: 1; min-width: 0; }
.summary .cupom-linha .btn { width: auto; flex: none; padding: 0 20px; }
.cupom-linha input { text-transform: uppercase; }
.cupom-ok { color: #9BE0B5; }
.cupom-ok button { background: none; border: 0; padding: 0; color: var(--panel-ink); font: inherit; text-decoration: underline; cursor: pointer; }
.resumo { margin: 4px 0 0; display: grid; gap: 8px; }
.resumo div { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--panel-line); padding-bottom: 8px; }
.resumo dt { color: var(--panel-muted); }
.resumo dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }
.resumo .total-final { border-bottom: 0; align-items: baseline; }
.resumo .total-final dt { color: var(--panel-ink); font-weight: 600; }
.resumo .total-final dd { font-family: var(--display); font-weight: 800; font-size: 2.25rem; }
.erro { color: var(--erro); font-weight: 500; }
.summary .erro { color: #FF9C94; }
.teste { background: #3B3220; color: #F5D98B; padding: 8px 12px; border-radius: 10px; }

/* Como funciona */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; margin: 0; padding: 0; list-style: none; counter-reset: s; }
.steps li { counter-increment: s; display: flex; flex-direction: column; gap: 8px; }
.steps li::before { content: counter(s); font-family: var(--display); font-weight: 800; font-size: 3rem; line-height: 1; color: var(--accent); }
.steps h3 { margin: 0; font-size: 1.1875rem; font-weight: 600; }
.steps p { margin: 0; color: var(--muted); }
.how { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; }
.how img { flex: 0 1 320px; min-width: 0; width: 100%; max-width: 320px; height: auto; border-radius: 22px; display: block; }
.how-texto { flex: 1 1 420px; min-width: 0; display: grid; gap: 32px; }
.medidas { margin: 0; display: grid; gap: 8px; }
.medidas div { display: grid; grid-template-columns: 11rem 1fr; gap: 12px; padding-top: 8px; border-top: 1px solid var(--line); }
.medidas dt { color: var(--muted); }
.medidas dd { margin: 0; }
.fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 40px; }
.fotos img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 18px; display: block; }

.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; }
.out { margin: 14px 0 0; min-height: 1.5em; color: var(--muted); font-size: .9375rem; }
.out ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.out li { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 6px; color: var(--ink); }
footer { border-top: 1px solid var(--line); padding-block: 28px 40px; color: var(--muted); font-size: .875rem; }
footer a { margin-left: 12px; }

@media (max-width: 560px) {
  .grid2 { grid-template-columns: 1fr; }
  .medidas div { grid-template-columns: 1fr; gap: 2px; }
  .fechamento { position: static; }
  .summary { padding: 22px; }
}
.rows li.nome span { color: var(--panel-ink) !important; }
.forma { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.forma legend { font-size: .9375rem; font-weight: 600; margin-bottom: 8px; color: var(--panel-ink); }
.forma-op { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1.5px solid rgba(255,255,255,.18); border-radius: 14px; cursor: pointer; }
.forma-op input { width: 20px; height: 20px; accent-color: var(--accent); margin: 0; flex: none; }
.forma-op span { display: flex; flex-direction: column; gap: 2px; }
.forma-op small { color: var(--panel-muted); font-size: .875rem; }
.forma-op:has(input:checked) { border-color: #B79BF5; background: rgba(183,155,245,.12); }
.forma-op:has(input[value="pix"]) small { color: #B9F3C8; }
.forma-op:has(input:focus-visible) { outline: 3px solid #B79BF5; outline-offset: 2px; }
#duvidas-frequentes h2 { margin-bottom: 28px; }
.faq { display: grid; gap: 10px; max-width: 760px; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.faq summary { list-style: none; cursor: pointer; padding: 18px 52px 18px 20px; font-weight: 600; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font: 600 1.5rem/1 var(--body); color: var(--accent); }
.faq details[open] summary::after { content: '−'; }
.faq details[open] { border-color: var(--accent); }
.faq summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 16px; }
.faq p { margin: 0; padding: 0 20px 18px; color: var(--muted); }
.depoimentos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.depo { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
.depo img, .depo video { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.depo figcaption { padding: 16px 18px 18px; display: grid; gap: 8px; }
.depo blockquote { margin: 0; font-size: 1.0625rem; font-weight: 500; }
.depo cite { font-style: normal; color: var(--muted); font-size: .9375rem; }
/* Vale-presente */
.presente-topo { padding-block: 56px 40px; border-top: 0; display: grid; gap: 18px; }
.presente-topo h1 { font-size: clamp(2.6rem, 7vw, 5rem); }
.tamanhos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tamanho { display: grid; gap: 4px; padding: 16px 12px; border-radius: 14px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); font: 500 1rem var(--body); cursor: pointer; text-align: center; }
.tamanho b { font-weight: 600; }
.tamanho span { color: var(--muted); font-size: .9375rem; }
.tamanho[aria-checked="true"] { background: var(--panel); border-color: var(--panel); color: var(--panel-ink); }
.tamanho[aria-checked="true"] span { color: var(--panel-muted); }
@media (max-width: 420px) { .tamanhos { grid-template-columns: 1fr; } }
.vale-resgate { margin-bottom: 22px; }
.vale-resgate summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.vale-resgate .field { margin-top: 12px; }
.vale-ativo { margin: 0 0 22px; padding: 16px 18px; border-radius: 16px; background: var(--accent-soft); border: 1.5px solid var(--accent); }
.vale-ativo b { display: block; margin-bottom: 4px; }
.presente-faixa { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; padding: 22px 24px; border-radius: 20px; background: var(--accent-soft); }
.presente-faixa p { margin: 0; font-size: 1.0625rem; }
.presente-faixa strong { display: block; font-family: var(--display); font-size: 1.5rem; }
/* Boas-vindas */
.bv-montar { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.bv-montar video { flex: 0 1 300px; width: 100%; max-width: 300px; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 22px; background: var(--panel); }
.bv-montar .steps { flex: 1 1 300px; margin: 0; }
.bv-botoes { display: flex; flex-wrap: wrap; gap: 12px; }