/* Direita Apoia Direita: estilos do catálogo (base.css traz as variáveis e componentes). */
:root { --x-green: #007236; --x-yellow: #ffd400; --x-blue: #0b3a8c; --x-gold: #9a6b00; --x-slate: #4f6478; --x-grey: #6e6e73; }
html, body { margin: 0; }
body { min-height: 100vh; min-height: 100dvh; }
[hidden] { display: none !important; }

/* Estrutura: celular = app em tela cheia; 900px+ = modo site (classe .x-site). */
.x-stage { padding: 0; }
.x-phone { position: relative; width: 100%; max-width: 640px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; background: var(--fill-primary-on); display: flex; flex-direction: column; }
.x-scr { flex: 1; padding: 20px 16px 24px; display: none; }
.x-scr.on { display: block; }
.x-flag { height: 6px; background: linear-gradient(90deg, var(--x-green) 0 40%, var(--x-yellow) 40% 70%, var(--x-blue) 70%); flex: none; }
.x-logo { display: inline-flex; align-items: center; gap: 8px; font: var(--weight-bold) 28px/1 var(--sans); color: var(--x-blue); letter-spacing: -0.02em; }
.x-seal { width: 30px; height: 30px; border-radius: 50%; background: var(--x-green); color: #fff; display: grid; place-items: center; font-size: 16px; box-shadow: 0 0 0 3px var(--x-yellow); }
#welcome.on { display: flex; flex-direction: column; justify-content: center; gap: 12px; text-align: center; min-height: 70vh; }
.x-big { font: var(--type-heading); margin: 0; }
.x-sub { font: var(--type-small); color: var(--text-secondary); margin: 0 0 16px; }
.x-btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); width: 100%; border-radius: var(--r-pill); border: 1px solid var(--stroke-primary); background: var(--fill-primary-on); color: var(--text-primary); font: var(--type-label); cursor: pointer; padding: 0 16px; text-decoration: none; box-sizing: border-box; }
.x-btn--green { background: var(--x-green); border-color: var(--x-green); color: #fff; }
.x-btn--blue { background: var(--x-blue); border-color: var(--x-blue); color: #fff; }
.x-btn:disabled { opacity: 0.4; cursor: default; }
.x-row { display: flex; gap: 8px; flex-wrap: wrap; }
.x-row > * { flex: 1 1 0; min-width: 0; }
.x-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.x-top .x-logo { font-size: 17px; gap: 6px; }
.x-sels { display: flex; gap: 6px; min-width: 0; }
.x-sels select { max-width: 150px; }
/* Autocomplete de cidades (lista oficial do IBGE em cidades.json) */
.x-ac { position: relative; min-width: 0; }
.x-sels .x-ac { flex: 0 1 150px; }
.x-acin { width: 100%; box-sizing: border-box; background: var(--fill-primary-on); -webkit-appearance: none; appearance: none; text-overflow: ellipsis; }
.x-acin::placeholder { color: var(--text-primary); opacity: .85; }
.x-acl { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; min-width: 240px; max-width: min(360px, 92vw); max-height: 320px; overflow-y: auto; padding: 4px; box-sizing: border-box; border-radius: var(--r-m); border: 1px solid var(--stroke-primary); background: var(--fill-primary-on); box-shadow: 0 8px 24px rgb(0 0 0 / .14); }
.x-sels .x-acl { left: auto; right: 0; }
.x-aco { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border-radius: var(--r-s); font: var(--type-body); color: var(--text-primary); cursor: pointer; }
.x-aco[aria-selected="true"], .x-aco:hover { background: var(--fill-tertiary); }
.x-aco small { margin-left: auto; font: var(--type-caption); color: var(--text-secondary); white-space: nowrap; }
.x-acn { padding: 10px; font: var(--type-small); color: var(--text-secondary); }
.x-input[aria-invalid="true"] { border-color: light-dark(#b00020, #ff6b6b); }
.x-input:disabled { opacity: .6; }
.x-input { width: 100%; box-sizing: border-box; min-height: var(--tap); border-radius: var(--r-s); border: 1px solid var(--stroke-primary); background: var(--fill-tertiary); color: var(--text-primary); font: var(--type-body); padding: 0 12px; }
input[type="file"].x-input { padding: 10px 12px; }
.x-chips { display: flex; gap: 6px; overflow-x: auto; padding: 10px 0; scrollbar-width: none; }
.x-chip { flex: none; min-height: var(--tap); padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--stroke-primary); background: none; color: var(--text-primary); font: var(--type-tag); cursor: pointer; }
.x-chip[aria-pressed="true"] { background: var(--x-blue); border-color: var(--x-blue); color: #fff; }
select.x-chip { background: var(--fill-primary-on); }
.x-count { font: var(--type-caption); color: var(--text-secondary); margin: 4px 0 8px; }
.x-card { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; padding: 12px; margin-bottom: 8px; border: 0; border-radius: var(--r-m); background: var(--fill-tertiary); color: var(--text-primary); cursor: pointer; text-decoration: none; box-sizing: border-box; }
.x-av { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font: var(--type-label); color: #fff; background: var(--x-blue); object-fit: cover; }
.x-card b { display: block; font: var(--type-body-strong); }
.x-meta { display: block; font: var(--type-caption); color: var(--text-secondary); }
.x-tag { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: var(--r-pill); border: 1px solid var(--stroke-primary); font: var(--type-tag); color: var(--text-primary); }
.x-tag--cup { background: light-dark(#fff4c2, #3a2f00); border-color: light-dark(#e0c25a, #8a6d00); }
.x-dist { font-weight: var(--weight-medium); color: light-dark(var(--x-green), #3ddc84); }
.x-cup { margin: 16px 0 0; padding: 16px; border-radius: var(--r-m); border: 2px dashed light-dark(#c9a227, #b8901a); background: light-dark(#fff8d6, #2e2600); text-align: center; }
.x-cup p { margin: 0; }
.x-cup__h { font: var(--type-label); }
.x-cup__o { font: var(--type-heading); margin: 6px 0 !important; }
.x-cup__code { display: inline-block; font: var(--weight-bold) 20px/1.2 var(--mono, monospace); letter-spacing: 0.08em; padding: 4px 12px; border-radius: var(--r-s); background: var(--fill-primary-on); border: 1px solid light-dark(#e0c25a, #8a6d00); margin: 4px 0 8px !important; }
.x-cup__n { font: var(--type-caption); color: var(--text-secondary); }
.x-loc { display: flex; align-items: center; gap: 6px; overflow-x: auto; padding: 10px 0 0; scrollbar-width: none; }
.x-loc span { flex: none; font: var(--type-caption); color: var(--text-secondary); }
.x-lvl { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: var(--r-pill); font: var(--type-tag); color: var(--x-yellow); background: #005a2b; box-shadow: inset 0 0 0 1.5px var(--x-yellow); }
.x-link { display: block; margin: 16px auto 0; min-height: var(--tap); border: 0; background: none; color: var(--text-secondary); font: var(--type-caption); text-decoration: underline; cursor: pointer; }
.x-back { min-height: var(--tap); border: 0; background: none; color: var(--x-blue); font: var(--type-label); cursor: pointer; padding: 0; }
.x-head { text-align: center; padding: 8px 0 16px; }
.x-head .x-av { width: 88px; height: 88px; margin: 0 auto 8px; font: var(--type-heading); }
.x-h { font: var(--type-label); margin: 20px 0 8px; }
.x-msg { font: var(--type-body); margin: 0; padding: 12px; border-radius: var(--r-m); background: var(--fill-tertiary); font-style: italic; white-space: pre-line; overflow-wrap: anywhere; }
.x-photo { display: block; width: 100%; max-height: 420px; object-fit: cover; border-radius: var(--r-m); margin-top: 16px; background: var(--fill-tertiary); }
.x-tabs { flex: none; display: flex; border-top: 1px solid var(--stroke-primary); background: var(--fill-primary-on); position: sticky; bottom: 0; z-index: 3; padding-bottom: env(safe-area-inset-bottom); }
.x-tab { flex: 1; min-height: 56px; border: 0; background: none; color: var(--text-secondary); font: var(--type-tag); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.x-tab span { font-size: 18px; }
.x-tab[aria-current="page"] { color: light-dark(var(--x-green), #3ddc84); }
.x-toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); background: var(--fill-primary); color: var(--text-primary-on); font: var(--type-label); padding: 10px 16px; border-radius: var(--r-pill); opacity: 0; pointer-events: none; transition: opacity var(--dur-quick) var(--ease-out); max-width: calc(100vw - 32px); text-align: center; z-index: 20; }
.x-toast.on { opacity: 1; }
.x-dim { position: fixed; inset: 0; background: rgb(0 0 0 / 0.4); display: none; align-items: flex-end; justify-content: center; z-index: 10; }
.x-dim.on { display: flex; }
.x-sheet { width: 100%; max-width: 640px; box-sizing: border-box; max-height: 92vh; overflow-y: auto; background: var(--fill-primary-on); border-radius: var(--r-l) var(--r-l) 0 0; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); }
.x-sheet label { display: flex; align-items: center; gap: 10px; min-height: var(--tap); font: var(--type-body); }
.x-sheet label.x-f { display: grid; gap: 4px; font: var(--type-label); }
.x-f { display: grid; gap: 4px; margin-bottom: 12px; font: var(--type-label); }
.x-f .x-hint { font: var(--type-caption); color: var(--text-secondary); font-weight: normal; }
textarea.x-input { min-height: 88px; padding: 10px 12px; resize: vertical; }
.x-f small { font: var(--type-caption); color: var(--text-secondary); text-align: right; }
.x-chk { display: flex; gap: 10px; align-items: flex-start; font: var(--type-small); color: var(--text-secondary); margin: 4px 0 16px; }
.x-chk input { flex: none; width: 20px; height: 20px; margin-top: 2px; }
.x-thumb { flex: none; width: 72px; height: 72px; border-radius: var(--r-s); background: var(--fill-tertiary); border: 1px dashed var(--stroke-primary); display: grid; place-items: center; font-size: 24px; overflow: hidden; }
.x-thumb img { width: 100%; height: 100%; object-fit: cover; }
.x-up { display: flex; gap: 12px; align-items: center; }
.x-up .x-btn { position: relative; overflow: hidden; }
.x-up input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.x-fs { border: 0; padding: 0; margin: 20px 0 8px; }
.x-fs legend { font: var(--type-label); color: var(--x-blue); padding: 0; margin-bottom: 8px; }
.x-ok { text-align: center; padding-top: 48px; }
.x-ok .x-seal { margin: 0 auto 16px; width: 48px; height: 48px; font-size: 24px; }
.x-ok p { font: var(--type-body); margin: 0 0 20px; }
.x-note { margin: 0 0 12px; padding: 12px 14px; border-radius: var(--r-m); background: light-dark(#fff8d6, #2e2600); border: 1px solid light-dark(#e0c25a, #8a6d00); font: var(--type-small); color: var(--text-primary); }
.x-note b { display: block; margin-bottom: 2px; }
.x-empty { text-align: center; padding: 32px 8px; }
.x-empty p { font: var(--type-body); color: var(--text-secondary); margin: 0 0 16px; }
.x-sent { font: var(--type-small); color: var(--text-secondary); margin: 8px 0 0; text-align: center; }

.x-dhead { display: none; }
.x-pro__side, .x-pro__main, .x-pro__acts { display: contents; }

/* Modo site (900px+) */
.x-site .x-phone { max-width: none; }
.x-site .x-dhead { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 32px; border-bottom: 1px solid var(--stroke-secondary); position: sticky; top: 0; z-index: 3; background: var(--mat-regular, var(--fill-primary-on)); -webkit-backdrop-filter: var(--hark-blur); backdrop-filter: var(--hark-blur); }
.x-dbrand { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); border: 0; background: none; padding: 0; cursor: pointer; font: var(--weight-bold) 20px/1 var(--sans); color: var(--x-blue); letter-spacing: -0.02em; }
.x-dnav { display: flex; gap: 4px; }
.x-dlink { min-height: var(--tap); padding: 0 16px; border: 0; border-radius: var(--r-pill); background: none; color: var(--text-secondary); font: var(--type-label); cursor: pointer; }
.x-dlink:hover { color: var(--text-primary); background: var(--fill-tertiary); }
.x-dlink[aria-current="page"] { color: var(--text-primary); background: var(--fill-tertiary); }
.x-dlink--cta { background: var(--x-green); color: #fff; }
.x-dlink--cta:hover, .x-dlink--cta[aria-current="page"] { background: #005a2b; color: #fff; }
.x-site .x-tabs { display: none; }
.x-site .x-scr { padding: 32px; max-width: 1120px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.x-site .x-top .x-logo, .x-site #add .x-top, .x-site #about .x-top, .x-site #owner .x-top { display: none; }
.x-site #welcome.on { min-height: 60vh; max-width: 560px; }
.x-site #welcome .x-btn { max-width: 320px; margin: 8px auto 0; }
.x-site #add, .x-site #owner { max-width: 640px; }
.x-site #about { max-width: 720px; }
.x-site .x-ok { max-width: 440px; margin: 0 auto; }
.x-site #search.on { display: grid; grid-template-columns: minmax(0, 1fr) 200px 220px; grid-template-areas: "note note note" "q uf city" "loc loc loc" "cats cats cats" "count count count" "list list list"; column-gap: 12px; align-items: center; }
.x-site #search .x-top, .x-site #search .x-sels { display: contents; }
.x-site #cfgNote, .x-site #errNote { grid-area: note; }
.x-site #q { grid-area: q; }
.x-site #uf { grid-area: uf; }
.x-site #cityBox { grid-area: city; }
.x-site #cityBox .x-acl { left: 0; right: auto; }
.x-site #uf, .x-site #city { width: 100%; max-width: none; border-radius: var(--r-s); background: var(--fill-tertiary); font: var(--type-body); }
.x-site #locrow { grid-area: loc; flex-wrap: wrap; overflow: visible; padding-top: 12px; }
.x-site #cats { grid-area: cats; flex-wrap: wrap; overflow: visible; padding: 12px 0 4px; }
.x-site .x-crow { grid-area: count; margin-top: 8px; }
.x-site #list { grid-area: list; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
@media (max-width: 1099px) { .x-site #list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.x-site #list .x-card { margin: 0; padding: 16px; align-items: flex-start; }
.x-site #list > .x-sub, .x-site #list > .x-empty { grid-column: 1 / -1; }
.x-site #biz.on { display: grid; grid-template-columns: 340px minmax(0, 1fr); grid-template-areas: "back back" "side main" "acts main"; column-gap: 32px; align-content: start; }
.x-site #biz > .x-back { grid-area: back; justify-self: start; }
.x-site .x-pro__side { display: block; grid-area: side; padding: 24px; border-radius: var(--r-l); background: var(--fill-tertiary); }
.x-site .x-pro__side .x-head { padding-top: 0; }
.x-site .x-pro__side .x-row .x-btn { background: var(--fill-primary-on); }
.x-site .x-pro__side .x-row .x-btn--green { background: var(--x-green); }
.x-site .x-pro__main { display: block; grid-area: main; }
.x-site .x-pro__main > :first-child { margin-top: 0; }
.x-site .x-pro__main .x-msg { font-size: var(--size-heading); line-height: 1.4; padding: 20px; }
.x-site .x-pro__acts { display: block; grid-area: acts; }
.x-site .x-dim { align-items: center; }
.x-site .x-sheet { max-width: 480px; border-radius: var(--r-l); padding: 24px; }
.x-site .x-toast { bottom: 32px; }

/* Compartilhar e card do Story */
.x-crow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.x-crow .x-count { margin: 0; }
.x-crow .x-chip { font: var(--type-tag); }
.x-shl { display: grid; gap: 8px; }
.x-btn--plain { border-color: transparent; color: var(--text-secondary); }
.x-sheet--story { text-align: center; }

/* Logo oficial (aperto de mão) */
.x-mark { flex: none; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; display: block; }
#welcome .x-mark { width: 120px; height: 120px; margin: 0 auto; }
.x-dbrand .x-mark { width: 32px; height: 32px; }
.x-sheet .x-mark--share { width: 56px; height: 56px; margin: 0 0 8px; }
.x-foot { padding: 16px var(--gutter) 24px; text-align: center; font: var(--type-small); color: var(--text-secondary); }
.x-foot p { margin: 0; }
.x-sheet textarea { width: 100%; box-sizing: border-box; min-height: 72px; margin: 8px 0; border-radius: var(--r-s); border: 1px solid var(--stroke-primary); background: var(--fill-tertiary); color: var(--text-primary); font: var(--type-body); padding: 10px 12px; resize: none; }

/* Prévia do Selo DAD (o próprio canvas da imagem, reduzido). */
.x-story { display: block; width: 200px; height: auto; aspect-ratio: 9 / 16; margin: 12px auto 0; border-radius: var(--r-m); background: linear-gradient(160deg, #00602a, #001a52); box-shadow: var(--hark-shadow); transition: opacity .2s; }
.x-story.loading { opacity: 0.5; }
.x-site .x-story { width: 240px; }
.x-chips--sub { padding-top: 0; }
.x-foot__sep { margin: 0 4px; }
.x-foot a, .fineprint a { overflow-wrap: anywhere; }
.x-about { margin-top: 12px; font: var(--type-body); }
.x-about p { margin: 0 0 12px; }
.x-about__h { font: var(--type-label); margin-top: 16px !important; }
.x-about ul { margin: 0 0 16px; padding-left: 22px; }
.x-about li { margin: 0 0 6px; }
.x-about li::marker { color: var(--x-green); }
.x-inl { display: inline; border: 0; padding: 0; margin: 0; background: none; font: inherit; color: var(--x-blue); text-decoration: underline; cursor: pointer; }

/* Pix "Apoie o projeto" (Sobre) */
.x-pix { --pix-g: #009C3B; --pix-y: #FFDF00; --pix-n: #002776; position: relative; overflow: hidden; margin: 24px 0 8px; padding: 22px 18px 18px; border-radius: var(--r-l); background: light-dark(#f4fbf6, #0e1f16); border: 1px solid light-dark(#cfe9d8, #1f4a30); scroll-margin-top: 84px; }
.x-pix::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: linear-gradient(90deg, var(--pix-g) 0 40%, var(--pix-y) 40% 70%, var(--pix-n) 70%); }
.x-pix p { margin: 0; }
.x-pix__h { font: var(--type-heading); color: light-dark(var(--pix-n), #e8eefc); }
.x-pix__txt { font: var(--type-body); color: var(--text-primary); margin: 6px 0 16px !important; }
.x-pix__body { display: grid; gap: 16px; justify-items: center; }
.x-pix__qr { width: 220px; max-width: 100%; aspect-ratio: 1; padding: 8px; box-sizing: border-box; background: #fff; border-radius: var(--r-m); box-shadow: 0 0 0 4px var(--pix-y), 0 6px 18px rgb(0 39 118 / 0.15); }
.x-pix__qr svg { display: block; width: 100%; height: 100%; }
.x-pix__info { width: 100%; min-width: 0; }
.x-pix__lbl { display: inline-block; font: var(--type-tag); color: #fff; background: var(--pix-g); padding: 3px 10px; border-radius: var(--r-pill); margin-bottom: 10px !important; }
.x-pix__k { font: var(--type-caption); color: var(--text-secondary); margin-top: 6px !important; }
.x-pix__v { font: var(--type-body-strong); color: var(--text-primary); }
.x-pix__key { font: 500 14px/1.4 var(--mono, ui-monospace, monospace); overflow-wrap: anywhere; word-break: break-all; padding: 6px 10px; margin-top: 2px !important; border-radius: var(--r-s); background: var(--fill-primary-on); border: 1px dashed light-dark(#9fd3b2, #2c6b45); }
.x-pix__btns { display: grid; gap: 8px; margin-top: 14px; }
.x-btn--pix { background: var(--pix-g); border-color: var(--pix-g); color: #fff; }
.x-btn--pix2 { background: var(--pix-n); border-color: var(--pix-n); color: #fff; }
.x-btn--pix:hover { background: #008232; } .x-btn--pix2:hover { background: #001d59; }
.x-pix__n { font: var(--type-caption); color: var(--text-secondary); text-align: center; margin-top: 14px !important; }
@media (min-width: 560px) {
  .x-pix { padding: 26px 24px 20px; }
  .x-pix__body { grid-template-columns: 220px minmax(0, 1fr); align-items: center; justify-items: stretch; gap: 24px; }
  .x-pix__n { text-align: left; }
}
.x-dlink--pix { color: light-dark(#c0264b, #ff8aa5); }
.x-foot__pix { color: var(--x-blue); font-weight: var(--weight-medium); }

/* Convites (cadastro somente por convite) */
.x-inv { display: inline-block; margin: 0 0 8px; padding: 3px 10px; border-radius: var(--r-pill); border: 1px solid light-dark(#c9a227, #b8901a); background: light-dark(#fff8d6, #2e2600); font: var(--type-tag, var(--type-caption)); letter-spacing: .04em; color: var(--text-primary); }
.x-gate .x-big { margin-top: 4px; }
.x-gate .x-shl { margin-top: 16px; }
.x-gate__h { font: var(--type-label); margin: 24px 0 0; }
.x-gate__or { font: var(--type-caption); color: var(--text-secondary); text-align: center; margin: 4px 0; }
.x-gate .fineprint { margin-top: 20px; }
.x-conf { margin: 0 0 8px; padding: 16px; border-radius: var(--r-m); border: 2px dashed light-dark(#c9a227, #b8901a); background: light-dark(#fff8d6, #2e2600); text-align: center; }
.x-ok .x-conf p { margin: 0; }
.x-conf__h { font: var(--type-label); }
.x-conf__code { display: inline-block; font: var(--weight-bold) 28px/1.2 var(--mono, monospace); letter-spacing: .08em; padding: 6px 14px; border-radius: var(--r-s); background: var(--fill-primary-on); border: 1px solid light-dark(#e0c25a, #8a6d00); margin: 8px 0 !important; user-select: all; }
.x-conf__t { font: var(--type-small) !important; margin-bottom: 12px !important; }
.x-conf .x-shl { margin-top: 12px; }

/* FAQ do Sobre */
.x-faq { border: 2px solid #e3ece6; border-radius: 16px; padding: 12px 16px; margin: 0 0 10px; background: #fff; }
.x-faq summary { font-weight: 700; cursor: pointer; list-style: none; }
.x-faq summary::before { content: "▸ "; color: var(--x-green); }
.x-faq[open] summary::before { content: "▾ "; }
.x-faq p { margin: 8px 0 0; }

/* ================= Visual novo (aprovado 27/10/2026): verde e amarelo, títulos Anton ================= */
:root { --x-green: #008c3c; --x-gdark: #005a28; --x-yellow: #ffd400; --x-blue: #0b3a8c; --sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; --disp: "Anton", Impact, "Arial Narrow", sans-serif; }
html { color-scheme: light; }
body { background: #f4f7f2; }
.x-phone { background: #f4f7f2; }
.x-phone > .x-dhead { order: 0; } .x-phone > .x-flag { order: 1; } .x-phone > .x-scr { order: 2; } .x-phone > .x-tabs { order: 3; }
.x-flag { height: 6px; background: linear-gradient(90deg, var(--x-yellow) 0 50%, var(--x-blue) 50%); }

/* Cabeçalho verde (celular e computador) */
.x-dhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--x-green); position: sticky; top: 0; z-index: 5; }
.x-dbrand { display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap); border: 0; background: none; padding: 0; cursor: pointer; font: 400 21px/1 var(--disp); color: var(--x-yellow); letter-spacing: .01em; text-transform: uppercase; white-space: nowrap; }
.x-dbrand .x-mark { width: 38px; height: 38px; box-shadow: 0 0 0 3px #fff; }
.x-dnav { display: flex; gap: 4px; align-items: center; }
.x-dlink { display: none; min-height: 40px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: none; color: #e6f4ea; font: 700 15px/1 var(--sans); cursor: pointer; }
.x-dlink:hover, .x-dlink[aria-current="page"] { color: #fff; background: rgb(255 255 255 / .14); }
.x-dlink--pix { display: inline-flex; align-items: center; background: var(--x-yellow); color: var(--x-gdark); font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.x-dlink--pix:hover { background: #ffe14d; color: var(--x-gdark); }
.x-dlink--cta { background: var(--x-yellow); color: var(--x-gdark); }
.x-site .x-dhead { padding: 12px 32px; border: 0; background: var(--x-green); -webkit-backdrop-filter: none; backdrop-filter: none; }
.x-site .x-dlink { display: inline-flex; align-items: center; }
.x-site .x-dbrand { font-size: 26px; }
.x-site .x-dlink--cta { background: var(--x-yellow); color: var(--x-gdark); font-family: var(--disp); font-weight: 400; font-size: 18px; text-transform: uppercase; letter-spacing: .02em; padding: 0 20px; }
.x-site .x-dlink--cta:hover, .x-site .x-dlink--cta[aria-current="page"] { background: #ffe14d; color: var(--x-gdark); }
.x-top .x-logo { display: none; }
.x-top { justify-content: flex-start; }

/* Títulos */
.x-big, .x-pname { font: 400 32px/1.08 var(--disp); text-transform: uppercase; letter-spacing: .005em; color: #14211a; margin: 0; }
.x-h, .x-about__h { font: 400 22px/1.2 var(--disp) !important; text-transform: uppercase; color: #14211a; }
.x-h::after, .x-about__h::after { content: ""; display: block; width: 56px; height: 5px; margin-top: 6px; border-radius: 3px; background: var(--x-yellow); }

/* Capa da busca */
#search.on { padding-top: 0; }
.x-hero { position: relative; margin: 0 -16px; height: 300px; overflow: hidden; background: #1a2a20; }
.x-hero img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
.x-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / .05) 0%, rgb(0 0 0 / .25) 40%, rgb(0 0 0 / .78) 100%); }
.x-hero__in { position: absolute; left: 20px; right: 20px; bottom: 48px; z-index: 1; }
.x-hero__t { margin: 0; font: 400 44px/1.02 var(--disp); text-transform: uppercase; color: #fff; text-shadow: 0 3px 14px rgb(0 0 0 / .45); }
.x-hero__t span { color: var(--x-yellow); }
.x-hero__p { display: inline-block; margin: 10px 0 0; padding: 6px 14px; border-radius: var(--r-pill); background: var(--x-green); color: #fff; font: 800 13px/1.2 var(--sans); text-transform: uppercase; letter-spacing: .03em; }
.x-qbox { position: relative; margin: -28px 0 12px; z-index: 2; }
.x-qbox .x-ico { position: absolute; left: 18px; top: 50%; width: 22px; height: 22px; transform: translateY(-50%); color: var(--x-green); pointer-events: none; }
#q { min-height: 58px; padding-left: 52px; border-radius: var(--r-pill); border: 3px solid var(--x-yellow); background: #fff; font: 600 16px/1.2 var(--sans); box-shadow: 0 8px 22px rgb(0 0 0 / .12); }

/* Filtros */
.x-chip { min-height: 40px; padding: 0 14px; border: 2px solid #d9e3dc; background: #fff; color: #14211a; font: 700 14px/1 var(--sans); }
.x-chip[aria-pressed="true"] { background: var(--x-green); border-color: var(--x-green); color: #fff; }
select.x-chip { background: #fff; }
.x-acin.x-chip { background: #fff; }

/* Grupos: ícone em círculo verde / amarelo / azul */
.x-grps { display: flex; gap: 6px; overflow-x: auto; padding: 14px 0 4px; scrollbar-width: none; }
.x-grps::-webkit-scrollbar { display: none; }
.x-grp { flex: 1 0 74px; display: flex; flex-direction: column; align-items: center; gap: 6px; border: 0; background: none; padding: 0; cursor: pointer; color: #14211a; }
.x-grp__c { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; transition: transform .15s; box-shadow: 0 4px 10px rgb(0 0 0 / .12); }
.x-grp__c .x-ico { width: 28px; height: 28px; }
.x-grp--0 .x-grp__c { background: var(--x-green); color: #fff; }
.x-grp--1 .x-grp__c { background: var(--x-yellow); color: var(--x-gdark); }
.x-grp--2 .x-grp__c { background: var(--x-blue); color: #fff; }
.x-grp__t { font: 700 12px/1.2 var(--sans); text-align: center; max-width: 78px; }
.x-grp:active .x-grp__c { transform: scale(.92); }
.x-grp[aria-pressed="true"] .x-grp__c { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--x-green); transform: scale(1.04); }
.x-grp[aria-pressed="true"] .x-grp__t { color: var(--x-green); }

/* Cartões da lista */
.x-count { font: 700 14px/1.3 var(--sans); color: #14211a; }
.x-card--biz { position: relative; align-items: center; gap: 14px; padding: 12px; margin-bottom: 12px; border-radius: 22px; background: #fff; box-shadow: 0 2px 10px rgb(0 40 20 / .07); transition: transform .12s; }
.x-card--biz:active { transform: scale(.985); }
.x-card--biz .x-av { width: 92px; height: 92px; border-radius: 16px; font: 400 30px/1 var(--disp); }
.x-card__b { min-width: 0; flex: 1; padding-right: 34px; }
.x-card--biz b { font: 800 18px/1.2 var(--sans); }
.x-meta { font: 500 13px/1.35 var(--sans); color: #6b766f; }
.x-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 7px 0 5px; }
.x-lvl { margin: 0; padding: 3px 10px; border-radius: var(--r-pill); background: var(--x-green); color: var(--x-yellow); box-shadow: none; font: 800 11px/1.3 var(--sans); text-transform: uppercase; letter-spacing: .03em; }
.x-tag { margin: 0; padding: 3px 10px; border-radius: var(--r-pill); border: 0; background: #e8f3ec; color: var(--x-gdark); font: 700 11px/1.3 var(--sans); }
.x-tag--cup { background: var(--x-yellow); color: var(--x-gdark); text-transform: uppercase; font-weight: 800; letter-spacing: .03em; }
.x-tag--new { background: var(--x-blue); color: #fff; }
.x-rec { color: var(--x-green); font-weight: 700; }

/* Favoritos */
.x-fav { position: absolute; top: 10px; right: 10px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: #f1f5f2; color: #9aa69f; display: grid; place-items: center; cursor: pointer; padding: 0; }
.x-fav svg { width: 20px; height: 20px; }
.x-fav[aria-pressed="true"] { color: #e0245e; background: #ffe9ef; }
.x-fav[aria-pressed="true"] svg { fill: currentColor; animation: x-pop .3s ease-out; }
.x-fav--big { position: static; flex: none; width: 48px; height: 48px; }
.x-fav--big svg { width: 24px; height: 24px; }
@keyframes x-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* Botões */
.x-btn { min-height: 54px; border-radius: 18px; border: 2px solid #d9e3dc; background: #fff; font: 700 15px/1.1 var(--sans); }
.x-btn--green, .x-btn--blue, .x-btn--wa, .x-btn--rec { font: 400 20px/1 var(--disp); text-transform: uppercase; letter-spacing: .02em; border: 0; }
.x-btn--green, .x-btn--blue { background: var(--x-green); color: #fff; }
.x-btn--green:hover, .x-btn--blue:hover { background: var(--x-gdark); }
.x-btn--wa { background: #25b45a; color: #fff; min-height: 60px; font-size: 22px; }
.x-btn--wa:hover { background: #1e9b4c; }
.x-btn--out { border: 3px solid var(--x-green); color: var(--x-green); font: 400 18px/1 var(--disp); text-transform: uppercase; letter-spacing: .02em; }
.x-btn--rec { margin-top: 24px; min-height: 62px; border-radius: var(--r-pill); background: var(--x-green); color: var(--x-yellow); font-size: 24px; box-shadow: inset 0 0 0 3px var(--x-green), inset 0 0 0 6px var(--x-yellow); }
.x-btn--rec:disabled { opacity: 1; background: #e8f3ec; color: var(--x-green); box-shadow: inset 0 0 0 3px var(--x-green); }
.x-ok .x-seal { background: var(--x-green); }

/* Página do comércio */
#biz.on { padding: 0 0 24px; }
.x-cover { position: relative; height: 290px; background: #1a2a20; }
.x-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.x-cover--none { background: linear-gradient(135deg, var(--x-green), var(--x-gdark)); display: grid; place-items: center; }
.x-cover__ini { font: 400 96px/1 var(--disp); color: var(--x-yellow); }
.x-round { position: absolute; top: 14px; width: 46px; height: 46px; border-radius: 50%; border: 0; background: #fff; color: #14211a; font: 800 24px/1 var(--sans); display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 12px rgb(0 0 0 / .25); padding: 0; }
.x-round--l { left: 14px; } .x-round--r { right: 14px; font-size: 20px; }
.x-dadseal { position: absolute; right: 18px; bottom: -44px; width: 96px; height: 96px; border-radius: 50%; background: var(--x-green); color: var(--x-yellow); display: grid; place-items: center; font: 400 32px/1 var(--disp); box-shadow: 0 0 0 5px var(--x-yellow), 0 8px 18px rgb(0 0 0 / .25); animation: x-seal 4s ease-in-out infinite; }
@keyframes x-seal { 0%, 85%, 100% { transform: rotate(0); } 90% { transform: rotate(-10deg) scale(1.06); } 95% { transform: rotate(8deg) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .x-dadseal, .x-fav svg { animation: none !important; } }
.x-pro { padding: 18px 18px 0; }
.x-pro__t { display: flex; align-items: center; gap: 12px; padding-right: 104px; min-height: 52px; }
.x-pro__t .x-pname { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.x-pro > .x-meta { margin: 6px 0 0; font-size: 15px; }
.x-pro .x-tags { margin: 12px 0 6px; }
.x-acts { display: grid; gap: 10px; margin-top: 16px; }
.x-acts--2 { grid-template-columns: 1fr 1fr; }
.x-acts--2 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.x-cup { margin: 20px 0 0; padding: 16px 18px; border: 0; border-radius: 20px; background: var(--x-yellow); text-align: left; position: relative; }
.x-cup__h { font: 400 24px/1 var(--disp) !important; text-transform: uppercase; color: var(--x-gdark); padding-bottom: 12px; margin-bottom: 12px !important; border-bottom: 3px dashed var(--x-gdark); }
.x-cup__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.x-cup__o { font: 800 19px/1.25 var(--sans) !important; margin: 0 0 4px !important; color: #14211a; }
.x-cup__n { font: 600 13px/1.3 var(--sans); color: var(--x-gdark); }
.x-cup__code { margin: 0 !important; padding: 8px 18px; border: 0; border-radius: 14px; background: #fff; font: 400 26px/1 var(--disp); letter-spacing: .06em; color: var(--x-gdark); user-select: all; }
.x-msg { font: 500 16px/1.55 var(--sans); font-style: normal; padding: 0; background: none; }
.x-lnks { display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; margin: 14px 0 0; color: #9aa69f; }
.x-lnks .x-link { margin: 0; display: inline; }
.x-site #biz.on { display: block; max-width: 760px; padding: 24px 0 40px; }
.x-site .x-cover { border-radius: 28px; overflow: visible; height: 380px; }
.x-site .x-cover img { border-radius: 28px; }
.x-site .x-pro { padding: 22px 8px 0; }
.x-site .x-pname { font-size: 44px; }

/* Barra inferior */
.x-tabs { background: #fff; border-top: 1px solid #e3ebe5; padding: 6px 10px calc(6px + env(safe-area-inset-bottom)); gap: 4px; align-items: center; }
.x-tab { min-height: 54px; color: #8a958e; font: 700 12px/1.2 var(--sans); gap: 3px; }
.x-tab svg { width: 24px; height: 24px; }
.x-tab[aria-current="page"] { color: var(--x-green); }
.x-tab--cta { flex: 1.5; min-height: 50px; border-radius: var(--r-pill); background: var(--x-yellow); color: var(--x-gdark) !important; font: 400 19px/1 var(--disp); text-transform: uppercase; letter-spacing: .02em; box-shadow: 0 4px 12px rgb(255 212 0 / .45); }

/* Formulários e Sobre */
.x-input { border-radius: 14px; border: 2px solid #d9e3dc; background: #fff; font: 500 16px/1.3 var(--sans); }
.x-input:focus { outline: none; border-color: var(--x-green); box-shadow: 0 0 0 3px rgb(0 140 60 / .15); }
.x-fs legend { font: 400 20px/1.2 var(--disp); text-transform: uppercase; color: var(--x-green); }
.x-f { font: 700 14px/1.3 var(--sans); }
.x-sub { font: 500 15px/1.45 var(--sans); color: #55605a; }
.x-inv { background: var(--x-yellow); border: 0; color: var(--x-gdark); font: 800 12px/1.3 var(--sans); text-transform: uppercase; }
.x-about { font: 500 16px/1.6 var(--sans); }
.x-faq { border: 0; border-radius: 16px; background: #fff; box-shadow: 0 2px 8px rgb(0 40 20 / .06); }
.x-faq summary { font: 700 15px/1.35 var(--sans); }
.x-inl { color: var(--x-green); font-weight: 700; }
.x-back { color: var(--x-green); }
.x-site #search.on { grid-template-areas: "hero hero hero" "q q q" "note note note" "uf city ." "loc loc loc" "grps grps grps" "cats cats cats" "count count count" "list list list"; grid-template-columns: 220px 240px minmax(0, 1fr); padding-top: 24px; }
.x-site .x-hero { grid-area: hero; margin: 0; height: 340px; border-radius: 28px; }
.x-site .x-hero__in { left: 40px; bottom: 56px; }
.x-site .x-hero__t { font-size: 64px; }
.x-site .x-qbox { grid-area: q; margin: -30px 40px 12px; }
.x-site #q { grid-area: auto; }
.x-site #grps { grid-area: grps; justify-content: flex-start; gap: 18px; }
.x-site .x-grp { flex: 0 0 96px; }
.x-site .x-grp__c { width: 72px; height: 72px; }
.x-site #list .x-card { padding: 12px; align-items: center; }
/* ajustes */
#top.page { padding: 0 !important; margin: 0 auto; max-width: none !important; }
.x-dadseal { width: 84px; height: 84px; bottom: -32px; font-size: 28px; }
.x-pro { padding-top: 40px; }
.x-pro__t { padding-right: 0; }
.x-site .x-uf, .x-site #uf, .x-site #city { background: #fff; border: 2px solid #d9e3dc; }

/* ================= V8 ================= */
.x-wip { order: 1; background: var(--x-yellow); color: var(--x-gdark); text-align: center; font: 800 13px/1.3 var(--sans); padding: 8px 12px; letter-spacing: .02em; }
.x-btn.x-btn--pix { background: var(--x-green); color: #fff; border: 0; }
.x-btn.x-btn--pix2 { background: var(--x-blue); color: #fff; border: 0; }
.x-btn.x-btn--pix:hover { background: var(--x-gdark); } .x-btn.x-btn--pix2:hover { background: #082c6b; }
.x-pix__h2 { font: 500 12.5px/1.35 var(--sans) !important; color: #55605a; margin: 2px 4px 8px !important; }
.x-pix__btns { gap: 4px; }
#oCatQ { margin-bottom: 8px; border-color: var(--x-yellow); }
.x-catn { text-align: left !important; color: #9a6b00 !important; }
.x-btn--sm { min-height: 46px; font-size: 16px; }
.x-unif { margin: 0 0 10px; padding: 12px; border-radius: 16px; background: #fff; border: 2px dashed #cfe3d6; display: grid; gap: 8px; }
.x-unif__h { display: flex; justify-content: space-between; align-items: center; margin: 0; font: 700 14px/1.2 var(--sans); }
.x-unif__h .x-link { margin: 0; min-height: 32px; display: inline; }
.x-addr { margin: 6px 0 0; font: 600 14px/1.4 var(--sans); color: #14211a; }
.x-unis { display: grid; gap: 8px; }
.x-uni { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; background: #fff; box-shadow: 0 2px 8px rgb(0 40 20 / .06); color: #14211a; text-decoration: none; }
.x-uni b { display: block; font: 800 15px/1.3 var(--sans); }
.x-uni span span { display: block; font: 500 13px/1.35 var(--sans); color: #6b766f; }
.x-uni__go { flex: none; font: 800 13px/1 var(--sans); color: var(--x-green); }
/* V9: instruções de remoção */
.x-steps { margin: 4px 0 12px 20px; padding: 0; line-height: 1.5; }
.x-steps li { margin: 4px 0; }
.x-quote { display: block; margin-top: 6px; padding: 10px 12px; background: var(--fill-tertiary, #f2f2f2); border-left: 4px solid #FFD400; border-radius: 8px; font-style: italic; overflow-wrap: anywhere; }
#sheet2 .x-btn { width: 100%; text-align: center; text-decoration: none; display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding-top: 0; padding-bottom: 0; }