/* ============================================================================
   COMBO DO HOMEM QUE DEIXA SAUDADE · página de venda
   A paleta é a mais quente da família de combos: tabaco e âmbar. Fundos
   #0A0605 a #1B120C, superfícies #271A11, ouro #C89024 e terra #8A3D22.
   Escrita primeiro para o celular, de onde vem 90% do público desta loja.
   ========================================================================= */

:root {
  --fundo:        #0A0605;
  --fundo-2:      #120A07;
  --superficie:   #1B120C;
  --superficie-2: #271A11;
  --borda:        rgba(255,255,255,.09);
  --borda-forte:  rgba(237,223,200,.26);

  --texto:   #EDDFC8;
  --texto-2: #BE9A72;
  --texto-3: #8C7252;

  --ouro:    #C89024;
  --ouro-cl: #E6CBA0;
  --terra:   #8A3D22;
  --verde:   #7E8C58;

  --serif: Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

/* O Android pinta um retângulo azul sobre tudo que a pessoa toca. Numa página
   de venda isso aparece justo no seletor e no botão, que são os dois lugares
   onde ninguém quer ver acabamento de formulário. */
a, button, label, summary, input, .opcao, .carta { -webkit-tap-highlight-color: transparent; }
.opcao, .carta, .faq summary, .galeria-pontos b { user-select: none; -webkit-user-select: none; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 88px;             /* espaço da barra flutuante */
}

img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--ouro); color: var(--fundo); }

/* ----------------------------------------------------------- aviso topo */
.aviso {
  background: linear-gradient(90deg, var(--superficie), var(--fundo-2) 60%, var(--superficie));
  color: var(--texto-2);
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 9px; row-gap: 3px;
  padding: 9px 14px; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; text-align: center;
  border-bottom: 1px solid var(--borda);
}
.aviso span { white-space: nowrap; }
.aviso i { color: var(--ouro); font-style: normal; }

/* --------------------------------------------------------------- cabeça */
.cabeca {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--borda);
  position: sticky; top: 0; z-index: 60;
  background: rgba(10,6,5,.9); backdrop-filter: blur(12px);
}
.cabeca-logo img { width: 116px; }
.cabeca-selo {
  font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--texto-3); border: 1px solid var(--borda);
  padding: 5px 11px; border-radius: 20px;
}

/* ===================================================== BLOCO DE COMPRA === */
/* o brilho quente atrás da galeria é a única licença poética do arquivo, e
   sai de graça: é gradiente, não é imagem. */
.compra { padding: 0 0 26px; position: relative; }
/* o brilho tem que ser mais largo que alto, mas a caixa dele fica presa em
   100% da largura: gradiente que passa da borda empurra a pagina para o lado
   e o celular ganha uma rolagem horizontal que ninguem pediu. */
.compra::before {
  content: ''; position: absolute; left: 0; right: 0; top: -40px;
  height: 320px; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse 130% 100% at 50% 40%, rgba(200,144,36,.16), transparent 70%);
}
.compra > * { position: relative; z-index: 1; }

