/* =========================================================
   Portal PED NO WHATS - design system
   Um unico arquivo, sem framework, sem jQuery.
   ========================================================= */

:root {
  /* Marca */
  --verde:        #16a34a;
  --verde-claro:  #22c55e;
  --verde-escuro: #15803d;

  /* Superficies */
  --fundo:        #f6f7f5;
  --superficie:   #ffffff;
  --superficie-2: #f0f2ef;
  --borda:        #e3e6e0;

  /* Texto */
  --texto:        #12140f;
  --texto-suave:  #5c635a;
  --texto-fraco:  #8b9287;

  /* Estados */
  --aberto:       #16a34a;
  --fechado:      #b42318;
  --estrela:      #f59e0b;

  /* Formas */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-full: 999px;

  --sombra-sm: 0 1px 2px rgba(18, 20, 15, .06);
  --sombra-md: 0 4px 16px rgba(18, 20, 15, .08);
  --sombra-lg: 0 16px 48px rgba(18, 20, 15, .12);

  --max: 1200px;
}

/*
 * ---------------------------------------------------------------------------
 * O ESCURO E ESCOLHA DE QUEM OLHA, e nao do aparelho (2026-10-16).
 * ---------------------------------------------------------------------------
 *
 * Aqui havia `@media (prefers-color-scheme: dark)`: o portal seguia o tema do
 * celular, e nao havia como discordar dele. Quem usa o telefone no escuro o
 * dia inteiro abria o site de uma loja em preto, sem botao nenhum para mudar.
 *
 * 🔴 E E O MESMO DESENHO DO CARDAPIO, de proposito - ate a chave: o cardapio
 * guarda a escolha em `localStorage.cnTema`, e o portal mora no MESMO
 * dominio. Entao quem troca para escuro no cardapio da loja encontra o portal
 * escuro, e o contrario tambem. Uma escolha para o site inteiro.
 *
 * O padrao e claro, como la: o aparelho nao decide mais sozinho.
 */
html[data-tema="escuro"] {
  --fundo:        #0e100d;
  --superficie:   #171a15;
  --superficie-2: #1f231d;
  --borda:        #2b3027;
  --texto:        #f2f4f0;
  --texto-suave:  #a8b0a3;
  --texto-fraco:  #737a6e;
  --verde:        #22c55e;
  --sombra-md: 0 4px 16px rgba(0, 0, 0, .4);
  --sombra-lg: 0 16px 48px rgba(0, 0, 0, .55);
}

/* ---------- O botao de sol e lua ---------- */

/*
 * UM BOTAO SO, e o icone diz para onde ele leva: no claro aparece a LUA (o
 * que vem depois do toque), no escuro aparece o SOL. Mostrar o estado atual
 * faria a pessoa clicar para "ligar" o que ja esta ligado.
 */
.btn-tema {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--borda);
  border-radius: var(--r-full);
  background: var(--superficie);
  color: var(--texto-suave);
  cursor: pointer;
  flex: 0 0 auto;
  transition: border-color .15s ease, color .15s ease;
}

.btn-tema:hover { border-color: var(--verde); color: var(--texto); }

.btn-tema .tema-sol { display: none; }
html[data-tema="escuro"] .btn-tema .tema-lua { display: none; }
html[data-tema="escuro"] .btn-tema .tema-sol { display: block; }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.container {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: 20px;
}

/* ---------- Cabecalho ---------- */

.topo {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--fundo) 85%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borda);
}

.topo__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 68px;
}

.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -.02em;
}

/*
 * 🔴 O QUADRADINHO VERDE SAIU DE BAIXO DO SÍMBOLO (2026-10-16).
 *
 * Ele existia porque a marca era um desenho de uma linha só, branco, e
 * precisava de um fundo para ser visto. A logo de verdade **já é a forma** —
 * um balão verde com talher branco dentro —, e pôr um balão verde dentro de
 * um quadrado verde é a logo brigando com a moldura dela mesma.
 *
 * Então aqui sobrou o tamanho, e nada de cor.
 */
.marca__icone {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.marca__icone img { width: 100%; height: 100%; display: block; }

.topo__links {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---------- Botoes ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: var(--r-full);
  font: inherit;
  font-weight: 600;
  font-size: .93rem;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
  white-space: nowrap;
}

.btn:active { transform: translateY(1px); }

.btn--principal {
  background: var(--verde);
  color: #fff;
}
.btn--principal:hover { background: var(--verde-escuro); }

.btn--contorno {
  background: transparent;
  border-color: var(--borda);
  color: var(--texto);
}
.btn--contorno:hover { border-color: var(--texto-fraco); }

.btn--fantasma {
  background: transparent;
  color: var(--texto-suave);
  padding-inline: 12px;
}
.btn--fantasma:hover { color: var(--texto); }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 9vw, 104px) 0 clamp(40px, 6vw, 72px);
  text-align: center;
}

.hero::before {
  content: "";
  position: absolute;
  inset: -40% 50% auto;
  width: 900px;
  height: 900px;
  transform: translateX(-50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--verde) 16%, transparent) 0%, transparent 62%);
  pointer-events: none;
}

.hero > * { position: relative; }

