/* Monta Pedido · landing (Clarice, UX e design, 05/11/2026). Folha só da porta: o app continua no estilo.css do kit.
   Direção: o balcão do comércio de bairro. Toldo listrado verde e creme, papel de embrulho, etiqueta de preço laranja.
   Fontes OFL auto-hospedadas (fontes/). Animação só com transform e clip-path (letra nunca muda de opacidade); parada com reduzir movimento. */

@font-face { font-family: "Bricolage Grotesque"; src: url("/fontes/bricolage-grotesque-800.woff2") format("woff2"); font-weight: 800; font-display: optional; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/fontes/atkinson-hyperlegible-400.woff2") format("woff2"); font-weight: 400; font-display: optional; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/fontes/atkinson-hyperlegible-700.woff2") format("woff2"); font-weight: 700; font-display: optional; }

:root {
  --verde: #0b6b4f; --verde-escuro: #08523c; --mata: #0f3a2c; --noite: #14251d;
  --papel: #fbf6ec; --kraft: #f2e6cf; --hortela: #e6f2ea; --laranja: #f4a261; --laranja-claro: #f7b98a;
  --apoio: #4d5a52; --linha: #e0d2b6; --erro: #b3261e;
  --titulo: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --texto: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --app: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --respiro: 3.5rem;
  --sai: cubic-bezier(.22, 1, .36, 1);
  accent-color: var(--verde);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 1rem; }
body { margin: 0; font: 400 1.0625rem/1.55 var(--texto); color: var(--noite); background: var(--papel); }
::selection { background: var(--laranja); color: var(--noite); }
h1, h2 { font-family: var(--titulo); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; text-wrap: balance; margin: 0; }
h2 { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.9rem); }
p { margin: 0; text-wrap: pretty; }
a { color: var(--verde); text-underline-offset: .2em; text-decoration-thickness: .08em; }
a:hover { color: var(--verde-escuro); }
:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; border-radius: .3rem; }
.simbolos { position: absolute; width: 0; height: 0; overflow: hidden; }
.grade { width: 100%; max-width: 74rem; margin: 0 auto; padding: 0 1.25rem; }