.galeria { position: relative; }
.galeria-trilho {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.galeria-trilho::-webkit-scrollbar { display: none; }
.gi { flex: 0 0 100%; margin: 0; scroll-snap-align: center; background: #000; }
.gi img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

.galeria-pontos { display: flex; gap: 6px; justify-content: center; padding: 14px 0 0; }
.galeria-pontos b {
  width: 6px; height: 6px; border-radius: 50%; cursor: pointer;
  background: var(--borda-forte); transition: background .25s, width .25s;
}
.galeria-pontos b.on { background: var(--ouro); width: 22px; border-radius: 3px; }

/* ---------------------------------------------------------------- ficha */
.ficha { padding: 20px 18px 0; }
.ficha-marca {
  margin: 0 0 6px; font-size: 10.5px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--ouro);
}
.ficha-nome {
  margin: 0 0 12px; font-family: var(--serif); font-weight: 400;
  font-size: clamp(29px, 8.4vw, 42px); line-height: 1.06; letter-spacing: -.01em;
  color: var(--ouro-cl);
}
.ficha-frase {
  margin: 0 0 14px; font-family: var(--serif); font-style: italic;
  font-size: clamp(16px, 4.6vw, 20px); line-height: 1.4; color: var(--texto-2);
}
.ficha-frase b { color: var(--ouro-cl); font-style: normal; font-weight: 400; }
.ficha-linha { margin: 0 0 20px; color: var(--texto-3); font-size: 15px; }

/* ------------------------------------------- pílulas que matam objeção */
.pilulas {
  list-style: none; margin: 0 0 22px; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.pilula {
  font-size: 12.5px; padding: 11px 12px; border-radius: 10px;
  background: var(--superficie); border: 1px solid var(--borda);
  color: var(--texto-2); display: flex; align-items: baseline; gap: 6px;
}
.pilula b { color: var(--ouro-cl); font-weight: 700; }
.pilula-destaque { border-color: var(--ouro); background: rgba(200,144,36,.12); }
.pilula-destaque b { color: var(--ouro); }

/* --------------------------------------------------- seletor de tamanho */
.opcoes { display: grid; gap: 10px; margin-bottom: 20px; }
.opcao {
  position: relative; display: block; cursor: pointer;
  border: 1.5px solid var(--borda); border-radius: 14px;
  padding: 15px 14px 13px; background: var(--superficie);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.opcao input { position: absolute; opacity: 0; pointer-events: none; }
.opcao.selecionada {
  border-color: var(--ouro); background: var(--superficie-2);
  box-shadow: 0 0 0 3px rgba(200,144,36,.16);
}
.opcao-fita {
  position: absolute; top: -9px; right: 14px;
  background: var(--ouro); color: #1A0F04; font-size: 9.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; padding: 3px 10px; border-radius: 20px;
}
.opcao-topo { display: block; color: var(--texto); }
.opcao-topo b { font-size: 19px; }
.opcao-topo em { font-style: normal; color: var(--texto-3); font-size: 13px; }
.opcao-preco { display: block; margin-top: 2px; font-size: 14px; }
.opcao-preco s { color: var(--texto-3); margin-right: 6px; }
.opcao-preco b { color: var(--ouro); font-size: 16px; }
/* essa linha fica dentro da decisao de compra e e a menor da pagina inteira.
   No --texto-3 ela batia 3,7 de contraste sobre a opcao selecionada, entao
   aqui vai o --texto-2 mesmo sendo texto de apoio. */
.opcao-nota { display: block; margin-top: 4px; font-size: 12px; color: var(--texto-2); }

/* ---------------------------------------------------------------- preço */
.preco {
  display: grid; gap: 2px; padding: 18px 0;
  border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda);
  margin-bottom: 20px;
}
.preco-off {
  justify-self: start; background: var(--terra); color: #FFF1E4;
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  padding: 4px 10px; border-radius: 5px; margin-bottom: 5px;
}
.preco-de { font-size: 13px; color: var(--texto-3); }
.preco-por { font-family: var(--serif); font-size: 40px; line-height: 1.04; color: var(--ouro-cl); }
.preco-parc { font-size: 13px; color: var(--texto-3); }

/* ------------------------------------------------------------ botão CTA */
.cta {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; padding: 17px 22px; border-radius: 12px;
  background: linear-gradient(135deg, var(--ouro-cl), var(--ouro));
  color: #170D02; text-decoration: none;
  font-size: 15px; font-weight: 700;
  box-shadow: 0 12px 30px -12px rgba(200,144,36,.65);
  transition: transform .18s, box-shadow .18s, filter .18s;
}
.cta:hover { filter: brightness(1.06); box-shadow: 0 16px 38px -12px rgba(200,144,36,.85); }
.cta:active { transform: scale(.985); }
.cta svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; }
.cta-nota { margin: 10px 0 18px; text-align: center; font-size: 12px; color: var(--texto-3); }

.garantias { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.garantias li { position: relative; padding-left: 24px; font-size: 13.5px; color: var(--texto-2); }
.garantias li::before {
  content: ''; position: absolute; left: 4px; top: 7px;
  width: 9px; height: 5px; border-left: 2px solid var(--verde);
  border-bottom: 2px solid var(--verde); rotate: -45deg;
}

/* ============================================================== BLOCOS === */
.bloco { padding: 50px 18px; }
.bloco.claro { background: var(--fundo-2); }

.olho {
  margin: 0 0 9px; font-size: 10.5px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--ouro);
}
.titulo {
  margin: 0 0 14px; font-family: var(--serif); font-weight: 400;
  font-size: clamp(26px, 7.2vw, 40px); line-height: 1.1; color: var(--ouro-cl);
}
.titulo.centro, .apoio.centro { text-align: center; }
.apoio { margin: 0 0 14px; color: var(--texto-2); font-size: 15px; }
.apoio b { color: var(--ouro-cl); font-weight: 600; }

/* ------------------------------------------------------------ momentos */
.momentos-grade { display: grid; gap: 12px; margin-top: 26px; }
.mo {
  border: 1px solid var(--borda); border-left: 3px solid var(--cor);
  border-radius: 12px; padding: 17px 16px 15px; background: var(--superficie);
}
.mo-hora { font-family: var(--serif); font-size: 23px; color: var(--cor); }
.mo-titulo {
  margin: 3px 0 7px; font-size: 12px; letter-spacing: .22em;
  text-transform: uppercase; font-weight: 600; color: var(--texto);
}
.mo-nome { margin: 0 0 6px; font-size: 14px; color: var(--texto-2); }
.mo-nome b { color: var(--cor); font-weight: 600; }
.mo-txt { margin: 0; font-size: 14px; color: var(--texto-3); }

/* --------------------------------------------------------- brincadeira */
.brincadeira { background: var(--fundo-2); }
.cartas { display: grid; gap: 10px; margin: 24px 0 0; }
.carta {
  appearance: none; cursor: pointer; text-align: left; font: inherit;
  border: 1px solid var(--borda); border-radius: 14px;
  background: var(--superficie); color: var(--texto);
  padding: 16px 15px; display: grid; gap: 3px;
  transition: border-color .2s, background .2s, transform .15s, box-shadow .2s;
}
.carta b { font-size: 15.5px; font-weight: 600; }
.carta span { font-size: 13.5px; color: var(--texto-3); }
.carta:hover { border-color: var(--cor); }
.carta:active { transform: scale(.99); }
.carta.escolhida {
  border-color: var(--cor); background: var(--superficie-2);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cor) 34%, transparent);
}
.carta.escolhida b { color: var(--cor); }