.selo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--borda);
  border-radius: var(--r-full);
  background: var(--superficie);
  font-size: .82rem;
  font-weight: 600;
  color: var(--texto-suave);
  margin-bottom: 22px;
}

.selo__ponto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--verde);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--verde) 22%, transparent);
}

.hero h1 {
  margin: 0 0 16px;
  font-size: clamp(2.1rem, 5.6vw, 3.9rem);
  line-height: 1.06;
  letter-spacing: -.035em;
  font-weight: 800;
}

.hero h1 em {
  font-style: normal;
  background: linear-gradient(120deg, var(--verde-claro), var(--verde-escuro));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero p {
  margin: 0 auto 30px;
  max-width: 620px;
  font-size: clamp(1rem, 2.1vw, 1.16rem);
  color: var(--texto-suave);
}

/* ---------- Busca ---------- */

.busca {
  display: flex;
  gap: 10px;
  max-width: 720px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.busca__campo {
  flex: 1 1 260px;
  position: relative;
  display: flex;
  align-items: center;
}

.busca__campo svg {
  position: absolute;
  left: 16px;
  width: 18px;
  height: 18px;
  color: var(--texto-fraco);
  pointer-events: none;
}

.busca input,
.busca select {
  width: 100%;
  padding: 14px 16px 14px 44px;
  border: 1px solid var(--borda);
  border-radius: var(--r-full);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  font-size: .96rem;
  box-shadow: var(--sombra-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.busca select {
  padding-left: 16px;
  flex: 0 1 180px;
  cursor: pointer;
  appearance: none;
}

.busca input:focus,
.busca select:focus {
  outline: none;
  border-color: var(--verde);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--verde) 14%, transparent);
}

/* ---------- Secoes ---------- */

.secao { padding: clamp(40px, 6vw, 72px) 0; }

.secao__cabeca {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

/*
 * 🔴 A MESMA CLASSE FAZIA DOIS TRABALHOS (2026-10-22).
 *
 * A loja, olhando a seção de planos: *"essa parte parece que tá bugada — sem
 * taxa por pedido, você paga a mensalidade e vende o quanto quiser"*. E
 * parecia mesmo: o título num canto e a frase no outro, separados por meia
 * tela de vazio.
 *
 * O `.secao__cabeca` nasceu para **título + contador**: *"Lojas no PED NO
 * WHATS"* à esquerda, *"12 lojas · limpar filtros"* à direita. Para isso o
 * `space-between` é exatamente o certo.
 *
 * Só que duas seções o usam para **título + SUBTÍTULO** — e subtítulo não é
 * informação de canto: ele explica o título, e o lugar dele é **embaixo**.
 * Jogado à direita, ele parece um dado solto que foi parar ali por engano.
 *
 * 📝 Por isso a variante, e não uma classe nova: as duas compartilham
 * tamanho, cor e espaçamento. O que muda é só a direção.
 */
.secao__cabeca--intro {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
}

.secao__cabeca--intro span { max-width: 62ch; }

.secao__cabeca h2 {
  margin: 0;
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  letter-spacing: -.025em;
  font-weight: 750;
}

.secao__cabeca span {
  color: var(--texto-fraco);
  font-size: .92rem;
  font-variant-numeric: tabular-nums;
}

/* ---------- Grade de lojas ---------- */

.lojas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 18px;
}

.loja {
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r-md);
  padding: 18px;
  box-shadow: var(--sombra-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.loja:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-md);
  border-color: color-mix(in srgb, var(--verde) 35%, var(--borda));
}

.loja--fechada { opacity: .68; }

.loja__topo {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 14px;
}

.loja__logo {
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  border-radius: 14px;
  object-fit: cover;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
}

.loja__logo--vazio {
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 1.1rem;
  color: #fff;
  background: linear-gradient(135deg, var(--verde-claro), var(--verde-escuro));
  border: none;
}

.loja__nome {
  margin: 0;
  font-size: 1.03rem;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.25;
}

.loja__local {
  margin: 2px 0 0;
  font-size: .84rem;
  color: var(--texto-fraco);
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: var(--r-full);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .01em;
}

.status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.status--aberto {
  color: var(--aberto);
  background: color-mix(in srgb, var(--aberto) 12%, transparent);
}

.status--fechado {
  color: var(--fechado);
  background: color-mix(in srgb, var(--fechado) 11%, transparent);
}

.loja__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--r-full);
  background: var(--superficie-2);
  font-size: .78rem;
  font-weight: 600;
  color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
}

.tag--nota { color: var(--estrela); }

.loja__acao { margin-top: auto; }

.loja__acao .btn { width: 100%; }

/* ---------- Estado vazio ---------- */

.vazio {
  grid-column: 1 / -1;
  text-align: center;
  padding: 56px 20px;
  border: 1px dashed var(--borda);
  border-radius: var(--r-lg);
  color: var(--texto-suave);
}

.vazio strong {
  display: block;
  color: var(--texto);
  font-size: 1.08rem;
  margin-bottom: 6px;
}

/* ---------- Recursos ---------- */

.recursos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}

.recurso {
  padding: 24px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r-md);
}

