/* estilo.css — o visual da prévia da Central dos Pods: preto e branco do logo, roxo do catálogo como acento.
   Tipos: Manrope (texto e títulos) e Grenze Gotisch (marca e números grandes, a blackletter do "C"). */
:root {
  --preto: #000;
  --carvao: #0f0f12;        /* painéis e cards */
  --grafite: #1b1b21;       /* bordas e divisórias */
  --fumaca: #2a2a33;        /* borda em destaque */
  --branco: #f5f5f7;
  --cinza: #a2a2ad;         /* texto secundário */
  --cinza-escuro: #6b6b78;
  --roxo: #7c3aed;
  --roxo-claro: #a78bfa;
  --roxo-escuro: #3b1d7a;
  --zap: #1a7f45;
  --foco: var(--roxo-claro);
  --texto: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gotica: 'Grenze Gotisch', 'Manrope', serif;
  --altura-topo: 108px;
}
@media (min-width: 900px) { :root { --altura-topo: 112px; } }

html { color-scheme: dark; }
body { font: 400 17px/1.55 var(--texto); color: var(--branco); background: var(--preto); }
html:not(.idade-ok) body { overflow: hidden; }
p { max-width: 62ch; }
.titulo { font: 700 clamp(28px, 4.2vw, 44px)/1.08 var(--texto); letter-spacing: -.025em; color: var(--branco); text-wrap: balance; max-width: 22ch; }
.titulo--claro { color: var(--branco); }
.bloco__intro { margin-top: 14px; color: var(--cinza); font-size: 18px; }
.bloco__intro a { color: var(--roxo-claro); text-decoration-thickness: 1px; text-underline-offset: 3px; }
::selection { background: var(--roxo); color: #fff; }

/* ---------- marca ---------- */
.marca-c { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--preto); border: 2px solid var(--branco); flex: none; }
.marca-c img { width: 46%; height: auto; }
.marca-c--grande { width: 88px; height: 88px; border-width: 3px; margin: 0 auto 18px; }
.marca-c--chamada { width: 72px; height: 72px; border-width: 2.5px; margin: 0 auto 22px; }