.carta-resposta {
  margin: 16px 0 0; padding: 15px 16px; border-radius: 12px;
  background: var(--superficie-2); border: 1px solid var(--borda-forte);
  font-family: var(--serif); font-style: italic; font-size: 15.5px;
  color: var(--ouro-cl); line-height: 1.5;
}
.carta-resposta b { font-style: normal; font-weight: 600; color: var(--ouro); }
.brincadeira-nota { margin: 14px 0 0; font-size: 13px; color: var(--texto-3); }

/* -------------------------------------------------------------- tabela */
.tabela {
  margin-top: 24px; border: 1px solid var(--borda); border-radius: 14px;
  overflow: hidden; background: var(--superficie);
}
.tl {
  display: grid; grid-template-columns: 1.1fr .95fr .8fr;
  align-items: center; gap: 8px;
  padding: 13px 14px; border-bottom: 1px solid var(--borda); font-size: 14px;
}
.tl:last-child { border-bottom: 0; }
.tl span:first-child { color: var(--texto-3); }
.tl b { font-weight: 700; color: var(--ouro); }
.tl span:last-child { color: var(--texto-3); text-align: right; }
.tl-cab { background: var(--superficie-2); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.tl-cab b { color: var(--ouro-cl); }
.tl-fim { background: rgba(200,144,36,.09); }
.tl-fim b { font-size: 15px; white-space: nowrap; }
.tabela-nota { margin: 11px 0 0; font-size: 12px; color: var(--texto-3); }

/* -------------------------------------------------------------- números */
.numeros { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 14px; text-align: center; }
.nu b {
  display: block; font-family: var(--serif); font-size: 35px; line-height: 1;
  background: linear-gradient(150deg, var(--ouro-cl), var(--ouro));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nu span { display: block; margin-top: 7px; font-size: 12.5px; color: var(--texto-3); line-height: 1.5; }

/* ---------------------------------------------------------- fechamento */
.fechamento { background: var(--fundo-2); text-align: center; }
.fechamento .cta { max-width: 420px; margin: 24px auto 0; }

/* ----------------------------------------------------------------- faq */
.faq { margin-top: 22px; }
.faq details { border-bottom: 1px solid var(--borda); }
.faq summary {
  list-style: none; cursor: pointer; padding: 17px 34px 17px 0;
  position: relative; font-weight: 600; font-size: 15.5px; color: var(--texto);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: 6px; top: 23px;
  width: 9px; height: 9px; border-right: 2px solid var(--ouro);
  border-bottom: 2px solid var(--ouro); rotate: 45deg; transition: rotate .25s;
}
.faq details[open] summary { color: var(--ouro-cl); }
.faq details[open] summary::after { rotate: 225deg; }
.faq details p { margin: 0 0 18px; color: var(--texto-2); font-size: 14.5px; }

/* --------------------------------------------------------------- rodapé */
.rodape {
  background: #060302; text-align: center; padding: 44px 18px 34px;
  border-top: 1px solid var(--borda);
}
.rodape img { width: 148px; margin: 0 auto 20px; }
.rodape nav { display: flex; flex-wrap: wrap; gap: 9px 18px; justify-content: center; margin-bottom: 22px; }
.rodape nav a { color: var(--ouro-cl); text-decoration: none; font-size: 13px; }
.legal { margin: 0 auto; max-width: 62ch; font-size: 11px; line-height: 1.65; color: var(--texto-3); }

/* ================================================ FLUTUANTES (sempre) ===
   O botão de compra fica na tela a página inteira, com uma linha fina em
   cima marcando o quanto já foi percorrido. O WhatsApp flutua acima dele. */
.barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; padding-bottom: max(11px, env(safe-area-inset-bottom));
  background: rgba(10,6,5,.92); backdrop-filter: blur(14px);
  border-top: 1px solid var(--borda);
}
.barra-progresso {
  position: absolute; left: 0; top: -1px; height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--terra), var(--ouro));
  transition: width .1s linear;
}
.barra-txt { flex: 1; min-width: 0; line-height: 1.25; }
.barra-txt b { display: block; font-family: var(--serif); font-size: 21px; color: var(--ouro-cl); }
.barra-txt span { display: block; font-size: 11.5px; color: var(--texto-3); }
.cta-mini { width: auto; flex: 0 0 auto; padding: 13px 24px; font-size: 14px; }