.recurso__icone {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: color-mix(in srgb, var(--verde) 13%, transparent);
  color: var(--verde);
  margin-bottom: 14px;

  /* os icones passaram a ser Font Awesome (2026-10-16): o SVG solto nao
     escalava, e a biblioteca ja esta carregada por causa dos ramos */
  font-size: 1.05rem;
}

.recurso h3 {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.015em;
}

.recurso p {
  margin: 0;
  font-size: .9rem;
  color: var(--texto-suave);
}

/* ---------- Chamada final ---------- */

.cta {
  text-align: center;
  padding: clamp(44px, 7vw, 76px) 24px;
  border-radius: var(--r-lg);
  background: linear-gradient(140deg, var(--verde-escuro), var(--verde-claro));
  color: #fff;
}

.cta h2 {
  margin: 0 0 10px;
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  letter-spacing: -.03em;
  font-weight: 800;
}

.cta p {
  margin: 0 auto 26px;
  max-width: 480px;
  opacity: .92;
}

.cta .btn {
  background: #fff;
  color: var(--verde-escuro);
  padding-inline: 30px;
}
.cta .btn:hover { background: #f0fdf4; }

/*
 * 🔴 O TEXTO MIÚDO DENTRO DA CAIXA VERDE SUMIA (2026-10-16).
 *
 * A loja: *"essa parte ficou apagado no verde: Já é parceiro? Entrar no
 * painel do vendedor"*. Ela está certa — e a causa é a herança.
 *
 * O `.cad-nota` é cinza-claro (`--texto-fraco`), que foi escolhido para
 * texto de apoio sobre fundo BRANCO. Dentro do `.cta`, que é um gradiente
 * verde, cinza-claro sobre verde é quase a mesma luminosidade: o texto
 * existe e não se lê.
 *
 * Aqui ele volta a ser branco, com opacidade em vez de cor — assim ele
 * continua sendo apoio, mas legível. E o link ganha sublinhado: sobre o
 * verde não dá para distinguir link por cor nenhuma.
 */
.cta .cad-nota,
.cta small { color: #fff; opacity: .88; }

.cta a:not(.btn) {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}

.cta a:not(.btn):hover { opacity: .85; }

/* ---------- Rodape ---------- */

.rodape {
  border-top: 1px solid var(--borda);
  margin-top: clamp(40px, 6vw, 72px);
  padding: 32px 0;
  color: var(--texto-fraco);
  font-size: .87rem;
}

.rodape__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

/* ---------- A faixa de categorias (os ramos) ---------- */

/*
 * 🔴 ELA ROLA DE LADO NO CELULAR, e nao quebra em varias linhas.
 *
 * Sao ate 22 categorias. Quebrando, elas empurram as LOJAS para fora da
 * primeira tela - e a primeira tela e o que decide se a pessoa fica. Rolando,
 * ocupam uma faixa de altura fixa, e o dedo arrasta como em qualquer app.
 *
 * O `scroll-snap` faz cada item parar inteiro: meia categoria cortada na
 * borda parece defeito.
 */
.ramos {
  border-bottom: 1px solid var(--borda);
  background: var(--superficie);
}

/*
 * 🔴 O `padding` CURTO APAGAVA A MARGEM DA PAGINA (2026-10-16).
 *
 * Esta faixa tambem e `.container`, que da 20px dos dois lados - e e o que
 * alinha TODO o resto do portal. Mas `padding: 14px 0` e a forma curta: ela
 * reescreve os quatro lados, e os 20px do container viravam zero. No celular
 * a primeira categoria encostava na borda da tela enquanto o titulo logo
 * abaixo comecava 20px adentro.
 *
 * `padding-block` mexe so em cima e embaixo, e deixa a margem do container em
 * paz. E e por isso que ele existe.
 */
.ramos__fila {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-block: 14px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.ramos__fila::-webkit-scrollbar { display: none; }

.ramo {
  scroll-snap-align: start;
  flex: 0 0 auto;

  display: flex;
  align-items: center;
  gap: 8px;

  padding: 9px 14px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: var(--superficie);

  color: var(--texto-suave);
  font-size: .86rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;

  transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.ramo:hover { border-color: var(--verde); color: var(--texto); }

.ramo--on {
  background: var(--verde);
  border-color: var(--verde);
  color: #fff;
}

.ramo__icone { font-size: 1rem; opacity: .9; }

/* a contagem e a promessa do botao: "Pizzaria 3" diz o que vem depois do toque */
.ramo__conta {
  font-size: .72rem;
  font-weight: 700;
  opacity: .7;
}

.ramo--on .ramo__conta { opacity: .85; }

/* ---------- Os produtos encontrados ---------- */

/*
 * Eles vem ANTES das lojas quando ha busca: quem digita "coxinha" procura
 * coxinha, e nao uma loja com essa palavra no nome.
 */
.secao--produtos { padding-bottom: 0; }

.grade-prod {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}

.prod {
  display: flex;
  gap: 12px;
  align-items: center;

  padding: 10px;
  border: 1px solid var(--borda);
  border-radius: 14px;
  background: var(--superficie);

  text-decoration: none;
  color: inherit;

  transition: border-color .15s ease, transform .15s ease;
}

.prod:hover { border-color: var(--verde); transform: translateY(-2px); }

.prod__foto {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--superficie-2);

  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--texto-fraco);
  font-size: 1.3rem;
}

/*
 * 🔴 `contain`, E NAO `cover`.
 *
 * A foto do produto ja e gravada dentro de um quadrado (ver o `db/produto.php`
 * da loja): o `cover` pegaria o miolo desse quadrado e jogaria fora as bordas
 * - exatamente o corte que a loja reclamou nos quadrados do caixa.
 */
.prod__foto img { width: 100%; height: 100%; object-fit: contain; }

.prod__txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.prod__nome {
  font-size: .92rem;
  line-height: 1.25;
  /* duas linhas bastam: nome de prato que passa disso vira parede de texto */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.prod__loja  { font-size: .78rem; color: var(--texto-fraco); }
.prod__preco { font-size: .88rem; font-weight: 700; color: var(--verde-escuro); }

/* ---------- A pagina da loja ---------- */

.lj-capa {
  padding: clamp(22px, 4vw, 40px) 0;
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
}

.lj-capa__interno {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.lj-logo {
  flex: 0 0 92px;
  width: 92px;
  height: 92px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--superficie-2);
  border: 1px solid var(--borda);

  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--texto-fraco);
}

/* `contain`: a logo e arte com margem propria, e `cover` comeria as bordas */
.lj-logo img { width: 100%; height: 100%; object-fit: contain; }

.lj-cabeca { flex: 1 1 260px; min-width: 0; }

.lj-cabeca h1 {
  margin: 0 0 8px;
  font-size: clamp(1.35rem, 3.4vw, 1.9rem);
  letter-spacing: -.02em;
}

.lj-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: 0 0 8px;
  font-size: .88rem;
  color: var(--texto-suave);
}

.lj-estado {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--superficie-2);
  color: var(--texto-fraco);
  font-weight: 700;
  font-size: .78rem;
}

