:root {
  --laranja: #f26b21;
  --laranja-2: #d9561a;
  --magenta: #a51f6e;
  --pink: #ff3ea5;
  --pessego: #fcd9bf;
  --creme: #fff7f0;
  --tinta: #2a1420;
  --suave: #6e5560;
  --script: 'Lobster', cursive;
  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --sans: 'Inter', system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body { font: 400 16px/1.6 var(--sans); color: var(--tinta); background: var(--creme); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
em { font-style: normal; }

.topo { position: fixed; inset: 0 0 auto; z-index: 20; display: flex; align-items: center; gap: 16px; padding: 8px 18px; background: rgba(255, 247, 240, .95); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(165, 31, 110, .12); }
.marca { display: flex; flex-direction: column; text-decoration: none; margin-right: auto; line-height: 1; }
.logo { font: 400 32px/1 var(--script); color: var(--magenta); display: inline-flex; align-items: center; }
.logo .o { width: .62em; height: .62em; margin: .12em .02em 0; }
.marca small { font: 600 10px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--laranja); margin: 2px 0 0 26px; }
.menu { display: none; gap: 26px; font-weight: 500; font-size: 15px; }
.menu a { text-decoration: none; }
.menu a:hover { color: var(--magenta); }
.zap-topo { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--magenta); }
.zap-topo svg, .zap-flutua svg { width: 22px; height: 22px; fill: #fff; }

.capa { position: relative; min-height: 100svh; display: flex; align-items: flex-end; color: #fff; overflow: hidden; background: #3a1a12; }
.capa > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.capa::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(42, 20, 32, .05) 30%, rgba(42, 20, 32, .9) 85%); }
.capa-texto { position: relative; z-index: 1; padding: 0 22px 64px; max-width: 780px; }
.selo { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--pessego); font-weight: 600; margin-bottom: 14px; }
.capa h1 { font: 800 clamp(46px, 12vw, 104px)/.95 var(--display); letter-spacing: -.03em; margin-bottom: 18px; }
.capa h1 em { font: 400 1.05em/1 var(--script); color: var(--pink); letter-spacing: 0; }
.capa-texto > p:not(.selo) { font-size: 17px; max-width: 520px; opacity: .92; margin-bottom: 26px; }
.botao { display: inline-block; background: var(--laranja); color: #fff; text-decoration: none; font: 600 16px/1 var(--sans); padding: 18px 26px; border-radius: 999px; border: 0; cursor: pointer; }
.botao:hover { background: var(--laranja-2); }
.botao.escuro { background: var(--magenta); }
.botao.contorno { background: transparent; border: 1.5px solid currentColor; }

section { padding: 88px 22px; }
.rot { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; color: var(--laranja); margin-bottom: 10px; }
h2 { font: 800 clamp(36px, 8vw, 64px)/1 var(--display); letter-spacing: -.03em; color: var(--tinta); margin-bottom: 16px; }
h2 em { font: 400 1.05em/1 var(--script); color: var(--magenta); letter-spacing: 0; }
.cab-secao { max-width: 680px; margin: 0 auto 30px; }
.cab-secao > p:last-child { color: var(--suave); }

.tamanhos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 1180px; margin: 0 auto 26px; }
.tamanhos > span { font-weight: 600; font-size: 14px; margin-right: 6px; }
.tamanhos input { position: absolute; opacity: 0; pointer-events: none; }
.tamanhos b { display: grid; place-items: center; min-width: 48px; height: 44px; padding: 0 12px; border-radius: 999px; border: 1.5px solid #ecc9b3; background: #fff; font-weight: 600; cursor: pointer; }
.tamanhos input:checked + b { background: var(--magenta); border-color: var(--magenta); color: #fff; }
.tamanhos input:focus-visible + b { outline: 2px solid var(--laranja); outline-offset: 2px; }

.pecas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 1180px; margin: 0 auto; }
.peca { background: #fff; border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
.peca.grande { grid-column: span 2; }
.peca img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.peca.grande img { aspect-ratio: 4 / 5; }
.peca > div { padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.peca h3 { font: 700 19px/1.1 var(--display); letter-spacing: -.01em; }
.peca.grande h3 { font-size: 26px; }
.peca p { color: var(--suave); font-size: 14px; flex: 1; }
.quero { margin-top: 10px; font: 600 14px/1 var(--sans); background: var(--creme); color: var(--magenta); border: 1.5px solid var(--magenta); padding: 12px 14px; border-radius: 999px; cursor: pointer; }
.quero:hover { background: var(--magenta); color: #fff; }
.quero.on { background: var(--laranja); border-color: var(--laranja); color: #fff; }
.sacola { position: sticky; bottom: 16px; z-index: 25; max-width: 760px; margin: 26px auto 0; background: var(--tinta); color: #fff; border-radius: 20px; padding: 12px 12px 12px 20px; display: flex; align-items: center; gap: 12px; justify-content: space-between; box-shadow: 0 10px 30px rgba(42, 20, 32, .35); }
.sacola[hidden] { display: none; }
.sacola span { font-weight: 600; font-size: 14px; }
.sacola .botao { padding: 14px 18px; font-size: 14px; }

.plus { background: var(--magenta); color: #fff; display: grid; gap: 30px; }
.plus > img { border-radius: 22px; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; max-width: 480px; }
.plus h2 { color: #fff; }
.plus h2 em { color: var(--pessego); }
.plus .rot { color: var(--pessego); }
.plus p { opacity: .9; margin-bottom: 24px; max-width: 520px; }
.botoes { display: flex; flex-wrap: wrap; gap: 10px; }

.porque { background: var(--laranja); color: #fff; }
.motivos { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 26px 18px; max-width: 1180px; margin: 0 auto; }
.motivos li { display: grid; gap: 6px; align-content: start; }
.motivos b { font: 800 clamp(34px, 8vw, 56px)/1 var(--display); letter-spacing: -.03em; }
.motivos span { font-size: 15px; opacity: .92; }

.loja { display: grid; gap: 30px; }
.loja-fotos { display: grid; grid-template-columns: 1.5fr 1fr; gap: 12px; }
.loja-fotos img { border-radius: 18px; width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.loja-texto > p { color: var(--suave); margin-bottom: 14px; }
.loja-texto .end { color: var(--tinta); font-weight: 500; margin-bottom: 8px; }
.mapa { width: 100%; height: 300px; border: 0; border-radius: 18px; }

.rodape { background: var(--tinta); color: #f3dfe8; padding: 48px 22px 110px; display: grid; gap: 24px; }
.rod-marca { display: flex; gap: 14px; align-items: center; }
.rod-marca img { border-radius: 50%; }
.rod-marca b { font: 400 34px/1 var(--script); display: block; color: #fff; }
.rod-marca small { opacity: .7; }
.rod-links { display: grid; gap: 8px; font-size: 15px; }
.rod-links a { text-decoration: none; }
.previa { font-size: 12px; opacity: .55; }

.zap-flutua { position: fixed; right: 16px; bottom: 16px; z-index: 30; width: 60px; height: 60px; border-radius: 50%; background: #25d366; display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); }
.zap-flutua svg { width: 30px; height: 30px; }
body:has(.sacola:not([hidden])) .zap-flutua { display: none; }

@media (min-width: 760px) {
  .topo { padding: 10px 40px; }
  .menu { display: flex; }
  section { padding: 120px 40px; }
  .capa-texto { padding: 0 56px 96px; }
  .pecas { grid-template-columns: repeat(4, 1fr); }
  .peca.grande { grid-column: span 2; }
  .plus { grid-template-columns: 420px 1fr; align-items: center; gap: 60px; padding-inline: max(40px, calc((100vw - 1180px) / 2)); }
  .motivos { grid-template-columns: repeat(4, 1fr); }
  .rodape { grid-template-columns: 1fr auto; align-items: center; padding: 56px 40px; }
  .zap-flutua { display: none; }
}
@media (min-width: 1080px) {
  .pecas { grid-template-columns: repeat(6, 1fr); }
  .peca { grid-column: span 2; }
  .peca.grande { grid-column: span 3; }
  .loja { grid-template-columns: 1.2fr 1fr; align-items: center; padding-inline: max(40px, calc((100vw - 1180px) / 2)); }
  .mapa { grid-column: 1 / -1; height: 360px; }
}

/* celular: letreiro inteiro em cima, texto embaixo */
@media (max-width: 759px) {
  .capa { flex-direction: column; justify-content: flex-end; background: var(--tinta); padding: 62px 0 0; }
  .capa > img { position: relative; inset: auto; height: auto; aspect-ratio: 4 / 3; object-position: 50% 50%; }
  .capa::after { top: 62px; bottom: auto; height: calc(100vw * .75); background: linear-gradient(180deg, rgba(42, 20, 32, 0) 60%, var(--tinta) 100%); }
  .capa-texto { padding-top: 26px; flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
}

/* PC: texto à esquerda, letreiro inteiro à direita */
@media (min-width: 760px) {
  .capa { background: var(--tinta); align-items: center; }
  .capa > img { inset: 50% 0 auto auto; width: 58%; height: auto; aspect-ratio: 4 / 3; transform: translateY(-50%); border-radius: 28px 0 0 28px; }
  .capa::after { background: none; }
  .capa-texto { max-width: 42%; padding: 0 0 0 56px; }
  .capa h1 { font-size: clamp(46px, 6vw, 92px); }
}