.wpp {
  position: fixed; right: 14px; z-index: 71;
  bottom: calc(84px + env(safe-area-inset-bottom));
  width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center;
  background: #1FA855; box-shadow: 0 10px 26px -8px rgba(0,0,0,.85);
  transition: transform .18s;
}
.wpp:active { transform: scale(.94); }
.wpp svg { width: 25px; height: 25px; fill: none; stroke: #fff; stroke-width: 1.7; }

/* ==========================================================================
   OS QUATRO, UM POR UM
   Quem está decidindo gastar trezentos reais quer saber a que a coisa cheira.
   Foto grande, família olfativa, pirâmide de notas e quando usar.
   ======================================================================== */
.pf-lista { display: grid; gap: 34px; margin-top: 28px; }

.pf {
  border: 1px solid var(--borda); border-radius: 16px; overflow: hidden;
  background: var(--superficie);
}

.pf-foto { position: relative; }
.pf-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pf-foto::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 52%, rgba(10,6,5,.88) 100%);
}
.pf-hora {
  position: absolute; left: 14px; bottom: 12px; z-index: 1;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--cor); font-weight: 600;
}

.pf-txt { padding: 18px 16px 20px; }
.pf-cod { margin: 0; font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; color: var(--texto-3); }
.pf-nome {
  margin: 5px 0 2px; font-family: var(--serif); font-weight: 400;
  font-size: clamp(20px, 5.6vw, 27px); line-height: 1.15; color: var(--texto);
}
.pf-nome b { color: var(--cor); font-weight: 400; }
.pf-familia {
  margin: 0 0 14px; font-family: var(--serif); font-style: italic;
  font-size: 15px; color: var(--texto-3);
}
.pf-desc { margin: 0 0 18px; font-size: 14.5px; color: var(--texto-2); }

/* a pirâmide, do que você sente primeiro ao que fica por último */
.piramide { margin: 0 0 16px; display: grid; gap: 1px; background: var(--borda); border-radius: 10px; overflow: hidden; }
.piramide > div { display: grid; grid-template-columns: 74px 1fr; gap: 10px; padding: 11px 13px; background: var(--superficie-2); }
.piramide dt { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--cor); }
.piramide dd { margin: 0; font-size: 13.5px; color: var(--texto-2); }

.pf-quando { margin: 0; font-size: 13.5px; color: var(--texto-3); line-height: 1.55; }
.pf-quando b { color: var(--texto-2); font-weight: 600; }

/* ============================================================ >= 760px == */
@media (min-width: 760px) {
  .compra {
    display: grid; grid-template-columns: 1.05fr .95fr;
    gap: 36px; align-items: start;
    max-width: 1180px; margin: 0 auto; padding: 30px 24px 54px;
  }
  .galeria { position: sticky; top: 78px; }
  .gi img { border-radius: 14px; }
  .ficha { padding: 0; }
  .cta { max-width: 460px; }
  .bloco { padding: 84px 24px; max-width: 1080px; margin: 0 auto; }
  .bloco.claro, .fechamento, .brincadeira { max-width: none; }
  .bloco.claro > *, .fechamento > *, .brincadeira > * { max-width: 1080px; margin-inline: auto; }
  .momentos-grade, .cartas { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .numeros { grid-template-columns: repeat(4, 1fr); }
  .barra-txt b { font-size: 24px; }
  .wpp { width: 56px; height: 56px; bottom: calc(94px + env(safe-area-inset-bottom)); }

  .pf-lista { gap: 26px; }
  .pf { display: grid; grid-template-columns: .9fr 1.1fr; align-items: stretch; }
  .pf:nth-child(even) .pf-foto { order: 2; }
  .pf-foto img { height: 100%; aspect-ratio: auto; min-height: 320px; }
  .pf-txt { padding: 28px 30px; align-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}