.lj-estado--on {
  background: color-mix(in srgb, var(--aberto) 14%, transparent);
  color: var(--verde-escuro);
}

.lj-nota { font-weight: 700; color: #b26b00; }
.lj-nota small { font-weight: 400; color: var(--texto-fraco); }

.lj-end    { margin: 0 0 14px; font-size: .9rem; color: var(--texto-suave); }
.lj-jeitos { margin: 10px 0 0; font-size: .84rem; color: var(--texto-fraco); }

.lj-acoes { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Horario e avaliacoes, lado a lado ---------- */

.lj-duas {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 48px);
  align-items: start;
}

.lj-horario { width: 100%; border-collapse: collapse; font-size: .9rem; }

.lj-horario th,
.lj-horario td {
  padding: 7px 0;
  border-bottom: 1px solid var(--borda);
  text-align: left;
  font-weight: 400;
  color: var(--texto-suave);
}

.lj-horario th { font-weight: 600; color: var(--texto); }
.lj-horario td { text-align: right; }

/* o dia de hoje e o unico que alguem procura de verdade */
.lj-hoje th, .lj-hoje td { color: var(--verde-escuro); font-weight: 700; }

.lj-sem { color: var(--texto-fraco); font-size: .9rem; }

.av {
  padding: 14px 0;
  border-bottom: 1px solid var(--borda);
}

.av:last-child { border-bottom: 0; }

.av__cab {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.av__cab strong { font-size: .92rem; }
.av__estrelas   { color: #f5a623; font-size: .85rem; letter-spacing: 1px; }

.av p { margin: 0; font-size: .92rem; color: var(--texto-suave); }

/* a resposta da loja fica recuada: ela e reacao, e nao outra avaliacao */
.av__resposta {
  margin-top: 8px !important;
  padding-left: 12px;
  border-left: 3px solid var(--borda);
  font-size: .88rem !important;
  color: var(--texto-fraco) !important;
}

/* ---------- Responsivo ---------- */

@media (max-width: 620px) {
  .topo__links .btn--fantasma { display: none; }
  .busca select { flex: 1 1 100%; }
  .lojas { grid-template-columns: 1fr; }
  .grade-prod { grid-template-columns: 1fr; }
  .lj-duas    { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- O cadastro de loja, e as páginas de texto ---------- */

/*
 * A MESMA FOLHA SERVE AS TRÊS PORTAS do cadastro (portal, master e vendedor),
 * porque a tela é uma só — ver `funcoes/cadastro_de_loja_tela.php`.
 *
 * 🔴 E A LARGURA É CURTA DE PROPÓSITO: 560px. Formulário largo faz o olho
 * voltar do fim de uma linha para o começo da outra procurando o próximo
 * campo, e num cadastro isso vira campo pulado. A exceção são os pares que
 * se leem juntos (nome + celular), e eles só ficam lado a lado onde cabe.
 */
.cad { max-width: 560px; }

/*
 * A CAIXA DO CADASTRO (2026-10-17).
 *
 * 🔴 Sem ela, num monitor largo, os campos ficavam soltos sobre uma área
 * clara de 1400px — e o olho lê isso como página que não carregou direito.
 * A borda é o que diz onde o formulário começa e onde termina.
 *
 * NO CELULAR ELA SOME: ali a tela inteira já é a caixa, e uma moldura dentro
 * de 375px só rouba largura dos campos — que são o que a pessoa veio usar.
 */
.cad-cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-md);
  padding: clamp(24px, 4vw, 38px);
}

@media (max-width: 560px) {
  .cad-cartao {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
  }
}

.cad h1 {
  font-size: clamp(1.5rem, 4vw, 2rem);
  line-height: 1.15;
  margin: 0 0 10px;
}

.cad-sub { color: var(--texto-suave); margin: 0 0 24px; }

.cad-passos {
  display: flex;
  gap: 10px;
  margin-bottom: 22px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--texto-fraco);
}

.cad-passo {
  padding: 5px 12px;
  border: 1px solid var(--borda);
  border-radius: var(--r-full);
}

.cad-passo--on { background: var(--verde); border-color: var(--verde); color: #fff; }
.cad-passo--ok { color: var(--verde); border-color: var(--verde); }

/* o motivo volta POR ESCRITO, e não num alert() que some */
.cad-erro {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  margin-bottom: 20px;
  border: 1px solid color-mix(in srgb, var(--fechado) 45%, transparent);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--fechado) 12%, transparent);
  color: var(--texto);
  font-size: .9rem;
}

.cad-forma { display: grid; gap: 18px; }

.cad-duas { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }

@media (max-width: 560px) {
  .cad-duas { grid-template-columns: 1fr; }
}

.cad-campo { display: grid; gap: 6px; }

.cad-campo > span {
  font-size: .82rem;
  font-weight: 700;
  color: var(--texto-suave);
}

.cad-campo input,
.cad-campo select {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--borda);
  border-radius: var(--r-sm);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  font-size: .95rem;
}