/* ---------- botões ---------- */
.botoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 22px; border: 0; border-radius: 8px; text-decoration: none; font: 600 16px/1.2 var(--texto); cursor: pointer; text-align: center; transition: background-color .15s, border-color .15s; }
.botao svg { width: 22px; height: 22px; flex: none; }
.botao--zap { background: var(--zap); color: #fff; }
.botao--zap:hover { background: #156a3a; }
.botao--branco { background: var(--branco); color: var(--preto); }
.botao--branco:hover { background: #fff; }
.botao--linha { border: 1.5px solid var(--fumaca); color: var(--branco); background: transparent; }
.botao--linha:hover { border-color: var(--roxo-claro); }
.botao--grande { min-height: 62px; padding: 0 30px; font-size: 18px; }
@media (max-width: 559px) { .botoes .botao { flex: 1 1 100%; } }

/* ---------- aviso de idade ---------- */
.idade { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px 16px; background: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(124, 58, 237, .32), transparent 70%), var(--preto); overflow: auto; }
.idade-ok .idade { display: none; }
.idade__caixa { width: 100%; max-width: 480px; text-align: center; }
.idade__nome { font: 500 30px/1 var(--gotica); letter-spacing: .01em; }
.idade__titulo { margin-top: 18px; font: 700 clamp(22px, 3.4vw, 28px)/1.25 var(--texto); letter-spacing: -.02em; text-wrap: balance; }
.idade__botoes { display: grid; gap: 10px; margin-top: 26px; }
@media (min-width: 420px) { .idade__botoes { grid-template-columns: 1.4fr 1fr; } }
.idade__aviso { margin: 22px auto 0; padding-top: 18px; border-top: 1px solid var(--grafite); font-size: 13px; line-height: 1.5; color: var(--cinza); }

/* ---------- topo ---------- */
.fixo { position: sticky; top: 0; z-index: 50; }
.faixa-previa { margin: 0; padding: 8px 16px; background: var(--roxo-escuro); color: #ece6ff; text-align: center; font-size: 13px; font-weight: 500; line-height: 1.4; max-width: none; }
.topo { display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 10px 16px; background: rgba(0, 0, 0, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--grafite); }
.topo__marca { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--branco); margin-right: auto; }
.topo__nome { font: 500 24px/1 var(--gotica); letter-spacing: .01em; white-space: nowrap; }
.topo nav { display: none; gap: 26px; }
.topo nav a { text-decoration: none; font-weight: 500; font-size: 15px; color: var(--cinza); }
.topo nav a:hover { color: var(--branco); }
.topo__zap { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 8px; background: var(--zap); color: #fff; text-decoration: none; font-weight: 600; font-size: 15px; }
.topo__zap svg { width: 20px; height: 20px; }
@media (max-width: 380px) { .topo__nome { font-size: 21px; } }
@media (min-width: 900px) { .topo { padding: 12px 40px; } .topo nav { display: flex; margin-right: 28px; } .topo__nome { font-size: 27px; } }

/* ---------- capa ---------- */
.capa { position: relative; isolation: isolate; padding: 56px 16px 64px; overflow: hidden; }
.capa::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 60% 50% at 80% 10%, rgba(124, 58, 237, .28), transparent 65%); }
.capa__grade { max-width: 1180px; margin: 0 auto; display: grid; gap: 44px; }
.capa__cima { font-weight: 600; font-size: 15px; color: var(--roxo-claro); }
.capa__titulo { margin-top: 14px; font: 800 clamp(36px, 6vw, 68px)/1.02 var(--texto); letter-spacing: -.035em; text-wrap: balance; max-width: 14ch; }
.capa__lead { margin-top: 22px; font-size: 19px; color: var(--cinza); max-width: 54ch; }
.capa__fone { margin-top: 20px; font-size: 15px; color: var(--cinza-escuro); }
.capa__fone a { color: var(--branco); text-decoration-color: var(--fumaca); text-underline-offset: 3px; }

/* o painel da capa: o "C" grande, o status e o horário em blackletter */
.painel { position: relative; overflow: hidden; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; min-height: 380px; padding: 28px 26px 26px; border-radius: 16px; background: linear-gradient(160deg, #15121d 0%, var(--carvao) 55%, #0a0a0c 100%); border: 1px solid var(--grafite); }
.painel__c { position: absolute; right: -8%; top: -6%; width: 62%; opacity: .14; filter: drop-shadow(0 0 60px rgba(167, 139, 250, .45)); }
.painel__c img { width: 100%; height: auto; }
.painel__status { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; color: var(--cinza); }
.painel__bolinha { width: 10px; height: 10px; border-radius: 50%; background: var(--cinza-escuro); box-shadow: 0 0 0 4px rgba(107, 107, 120, .2); }
.painel__status[data-aberto="sim"] { color: #b6f2cd; }
.painel__status[data-aberto="sim"] .painel__bolinha { background: #34d37a; box-shadow: 0 0 0 4px rgba(52, 211, 122, .22); }
.painel__status[data-aberto="nao"] { color: #e6c2c2; }
.painel__status[data-aberto="nao"] .painel__bolinha { background: #d96060; box-shadow: 0 0 0 4px rgba(217, 96, 96, .2); }
.painel__horas { margin-top: 10px; display: flex; align-items: baseline; gap: 14px; font: 500 clamp(76px, 11vw, 128px)/.95 var(--gotica); letter-spacing: -.01em; color: var(--branco); }
.painel__ate { font: 500 clamp(22px, 3vw, 30px)/1 var(--texto); color: var(--roxo-claro); letter-spacing: 0; }
.painel__dias { margin-top: 10px; font-size: 14px; color: var(--cinza-escuro); max-width: 30ch; }

@media (min-width: 1000px) {
  .capa { padding: 84px 40px 96px; }
  .capa__grade { grid-template-columns: 1.15fr .85fr; gap: 64px; align-items: center; }
  .painel { min-height: 460px; padding: 34px 34px 32px; }
}

/* ---------- blocos ---------- */
.bloco { padding: 64px 16px; }
.bloco > * { max-width: 1180px; margin-left: auto; margin-right: auto; }
@media (min-width: 900px) { .bloco { padding: 96px 40px; } }

/* motivos */
.motivos { border-top: 1px solid var(--grafite); background: var(--carvao); }
.motivos__grade { display: grid; gap: 36px; }
.motivos__lista { display: grid; gap: 0; }
.motivo { padding: 22px 0; border-top: 1px solid var(--grafite); }
.motivo:last-child { border-bottom: 1px solid var(--grafite); }
.motivo h3 { font: 700 20px/1.2 var(--texto); letter-spacing: -.015em; }
.motivo p { margin-top: 8px; color: var(--cinza); font-size: 16px; }
@media (min-width: 900px) { .motivos__grade { grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: start; } .motivos__texto { position: sticky; top: calc(var(--altura-topo) + 24px); } }

/* produtos */
.produtos { background: var(--preto); }
.nicotina { margin: 26px auto 0; padding: 12px 16px; border: 1px solid var(--fumaca); border-left: 4px solid var(--branco); border-radius: 6px; background: var(--carvao); font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--branco); max-width: 1180px; }
.cards { margin-top: 26px; display: grid; gap: 20px; }
.card { display: grid; overflow: hidden; border-radius: 14px; background: var(--carvao); border: 1px solid var(--grafite); }
.card__foto { display: block; aspect-ratio: 1 / .78; overflow: hidden; background: #1a1a1f; }
.card__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.card__texto { padding: 22px 22px 24px; display: grid; gap: 10px; align-content: start; }
.card__nome { font: 700 22px/1.15 var(--texto); letter-spacing: -.02em; }
.card__preco { display: flex; align-items: baseline; gap: 12px; }
.card__preco strong { font: 800 30px/1 var(--texto); letter-spacing: -.025em; color: var(--branco); font-variant-numeric: tabular-nums; }
.card__de { font-size: 14px; color: var(--cinza-escuro); order: 2; }
.card__de s { color: var(--cinza); }
.card__desc { color: var(--cinza); font-size: 15.5px; }
.card__opcao { display: grid; gap: 6px; margin-top: 6px; font-size: 14px; font-weight: 600; }
.card__opcao small { font-weight: 500; color: var(--cinza-escuro); margin-left: 6px; }
.card__opcao select { min-height: 46px; padding: 0 40px 0 12px; border-radius: 8px; border: 1px solid var(--fumaca); background: #16161b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23a2a2ad' stroke-width='2'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center; color: var(--branco); font-weight: 500; appearance: none; -webkit-appearance: none; }
.card__pedir { margin-top: 8px; justify-self: start; }
@media (min-width: 720px) { .cards { grid-template-columns: 1fr 1fr; gap: 24px; } }
.produtos__mais { margin-top: 26px; color: var(--cinza); font-size: 15px; }
.produtos__mais a { color: var(--branco); text-underline-offset: 3px; }

/* passos */
.passos-bloco { border-top: 1px solid var(--grafite); background: var(--carvao); }
.passos__grade { display: grid; gap: 36px; }
.passos { display: grid; gap: 22px; counter-reset: passo; }
.passo { display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: start; padding-top: 20px; border-top: 1px solid var(--grafite); }
.passo__numero { font: 500 44px/1 var(--gotica); color: var(--roxo-claro); }
.passo h3 { font: 700 20px/1.2 var(--texto); letter-spacing: -.015em; }
.passo p { margin-top: 8px; color: var(--cinza); font-size: 16px; }
@media (min-width: 900px) { .passos__grade { grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: start; } }

/* perguntas */
.perguntas__lista { margin-top: 28px; max-width: 820px; }
.pergunta { border-top: 1px solid var(--grafite); }
.pergunta:last-child { border-bottom: 1px solid var(--grafite); }
.pergunta summary { position: relative; list-style: none; cursor: pointer; padding: 18px 44px 18px 0; font-weight: 600; font-size: 18px; letter-spacing: -.01em; }
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary::after { content: "+"; position: absolute; right: 2px; top: 50%; translate: 0 -50%; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--fumaca); color: var(--roxo-claro); font-size: 20px; font-weight: 400; line-height: 1; transition: transform .2s; }
.pergunta[open] summary::after { transform: rotate(45deg); }
.pergunta p { padding: 0 0 20px; color: var(--cinza); font-size: 16px; max-width: 70ch; }

/* onde */
.onde { border-top: 1px solid var(--grafite); background: var(--carvao); }
.onde__grade { display: grid; gap: 32px; }
.onde__endereco { margin-top: 22px; font-style: normal; display: grid; gap: 14px; font-size: 17px; }
.onde__endereco a { color: var(--branco); text-decoration-color: var(--fumaca); text-underline-offset: 3px; }
.onde__horario { margin-top: 20px; font-weight: 600; }
.onde__retirada { margin-top: 6px; color: var(--cinza); font-size: 15.5px; }
.onde__link { display: inline-block; margin-top: 20px; font-weight: 600; color: var(--roxo-claro); text-underline-offset: 3px; }
.mapa { border-radius: 14px; border: 1px solid var(--grafite); filter: grayscale(1) invert(.92) contrast(.9); }
[data-mapa] { background: #1a1a1f; }
@media (min-width: 900px) { .onde__grade { grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: center; } }

/* chamada final */
.chamada { position: relative; isolation: isolate; padding: 80px 16px; text-align: center; background: var(--preto); overflow: hidden; }
.chamada::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 50% 60% at 50% 100%, rgba(124, 58, 237, .3), transparent 70%); }
.chamada__dentro { max-width: 640px; margin: 0 auto; display: grid; justify-items: center; }
.chamada .titulo { max-width: none; }
.chamada p { margin-top: 14px; color: var(--cinza); font-size: 18px; }
.chamada__acao { margin-top: 28px; display: grid; justify-items: center; gap: 12px; }
.chamada__numero { font-size: 15px; color: var(--cinza-escuro); }
.chamada__numero a { color: var(--branco); text-decoration-color: var(--fumaca); text-underline-offset: 3px; }
@media (min-width: 900px) { .chamada { padding: 112px 40px; } }

/* rodapé */
.rodape { padding: 32px 16px 44px; border-top: 1px solid var(--grafite); background: var(--carvao); color: var(--cinza); font-size: 14px; line-height: 1.6; text-align: center; }
.rodape p { max-width: none; }
.rodape > p + p { margin-top: 8px; }
.rodape .rodape__nome { margin-top: 22px; font: 500 26px/1 var(--gotica); color: var(--branco); }
.rodape a { color: var(--branco); text-decoration-color: var(--fumaca); text-underline-offset: 3px; }
.rodape .nicotina--rodape { margin: 0 auto; max-width: 760px; text-align: left; }

/* botão flutuante some na capa (os botões já estão na tela) */
.wa-flutuante { transition: opacity .25s, transform .25s; }
html.na-capa .wa-flutuante { opacity: 0; transform: translateY(12px); pointer-events: none; }
html:not(.idade-ok) .wa-flutuante { display: none; }