/* Site de vendas (fase 4), dos protótipos aprovados (prototipos/site/). Requer tokens.css e base.css. Primeiro o celular. */
[hidden] { display: none !important; }
body.site { background: var(--cor-fundo); }
.envolve { max-width: 1200px; margin: 0 auto; padding-inline: 16px; }
.topo { position: sticky; top: 0; z-index: 10; background: var(--cor-fundo); border-bottom: 2px solid var(--cor-superficie); }
.topo .envolve { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 76px; }
.topo__logo { display: block; flex: none; border-radius: 50%; }
.topo__logo img { display: block; width: 60px; height: 60px; }
.topo__carrinho { gap: 10px; padding-inline: 18px; white-space: nowrap; }
.foto { display: grid; place-items: center; overflow: hidden; border-radius: var(--raio); background-color: var(--cor-superficie);
  background-image: radial-gradient(#D9DFD7 1.5px, transparent 1.6px); background-size: 16px 16px; }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto span { margin: 8px; text-align: center; background: var(--cor-fundo); color: var(--cor-texto-suave); font-size: 16px; padding: 4px 12px; border-radius: var(--raio-pilula); }
.site main > section { padding-block: 40px; }
.faixa-pausa { margin: 0; padding: 12px 16px; text-align: center; font-weight: 700; background: var(--cor-atencao-fundo); }
.site .recado-geral { max-width: 1200px; margin: 12px auto 0; padding-inline: 16px; }

/* chips de rádio/caixa (funcionam sem JavaScript) */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
label.chip { position: relative; cursor: pointer; }
label.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
label.chip:has(input:checked) { background: var(--cor-destaque); border-color: var(--cor-destaque); color: #fff; }
label.chip:has(input:focus-visible) { outline: 3px solid var(--cor-principal); outline-offset: 2px; }
label.chip:has(input:disabled) { background: var(--cor-desativado); border-color: var(--cor-desativado); color: var(--cor-desativado-texto); cursor: not-allowed; text-decoration: line-through; }
.grupo { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 10px; }
.grupo legend { padding: 0; margin-bottom: 10px; font-weight: 600; }

/* início */
.hero { display: grid; gap: 28px; padding-top: 28px !important; }
.hero h1 { font-size: 38px; letter-spacing: -.02em; line-height: 1.08; }
.hero h1 em { font-style: normal; color: var(--cor-principal); }
.hero__sub { margin-top: 16px; font-size: 20px; color: var(--cor-texto-suave); max-width: 34ch; }
.hero__acoes { display: grid; gap: 12px; margin-top: 24px; }
.hero__foto { min-height: 210px; }
.promessas { padding-block: 0 !important; }
.promessas ul { display: grid; background: var(--cor-superficie); border-radius: var(--raio); padding: 4px 20px; }
.promessas li { padding: 14px 0; }
.promessas li + li { border-top: 2px solid var(--cor-fundo); }
.promessas b { display: block; font: 700 22px/1.2 var(--fonte-titulo); color: var(--cor-principal); }
.promessas span { color: var(--cor-texto-suave); }
.como h2, .vitrine h2, .entrega h2 { margin-bottom: 20px; }
.como ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 20px; counter-reset: passo; }
.como li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; }
.como li::before { counter-increment: passo; content: counter(passo); display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  font: 700 28px/1 var(--fonte-titulo); color: #fff; background: var(--cor-principal); }
.como h3 { margin: 6px 0 4px; }
.como p { color: var(--cor-texto-suave); }
.entrega__grade { display: grid; gap: 16px; align-items: start; }
.bairros li { display: grid; gap: 4px; padding: 14px 4px; }
.bairros .num { font: 700 24px/1.2 var(--fonte-titulo); }
.bairros .nomes { line-height: 1.5; }
.bairros li + li { border-top: 2px solid var(--cor-fundo); }
.vantagens { display: grid; gap: 12px; }
.vantagens li { font-size: 20px; }
.rodape { background: var(--cor-destaque); color: #fff; padding-block: 40px 48px; }
.rodape .envolve { display: grid; gap: 28px; }
.rodape__marca { display: flex; align-items: center; gap: 16px; }
.rodape__marca img { flex: none; width: 88px; height: 88px; }
.rodape__compromisso { font: 700 28px/1.15 var(--fonte-titulo); text-wrap: balance; }
.rodape dl { margin: 0; display: grid; gap: 16px; }
.rodape dt { color: #D7DBE1; font-size: 16px; font-weight: 600; }
.rodape dd { margin: 0; font-size: 20px; }
.rodape a { color: #fff; display: inline-flex; align-items: center; min-height: 48px; text-underline-offset: 4px; }

/* produtos */
.cabeca { padding-top: 24px; }
.abas { display: flex; gap: 10px; overflow-x: auto; padding: 16px 16px 12px; margin-inline: -16px; scroll-snap-type: x proximity; }
.abas .chip { flex: none; scroll-snap-align: start; min-height: 56px; padding-inline: 22px; }
.lista { padding-block: 16px 48px; }
.lista h2 { margin-bottom: 16px; }
.grade { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.produto { display: flex; flex-direction: column; height: 100%; background: var(--cor-superficie); border-radius: var(--raio); padding: 10px 10px 12px; }
.produto .foto { height: 120px; border-radius: 14px; background-color: #E6EAE4; }
.produto .selo-esgotado { align-self: flex-start; margin: 10px 2px 0; }
.produto h3 { margin: 10px 2px 2px; font-size: 21px; }
.produto .preco-linha { margin: 0 2px 12px; color: var(--cor-texto-suave); flex: 1; overflow-wrap: break-word; }
.produto .preco { font: 700 23px/1.2 var(--fonte-titulo); color: var(--cor-texto); }
.produto.esgotado .preco { color: var(--cor-texto-suave); }
.produto .botao { width: 100%; padding-inline: 10px; }

/* escolher (peso, preparo, vácuo) */
.escolher { max-width: 640px; display: grid; gap: 22px; padding-block: 24px 48px; }
.escolher__cab { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: center; }
.escolher__cab .foto { height: 120px; }
.escolher__cab .preco { font: 700 24px/1.2 var(--fonte-titulo); }
.escolher .nota { color: var(--cor-texto-suave); }
.escolher .botao--grande { width: 100%; }
.marcar-vacuo { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 8px 16px; background: var(--cor-superficie); border-radius: 14px; font-weight: 600; cursor: pointer; }
.marcar-vacuo input { width: 26px; height: 26px; }

/* barra do carrinho no rodapé */
.barra-carrinho { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: var(--cor-fundo); border-top: 2px solid var(--cor-superficie);
  padding-block: 10px 12px; box-shadow: 0 -6px 18px rgba(30, 37, 48, .08); }
.barra-carrinho .botao { width: 100%; font-size: 19px; padding-inline: 12px; }
body.tem-barra { padding-bottom: 100px; }

/* carrinho e finalizar */
.pagina-site { display: grid; gap: 28px; padding-block: 24px 48px; }
.pagina-site > * { min-width: 0; }
.etapa { display: grid; gap: 20px; align-content: start; }
.itens { display: grid; gap: 12px; }
.item { background: var(--cor-superficie); border-radius: var(--raio); padding: 16px; display: grid; gap: 6px; }
.item__topo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.item__valor { font: 700 22px/1.2 var(--fonte-titulo); white-space: nowrap; }
.item__det { color: var(--cor-texto-suave); }
.item form { justify-self: end; }
.formulario { display: grid; gap: 22px; }
.resumo { background: var(--cor-superficie); border-radius: var(--raio); padding: 20px 16px; display: grid; gap: 14px; align-content: start; }
.resumo h2 { font-size: 24px; }
.resumo dl { margin: 0; display: grid; gap: 8px; }
.resumo dl div { display: flex; justify-content: space-between; gap: 12px; font-size: 20px; }
.resumo dd { margin: 0; font-weight: 700; white-space: nowrap; }
.resumo .total__valor { font-size: 40px; }
.resumo .botao { width: 100%; }

/* pedido feito e acompanhar */
.pagina-pedido { max-width: 760px; display: grid; gap: 20px; padding-block: 32px 56px; }
.pagina-pedido h1 { font-size: 36px; }
.pagina-pedido h1 em { font-style: normal; color: var(--cor-principal); }
.resumo-texto { margin: 0; padding: 16px; border-radius: 14px; background: var(--cor-superficie); font: 16px/1.6 Consolas, 'Cascadia Mono', ui-monospace, monospace;
  white-space: pre-wrap; overflow-wrap: break-word; }
.fases { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fases li { display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--cor-superficie); color: var(--cor-texto-suave); }
.fases li.feita { color: var(--cor-texto); font-weight: 700; box-shadow: inset 6px 0 0 var(--cor-ok); }
.fases li.cancelada { color: var(--cor-erro); font-weight: 700; box-shadow: inset 6px 0 0 var(--cor-erro); }

@media (min-width: 640px) {
  .grade { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
  .produto .foto { height: 160px; }
  .abas { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
  .barra-carrinho .botao { width: auto; min-width: 420px; font-size: 1.33em; padding-inline: 32px; }
  .barra-carrinho .envolve { display: flex; justify-content: flex-end; }
}
@media (min-width: 900px) {
  .site main > section { padding-block: 64px; }
  .hero { grid-template-columns: 1.05fr 1fr; align-items: center; gap: 56px; padding-top: 48px !important; }
  .hero h1 { font-size: 56px; }
  .hero__acoes { grid-template-columns: auto auto; justify-content: start; }
  .hero__foto { min-height: 440px; }
  .promessas ul { grid-template-columns: repeat(3, 1fr); padding: 20px 8px; }
  .promessas li { padding: 4px 24px; }
  .promessas li + li { border-top: 0; border-left: 2px solid var(--cor-fundo); }
  .como ol { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .entrega__grade { grid-template-columns: 1.3fr 1fr; gap: 24px; }
  .rodape .envolve { grid-template-columns: 1fr 1fr; align-items: start; gap: 48px; }
  .rodape dl { grid-template-columns: 1fr 1fr; }
  .pagina-site { grid-template-columns: 1fr 380px; gap: 40px; align-items: start; padding-top: 40px; }
  .resumo { position: sticky; top: 100px; padding: 24px; }
}