.cad-campo input:focus,
.cad-campo select:focus {
  outline: none;
  border-color: var(--verde);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--verde) 22%, transparent);
}

/* a ajuda fica EMBAIXO do campo: em cima, ela empurra o rótulo para longe
   do que ele nomeia */
.cad-campo small { font-size: .78rem; color: var(--texto-fraco); }

.cad-url { color: var(--verde); }

.cad-aceite {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: .86rem;
  color: var(--texto-suave);
  line-height: 1.45;
}

.cad-aceite input { margin-top: 3px; flex: 0 0 auto; }
.cad-aceite a { color: var(--verde); text-decoration: underline; }

.cad-acoes { display: flex; flex-wrap: wrap; gap: 10px; }

.cad-nota { font-size: .82rem; color: var(--texto-fraco); margin: 0; }

.cad-quem {
  font-size: .78rem;
  color: var(--texto-fraco);
  display: none;
}

@media (min-width: 720px) { .cad-quem { display: inline; } }

/* ---------- O fim do cadastro ---------- */

.cad-fim { text-align: center; padding: 20px 0 40px; }

.cad-fim__icone {
  display: inline-grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 18px;
  border-radius: var(--r-full);
  background: var(--verde);
  color: #fff;
  font-size: 1.5rem;
}

.cad-fim__icone--pausa { background: var(--superficie-2); color: var(--texto-suave); }

.cad-fim__url a { color: var(--verde); }

.cad-fim .cad-acoes { justify-content: center; margin: 22px 0 18px; }

/*
 * O AVISO DE QUE A MENSAGEM SAIU — ver a tela de sucesso do cadastro.
 *
 * 📝 Fundo de cor, e nao texto solto: ele e a unica linha da tela que
 * fala de uma coisa que ja aconteceu no aparelho da pessoa, e tem de se
 * distinguir dos dois enderecos que estao logo abaixo para ela guardar.
 */
/*
 * 🔴 `align-items: flex-start`, E NÃO `baseline` (2026-10-22).
 *
 * Com `baseline`, o ícone se alinha pela primeira linha do texto - e numa
 * frase de três linhas ele ficava no lugar certo por acaso. Trocando o texto,
 * desalinhava. `flex-start` prende o ícone no topo, que é onde ele deve estar
 * em qualquer frase.
 *
 * 📝 E `flex-shrink: 0` no ícone: sem isso o navegador espreme o ícone
 * antes de quebrar o texto, e o WhatsApp vira um traço verde.
 */
.cad-fim__zap,
.cad-fim__passo {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 auto 18px;
  padding: 12px 16px;
  max-width: 460px;
  text-align: left;
  border-radius: var(--r-md);
  font-size: .92rem;
  line-height: 1.5;
}

.cad-fim__zap {
  background: color-mix(in srgb, var(--verde) 12%, transparent);
  color: var(--texto);
}

.cad-fim__passo {
  background: var(--superficie-2);
  color: var(--texto-suave);
}

.cad-fim__zap .fa,
.cad-fim__passo .fa {
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 1.05rem;
}

.cad-fim__zap .fa   { color: var(--verde); }
.cad-fim__passo .fa { color: var(--texto-fraco); }

/*
 * 🔴 E OS DOIS ENDEREÇOS VIRARAM CAIXA, e não linha de texto.
 *
 * Eles são a única coisa desta tela que a pessoa precisa **guardar** - e
 * estavam no mesmo peso de tudo o mais, no meio de parágrafos. Numa caixa com
 * fundo próprio eles se leem de longe, e se selecionam com um toque.
 */