/* Toldo: listras verde e creme com a barra recortada em ondas */
.toldo { height: 2rem; background: repeating-linear-gradient(90deg, var(--verde) 0 2.5rem, #e7d5b1 2.5rem 5rem);
  -webkit-mask: linear-gradient(#000 0 0) 0 0 / 100% .8rem no-repeat, radial-gradient(circle 1.25rem at 50% .75rem, #000 97%, #0000 100%) 0 0 / 2.5rem 100% repeat-x;
  mask: linear-gradient(#000 0 0) 0 0 / 100% .8rem no-repeat, radial-gradient(circle 1.25rem at 50% .75rem, #000 97%, #0000 100%) 0 0 / 2.5rem 100% repeat-x; }

/* Cabeçalho */
.cabeca-linha { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .5rem; padding-bottom: .5rem; }
.marca { display: inline-flex; align-items: center; gap: .6rem; min-height: 48px; color: var(--noite); text-decoration: none; font: 800 1.25rem/1 var(--titulo); letter-spacing: -.01em; }
.marca:hover { color: var(--noite); }
.marca-icone { flex: none; }

/* Botões */
.botao, button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 52px; padding: .75rem 1.4rem;
  font: 700 1.0625rem/1.2 var(--texto); text-decoration: none; text-align: center; border: 2px solid var(--verde); border-radius: .75rem;
  background: var(--verde); color: #fff; cursor: pointer; transition: background-color .16s var(--sai), color .16s var(--sai), transform .16s var(--sai); }
.botao:hover, button:hover { background: var(--verde-escuro); border-color: var(--verde-escuro); color: #fff; }
.botao:active, button:active { transform: translateY(2px) scale(.99); }
.botao-curto { min-height: 44px; padding: .45rem 1rem; font-size: .98rem; background: transparent; color: var(--verde); }
/* Contorno: no passar do mouse só o fundo clareia (papel → hortelã) e a letra escurece; letra e fundo nunca cruzam (≥ 6,1:1 em todo quadro) */
.botao-curto:hover { background: var(--hortela); border-color: var(--verde-escuro); color: var(--verde-escuro); }
.botao-cheio { width: 100%; }
.botao-laranja { background: var(--laranja); border-color: var(--laranja); color: var(--noite); }
.botao-laranja:hover { background: var(--laranja-claro); border-color: var(--laranja-claro); color: var(--noite); }
.contorno { background: transparent; color: var(--verde); }
.contorno:hover { background: var(--hortela); color: var(--verde-escuro); }
button:disabled, button:disabled:hover { cursor: not-allowed; background: #dfe5e1; border-color: #dfe5e1; color: var(--apoio); transform: none; }
.link-alvo { display: inline-flex; align-items: center; min-height: 44px; }

/* Aviso: aparece como faixa fixa embaixo só quando tem texto (não empurra nada) */
.aviso { position: fixed; z-index: 10; left: 50%; bottom: 1rem; width: min(30rem, calc(100% - 2rem)); margin: 0; padding: .8rem 1rem;
  border-radius: .75rem; background: var(--noite); color: #fff; font-weight: 700; box-shadow: 0 12px 28px -8px rgb(20 37 29 / .45);
  transform: translate(-50%, calc(100% + 2rem)); visibility: hidden; transition: transform .25s var(--sai), visibility 0s linear .25s; pointer-events: none; }
.aviso:not(:empty) { transform: translate(-50%, 0); visibility: visible; transition: transform .25s var(--sai), visibility 0s; }
.aviso.erro { background: var(--erro); }
.faixa { grid-column: 1 / -1; background: #fff4c7; border: 1px solid #e5c75c; padding: .6rem .8rem; border-radius: .6rem; }

/* Topo */
.topo { padding: 1.5rem 0 var(--respiro); }
.topo-grade { display: grid; gap: 2rem; grid-template-areas: "texto" "prova" "criar"; }
.topo-texto { grid-area: texto; }
.topo h1 { font-size: clamp(2.2rem, 1.55rem + 2.7vw, 3.6rem); }
.frase { margin-top: 1rem; font-size: 1.15rem; color: var(--apoio); max-width: 34em; }

/* Prova: o catálogo no celular do cliente e a mensagem no WhatsApp da loja */
.prova { grid-area: prova; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); position: relative; }
.prova::before { content: ""; position: absolute; inset: 2.5rem -1.25rem 2.5rem 18%; background: var(--kraft); border-radius: 1.5rem 0 0 1.5rem; z-index: -1; }
.celular { width: min(19rem, 86%); font: 400 .875rem/1.35 var(--app); color: #1b1f24; background: #fff; border: 7px solid var(--noite);
  border-radius: 2rem; padding: 1rem 0 1.4rem; overflow: hidden; box-shadow: 0 24px 48px -16px rgb(20 37 29 / .45); }
.cel-topo { padding: 0 .9rem .6rem; border-bottom: 1px solid #e3e7eb; }
.cel-loja { font-weight: 700; font-size: 1.05rem; }
.cel-nota { color: #5a6270; font-size: .78rem; }
.cel-produtos { list-style: none; margin: 0; padding: 0; }
.cel-produto { position: relative; isolation: isolate; display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: .6rem; align-items: center; padding: .55rem .9rem; border-bottom: 1px solid #e3e7eb; }
.cel-produto.escolhido::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hortela); }
.cel-foto { width: 3rem; height: 3rem; border-radius: .45rem; display: block; }
.cel-info { display: grid; min-width: 0; }
.cel-nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cel-preco { font-weight: 700; }
.cel-qtd { display: inline-flex; align-items: center; gap: .3rem; }
.cel-qtd span { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: .4rem; background: var(--verde); color: #fff; font-weight: 700; }
.cel-qtd b { min-width: 1.2ch; text-align: center; display: inline-block; }
.cel-barra { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: .8rem .7rem 0; padding: .55rem .6rem .55rem .8rem;
  border-top: 2px solid var(--verde); border-radius: .2rem .2rem .6rem .6rem; background: #fff; font-weight: 700; box-shadow: 0 6px 16px -8px rgb(20 37 29 / .35); }
.cel-botao { padding: .4rem .7rem; border-radius: .45rem; background: var(--verde); color: #fff; }

.conversa { width: min(18rem, 84%); justify-self: end; margin-top: -1.25rem; position: relative; padding: .8rem; border-radius: 1.25rem;
  background: var(--mata); color: #fff; box-shadow: 0 24px 40px -18px rgb(20 37 29 / .55); }
.conversa-rotulo { font-size: .8rem; font-weight: 700; color: #cfe3d7; margin: 0 0 .5rem .2rem; }
.balao { position: relative; padding: .7rem .8rem; border-radius: .9rem .9rem .25rem .9rem; background: var(--hortela); color: #1b1f24; font: 400 .875rem/1.4 var(--app); }
.balao p + p { margin-top: .5rem; }
.etiqueta { position: absolute; top: -.9rem; right: .9rem; margin: 0; padding: .25rem .7rem .25rem 1.2rem; background: var(--laranja); color: var(--noite);
  font: 800 .82rem/1.3 var(--titulo); letter-spacing: .01em; transform: rotate(-4deg);
  clip-path: polygon(.6rem 0, 100% 0, 100% 100%, .6rem 100%, 0 50%); }
.prova figcaption { margin-top: 1rem; font-size: .9rem; color: var(--apoio); max-width: 30em; }

/* Formulário de criar */
.criar { grid-area: criar; align-self: start; padding: 1.25rem; border: 1px solid var(--linha); border-radius: 1.25rem; background: #fff; box-shadow: 0 18px 36px -24px rgb(20 37 29 / .35); }
.criar-titulo { font-size: 1.5rem; margin-bottom: .4rem; }
.criar-titulo:focus { outline: none; }
label { display: block; margin: .9rem 0 .3rem; font-weight: 700; }
input { width: 100%; min-height: 48px; font: inherit; padding: .7rem .8rem; border: 1.5px solid #c9bda4; border-radius: .6rem; background: var(--papel); color: var(--noite); }
input::placeholder { color: #5f6b63; }
input:focus-visible { outline: 3px solid var(--verde); outline-offset: 1px; border-color: var(--verde); background: #fff; }
.nota { margin-top: .8rem; color: var(--apoio); font-size: .95rem; }
.criar .botao-cheio { margin-top: 1rem; }
.criar-pe { margin-top: .6rem; color: var(--apoio); font-size: .95rem; text-align: center; }
.criar-pe + .criar-pe { margin-top: .1rem; }

/* Como funciona */
.como { background: var(--kraft); padding: var(--respiro) 0; }
.passos { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 2.5rem; counter-reset: passo; }
.passo { counter-increment: passo; display: grid; gap: 1rem; align-content: start; }
.passo-texto { font-size: 1.1rem; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: .8rem; align-items: start; }
.passo-texto::before { content: counter(passo); display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--verde); color: #fff; font: 800 1.1rem/1 var(--titulo); }
.recorte { display: grid; gap: .45rem; align-content: start; padding: 1rem; border: 1px solid var(--linha); border-radius: 1rem; background: #fff; font: 400 .9rem/1.35 var(--app); color: #1b1f24; }
.rec-produto { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: .8rem; }
.rec-foto { width: 4.5rem; height: 4.5rem; border-radius: .6rem; display: block; }
.rec-campos { display: grid; gap: .2rem; }
.rec-rotulo { font-weight: 600; font-size: .8rem; color: #5a6270; }
.rec-campo { padding: .35rem .55rem; border: 1px solid #d8dde3; border-radius: .4rem; overflow-wrap: anywhere; }
.rec-link { color: var(--verde); }
.rec-botao { display: block; padding: .55rem .7rem; border-radius: .5rem; background: var(--verde); color: #fff; font-weight: 700; text-align: center; }
.rec-duplo { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.rec-contorno { padding: .5rem; border: 2px solid var(--verde); border-radius: .5rem; color: var(--verde); font-weight: 700; text-align: center; }
.rec-titulo { font-weight: 700; font-size: 1rem; }
.rec-linha b { font-weight: 700; }
.rec-nota { font-size: .8rem; color: #5a6270; }

/* Para quem vende pelo WhatsApp */
.balcao { background: var(--mata); color: var(--papel); padding: var(--respiro) 0; }
.balcao h2 { color: var(--laranja); }
.balcao-sub { margin-top: 1rem; font-size: 1.15rem; color: #cfe3d7; max-width: 30em; }
.balcao-lista { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.25rem; }
.balcao-lista li { padding-top: 1rem; border-top: 2px solid rgb(251 246 236 / .22); font-size: 1.1rem; color: #cfe3d7; max-width: 34em; }
.balcao-lista b { display: block; color: var(--papel); font: 800 1.35rem/1.15 var(--titulo); margin-bottom: .3rem; }

/* Quanto custa: a etiqueta de preço */
.preco { padding: var(--respiro) 0; }
.preco-grade { position: relative; display: grid; gap: 1.25rem; max-width: 52rem; padding: 2rem 1.5rem 2rem 3.6rem; background: var(--laranja); color: var(--noite);
  clip-path: polygon(2.2rem 0, 100% 0, 100% 100%, 2.2rem 100%, 0 50%); border-radius: 0 1.25rem 1.25rem 0; }
.preco-grade::before { content: ""; position: absolute; left: 1.15rem; top: 50%; width: 1.1rem; height: 1.1rem; margin-top: -.55rem; border-radius: 50%; background: var(--papel); border: 2px solid #d78a4c; }
.preco h2 { font-size: 1.25rem; letter-spacing: 0; }
.preco-valor { font: 800 clamp(3.4rem, 2.6rem + 3.5vw, 5.4rem)/.95 var(--titulo); letter-spacing: -.03em; margin-top: .3rem; }
.preco-texto { display: grid; gap: .8rem; }
.preco-limite { font-size: 1.15rem; font-weight: 700; }
.preco-fundador { padding-top: .8rem; border-top: 2px solid rgb(20 37 29 / .25); }
.preco-texto .botao { margin-top: .4rem; }

/* Perguntas */
.perguntas { background: var(--kraft); padding: var(--respiro) 0; }
.perguntas-lista { margin-top: 1.75rem; display: grid; gap: 0; border-top: 2px solid var(--noite); }
.perguntas details { border-bottom: 1px solid var(--linha); }
.perguntas summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 56px; padding: .6rem 0; cursor: pointer;
  font: 700 1.15rem/1.3 var(--texto); list-style: none; }
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--verde); color: #fff; font: 800 1.2rem/1 var(--titulo); transition: transform .2s var(--sai); }
.perguntas details[open] summary::after { transform: rotate(45deg); }
.perguntas details p { padding: 0 0 1rem; color: var(--apoio); max-width: 36em; }
.mais { margin-top: 1rem; }

/* Chamada final */
.final { background: var(--verde); color: #fff; padding: 0 0 var(--respiro); }
.toldo-final { background: repeating-linear-gradient(90deg, var(--papel) 0 2.5rem, var(--kraft) 2.5rem 5rem); background-color: transparent; }
.final .toldo-final { margin-bottom: calc(var(--respiro) - 1rem); }
.final-grade { display: grid; gap: 1.5rem; justify-items: start; }
.final h2 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.2rem); max-width: 16em; }

/* Rodapé */
.rodape { padding: 1.5rem 0 2rem; background: var(--noite); color: #cfd8d2; }
.rodape nav { display: flex; flex-wrap: wrap; gap: .2rem 1.4rem; }
.rodape nav a { min-height: 48px; min-width: 44px; display: inline-flex; align-items: center; color: #fff; }
.rodape nav a:hover { color: var(--laranja); }
.rodape :focus-visible { outline-color: var(--laranja); }
.marca-legal { margin-top: .8rem; font-size: .85rem; }

/* Guarde seu acesso (depois de criar) */
.acesso { padding: 2rem 0 var(--respiro); }
.acesso-cartao { width: min(36rem, calc(100% - 2.5rem)); margin: 0 auto; padding: 1.5rem; border: 1px solid var(--linha); border-radius: 1.25rem; background: #fff; }
.acesso h1 { font-size: 2.2rem; margin-bottom: .8rem; }
.acesso h1:focus { outline: none; }
.acesso p { margin-top: .8rem; }
.acesso button { margin-top: .6rem; }
.acesso .botao-cheio { margin-top: 1.2rem; }
.codigo { font: 700 1.3rem ui-monospace, Menlo, monospace; letter-spacing: .06em; overflow-wrap: anywhere; }
.caixa { display: flex; gap: .7rem; align-items: center; }
.caixa input { width: 1.5rem; min-height: 0; height: 1.5rem; flex: none; }
.caixa label { margin: 0; min-height: 44px; display: inline-flex; align-items: center; }

/* Telas largas */
@media (min-width: 40rem) {
  .rec-produto { grid-template-columns: 5rem minmax(0, 1fr); }
  .preco-grade { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2.5rem; padding: 2.5rem 2.5rem 2.5rem 4.5rem; }
  .preco-texto .botao { justify-self: start; }
}
@media (min-width: 60rem) {
  :root { --respiro: 5.5rem; }
  .topo { padding-top: 2.5rem; }
  .topo-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-areas: "texto prova" "criar criar"; column-gap: 4rem; row-gap: 3rem; align-items: center; }
  .prova { grid-template-columns: 19rem minmax(0, 1fr); align-items: end; }
  .prova::before { inset: 3rem 0 4rem 30%; border-radius: 1.5rem; }
  .celular { width: 19rem; }
  .conversa { width: 17rem; margin: 0 0 3rem -1rem; justify-self: start; }
  .prova figcaption { grid-column: 1 / -1; }
  .criar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1.5rem; align-items: end; padding: 1.75rem 2rem 1.5rem; }
  .criar-titulo { grid-column: 1 / -1; font-size: 1.75rem; }
  .criar .nota { grid-column: 1 / 3; grid-row: 3; align-self: center; margin-top: 1rem; }
  .criar .botao-cheio { grid-column: 3; grid-row: 3; }
  .criar-pe { grid-column: 3; grid-row: 4; }
  .criar-pe + .criar-pe { grid-column: 1 / 3; grid-row: 4; text-align: left; margin-top: .6rem; }
  .passos { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: 2rem; row-gap: 1rem; }
  .passo { grid-row: span 2; grid-template-rows: subgrid; }
  .balcao-grade { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-rows: auto 1fr; column-gap: 4rem; display: grid; }
  .balcao h2 { grid-column: 1; }
  .balcao-sub { grid-column: 1; }
  .balcao-lista { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  .perguntas-lista { border-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 3rem; align-items: start; }
  .perguntas details { border-top: 2px solid var(--noite); border-bottom: 0; }
  .mais { grid-column: 1 / -1; }
  .final-grade { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}

/* Animação de assinatura: os itens marcados, a barra do pedido e a mensagem chegando montada. Uma vez, ≈2,2 s, por tempo
   (nada de animation-timeline: não fica parada no meio). Regra de contraste: nada que tem letra muda de opacidade ou de cor.
   Só transform e clip-path (a linha do balão aparece inteira ou não aparece) e o fundo hortelã atrás de letra escura
   (#1b1f24 sobre #fff 16,6:1 e sobre #e6f2ea 14,6:1 em qualquer quadro). Com reduzir movimento, nada disso roda. */
@media (prefers-reduced-motion: no-preference) {
  .cel-produto.escolhido::before { animation: acende .45s var(--sai) both; }
  .cel-produto.escolhido .cel-qtd b { animation: pula .45s var(--sai) both; }
  .cel-produto:nth-child(1)::before, .cel-produto:nth-child(1) .cel-qtd b { animation-delay: .3s; }
  .cel-produto:nth-child(3)::before, .cel-produto:nth-child(3) .cel-qtd b { animation-delay: .6s; }
  .cel-barra { animation: sobe .5s var(--sai) .85s both; }
  .conversa { animation: chega .6s var(--sai) 1.05s both; }
  .balao p { animation: linha .3s var(--sai) both; }
  .balao .l1 { animation-delay: 1.35s; }
  .balao .l2 { animation-delay: 1.55s; }
  .balao .l3 { animation-delay: 1.75s; }
  .etiqueta { animation: cola .45s var(--sai) 1.9s both; }
}
@keyframes acende { from { opacity: 0; } to { opacity: 1; } }
@keyframes pula { 0% { transform: scale(1); } 45% { transform: scale(1.5); } 100% { transform: scale(1); } }
@keyframes sobe { from { transform: translateY(1.2rem) scale(.96); } to { transform: none; } }
@keyframes chega { from { transform: translateY(1.5rem) scale(.94); } to { transform: none; } }
@keyframes linha { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes cola { from { transform: rotate(-14deg) scale(.6); } to { transform: rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

/* Só para gerar o og.png (1200 × 630) pelo script de prints: topo sem o formulário */
html.og .criar, html.og .cabeca .botao-curto, html.og figcaption, html.og .aviso { display: none; }
html.og .topo-grade { grid-template-areas: "texto prova"; }
html.og .topo { padding-top: 1.5rem; }