.cad-fim__url {
  margin: 4px auto 18px;
  padding: 12px 16px;
  max-width: 460px;
  border: 1px solid var(--borda);
  border-radius: var(--r-md);
  background: var(--superficie-2);
  font-size: 1rem;
  font-weight: 700;
  word-break: break-all;
}

/* ---------- Política e Termos ---------- */

/*
 * 🔴 O QUE HAVIA AQUI ERA `div { width:50%; background:#ccc; text-align:center }`.
 *
 * Texto jurídico CENTRALIZADO, em cinza, ocupando metade da tela: no celular
 * sobrava uma coluna de palavras que ninguém lê — e são justamente as duas
 * páginas que a pessoa tem de marcar "li e concordo".
 */
.texto-legal { max-width: 760px; }

.texto-legal h2 {
  font-size: 1.15rem;
  margin: 32px 0 10px;
}

.texto-legal h3 {
  font-size: 1rem;
  margin: 24px 0 8px;
}

.texto-legal p,
.texto-legal li {
  color: var(--texto-suave);
  font-size: .95rem;
  line-height: 1.7;
}

.texto-legal ol, .texto-legal ul { padding-left: 22px; }
.texto-legal a { color: var(--verde); text-decoration: underline; }

/* ---------- A página de parceiros ---------- */

/*
 * Ela fala com uma terceira pessoa: nem quem vai pedir comida, nem quem tem
 * loja — alguém que conhece os donos de restaurante da cidade e não sabia
 * que isso vale dinheiro. Por isso tem cartão próprio: o `.prod` é da
 * vitrine, feito para foto e preço.
 */
.pgrade {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.pcard {
  padding: 22px;
  border: 1px solid var(--borda);
  border-radius: var(--r-md);
  background: var(--superficie);
}

.pcard h3 {
  font-size: 1.02rem;
  margin: 0 0 8px;
}

.pcard p {
  margin: 0;
  color: var(--texto-suave);
  font-size: .92rem;
  line-height: 1.6;
}

.pcard code {
  font-size: .82rem;
  word-break: break-all;
  color: var(--verde);
}

/* o número do passo: é ele que diz que a ordem importa */
.pcard__num {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: 12px;
  border-radius: var(--r-full);
  background: var(--verde);
  color: #fff;
  font-size: .85rem;
  font-weight: 800;
}

/*
 * 🔴 A PÁGINA NÃO LEVA BORDA EM VOLTA — ELA LEVA RITMO.
 *
 * A loja perguntou se as telas do portal e de parceiros não deviam ter borda
 * "em vez de vazado assim". A resposta honesta é: borda em volta da PÁGINA
 * não é o que falta — nenhum marketplace tem, e uma moldura dessas encolhe o
 * site dentro de um quadro no monitor grande.
 *
 * O que faz uma página parecer construída é a divisão entre as partes: uma
 * faixa clara, a seguinte um tom acima, e um fio separando. O olho encontra
 * onde um assunto termina e o outro começa — que é o que o "vazado"
 * escondia.
 *
 * As CAIXAS continuam onde elas significam alguma coisa: no cartão da loja,
 * no cartão do prato, no cartão do passo e no formulário. Aí sim a borda diz
 * "isto aqui é uma unidade".
 */
.secao--alt {
  background: var(--superficie-2);
  border-top: 1px solid var(--borda);
  border-bottom: 1px solid var(--borda);
}

.lista-limpa {
  margin: 0;
  padding-left: 20px;
  color: var(--texto-suave);
  font-size: .95rem;
  line-height: 1.9;
}

/* os tres links do rodape: achados por quem rolou a pagina inteira */
.rodape__links { display: flex; gap: 16px; flex-wrap: wrap; }
.rodape__links a { color: var(--texto-suave); }
.rodape__links a:hover { color: var(--verde); }

/* ---------- A faixa que chama parceiro, na home ---------- */

/*
 * 🔴 ELA E DISCRETA DE PROPOSITO, e isso nao e timidez.
 *
 * Logo acima dela esta o `.cta` - a caixa verde "Coloque a sua loja no ar",
 * que e o botao que paga a conta. Duas caixas fortes seguidas disputam a
 * mesma atencao e as duas perdem. Esta e uma faixa de borda: quem esta ali
 * para abrir loja nem repara, e quem NAO tem loja - que e o publico dela -
 * le a pergunta e para.
 */
.secao--parceiro { padding-top: 0; }

.faixa-parceiro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;

  padding: 22px clamp(20px, 4vw, 28px);
  border: 1px solid var(--borda);
  border-radius: var(--r-md);
  background: var(--superficie);
}

.faixa-parceiro h2 {
  font-size: 1.1rem;
  margin: 0 0 4px;
}

.faixa-parceiro p {
  margin: 0;
  color: var(--texto-suave);
  font-size: .92rem;
  max-width: 54ch;
}

/* no celular o botao vira largura inteira: meio botao ao lado de duas linhas
   de texto e um alvo de clique espremido */
@media (max-width: 560px) {
  .faixa-parceiro .btn { width: 100%; }
}

/* ---------- As fotos (todas opcionais) ---------- */

/*
 * 🔴 TODA IMAGEM DAQUI TEM `width` E `height` NO HTML, e isso não é enfeite:
 * sem eles o navegador não sabe o espaço que a foto vai ocupar e desenha a
 * página sem ela — quando a foto chega, o conteúdo PULA para baixo. No
 * celular, em 4G, o pulo acontece bem na hora em que a pessoa foi tocar num
 * botão.
 *
 * O `aspect-ratio` aqui é a mesma promessa, do lado do CSS.
 *
 * 🔴 E É POR ISSO QUE TODA REGRA ABAIXO TEM `height: auto` — descoberto com
 * as fotos já no ar, em 2026-10-16: a primeira tela do site vinha com 700px
 * de foto, e a página de parceiros com 1000px.
 *
 * O `height="700"` do HTML não é só uma dica para o navegador: ele vira um
 * `height` de verdade, em pixels. E o `aspect-ratio` **só funciona quando uma
 * das duas medidas é `auto`** — com largura 100% e altura 700 fixa não sobra
 * nada para ele calcular, e ele é ignorado em silêncio.
 *
 * São as duas coisas juntas: o atributo no HTML (que reserva o espaço antes
 * de a foto chegar, e evita o pulo) e o `height: auto` aqui (que devolve o
 * controle ao `aspect-ratio`). Uma sem a outra não serve.
 */

.hero__foto {
  margin: clamp(28px, 5vw, 44px) 0 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--borda);
  background: var(--superficie-2);
}

.hero__foto img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  display: block;
}

/*
 * NO CELULAR A FOTO FICA MAIS ALTA, e não mais larga.
 *
 * 16/7 em 375px de tela dá uma tira de 164px — a cena vira um friso, e não
 * se vê mais o que está acontecendo nela. Com 4/3 o `object-fit: cover`
 * corta as laterais e mantém o miolo, que é onde estão as pessoas.
 */
@media (max-width: 560px) {
  .hero__foto img { aspect-ratio: 4 / 3; }
}

/* o herói de duas colunas, na página de parceiros */
.hero--duas { text-align: left; }

.hero__duas {
  display: grid;
  gap: clamp(24px, 5vw, 48px);
  align-items: center;
  grid-template-columns: 1fr;
}

/*
 * 🔴 860px, E NÃO 900: visto no ar, uma janela de 892px — notebook comum com
 * a janela não maximizada — ainda empilhava foto e texto, com um vão enorme
 * de cada lado. O ponto de corte tem de ser o tamanho em que as duas colunas
 * CABEM, e não um número redondo.
 */
@media (min-width: 860px) {
  .hero__duas { grid-template-columns: 1.1fr .9fr; }
}

.hero__lado {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--borda);
}

.hero__lado img {
  width: 100%;
  height: auto;
  aspect-ratio: 7 / 5;
  object-fit: cover;
  display: block;
}

/* a foto no alto de cada cartão de passo */
.pcard__foto {
  width: calc(100% + 44px);
  height: auto;
  margin: -22px -22px 18px;
  max-width: none;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-md) var(--r-md) 0 0;
}

/* a tela vazia da busca */
.vazio__foto {
  width: min(220px, 60%);
  height: auto;
  margin: 0 auto 18px;
  border-radius: var(--r-md);
  opacity: .9;
}

/* ---------- O cadastro em duas colunas ---------- */

/*
 * 🔴 O FORMULÁRIO SOZINHO NO MEIO DA TELA PARECIA SOBRA DE PÁGINA.
 *
 * A loja: *"ainda está feio, está só no meio"*. Num monitor de 1400px, um
 * formulário de 560px centralizado não ocupa nada — e o vazio dos dois lados
 * é maior do que o conteúdo.
 *
 * O desenho é o mesmo da tela de entrar do painel: de um lado o que a pessoa
 * está ganhando, do outro o que ela preenche. O painel colorido não é
 * enfeite: é o que dá ao formulário um tamanho que faz sentido.
 */
.cad-secao { padding-top: clamp(28px, 4vw, 48px); }

/*
 * 🔴 UM SELETOR SÓ. Esta regra já foi escrita como `.cad .cad-duas, .cad-duas`
 * — e a primeira metade (0,2,0) vencia a regra de duas colunas lá embaixo, que
 * é `.cad-duas` (0,1,0) dentro de um `@media`. Media query NÃO soma
 * especificidade: a tela ficava numa coluna só em qualquer largura, e o painel
 * colorido aparecia em cima do formulário em vez de ao lado.
 */
.cad-duas {
  display: grid;
  gap: clamp(20px, 3vw, 36px);
  grid-template-columns: 1fr;
  align-items: start;
}

/* o `.cad` limita em 560px para o formulário respirar; com o painel do lado,
   a página inteira pode usar a largura que tem */
@media (min-width: 900px) {
  .cad { max-width: var(--max); }
  .cad-duas { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1200px) {
  .cad-duas { grid-template-columns: 1.05fr .95fr; }
}

.cad-lado {
  display: none;
  border-radius: var(--r-lg);
  padding: clamp(28px, 3.5vw, 48px);
  background: linear-gradient(145deg, var(--verde-escuro), #0f3f8f);
  color: #fff;
  min-height: 100%;
}

/*
 * NO CELULAR O PAINEL SOME, e isso é a regra e não um esquecimento: ali o
 * formulário é a tela inteira, e tudo o que vier antes dele é rolagem entre
 * a pessoa e o campo que ela veio preencher.
 */
@media (min-width: 900px) { .cad-lado { display: block; } }

.cad-lado h2 {
  margin: 0 0 12px;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.15;
  letter-spacing: -.02em;
}

.cad-lado p {
  margin: 0 0 22px;
  opacity: .92;
  font-size: .95rem;
  line-height: 1.6;
  max-width: 42ch;
}

.cad-lado__itens {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 12px;
}

.cad-lado__itens li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: .92rem;
  line-height: 1.45;
}

.cad-lado__itens svg { flex: 0 0 auto; margin-top: 2px; opacity: .9; }

.cad-lado__nota {
  margin: 0;
  font-size: .82rem;
  opacity: .75;
}

/* dentro das duas colunas a caixa não precisa de largura máxima própria */
.cad-duas .cad-cartao { max-width: 620px; }

/* =====================================================================
   OS PLANOS                                              2026-10-19

   A loja: *"coloca os planos na pagina principal do portal e no cadastro
   da nova loja"*. Eles ja existiam no /master; quem chegava aqui lia a
   lista de recursos e ficava com a pergunta do preco na cabeca.

   A faixa vive entre os recursos e o "Crie sua loja", que e onde a
   pergunta nasce.
   ===================================================================== */

/*
 * 🔴 OS CARTÕES TÊM TETO DE LARGURA, E A FILEIRA SE CENTRALIZA
 * (2026-10-22).
 *
 * Era `minmax(240px, 1fr)`: com quatro planos cada cartão ficava com um quarto
 * da tela, e estava bom. Com **dois**, cada um esticaria para metade de uma
 * tela larga — seiscentos pixels de cartão com sete linhas de texto no meio,
 * e um botão perdido lá embaixo.
 *
 * 📝 Com `minmax(240px, 320px)` o cartão nunca passa de 320, e o
 * `justify-content: center` junta a fileira no meio em vez de deixar os dois
 * nas pontas. Serve para dois, três ou cinco — e é por isso que a regra não
 * pergunta quantos são: contar cartão em CSS não dá, e a próxima mudança de
 * plano quebraria a conta.
 */
/* 📝 o "e mais N" não é um recurso: é a conta do que não coube */
.plano__itens-mais { color: var(--texto-fraco); font-style: italic; }
.plano__itens-mais .fa { color: var(--texto-fraco) !important; }

.planos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 320px));
  justify-content: center;
  gap: 16px;
  align-items: stretch;
}

/*
   🔴 `flex` E NAO BLOCO, e o motivo e o mesmo que ja mordeu os cartoes do
   cardapio nesta semana: a grade emparelha a altura dos cartoes, e um
   bloco deixa a sobra toda embaixo do ultimo elemento. O botao de cada
   plano ficaria numa altura diferente conforme o numero de recursos da
   lista - tres botoes em tres alturas, lado a lado.

   Com a coluna e o `margin-top: auto` do botao, a sobra fica ENTRE a
   lista e o botao, e os tres botoes se alinham no pe.
*/
.plano {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 24px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r-md);
}

.plano--destaque {
  border-color: var(--verde);
  box-shadow: 0 0 0 1px var(--verde);
}

.plano__selo {
  position: absolute;
  top: -11px; left: 24px;
  background: var(--verde); color: #fff;
  font-size: 11.5px; font-weight: 700;
  padding: 3px 10px; border-radius: 999px;
}

.plano__nome { margin: 0 0 4px; font-size: 18px; }

.plano__desc {
  margin: 0 0 14px;
  font-size: 13.5px; color: var(--texto-suave);
}

.plano__preco {
  margin: 0 0 16px;
  font-size: 30px; font-weight: 800; line-height: 1.1;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}

.plano__moeda { font-size: 16px; font-weight: 700; margin-right: 2px; }

.plano__preco small {
  display: block;
  font-size: 12.5px; font-weight: 600;
  color: var(--texto-fraco);
  margin-top: 2px;
}

/*
 * 🔴 "Tudo do Essencial, e mais:" (2026-10-20).
 *
 * E a linha que faz a escada ser lida como escada. Sem ela, o cartao de cima
 * parece ter MENOS recursos que o de baixo - porque mostra so o que
 * acrescenta -, e a pessoa conclui que esta pagando mais por menos.
 */
.plano__herda {
  margin: 0 0 9px;
  font-size: 13px;
  color: var(--texto-fraco);
}

.plano__herda b { color: var(--texto); font-weight: 700; }

.plano__itens {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
  font-size: 13.5px;
  color: var(--texto-suave);
}

.plano__itens li { display: flex; align-items: start; gap: 8px; }
.plano__itens i  { color: var(--verde); margin-top: 3px; flex: none; }

/* o `auto` empurra o botao para o pe: ver a nota do `.plano` */
.plano__btn { margin-top: auto; text-align: center; justify-content: center; }

.planos__nota {
  margin: 18px 0 0;
  text-align: center;
  font-size: 13px; color: var(--texto-fraco);
}