:root {
  --blue: #2563EB;
  --blue-dark: #1D4ED8;
  --teal: #0FA37F;
  --teal-light: #E6F7F1;
  --purple: #7C3AED;
  --purple-light: #F1EAFE;
  --navy: #0B1B3A;
  --bg: #FFFFFF;
  --bg-soft: #F6F9FC;
  --text: #0F172A;
  --text-secondary: #64748B;
  --border: #E7ECF3;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 10px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 16px 40px rgba(15, 23, 42, 0.10);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { overflow-x: hidden; width: 100%; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  width: 100%;
}

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

.shell { width: min(1180px, 100%); margin: 0 auto; padding: 0 24px; }

/* ---------- header ---------- */
header.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  border-bottom: 1px solid var(--border);
}

header.site-header .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  gap: 16px;
}

.logo-mark {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
  flex-shrink: 0;
}
.logo-mark img { width: 38px; height: 38px; }

nav.main-nav { display: flex; align-items: center; gap: 2px; }

nav.main-nav a, .nav-dropdown > button {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 9px 10px;
  border-radius: 8px;
  transition: background 120ms ease, color 120ms ease;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
nav.main-nav a:hover, .nav-dropdown > button:hover { background: var(--bg-soft); color: var(--text); }

.nav-dropdown { position: relative; }
.nav-dropdown > button { display: flex; align-items: center; gap: 4px; }

.nav-dropdown-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
  padding: 8px;
  min-width: 220px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 150ms ease, transform 150ms ease, visibility 150ms;
}
.nav-dropdown:hover .nav-dropdown-panel, .nav-dropdown:focus-within .nav-dropdown-panel {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-dropdown-panel a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--text); font-size: 0.85rem; font-weight: 600; text-decoration: none; }
.nav-dropdown-panel a:hover { background: var(--bg-soft); }

.nav-cta {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--blue); color: #fff !important; font-weight: 700 !important;
  padding: 10px 18px !important; border-radius: 999px !important; margin-left: 6px;
}
.nav-cta:hover { background: var(--blue-dark); }

.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 42px; height: 42px;
  border: none; background: none; cursor: pointer;
  border-radius: 8px;
  flex-shrink: 0;
}
.nav-toggle:hover { background: var(--bg-soft); }
.nav-toggle .bar { width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: transform 200ms ease, opacity 200ms ease; }
header.nav-open .nav-toggle .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
header.nav-open .nav-toggle .bar:nth-child(2) { opacity: 0; }
header.nav-open .nav-toggle .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
body.nav-locked { overflow: hidden; }

/* ---------- hero ---------- */
.hero { padding: 64px 0 40px; background: linear-gradient(180deg, #F6F9FC 0%, #FFFFFF 100%); }
.hero .shell { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--purple-light); color: var(--purple);
  font-size: 0.78rem; font-weight: 700;
  padding: 6px 14px; border-radius: 999px; margin-bottom: 18px;
}

.hero h1 { font-size: clamp(2rem, 3.6vw, 2.75rem); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 16px; }
.hero h1 .c-blue { color: var(--blue); }
.hero h1 .c-teal { color: var(--teal); }

.hero p.lead { color: var(--text-secondary); font-size: 1.02rem; max-width: 480px; margin-bottom: 26px; }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }

.trust-row { display: flex; gap: 20px; flex-wrap: wrap; color: var(--text-secondary); font-size: 0.82rem; font-weight: 600; }
.trust-row span { display: inline-flex; align-items: center; gap: 6px; }
.trust-row .dot { color: var(--teal); }

/* phone mockup stack */
.phone-stack { position: relative; height: 460px; }
.phone-card {
  position: absolute;
  width: 230px;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(15, 23, 42, 0.06);
}
.phone-card img { width: 100%; display: block; }
.phone-card.back { top: 0; left: 6%; width: 210px; opacity: 0.92; transform: rotate(-4deg); }
.phone-card.front { top: 60px; right: 4%; width: 250px; transform: rotate(3deg); z-index: 2; }

.float-badge {
  position: absolute;
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  padding: 9px 14px;
  font-size: 0.78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 7px;
  z-index: 3;
  white-space: nowrap;
}
.float-badge .ic { font-size: 1rem; }
.fb-1 { top: 4%; right: 2%; color: var(--blue); }
.fb-2 { top: 40%; left: -2%; color: var(--teal); }
.fb-3 { bottom: 16%; right: -2%; color: var(--purple); }
.fb-4 { bottom: -2%; left: 18%; color: #DC2626; }

/* ---------- sections ---------- */
section { padding: 68px 0; }
section.soft { background: var(--bg-soft); }

.section-head { text-align: center; max-width: 620px; margin: 0 auto 44px; }
.section-head .kicker { color: var(--blue); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; display: block; margin-bottom: 8px; }
.section-head h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; letter-spacing: -0.01em; }
.section-head .accent { display: inline-block; width: 46px; height: 4px; background: var(--blue); border-radius: 999px; margin-top: 12px; }

/* como funciona */
.steps-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.step-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 20px; box-shadow: var(--shadow-sm); }
.step-num {
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--blue); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.9rem; margin-bottom: 16px;
}
.step-card .step-ic { font-size: 1.4rem; margin-bottom: 6px; }
.step-card h3 { font-size: 0.98rem; font-weight: 800; margin-bottom: 6px; }
.step-card p { color: var(--text-secondary); font-size: 0.84rem; }

/* audience split */
.audience-block { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; margin-bottom: 64px; }
.audience-block:last-child { margin-bottom: 0; }
.audience-block.reverse { grid-template-columns: 1.1fr 0.9fr; }
.audience-block.reverse .audience-photo { order: 2; }

.audience-photo {
  aspect-ratio: 4/5;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #EAF1FF 0%, #E6F7F1 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  overflow: visible;
}
.audience-photo img { width: 88%; height: auto; max-height: 106%; object-fit: contain; filter: drop-shadow(0 14px 26px rgba(15,23,42,0.16)); }
.audience-photo .placeholder-ic { font-size: 3rem; opacity: 0.35; }

.audience-text .kicker { color: var(--blue); font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; }
.audience-text h3 { font-size: 1.5rem; font-weight: 800; margin: 8px 0 22px; letter-spacing: -0.01em; }

.feature-list { display: flex; flex-direction: column; gap: 16px; }
.feature-list li { display: flex; gap: 12px; list-style: none; }
.feature-list .ic {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--teal-light); color: var(--teal);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 1rem;
}
.feature-list .ic.blue { background: #E8EEFD; color: var(--blue); }
.feature-list strong { display: block; font-size: 0.92rem; font-weight: 700; margin-bottom: 2px; }
.feature-list span.desc { color: var(--text-secondary); font-size: 0.84rem; }

/* tech section */
.tech-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; }
.tech-visual {
  display: flex; align-items: center; justify-content: center;
  min-height: 260px;
}
.tech-visual img { width: 100%; filter: drop-shadow(0 20px 40px rgba(15,23,42,0.16)); }
.tech-visual .placeholder-ic { font-size: 3rem; color: rgba(15,23,42,0.2); }

.tech-text h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 800; letter-spacing: -0.01em; margin-bottom: 14px; }
.tech-text p { color: var(--text-secondary); margin-bottom: 24px; max-width: 480px; }
.tag-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tag-item { display: flex; align-items: center; gap: 10px; font-size: 0.86rem; font-weight: 700; }
.tag-item .ic { color: var(--blue); font-size: 1.1rem; }

/* showcase (comércios / serviços / planos / produtos reais) */
.showcase-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.showcase-head h2 { font-size: clamp(1.4rem, 3vw, 1.85rem); font-weight: 800; letter-spacing: -0.01em; margin-bottom: 6px; }
.showcase-head p { color: var(--text-secondary); font-size: 0.92rem; }
.coupon-note {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--purple-light); color: var(--purple);
  font-weight: 700; font-size: 0.82rem;
  padding: 9px 16px; border-radius: 999px; white-space: nowrap;
}

.showcase-viewport { overflow: hidden; position: relative; }
.showcase-viewport::before, .showcase-viewport::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 48px; z-index: 2; pointer-events: none;
}
.showcase-viewport::before { left: 0; background: linear-gradient(90deg, var(--bg) 0%, transparent 100%); }
.showcase-viewport::after { right: 0; background: linear-gradient(270deg, var(--bg) 0%, transparent 100%); }

.showcase-track {
  display: none;
  gap: 16px;
  width: max-content;
  animation: showcase-scroll 38s linear infinite;
}
.showcase-viewport:hover .showcase-track { animation-play-state: paused; }

@keyframes showcase-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.showcase-card {
  flex: 0 0 220px;
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.showcase-card:hover, .showcase-card:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-md); outline: none; }
.card-foto { position: relative; aspect-ratio: 1/1; background: var(--bg-soft); }
.card-foto img { width: 100%; height: 100%; object-fit: cover; }
.card-foto-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 2rem; background: linear-gradient(135deg, #EAF1FF 0%, #E6F7F1 100%); }
.card-tipo {
  position: absolute; top: 8px; left: 8px;
  background: rgba(11, 27, 58, 0.75); color: #fff;
  font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  padding: 3px 8px; border-radius: 999px;
}
.card-body { padding: 12px 14px 14px; }
.card-nome { font-size: 0.88rem; font-weight: 800; line-height: 1.3; margin-bottom: 3px; }
.card-comercio { font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 6px; }
.card-meta { display: flex; gap: 10px; font-size: 0.76rem; font-weight: 700; color: var(--blue); }
.card-meta:empty { display: none; }

.showcase-skeleton { display: flex; gap: 16px; overflow: hidden; }
.showcase-skeleton .sk-card { flex: 0 0 220px; height: 236px; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--bg-soft) 25%, #EDF1F6 37%, var(--bg-soft) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* download band */
.download-band {
  background: linear-gradient(135deg, #0B1B3A 0%, #1E3A8A 100%);
  color: #fff;
  border-radius: 24px;
  padding: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.download-band .txt h2 { font-size: 1.5rem; font-weight: 800; margin-bottom: 8px; }
.download-band .txt p { color: rgba(255,255,255,0.72); max-width: 380px; }
.download-band .actions { display: flex; align-items: center; gap: 20px; }
.store-badges { display: flex; flex-direction: column; gap: 10px; }
.store-badges img { height: 42px; width: auto; }
.store-badges a:hover { opacity: 0.9; }
.download-band .qr { background: #fff; padding: 10px; border-radius: 14px; flex-shrink: 0; }
.download-band .qr img { width: 90px; height: 90px; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 24px; border-radius: 999px;
  font-weight: 700; font-size: 0.92rem; text-decoration: none;
  cursor: pointer; border: 1px solid transparent;
  transition: transform 120ms ease, filter 120ms ease, background 120ms ease;
}
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-dark); transform: translateY(-1px); }
.btn-outline { background: transparent; color: var(--text); border-color: var(--border); }
.btn-outline:hover { background: var(--bg-soft); }

/* footer */
footer.site-footer { background: var(--navy); color: rgba(255,255,255,0.6); padding: 52px 0 26px; font-size: 0.85rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 34px; }
.footer-brand .logo-mark { color: #fff; margin-bottom: 12px; }
.footer-brand p { max-width: 260px; color: rgba(255,255,255,0.5); margin-bottom: 18px; }
.social-row { display: flex; gap: 10px; }
.social-row a {
  width: 34px; height: 34px; border-radius: 999px;
  background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  transition: background 120ms ease;
}
.social-row a:hover { background: rgba(255,255,255,0.16); }
.social-row img { width: 20px; height: 20px; border-radius: 6px; }
.footer-col h4 { color: #fff; font-size: 0.8rem; font-weight: 700; margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.04em; }
.footer-col a { display: block; color: rgba(255,255,255,0.6); text-decoration: none; margin-bottom: 10px; font-size: 0.85rem; }
.footer-col a:hover { color: var(--teal); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 20px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 0.78rem; color: rgba(255,255,255,0.42); }

/* modal "baixe o app" */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(11, 27, 58, 0.55);
  display: none;
  align-items: center; justify-content: center;
  padding: 20px;
}
.modal-overlay.open { display: flex; }
.modal-card {
  position: relative;
  background: #fff;
  border-radius: 24px;
  padding: 40px;
  max-width: 640px;
  width: 100%;
  box-shadow: 0 30px 70px rgba(11, 27, 58, 0.35);
  display: flex;
  align-items: center;
  gap: 32px;
}
.modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 32px; height: 32px; border-radius: 999px;
  border: none; background: var(--bg-soft); color: var(--text-secondary);
  font-size: 0.9rem; cursor: pointer;
  z-index: 1;
}
.modal-close:hover { background: var(--border); }
.modal-left {
  flex: 0 0 190px;
  background: linear-gradient(135deg, #EAF1FF 0%, #E6F7F1 100%);
  border-radius: 18px;
  display: flex; align-items: flex-end; justify-content: center;
  align-self: stretch;
  overflow: hidden;
}
.modal-mascote { width: 92%; height: auto; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(15,23,42,0.16)); }
.modal-right { flex: 1; min-width: 0; text-align: left; }
.modal-card h3 { font-size: 1.3rem; font-weight: 800; margin-bottom: 10px; letter-spacing: -0.01em; }
.modal-card p { color: var(--text-secondary); font-size: 0.92rem; margin-bottom: 24px; }
.modal-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.store-badges.row { flex-direction: row; }
.store-badges.row img { height: 42px; }
.modal-actions .qr { background: #fff; border: 1px solid var(--border); padding: 8px; border-radius: 12px; flex-shrink: 0; }
.modal-actions .qr img { width: 76px; height: 76px; }

@media (max-width: 560px) {
  .modal-card { flex-direction: column; padding: 28px 24px; text-align: center; }
  .modal-left { flex: 0 0 auto; width: 100%; height: 200px; align-items: center; }
  /* no mobile a caixa vira baixa e larga — encaixar pela altura evita cortar o
     assistente (encaixar pela largura, como no desktop, estourava a caixa e o
     overflow:hidden cortava a cabeça dele). */
  .modal-mascote { width: auto; height: 100%; max-width: 90%; }
  .modal-right { text-align: center; }
  .modal-actions { flex-direction: column; }
}

/* página /baixar */
.download-hero { text-align: center; padding: 60px 0 8px; }
.download-hero h1 { font-size: clamp(2rem, 4vw, 2.5rem); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 14px; }
.download-hero p.lead { color: var(--text-secondary); font-size: 1.02rem; max-width: 520px; margin: 0 auto 22px; }
.download-trust { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; color: var(--text-secondary); font-size: 0.85rem; font-weight: 600; }

.platform-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.platform-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 34px 28px; text-align: center; box-shadow: var(--shadow-sm); }
.platform-card .p-icon { font-size: 2.6rem; margin-bottom: 10px; }
.platform-card .p-icon-img { width: 56px; height: 56px; object-fit: contain; margin: 0 auto 14px; }
.platform-card h3 { font-size: 1.2rem; font-weight: 800; margin-bottom: 6px; }
.platform-card .p-desc { color: var(--text-secondary); font-size: 0.85rem; margin-bottom: 22px; }
.platform-card .badge-link { display: inline-block; margin-bottom: 24px; }
.platform-card .badge-link img { height: 48px; }
.platform-card .qr-box { background: var(--bg-soft); border-radius: 16px; padding: 16px; display: inline-flex; flex-direction: column; align-items: center; gap: 8px; }
.platform-card .qr-box img { width: 128px; height: 128px; }
.platform-card .qr-box span { font-size: 0.74rem; color: var(--text-secondary); font-weight: 600; }

.shots-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.shots-strip img { width: 100%; border-radius: 16px; box-shadow: var(--shadow-sm); }

@media (max-width: 760px) {
  .platform-grid { grid-template-columns: 1fr; }
  .shots-strip { grid-template-columns: repeat(2, 1fr); }
}

/* Central de Ajuda */
.help-hero { text-align: center; padding: 56px 0 28px; }
.help-hero h1 { font-size: clamp(1.9rem, 4vw, 2.4rem); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 12px; }
.help-hero p { color: var(--text-secondary); max-width: 480px; margin: 0 auto 26px; }
.help-search {
  max-width: 480px; margin: 0 auto;
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--border); border-radius: 999px;
  padding: 12px 18px; box-shadow: var(--shadow-sm);
}
.help-search input { flex: 1; border: none; outline: none; font-size: 0.92rem; font-family: inherit; color: var(--text); }
.help-search .ic { color: var(--text-secondary); }

.help-catnav { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 26px 0 4px; }
.help-catnav a {
  font-size: 0.82rem; font-weight: 700; color: var(--text-secondary);
  background: var(--bg-soft); padding: 8px 16px; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--border);
}
.help-catnav a:hover { border-color: var(--blue); color: var(--blue); }

.help-cat { margin-bottom: 48px; scroll-margin-top: 90px; }
.help-cat-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.help-cat-head .cat-ic {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  background: var(--teal-light); color: var(--teal);
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
}
.help-cat-head h2 { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; }
.help-cat-head p { color: var(--text-secondary); font-size: 0.84rem; }

.faq-list { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:last-child { border-bottom: none; }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: none; border: none; text-align: left; cursor: pointer;
  padding: 16px 20px; font-family: inherit; font-size: 0.9rem; font-weight: 700; color: var(--text);
}
.faq-q:hover { background: var(--bg-soft); }
.faq-q .chev { flex-shrink: 0; color: var(--text-secondary); transition: transform 160ms ease; font-size: 0.8rem; }
.faq-item.open .faq-q .chev { transform: rotate(180deg); color: var(--blue); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 220ms ease; }
.faq-item.open .faq-a { max-height: 600px; }
.faq-a-inner { padding: 0 20px 18px; color: var(--text-secondary); font-size: 0.86rem; line-height: 1.65; }
.faq-a-inner ul { margin: 8px 0 0 18px; }
.faq-a-inner li { margin-bottom: 4px; }
.faq-a-inner strong { color: var(--text); }

.help-empty { text-align: center; color: var(--text-secondary); padding: 40px 0; display: none; }

/* página /outros/contato */
.contact-hero { text-align: center; padding: 60px 0 8px; }
.contact-hero h1 { font-size: clamp(2rem, 4vw, 2.5rem); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 14px; }
.contact-hero p { color: var(--text-secondary); max-width: 480px; margin: 0 auto; }

.contact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.contact-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px 22px; text-align: center; box-shadow: var(--shadow-sm);
  transition: transform 150ms ease, box-shadow 150ms ease;
}
a.contact-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.contact-card .c-ic {
  width: 50px; height: 50px; border-radius: 14px; margin: 0 auto 14px;
  background: var(--teal-light); color: var(--teal);
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
}
.contact-card h3 { font-size: 0.98rem; font-weight: 800; margin-bottom: 6px; }
.contact-card p { color: var(--text-secondary); font-size: 0.84rem; }
.contact-card .value { color: var(--blue); font-weight: 700; font-size: 0.88rem; margin-top: 4px; }

.contact-note {
  display: flex; align-items: center; gap: 14px;
  background: var(--bg-soft); border-radius: var(--radius-sm);
  padding: 18px 22px; margin-top: 32px;
}
.contact-note .n-ic { font-size: 1.6rem; flex-shrink: 0; }
.contact-note p { color: var(--text-secondary); font-size: 0.88rem; }
.contact-note a { color: var(--blue); font-weight: 700; text-decoration: none; }

@media (max-width: 760px) {
  .contact-grid { grid-template-columns: 1fr 1fr; }
}

/* páginas /para-comerciante e /para-cliente */
.persona-hero { padding: 60px 0; }
.persona-hero .shell { display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 44px; }
.persona-hero h1 { font-size: clamp(2rem, 3.6vw, 2.6rem); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 16px; }
.persona-hero p.lead { color: var(--text-secondary); font-size: 1.02rem; margin-bottom: 24px; }
.persona-hero .hero-visual img { border-radius: 18px; box-shadow: var(--shadow-md); }

.checklist-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; margin-bottom: 26px; }
.checklist-grid .ck-item { display: flex; align-items: center; gap: 9px; font-size: 0.87rem; font-weight: 700; }
.checklist-grid .ck-item::before { content: '✓'; color: var(--teal); font-weight: 800; flex-shrink: 0; width: 20px; height: 20px; background: var(--teal-light); border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; }

.detail-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.detail-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-sm); }
.detail-card .d-icon {
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--teal-light); color: var(--teal);
  display: flex; align-items: center; justify-content: center; font-size: 1.25rem; margin-bottom: 16px;
}
.detail-card .d-photo { width: calc(100% + 56px); margin: -28px -28px 18px; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; aspect-ratio: 16/10; }
.detail-card .d-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.detail-card h3 { font-size: 1.02rem; font-weight: 800; margin-bottom: 8px; }
.detail-card p.d-desc { color: var(--text-secondary); font-size: 0.85rem; margin-bottom: 14px; }
.detail-card ul.d-list { list-style: none; }
.detail-card ul.d-list li { display: flex; gap: 9px; font-size: 0.84rem; color: var(--text); margin-bottom: 8px; }
.detail-card ul.d-list li::before { content: '✓'; color: var(--teal); font-weight: 800; flex-shrink: 0; }
.badge-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.badge-pill { background: var(--bg-soft); border-radius: 999px; padding: 7px 14px; font-size: 0.8rem; font-weight: 700; color: var(--text); border: 1px solid var(--border); }

.free-callout {
  background: linear-gradient(135deg, #0B1B3A 0%, #1E3A8A 100%);
  border-radius: var(--radius); padding: 32px 34px; color: #fff;
  display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center;
}
.free-callout .fc-badge { font-size: 2.4rem; }
.free-callout h3 { font-size: 1.2rem; font-weight: 800; margin-bottom: 10px; }
.free-callout ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; }
.free-callout li { font-size: 0.85rem; color: rgba(255,255,255,0.85); display: flex; gap: 8px; }
.free-callout li::before { content: '✓'; color: var(--teal); font-weight: 800; }

@media (max-width: 860px) {
  .persona-hero .shell { grid-template-columns: 1fr; }
  .checklist-grid { grid-template-columns: 1fr; }
  .detail-cards { grid-template-columns: 1fr; }
  .free-callout { grid-template-columns: 1fr; text-align: center; }
  .free-callout ul { grid-template-columns: 1fr; text-align: left; }
}

/* legal documents (política de privacidade, exclusão de conta) */
.legal-doc { max-width: 760px; margin: 0 auto; }
.legal-doc .updated { color: var(--text-secondary); font-size: 0.85rem; margin-bottom: 36px; text-align: center; }
.legal-doc h2 { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; margin: 46px 0 14px; padding-top: 22px; border-top: 1px solid var(--border); }
.legal-doc h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.legal-doc h3 { font-size: 1rem; font-weight: 700; margin: 22px 0 10px; }
.legal-doc p { color: var(--text); font-size: 0.92rem; line-height: 1.75; margin-bottom: 14px; }
.legal-doc ul { list-style: none; margin: 0 0 16px; padding: 0; }
.legal-doc ul li { position: relative; font-size: 0.9rem; line-height: 1.65; color: var(--text); margin-bottom: 9px; padding-left: 20px; }
.legal-doc ul li::before { content: '•'; position: absolute; left: 2px; color: var(--blue); font-weight: 800; }
.legal-doc .table-wrap { overflow-x: auto; margin: 12px 0 22px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.legal-doc table { width: 100%; border-collapse: collapse; font-size: 0.83rem; min-width: 480px; }
.legal-doc table th { text-align: left; background: var(--bg-soft); color: var(--text); font-weight: 700; padding: 10px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.legal-doc table td { padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: top; }
.legal-doc table tr:last-child td { border-bottom: none; }
.legal-doc .callout { display: flex; gap: 12px; align-items: flex-start; background: var(--bg-soft); border-left: 3px solid var(--blue); border-radius: var(--radius-sm); padding: 14px 18px; margin: 18px 0; font-size: 0.88rem; line-height: 1.6; }
.legal-doc .callout .c-ic { font-size: 1.1rem; flex-shrink: 0; }

/* stub page (kept for placeholder future pages) */
.stub-wrap { min-height: 60vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 60px 24px; }
.stub-wrap .ic { font-size: 2.4rem; margin-bottom: 16px; }
.stub-wrap h1 { font-size: 1.6rem; font-weight: 800; margin-bottom: 10px; }
.stub-wrap p { color: var(--text-secondary); max-width: 420px; margin: 0 auto 22px; }

/* MENU LATERAL (gaveta) até 1240px. Era 1080px; subiu em 25/09/2026 (continuação 76) porque o menu
   do computador — com o botão "Buscar" novo — não cabe numa linha abaixo de ~1240px: o "Baixar o
   app" era cortado fora da tela (o html tem overflow-x: hidden, então ninguém via a barra de
   rolagem, o botão simplesmente sumia). O nav.js usa ESTE MESMO número pro "Outros" abrir na gaveta. */
@media (max-width: 1240px) {
  .nav-toggle { display: flex; }

  /* backdrop-filter no cabeçalho sticky costuma bugar o empilhamento de elementos
     fixed por cima dele no Safari/iOS — desliga só no mobile, onde o menu embaixo
     depende de renderizar por cima de forma confiável. */
  header.site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #fff;
  }

  nav.main-nav {
    display: none;
    position: fixed;
    top: 71px; left: 0; right: 0; bottom: 0;
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 14px 20px 32px;
    overflow-y: auto;
    z-index: 9999;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-overflow-scrolling: touch;
  }
  header.nav-open nav.main-nav { display: flex; }

  nav.main-nav a, .nav-dropdown > button {
    font-size: 1.02rem;
    padding: 14px 6px;
    width: 100%;
    text-align: left;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
  }
  .nav-dropdown { width: 100%; }
  .nav-dropdown > button { width: 100%; justify-content: space-between; }
  .nav-dropdown-panel {
    position: static;
    opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none; border-radius: 0;
    padding: 0; margin: 0 0 0 12px; min-width: 0;
    max-height: 0; overflow: hidden;
    transition: max-height 200ms ease;
  }
  .nav-dropdown.sub-open .nav-dropdown-panel { max-height: 480px; }
  .nav-dropdown-panel a { padding: 12px; border-bottom: 1px dashed var(--border); border-radius: 0; }

  .nav-cta { margin: 18px 0 0; justify-content: center; padding: 14px 18px !important; }
}

@media (max-width: 1080px) {
  .hero .shell { grid-template-columns: 1fr; }
  .phone-stack { height: 380px; margin: 0 auto; max-width: 340px; }
  .steps-row { grid-template-columns: 1fr 1fr; }
  .audience-block, .audience-block.reverse, .tech-grid { grid-template-columns: 1fr; }
  .audience-block.reverse .audience-photo { order: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .download-band { flex-direction: column; text-align: center; }
  .download-band .actions { flex-direction: column; }
}

@media (max-width: 480px) {
  .phone-stack { transform: scale(0.8); transform-origin: top center; height: 340px; }
  .steps-row { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .platform-grid { grid-template-columns: 1fr; }
  .shots-strip { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .tag-grid { grid-template-columns: 1fr; }
  .download-band { padding: 32px 24px; }
  .modal-card { padding: 24px 18px; }
}

/* ---------- BUSCA PÚBLICA (PLANO_AQUISICAO_SEM_VERBA, seções 59-66) ----------
   Seção da página inicial: campo de busca + atalhos das categorias que EXISTEM de verdade
   (decisão do dono, 25/09/2026 — nada de lista fixa; vem do índice gerado).
   Reaproveita os tokens do site (--blue, --radius, --shadow-*) pra não criar um segundo visual. */
.busca-band {
  background: linear-gradient(180deg, var(--bg-soft) 0%, #fff 100%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 44px 0 40px;
}
.busca-band .busca-head { text-align: center; margin-bottom: 22px; }
.busca-band .busca-head h2 {
  font-size: clamp(1.35rem, 3vw, 1.8rem); font-weight: 800;
  letter-spacing: -0.01em; margin-bottom: 8px;
}
.busca-band .busca-head p { color: var(--text-secondary); font-size: 0.94rem; }

/* Campo de busca. É um <form>: enviar navega pra /busca — a consulta acontece na página de
   resultados, NUNCA a cada tecla (decisão do dono: buscar ao enviar). */
.busca-form {
  max-width: 620px; margin: 0 auto;
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--border); border-radius: 999px;
  padding: 8px 8px 8px 20px; box-shadow: var(--shadow-md);
}
.busca-form:focus-within { border-color: var(--blue); }
.busca-form .ic { color: var(--text-secondary); font-size: 1.05rem; }
.busca-form input {
  flex: 1; min-width: 0; border: none; outline: none;
  font-size: 0.98rem; font-family: inherit; color: var(--text); background: transparent;
  padding: 8px 0;
}
.busca-form button {
  flex: 0 0 auto; border: none; cursor: pointer; font-family: inherit;
  font-size: 0.9rem; font-weight: 700; color: #fff; background: var(--blue);
  border-radius: 999px; padding: 11px 22px;
}
.busca-form button:hover { background: var(--blue-dark); }

/* Atalhos de categoria e de tipo */
.busca-atalhos { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 22px; }
.busca-atalhos a {
  font-size: 0.84rem; font-weight: 700; color: var(--text-secondary);
  background: #fff; padding: 9px 16px; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--border); transition: border-color .15s, color .15s;
}
.busca-atalhos a:hover { border-color: var(--blue); color: var(--blue); }
.busca-atalhos a .qtd { color: var(--text-secondary); font-weight: 500; opacity: .75; }
.busca-atalhos a.destaque { background: var(--blue); border-color: var(--blue); color: #fff; }
.busca-atalhos a.destaque .qtd { color: #fff; }
.busca-atalhos-tipos { margin-top: 12px; }

/* Enquanto o índice não carregou, e quando ele não tem nada: nunca deixa esqueleto na tela. */
.busca-atalhos-skeleton { display: flex; gap: 10px; justify-content: center; margin-top: 22px; }
.busca-atalhos-skeleton span {
  display: block; height: 36px; width: 104px; border-radius: 999px;
  background: linear-gradient(90deg, #eef2f7 25%, #f7fafc 37%, #eef2f7 63%);
  background-size: 400% 100%; animation: buscaSk 1.3s ease-in-out infinite;
}
@keyframes buscaSk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

@media (max-width: 720px) {
  .busca-band { padding: 34px 0 30px; }
  .busca-form { padding: 6px 6px 6px 16px; }
  .busca-form button { padding: 10px 16px; font-size: 0.85rem; }
  .busca-atalhos-skeleton span:nth-child(n+4) { display: none; }
}

/* ---------- PÁGINA DE BUSCA (/busca) ---------- */
.busca-topo { padding: 34px 0 26px; background: var(--bg-soft); border-bottom: 1px solid var(--border); }
.busca-topo h1 { font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 800; letter-spacing: -0.02em; }
.busca-topo .lead-sm { color: var(--text-secondary); font-size: 0.94rem; margin: 6px 0 20px; max-width: 640px; }

/* Abas de tipo. Só aparecem as que existem de verdade (busca.js monta). */
.busca-tipos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.busca-tipos button {
  font-family: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer;
  background: #fff; color: var(--text-secondary); border: 1px solid var(--border);
  border-radius: 999px; padding: 9px 16px;
}
.busca-tipos button:hover { border-color: var(--blue); color: var(--blue); }
.busca-tipos button.ativo { background: var(--blue); border-color: var(--blue); color: #fff; }
.busca-tipos button .qtd { font-weight: 500; opacity: .7; }

.busca-corpo { padding: 28px 0 56px; }
.busca-layout { display: grid; grid-template-columns: 250px 1fr; gap: 28px; align-items: start; }

/* Filtros: coluna fixa no computador, gaveta no celular */
.busca-filtros {
  position: sticky; top: 84px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 14px;
}
.filtro-grupo { display: flex; flex-direction: column; gap: 6px; }
.filtro-grupo label { font-size: 0.78rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .03em; }
.filtro-grupo select, .filtro-grupo input {
  font-family: inherit; font-size: 0.9rem; color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 9px 10px; background: #fff; width: 100%;
}
.filtro-grupo select:focus, .filtro-grupo input:focus { outline: none; border-color: var(--blue); }
.filtro-faixa { display: flex; align-items: center; gap: 8px; }
.filtro-faixa span { color: var(--text-secondary); font-size: 0.82rem; }
.btn-limpar { margin-top: 4px; text-align: center; font-size: 0.85rem; padding: 10px 14px; }
.busca-filtros-toggle { display: none; }

.busca-barra {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-bottom: 18px;
}
.busca-contagem { font-size: 0.92rem; font-weight: 700; color: var(--text); }
.busca-ordenar { font-size: 0.82rem; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; }
.busca-ordenar select {
  font-family: inherit; font-size: 0.85rem; color: var(--text);
  border: 1px solid var(--border); border-radius: 999px; padding: 8px 12px; background: #fff;
}
.busca-ordenar select:focus { outline: none; border-color: var(--blue); }

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

.res-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; cursor: pointer; box-shadow: var(--shadow-sm);
  transition: transform .15s, box-shadow .15s, border-color .15s;
  display: flex; flex-direction: column;
}
.res-card:hover, .res-card:focus-visible {
  transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--blue); outline: none;
}
.rc-foto { position: relative; aspect-ratio: 1 / 1; background: var(--bg-soft); }
.rc-foto img { width: 100%; height: 100%; object-fit: cover; }
.rc-foto-fallback { width: 100%; height: 100%; display: grid; place-items: center; font-size: 2.4rem; opacity: .35; }
.rc-selo {
  position: absolute; top: 10px; left: 10px; background: #0B1B3A; color: #fff;
  font-size: 0.68rem; font-weight: 800; padding: 5px 10px; border-radius: 999px;
}
.rc-body { padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.rc-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.rc-topo h3 { font-size: 0.98rem; font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; }
.rc-nota { flex: 0 0 auto; font-size: 0.8rem; font-weight: 800; color: var(--teal); white-space: nowrap; }
.rc-nota .rc-qtd { font-weight: 500; color: var(--text-secondary); }
.rc-nota.rc-sem { color: var(--text-secondary); font-weight: 500; font-size: 0.74rem; }
.rc-cat, .rc-local, .rc-atend { font-size: 0.8rem; color: var(--text-secondary); }
.rc-rodape {
  margin-top: auto; padding-top: 10px; display: flex; flex-wrap: wrap; gap: 4px 10px;
  align-items: baseline; justify-content: space-between;
}
.rc-itens { font-size: 0.76rem; color: var(--text-secondary); }
.rc-preco { font-size: 0.78rem; color: var(--text); }

.busca-vazio {
  background: #fff; border: 1px dashed var(--border); border-radius: var(--radius);
  padding: 36px 24px; text-align: center;
}
.bv-titulo { font-size: 1.02rem; font-weight: 800; margin-bottom: 8px; }
.bv-texto { color: var(--text-secondary); font-size: 0.9rem; max-width: 460px; margin: 0 auto 18px; }
.busca-mais { display: block; margin: 26px auto 0; }

@media (max-width: 900px) {
  .busca-layout { grid-template-columns: 1fr; }
  /* No celular os filtros viram gaveta: ficam escondidos até tocar em "Filtros". Manter a coluna
     fixa aqui empurraria os resultados pra baixo da dobra. */
  .busca-filtros { position: static; display: none; }
  .busca-filtros.aberto { display: flex; }
  .busca-filtros-toggle {
    display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
    font-family: inherit; font-size: 0.88rem; font-weight: 700; cursor: pointer;
    background: #fff; color: var(--text); border: 1px solid var(--border);
    border-radius: 999px; padding: 10px 18px; margin-bottom: 14px;
  }
  .busca-grade { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
  .rc-topo { flex-direction: column; gap: 2px; }
}

/* CTA de "ver todos e filtrar" no cabeçalho das vitrines (peça 3).
   `showcase-head` é flex com space-between, então o botão já vai pra direita; o que falta é impedir
   que ele esticar e garantir que no celular ele fique alinhado à esquerda junto do texto. */
.busca-head-cta { flex: 0 0 auto; white-space: nowrap; font-size: 0.88rem; padding: 11px 20px; }
@media (max-width: 720px) {
  .busca-head-cta { align-self: flex-start; }
}

/* ---------- PÁGINA DE CADA COMÉRCIO (/cidade/categoria/nome) ----------
   A página é montada pela Cloud Function `paginaComercio`, que referencia este mesmo arquivo —
   por isso o visual acompanha o site sem a função carregar CSS próprio. */
.pc-topo { padding: 22px 0 30px; background: var(--bg-soft); border-bottom: 1px solid var(--border); }
.pc-migalhas { font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 18px; }
.pc-migalhas a { color: var(--blue); text-decoration: none; }
.pc-migalhas a:hover { text-decoration: underline; }

.pc-cabecalho { display: grid; grid-template-columns: 280px 1fr; gap: 28px; align-items: start; }
.pc-foto {
  position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius);
  overflow: hidden; background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.pc-foto img { width: 100%; height: 100%; object-fit: cover; }
.pc-info h1 { font-size: clamp(1.5rem, 4vw, 2.2rem); font-weight: 800; letter-spacing: -0.02em; }
.pc-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.pc-nota { font-size: 0.95rem; font-weight: 800; color: var(--teal); margin-bottom: 6px; }
.pc-nota span { font-weight: 500; color: var(--text-secondary); }
.pc-nota.pc-sem { color: var(--text-secondary); font-weight: 500; }
.pc-local { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 10px; }
.pc-desc { font-size: 0.94rem; color: var(--text); margin-bottom: 18px; max-width: 640px; }
.pc-aviso { font-size: 0.8rem; color: var(--text-secondary); margin-top: 12px; max-width: 520px; }

.pc-corpo { padding: 34px 0 56px; }
.pc-bloco { margin-bottom: 38px; }
.pc-bloco h2 { font-size: 1.15rem; font-weight: 800; margin-bottom: 16px; letter-spacing: -0.01em; }
.pc-bloco h2 .pc-qtd {
  font-size: 0.78rem; font-weight: 700; color: var(--text-secondary);
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 999px; padding: 3px 10px; margin-left: 6px; vertical-align: middle;
}
.pc-itens { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.pc-item {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 14px 10px 10px;
}
.pc-item img { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; }
.pc-item-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pc-item-txt strong { font-size: 0.9rem; font-weight: 700; }
.pc-item-det { font-size: 0.76rem; color: var(--text-secondary); }
.pc-item-preco { font-size: 0.85rem; font-weight: 800; color: var(--blue); white-space: nowrap; }

.pc-horarios { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.pc-horarios li { font-size: 0.85rem; color: var(--text-secondary); }

.pc-fim {
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 32px 24px; text-align: center;
}
.pc-fim h2 { font-size: 1.2rem; font-weight: 800; margin-bottom: 8px; }
.pc-fim p { color: var(--text-secondary); font-size: 0.92rem; margin-bottom: 18px; }

@media (max-width: 860px) {
  .pc-cabecalho { grid-template-columns: 1fr; }
  .pc-foto { max-width: 260px; }
  .pc-itens { grid-template-columns: 1fr; }
}

/* ---------- Seções acrescentadas na página do comércio (paridade com a tela do app) ---------- */
.pc-comodidades { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.pc-comodidades span {
  font-size: 0.78rem; font-weight: 600; color: var(--text-secondary);
  background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px;
}

/* Aviso de taxa: fica ANTES de qualquer preço, porque o preço mostrado já é o valor final do app. */
.pc-taxa-nota {
  background: var(--teal-light); border: 1px solid #b8e6d5; border-radius: var(--radius-sm);
  padding: 14px 16px; font-size: 0.84rem; color: #0a6b52; margin-bottom: 30px; line-height: 1.5;
}
.pc-nota-bloco { font-size: 0.8rem; color: var(--text-secondary); margin: -8px 0 14px; }
.pc-item-preco { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.pc-item-preco-nota { font-size: 0.64rem; font-weight: 500; color: var(--text-secondary); }

/* Cupons */
.pc-cupons { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.pc-cupom {
  display: flex; align-items: center; gap: 14px;
  background: var(--purple-light); border: 1px dashed var(--purple);
  border-radius: var(--radius-sm); padding: 14px;
}
.pc-cupom-valor { font-size: 1.02rem; font-weight: 800; color: var(--purple); white-space: nowrap; }
.pc-cupom-txt { display: flex; flex-direction: column; min-width: 0; }
.pc-cupom-txt strong { font-family: ui-monospace, monospace; font-size: 0.92rem; letter-spacing: .04em; }
.pc-cupom-txt span { font-size: 0.76rem; color: var(--text-secondary); }
.pc-cupom-tag {
  align-self: flex-start; margin-top: 4px; background: var(--purple); color: #fff;
  font-size: 0.64rem !important; font-weight: 800; padding: 2px 8px; border-radius: 999px;
}
.pc-cupom-aviso { font-size: 0.84rem; color: var(--text); margin-top: 14px; }

/* Profissionais */
.pc-profs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.pc-prof {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px 12px;
}
.pc-prof img, .pc-prof-inicial {
  width: 76px; height: 76px; border-radius: 50%; object-fit: cover; margin-bottom: 6px;
}
.pc-prof-inicial {
  display: grid; place-items: center; background: var(--bg-soft); color: var(--blue);
  font-size: 1.6rem; font-weight: 800; border: 1px solid var(--border);
}
.pc-prof strong { font-size: 0.88rem; }
.pc-prof-esp { font-size: 0.76rem; color: var(--blue); font-weight: 600; }
.pc-prof-desc { font-size: 0.74rem; color: var(--text-secondary); }

/* Horários: tabela de 2 colunas por linha */
.pc-horarios { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 24px; }
.pc-horarios li {
  display: flex; justify-content: space-between; gap: 12px; font-size: 0.86rem;
  padding: 7px 0; border-bottom: 1px solid var(--border);
}
.pc-horarios li span:first-child { color: var(--text-secondary); }
.pc-fechado { color: var(--text-secondary); opacity: .7; }

/* Galeria */
.pc-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.pc-galeria img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
}

@media (max-width: 860px) {
  .pc-profs { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .pc-galeria { grid-template-columns: 1fr 1fr; }
}

/* ---------- Listagem de categoria × cidade (/cidade/categoria) ---------- */
.lc-taxa-nota {
  background: var(--teal-light); border: 1px solid #b8e6d5; border-radius: var(--radius-sm);
  padding: 12px 16px; font-size: 0.83rem; color: #0a6b52; margin-bottom: 22px;
}
/* O card da listagem é um <a>, então precisa perder a decoração de link e herdar a cor */
/* Card que é link (<a>) — na listagem E na busca, desde que o resultado passou a levar à página da
   loja. Sem isto o card inteiro sairia sublinhado e azul. */
a.lc-card, a.res-card { text-decoration: none; color: inherit; }

/* ═══════════════════════════════════════════════════════════════════════════════════════
   CAMADA DE EFEITOS E POLIMENTO (25/09/2026 — pedido do dono: "deixar o site bonito mesmo")
   Especificação: docs/PLANO_AQUISICAO_SEM_VERBA.md, seção 73.

   ⚠️ TUDO AQUI É PROGRESSIVO: as classes de animação são adicionadas por /efeitos.js, nunca
   escritas no HTML. Isso é de propósito — se o JavaScript falhar ou demorar, o conteúdo aparece
   normal em vez de ficar invisível esperando uma animação que não vem. É a diferença entre um site
   com efeito e um site que some.

   ⚠️ RESPEITA prefers-reduced-motion: quem configurou o sistema pra reduzir animação (enjoo,
   sensibilidade, preferência) recebe o site inteiro sem movimento. Não é opcional.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* ---------- 1. Revelação ao rolar ---------- */
/* O estado inicial só existe quando o JS marcou a página como pronta (js-efeitos no <html>) —
   sem isso, nada fica escondido. */
.js-efeitos .revelar {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1);
}
.js-efeitos .revelar.revelado { opacity: 1; transform: none; }
/* Escada: itens irmãos entram em sequência, não todos de uma vez. Atraso pequeno de propósito —
   acima de ~60ms por item a lista parece lenta em vez de elegante. */
.js-efeitos .revelar[data-atraso="1"] { transition-delay: .06s; }
.js-efeitos .revelar[data-atraso="2"] { transition-delay: .12s; }
.js-efeitos .revelar[data-atraso="3"] { transition-delay: .18s; }
.js-efeitos .revelar[data-atraso="4"] { transition-delay: .24s; }
.js-efeitos .revelar[data-atraso="5"] { transition-delay: .30s; }

/* ---------- 2. Cabeçalho que reage à rolagem ---------- */
header.site-header {
  transition: box-shadow .3s ease, background-color .3s ease;
}
/* Sombra ao rolar: vale em qualquer tela. */
header.site-header.rolado { box-shadow: 0 4px 24px rgba(15, 23, 42, .08); }
/* 🐛 O DESFOQUE (vidro fosco) é SÓ para computador. Corrigido na verificação de 25/09/2026: a
   primeira versão aplicava em qualquer tela e, por ter mais especificidade, VENCIA a regra antiga
   do site que desliga o backdrop-filter onde o menu vira gaveta (hoje até 1240px) — regra que existe porque o desfoque no
   cabeçalho fixo quebra o menu do celular no Safari/iOS (o menu deixa de renderizar por cima).
   Ou seja: eu tinha reintroduzido um bug de iPhone já corrigido. No celular o cabeçalho segue
   branco sólido, como o site definiu. */
@media (min-width: 1241px) {
  header.site-header.rolado {
    background: rgba(255, 255, 255, .88);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
  }
}

/* ---------- 3. Botões: resposta ao toque e brilho ---------- */
.btn {
  position: relative; overflow: hidden;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease,
              background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.985); }
.btn-primary:hover { box-shadow: 0 10px 26px rgba(37, 99, 235, .32); }
/* Brilho que atravessa o botão no hover. ::after com transform (não background-position) pra
   animar na GPU em vez de repintar. */
.btn-primary::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.28) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform .7s ease;
  pointer-events: none;
}
.btn-primary:hover::after { transform: translateX(120%); }

/* ---------- 4. Cards: elevação e foto com zoom suave ---------- */
.step-card, .platform-card, .detail-card, .contact-card, .help-cat, .faq-item {
  transition: transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s ease, border-color .28s ease;
}
.step-card:hover, .platform-card:hover, .detail-card:hover, .contact-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: #cfe0f7;
}
.showcase-card, .res-card {
  transition: transform .26s cubic-bezier(.16,1,.3,1), box-shadow .26s ease, border-color .2s ease;
}
.showcase-card:hover, .res-card:hover { transform: translateY(-6px); }
/* Zoom na foto sem mexer no tamanho do card (o container corta o excesso). */
.card-foto, .rc-foto, .pc-foto { overflow: hidden; }
.card-foto img, .rc-foto img, .pc-galeria img { transition: transform .5s cubic-bezier(.16,1,.3,1); }
.showcase-card:hover .card-foto img, .res-card:hover .rc-foto img { transform: scale(1.06); }
.pc-galeria img:hover { transform: scale(1.04); }

/* Ícone do passo com uma respirada no hover */
.step-card .step-ic { transition: transform .35s cubic-bezier(.34,1.56,.64,1); display: inline-block; }
.step-card:hover .step-ic { transform: scale(1.18) rotate(-6deg); }

/* ---------- 5. Chips e pílulas ---------- */
.badge-pill, .busca-atalhos a, .busca-tipos button, .help-catnav a {
  transition: transform .18s ease, border-color .2s ease, color .2s ease,
              background-color .2s ease, box-shadow .2s ease;
}
.busca-atalhos a:hover, .help-catnav a:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.busca-tipos button:hover { transform: translateY(-2px); }

/* ---------- 6. Foco visível (acessibilidade, e fica bonito) ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, .res-card:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- 7. Carrossel: pausa no hover e ao sair da tela ---------- */
/* Sem a pausa fora da tela a animação roda pra sempre e come bateria no celular. */
.showcase-viewport:hover .showcase-track,
.showcase-track.pausado { animation-play-state: paused; }

/* ---------- 8. Entrada da página ---------- */
.js-efeitos .hero > .shell > div:first-child > * {
  animation: subirEntrar .7s cubic-bezier(.16,1,.3,1) backwards;
}
.js-efeitos .hero > .shell > div:first-child > *:nth-child(1) { animation-delay: .05s; }
.js-efeitos .hero > .shell > div:first-child > *:nth-child(2) { animation-delay: .13s; }
.js-efeitos .hero > .shell > div:first-child > *:nth-child(3) { animation-delay: .21s; }
.js-efeitos .hero > .shell > div:first-child > *:nth-child(4) { animation-delay: .29s; }
.js-efeitos .hero > .shell > div:first-child > *:nth-child(5) { animation-delay: .37s; }
@keyframes subirEntrar { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* Selos flutuantes do hero boiando de leve, cada um fora de fase */
.js-efeitos .float-badge { animation: boiar 5s ease-in-out infinite; }
.js-efeitos .float-badge.fb-2 { animation-delay: -1.2s; }
.js-efeitos .float-badge.fb-3 { animation-delay: -2.4s; }
.js-efeitos .float-badge.fb-4 { animation-delay: -3.6s; }
@keyframes boiar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* ---------- 9. Cupom ---------- */
.pc-cupom { transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease; }
.pc-cupom:hover { transform: scale(1.02); box-shadow: 0 8px 22px rgba(124, 58, 237, .18); }

/* ---------- 10. Profissional ---------- */
.pc-prof img, .pc-prof-inicial { transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.pc-prof:hover img, .pc-prof:hover .pc-prof-inicial { transform: scale(1.08); }

/* ---------- 11. Rolagem suave para âncoras ---------- */
html { scroll-behavior: smooth; }

/* ═══════════════════════════════════════════════════════════════════════════════════════
   POLIMENTO PARA CELULAR
   ═══════════════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 620px) {
  /* Margem lateral menor ganha espaço real de leitura em tela estreita, sem colar no vidro. */
  .shell { padding: 0 16px; }

  /* Alvo de toque mínimo confortável: botão fino é o que mais irrita em celular. */
  .btn { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; }
  .busca-atalhos a, .busca-tipos button, .help-catnav a { min-height: 40px; display: inline-flex; align-items: center; }

  /* Botões de ação empilhados ocupam a linha toda — mais fácil de acertar com o dedo. */
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn { width: 100%; }

  /* Campo de busca: o botão encolhe pro texto não sumir */
  .busca-form { padding: 6px 6px 6px 14px; }
  .busca-form input { font-size: 0.92rem; }

  /* Rodapé em coluna única, respirando */
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
}

@media (max-width: 420px) {
  .busca-grade { grid-template-columns: 1fr 1fr; gap: 10px; }
  .rc-body { padding: 10px 10px 12px; }
  .rc-topo h3 { font-size: 0.88rem; }
  .pc-horarios { grid-template-columns: 1fr; }
}

/* Nada no site pode causar rolagem horizontal — é o defeito de celular mais comum e o mais feio. */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, iframe { max-width: 100%; }


/* ---------- RESPIRO ABAIXO DAS IMAGENS DO TOPO (achado na verificação de 25/09/2026) ----------
   As imagens de celular do topo são posicionadas de forma absoluta e saem ~165px abaixo da própria
   caixa (.phone-stack) — no computador ~86px. Antes isso caía no espaço vazio da seção seguinte;
   quando a faixa de busca entrou logo depois do topo, a sobra passou a cair EM CIMA do título dela.
   Medido com emulação real de celular: invadia o título em 63-73px no tablet (600-900px), encostava
   no celular e sobrava só 2-12px no computador.
   Corrigido com margin-bottom, e NÃO mudando a altura da caixa: os selos flutuantes são posicionados
   em porcentagem dela, então mudar a altura deslocaria o desenho inteiro. */
.phone-stack { margin-bottom: 40px; }
@media (max-width: 1080px) { .phone-stack { margin-bottom: 110px; } }
@media (max-width: 480px)  { .phone-stack { margin-bottom: 40px; } }

/* ═══════════════════════════════════════════════════════════════════════════════════════
   76. REDESENHO NO ESTILO WEBMOTORS (pedido do dono, 25/09/2026)
   "visite o webmotors.com.br, é mais ou menos assim que eu quero o site". Estrutura e padrões
   copiados de lá; CORES e TIPOGRAFIA continuam as do IntegrApp. O que foi copiado:
     • busca da página inicial: cartão branco com ABAS COM CONTAGEM ("Carro 410.068"), título grande,
       campo com EXEMPLOS QUE SE ALTERNAM ("Buscar por… SUV até R$100 mil usado") e "Mais opções"
       com atalhos + contagem;
     • "Confira as Lojas Oficiais" → aqui é "Confira as categorias": carrossel de cards com imagem,
       nome e quantidade, com setas no computador e arrastar no celular;
     • /busca no estilo da listagem deles: título que muda com os filtros, filtros na lateral em
       grupos recolhíveis com A CONTAGEM EM CADA OPÇÃO, filtros aplicados em etiquetas com "×",
       "Ordenar por" (Mais relevantes / Menor preço / Maior preço) e card com o preço em destaque.
   A versão ao vivo do Webmotors bloqueia robô; a referência foi lida pela cópia do Internet Archive.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* ---------- Botão "Buscar" do cabeçalho (todas as páginas, inclusive as geradas) ---------- */
/* Contorno azul: lê como BOTÃO sem competir com o "Baixar o app", que é o sólido. */
nav.main-nav a.nav-buscar {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1.5px solid var(--blue); color: var(--blue); font-weight: 700;
  padding: 8px 15px; border-radius: 999px; margin-left: 6px;
}
nav.main-nav a.nav-buscar:hover { background: var(--blue); color: #fff; }
.nav-buscar-ic { font-size: .95em; line-height: 1; }
/* "Baixar o app" azul de verdade. 🐛 Achado em 25/09/2026: a regra geral dos links do menu
   (nav.main-nav a { background: none }) é mais específica que .nav-cta e apagava o fundo azul — no
   computador o botão era texto BRANCO em fundo BRANCO, invisível, desde sempre. */
nav.main-nav a.nav-cta { background: var(--blue); }
nav.main-nav a.nav-cta:hover { background: var(--blue-dark); }
/* Cabeçalho mais largo que o conteúdo (1180px): o menu tem 11 itens e não cabia. */
header.site-header .shell { width: min(1360px, 100%); }
/* Entre 1241 e 1360px o menu só cabe numa linha com o Buscar compacto (só a lupa — o nome continua
   pro leitor de tela, pelo aria-label) e os links um pouco mais juntos. Acima disso: "🔍 Buscar". */
@media (min-width: 1241px) and (max-width: 1360px) {
  nav.main-nav a, .nav-dropdown > button { padding-left: 8px; padding-right: 8px; }
  nav.main-nav a.nav-buscar { font-size: 0; gap: 0; padding: 8px 11px; }
  nav.main-nav a.nav-buscar .nav-buscar-ic { font-size: .95rem; }
}
@media (max-width: 1240px) {
  /* Na gaveta do celular: botão de largura cheia, acima do "Baixar o app". */
  nav.main-nav a.nav-buscar {
    margin: 18px 0 0; justify-content: center; text-align: center; font-size: 1rem;
    padding: 13px 18px; border: 1.5px solid var(--blue); border-radius: 999px;
  }
  nav.main-nav a.nav-buscar + .nav-cta { margin-top: 10px; }
}

/* ═══ PÁGINA INICIAL — busca principal (.bh) ═══ */
.bh {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(135deg, #0B1B3A 0%, #12337E 45%, #1D4ED8 75%, #1E6FD9 100%);
  padding: 46px 0 54px;
}
/* Luzes de fundo (decoração pura, atrás do conteúdo) */
.bh::before, .bh::after {
  content: ""; position: absolute; border-radius: 50%; z-index: -1; pointer-events: none;
}
.bh::before {
  width: 620px; height: 620px; right: -180px; top: -300px;
  background: radial-gradient(circle, rgba(15,163,127,.55) 0%, rgba(15,163,127,0) 65%);
}
.bh::after {
  width: 560px; height: 560px; left: -200px; bottom: -330px;
  background: radial-gradient(circle, rgba(96,165,250,.45) 0%, rgba(96,165,250,0) 65%);
}
.bh-card {
  position: relative; max-width: 920px; margin: 0 auto;
  background: #fff; border-radius: 24px; padding: 22px 28px 22px;
  box-shadow: 0 30px 80px rgba(2, 8, 23, .38), 0 2px 8px rgba(2, 8, 23, .12);
}
.bh-abas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.bh-aba {
  font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg-soft); border: 1px solid var(--border); color: var(--text-secondary);
  font-size: .9rem; font-weight: 700; padding: 9px 16px; border-radius: 999px;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.bh-aba:hover { border-color: var(--blue); color: var(--blue); }
.bh-aba.ativa { background: var(--blue); border-color: var(--blue); color: #fff; }
.bh-aba[hidden] { display: none; }
.bh-abas[hidden] { display: none; }
.bh-qtd {
  font-size: .74rem; font-weight: 800; padding: 2px 8px; border-radius: 999px;
  background: rgba(15, 23, 42, .07);
}
.bh-qtd:empty { display: none; }
.bh-aba.ativa .bh-qtd { background: rgba(255, 255, 255, .22); }
.bh h1 {
  font-size: clamp(1.55rem, 3.4vw, 2.3rem); font-weight: 800; letter-spacing: -.025em;
  line-height: 1.15; margin-bottom: 16px; color: var(--text);
}
.bh-destaque { color: var(--blue); }

/* Campo grande com o exemplo que se alterna por cima (o "Buscar por…" deles). */
.bh-form { display: flex; gap: 10px; align-items: stretch; }
.bh-campo {
  position: relative; flex: 1; min-width: 0; display: flex; align-items: center;
  border: 2px solid var(--border); border-radius: 16px; background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.bh-campo:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(37, 99, 235, .14); }
.bh-lupa { position: absolute; left: 18px; font-size: 1.1rem; pointer-events: none; }
.bh-campo input {
  width: 100%; height: 60px; border: none; outline: none; background: transparent; border-radius: 14px;
  font-family: inherit; font-size: 1.05rem; color: var(--text); padding: 0 16px 0 50px;
}
.bh-campo input::-webkit-search-cancel-button { cursor: pointer; }
.bh-exemplo {
  position: absolute; left: 50px; right: 14px; top: 0; bottom: 0; pointer-events: none;
  display: flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap;
  color: var(--text-secondary); font-size: 1.02rem;
}
.bh-ex-roda { position: relative; flex: 1; min-width: 0; height: 1.45em; overflow: hidden; }
.bh-ex-roda span {
  position: absolute; left: 0; top: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  font-weight: 700; color: var(--text);
  transition: transform .5s cubic-bezier(.16, 1, .3, 1), opacity .5s ease;
}
.bh-ex-roda span.sai { transform: translateY(-110%); opacity: 0; }
.bh-ex-roda span.entra { transform: translateY(110%); opacity: 0; transition: none; }
.bh-campo.com-texto .bh-exemplo, .bh-campo:focus-within .bh-exemplo { display: none; }
.bh-btn {
  font-family: inherit; cursor: pointer; border: none; flex: 0 0 auto;
  background: var(--blue); color: #fff; font-size: 1.02rem; font-weight: 800;
  padding: 0 32px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background-color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.bh-btn:hover { background: var(--blue-dark); box-shadow: 0 10px 26px rgba(37, 99, 235, .35); transform: translateY(-1px); }

/* "Mais opções": atalhos com contagem real */
.bh-mais { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.bh-mais:empty { display: none; }
.bh-mais-rot { font-size: .8rem; font-weight: 800; color: var(--text-secondary); margin-right: 2px; }
.bh-mais a {
  font-size: .85rem; font-weight: 700; color: var(--blue); text-decoration: none;
  padding: 7px 12px; border-radius: 999px; background: #EFF5FF;
  transition: background-color .2s ease, transform .2s ease;
}
.bh-mais a:hover { background: #DCE8FF; transform: translateY(-1px); }
.bh-mais a .bh-mais-qtd { color: var(--text-secondary); font-weight: 600; }
.bh-rodape {
  max-width: 920px; margin: 16px auto 0; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px 18px; color: rgba(255, 255, 255, .88); font-size: .84rem; font-weight: 600;
}

/* Título do bloco da marca (era o h1 da página; virou h2 quando a busca passou pro topo). */
.hero h2.hero-titulo {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 800; letter-spacing: -0.02em;
  line-height: 1.15; margin-bottom: 16px;
}
.hero h2.hero-titulo .c-blue { color: var(--blue); }
.hero h2.hero-titulo .c-teal { color: var(--teal); }

/* ═══ PÁGINA INICIAL — carrossel "Confira as categorias" (.cc) ═══ */
.cc { padding: 46px 0 8px; }
.cc-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.cc-cab h2 { font-size: clamp(1.35rem, 3vw, 1.8rem); font-weight: 800; letter-spacing: -.02em; }
.cc-cab p { color: var(--text-secondary); font-size: .92rem; margin-top: 4px; }
.cc-todas { font-size: .9rem; font-weight: 700; color: var(--blue); text-decoration: none; white-space: nowrap; }
.cc-todas:hover { text-decoration: underline; }

.cc-area { position: relative; margin: 0 -10px; }
.cc-trilho {
  display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scroll-padding: 0 10px; padding: 10px 10px 24px; scrollbar-width: none; overscroll-behavior-x: contain;
}
.cc-trilho::-webkit-scrollbar { display: none; }
.cc-card {
  flex: 0 0 240px; scroll-snap-align: start; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--border); border-radius: 20px; overflow: hidden;
  display: flex; flex-direction: column; box-shadow: var(--shadow-sm);
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease, border-color .2s ease;
}
.cc-card:hover, .cc-card:focus-visible {
  transform: translateY(-6px); box-shadow: 0 18px 40px rgba(15, 23, 42, .14); border-color: #CFE0F7; outline: none;
}
.cc-img { aspect-ratio: 3 / 2; background: var(--bg-soft); overflow: hidden; }
.cc-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.cc-card:hover .cc-img img { transform: scale(1.07); }
.cc-img-vazia { width: 100%; height: 100%; display: grid; place-items: center; font-size: 2.6rem; }
.cc-corpo { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.cc-nome { font-size: 1rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }
.cc-qtd { font-size: .84rem; color: var(--text-secondary); }
.cc-qtd strong { color: var(--text); }
.cc-ver { margin-top: auto; padding-top: 10px; font-size: .85rem; font-weight: 700; color: var(--blue); }
.cc-card:hover .cc-ver { text-decoration: underline; }

.cc-seta {
  position: absolute; top: calc(50% - 8px); transform: translateY(-50%); z-index: 2;
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--border);
  background: #fff; color: var(--text); font-size: 1.5rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center; box-shadow: var(--shadow-md);
  transition: opacity .2s ease, transform .2s ease, background-color .2s ease;
}
.cc-seta:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.cc-seta.esq { left: -12px; }
.cc-seta.dir { right: -12px; }
.cc-seta[hidden] { display: none; }
/* Esmaecido na borda direita enquanto houver mais cards pra rolar */
.cc-area::after {
  content: ""; position: absolute; right: 0; top: 0; bottom: 24px; width: 64px; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff); opacity: 0; transition: opacity .2s ease;
}
.cc-area.tem-mais::after { opacity: 1; }
.cc-sk {
  flex: 0 0 240px; height: 262px; border-radius: 20px;
  background: linear-gradient(90deg, var(--bg-soft) 25%, #EDF1F6 37%, var(--bg-soft) 63%);
  background-size: 400% 100%; animation: shimmer 1.4s ease infinite;
}

/* ═══ /busca NO ESTILO DA LISTAGEM DO WEBMOTORS ═══ */
.bl-topo {
  background: linear-gradient(135deg, #0B1B3A 0%, #12337E 55%, #1D4ED8 100%);
  padding: 16px 0 20px;
}
.bl-migalhas { display: flex; flex-wrap: wrap; gap: 6px; font-size: .8rem; color: rgba(255, 255, 255, .72); margin-bottom: 12px; }
.bl-migalhas a { color: #fff; font-weight: 600; text-decoration: none; }
.bl-migalhas a:hover { text-decoration: underline; }
.bl-form { display: flex; gap: 10px; max-width: 880px; }
.bl-form .bh-campo { border-color: #fff; }
.bl-form .bh-campo input { height: 54px; font-size: 1rem; }
.bl-form .bh-btn { padding: 0 28px; }

.busca-corpo { padding: 24px 0 64px; }
.bl-cab { margin-bottom: 14px; }
.bl-cab h1 { font-size: clamp(1.35rem, 2.8vw, 1.9rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.bl-cab .busca-contagem { display: block; margin-top: 4px; font-size: .92rem; font-weight: 600; color: var(--text-secondary); }
.bl-cab .busca-tipos { margin-top: 14px; }
.busca-layout { grid-template-columns: 292px minmax(0, 1fr); gap: 28px; }

/* Lateral de filtros */
.busca-filtros {
  display: block; padding: 0; gap: 0; top: 88px;
  max-height: calc(100vh - 104px); overflow-y: auto; scrollbar-width: thin;
  border-radius: 18px;
}
.bf-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 16px 18px 14px; border-bottom: 1px solid var(--border);
}
.bf-topo strong { font-size: 1.02rem; font-weight: 800; }
.bf-limpar {
  font-family: inherit; font-size: .82rem; font-weight: 700; color: var(--blue);
  background: none; border: none; cursor: pointer; padding: 4px 2px; margin-left: auto;
}
.bf-limpar[hidden] { display: none; }
.bf-limpar:hover { text-decoration: underline; }
.bf-fechar {
  display: none; font-family: inherit; font-size: 1.1rem; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--border); background: #fff; cursor: pointer; place-items: center;
}
.bf-grupo { border-bottom: 1px solid var(--border); }
.bf-grupo:last-child { border-bottom: none; }
.bf-grupo > summary {
  list-style: none; cursor: pointer; padding: 14px 18px; font-size: .93rem; font-weight: 800;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; user-select: none;
}
.bf-grupo > summary::-webkit-details-marker { display: none; }
/* Seta desenhada em CSS (o caractere "⌄" saía parecendo um "v" solto em algumas fontes). */
.bf-grupo > summary::after {
  content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin: -4px 4px 0 0;
  border-right: 2px solid var(--text-secondary); border-bottom: 2px solid var(--text-secondary);
  transform: rotate(45deg); transition: transform .2s ease;
}
.bf-grupo:not([open]) > summary::after { transform: rotate(-45deg); margin-top: 0; }
.bf-grupo > summary:hover { background: var(--bg-soft); }
.bf-ativo-pt { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); margin: 0 auto 0 8px; display: inline-block; }
.bf-grupo-corpo { padding: 0 12px 14px; }
.bf-rotulo {
  font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-secondary); margin: 8px 6px 4px;
}
.bf-opcoes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.bf-op {
  width: 100%; font-family: inherit; font-size: .88rem; color: var(--text); text-align: left;
  background: none; border: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
  padding: 7px 8px; border-radius: 10px; transition: background-color .15s ease;
}
.bf-op:hover { background: var(--bg-soft); }
.bf-marca {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid #CBD5E1; flex: 0 0 auto;
  display: grid; place-items: center; transition: border-color .15s ease;
}
.bf-op.ativo .bf-marca { border-color: var(--blue); }
.bf-op.ativo .bf-marca::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.bf-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-op.ativo .bf-txt { font-weight: 700; color: var(--blue); }
.bf-qtd {
  flex: 0 0 auto; font-size: .76rem; font-weight: 700; color: var(--text-secondary);
  background: var(--bg-soft); border-radius: 999px; padding: 2px 8px;
}
.bf-op.ativo .bf-qtd { background: #EFF5FF; color: var(--blue); }
.bf-vermais {
  font-family: inherit; font-size: .83rem; font-weight: 700; color: var(--blue);
  background: none; border: none; cursor: pointer; padding: 6px 8px;
}
.bf-vermais:hover { text-decoration: underline; }
.bf-dica { font-size: .8rem; color: var(--text-secondary); padding: 2px 8px 6px; line-height: 1.45; }
.bf-preco { display: flex; align-items: center; gap: 8px; padding: 4px 6px 0; }
.bf-preco span { color: var(--text-secondary); font-size: .82rem; }
.bf-preco input {
  width: 100%; min-width: 0; font-family: inherit; font-size: .9rem; color: var(--text);
  border: 1px solid var(--border); border-radius: 10px; padding: 9px 10px; background: #fff;
}
.bf-preco input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.bf-preco-ok {
  flex: 0 0 auto; font-family: inherit; font-size: .84rem; font-weight: 700; cursor: pointer;
  background: var(--blue); color: #fff; border: none; border-radius: 10px; padding: 10px 12px;
}
.bf-preco-ok:hover { background: var(--blue-dark); }
.bf-rodape { display: none; }

/* Barra acima dos resultados: etiquetas dos filtros aplicados + ordenação */
.busca-barra { align-items: flex-start; flex-wrap: nowrap; margin-bottom: 16px; }
.bl-chips { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bl-chip {
  font-family: inherit; font-size: .82rem; font-weight: 700; color: var(--blue); cursor: pointer;
  background: #EFF5FF; border: 1px solid #D6E4FF; border-radius: 999px; padding: 6px 10px 6px 13px;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  transition: background-color .15s ease;
}
.bl-chip:hover { background: #DCE8FF; }
.bl-chip-x { font-size: 1rem; line-height: 1; opacity: .75; }
.bl-chip-limpar { background: none; border-color: transparent; color: var(--text-secondary); text-decoration: underline; padding-left: 4px; }
.bl-chip-limpar:hover { background: none; color: var(--text); }
.busca-ordenar { flex: 0 0 auto; }
.bl-nota { margin: 26px 0 0; }
/* 🐛 ".busca-mais { display: block }" vencia o atributo hidden: o "Ver mais resultados" aparecia
   mesmo com 3 resultados (e no site no ar, sempre). */
.busca-mais[hidden] { display: none; }
/* Página categoria × cidade: respiro entre o texto e os botões do topo. */
.pc-topo > .shell > .cta-row { margin-top: 18px; }
/* 🐛 No celular esses botões viram inline-flex (bloco de toque de 40px) — e flex descarta o espaço
   entre o texto e o número: saía "Todos7", "Barbeiro3". O gap devolve o espaço em qualquer tela. */
.busca-tipos button, .busca-atalhos a { display: inline-flex; align-items: center; gap: 6px; }

/* Card de resultado (busca e listagens categoria × cidade) */
.busca-grade { grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 20px; }
.res-card.rc2 { border-radius: 16px; }
.rc2 .rc-foto { aspect-ratio: 4 / 3; }
.rc2 .rc-foto img { position: absolute; inset: 0; }
.rc-tag {
  position: absolute; left: 10px; bottom: 10px; background: rgba(255, 255, 255, .95); color: var(--text);
  font-size: .7rem; font-weight: 700; padding: 4px 9px; border-radius: 999px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .14);
}
.rc2 .rc-body { padding: 14px 16px 0; gap: 2px; }
.rc-nome {
  font-size: 1rem; font-weight: 800; line-height: 1.3; letter-spacing: -.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rc-sub { font-size: .8rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-valor { margin-top: 10px; display: flex; flex-direction: column; line-height: 1.15; }
.rc-valor small { font-size: .72rem; font-weight: 600; color: var(--text-secondary); }
.rc-valor strong { font-size: 1.32rem; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.rc-valor.rc-sem-preco strong { font-size: .92rem; font-weight: 700; color: var(--text-secondary); letter-spacing: 0; }
.rc-info { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 8px; font-size: .8rem; color: var(--text-secondary); }
.rc-estrela { color: #D97706; font-weight: 800; }
.rc-lugar {
  margin-top: 12px; border-top: 1px solid var(--border); padding: 10px 16px 12px;
  font-size: .78rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@media (max-width: 900px) {
  .busca-layout { grid-template-columns: 1fr; }
  /* Filtros viram uma tela cheia por cima (gaveta), com "Ver resultados" fixo embaixo. */
  .busca-filtros {
    position: fixed; inset: 0; z-index: 80; max-height: none; border: none; border-radius: 0;
    box-shadow: none; display: none; flex-direction: column; overflow: hidden;
  }
  .busca-filtros.aberto { display: flex; }
  .bf-topo { flex: 0 0 auto; padding: 14px 16px; }
  .bf-fechar { display: inline-grid; }
  .bf-corpo { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .bf-rodape {
    display: block; flex: 0 0 auto; background: #fff; border-top: 1px solid var(--border);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  }
  .bf-rodape .btn { width: 100%; justify-content: center; }
  .busca-barra { flex-wrap: wrap; align-items: center; }
  .busca-filtros-toggle { margin-bottom: 0; }
  .bl-chips { order: 3; flex-basis: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .bl-chips:empty { display: none; }
  .bl-chips::-webkit-scrollbar { display: none; }
  .busca-ordenar { margin-left: auto; }
}

@media (max-width: 720px) {
  .bh { padding: 20px 0 30px; }
  .bh-card { padding: 16px 14px 16px; border-radius: 20px; }
  .bh-abas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -14px 14px; padding: 0 14px 2px; }
  .bh-abas::-webkit-scrollbar { display: none; }
  .bh-aba { flex: 0 0 auto; padding: 8px 13px; font-size: .86rem; }
  .bh h1 { margin-bottom: 14px; }
  .bh-form { flex-direction: column; }
  .bh-campo input { height: 54px; font-size: 1rem; padding-left: 46px; }
  .bh-lupa { left: 16px; }
  .bh-exemplo { left: 46px; font-size: .97rem; }
  .bh-btn { height: 52px; }
  .bh-mais a { font-size: .82rem; padding: 6px 11px; }
  .bh-mais a:nth-of-type(n+7) { display: none; }
  .bh-rodape { font-size: .78rem; gap: 4px 12px; }
  .cc { padding-top: 34px; }
  .cc-cab { align-items: flex-start; flex-direction: column; gap: 6px; }
  .cc-card, .cc-sk { flex-basis: 68%; }
  .cc-seta { display: none; }
  .bl-form .bh-campo input { height: 50px; }
  .bl-form .bh-btn { padding: 0 18px; }
  .busca-ordenar .bo-rot { display: none; }
}

/* Celular: card em linha (foto à esquerda), pra caber 3-4 resultados por tela em vez de 1 e pouco */
@media (max-width: 560px) {
  .busca-grade { grid-template-columns: 1fr; gap: 12px; }
  .res-card.rc2 { display: grid; grid-template-columns: 118px minmax(0, 1fr); grid-template-rows: 1fr auto; }
  .rc2 .rc-foto { grid-row: 1 / 3; aspect-ratio: auto; min-height: 150px; }
  .rc2 .rc-body { padding: 12px 12px 0; }
  .rc2 .rc-lugar { grid-column: 2; margin-top: 8px; padding: 8px 12px 10px; }
  .rc-valor { margin-top: 8px; }
  .rc-valor strong { font-size: 1.12rem; }
  .rc2 .rc-selo { top: 6px; left: 6px; font-size: .6rem; padding: 3px 7px; }
  .rc2 .rc-tag { display: none; }
  .res-card.rc2:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   77. BUSCA POR TIPO — comércios, serviços, produtos e planos (pedido do dono, 26/09/2026)
   "deve ter a opção para selecionar se a busca vai ser de serviços, planos, produtos, comércios ou
   combinações". Seletor "Buscar em" (Tudo + os 4 tipos, marca um ou vários) na busca e na página
   inicial; cards próprios pra serviço, produto e plano; página da loja com âncora em cada item.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* ---------- Seletor "Buscar em" (/busca) ---------- */
.busca-tipos { align-items: center; }
.bt-rot { font-size: .8rem; font-weight: 800; color: var(--text-secondary); margin-right: 2px; }
.busca-tipos .bt-op { padding: 8px 14px 8px 11px; }
.busca-tipos .bt-op[data-tipo=""] { padding-left: 14px; }
/* Caixinha de marcar: deixa claro que dá pra escolher MAIS DE UM tipo (combinação). */
.bt-marca {
  width: 16px; height: 16px; border-radius: 5px; border: 2px solid #CBD5E1; background: #fff;
  display: inline-grid; place-items: center; flex: 0 0 auto;
  font-size: 11px; line-height: 1; font-weight: 900; color: transparent;
}
.bt-op.ativo .bt-marca { border-color: #fff; color: var(--blue); }
.bt-op.ativo .bt-marca::after { content: "✓"; }
.bt-op[data-tipo=""] .bt-marca { display: none; }

/* ---------- Seletor da página inicial (abas viraram caixas de marcar) ---------- */
.bh-abas { align-items: center; }
.bh-aba .bt-marca { width: 15px; height: 15px; }
.bh-aba.ativa .bt-marca { border-color: #fff; color: var(--blue); }
.bh-aba.ativa .bt-marca::after { content: "✓"; }
.bh-aba[data-tipo=""] .bt-marca { display: none; }

/* ---------- Cards de serviço, produto e plano ---------- */
.rc-tipo {
  position: absolute; top: 10px; left: 10px; z-index: 1;
  background: rgba(255, 255, 255, .95); font-size: .68rem; font-weight: 800;
  padding: 4px 9px; border-radius: 999px; box-shadow: 0 2px 8px rgba(15, 23, 42, .14);
}
.rc-tipo-comercio { color: #0F766E; }
.rc-tipo-servico { color: #1D4ED8; }
.rc-tipo-produto { color: #7C3AED; }
.rc-tipo-plano { color: #B45309; }
/* A pílula do tipo ocupa o canto esquerdo: o selo Fundador vai pro direito. */
.rc2 .rc-selo { left: auto; right: 10px; z-index: 1; }
.rc-promo {
  position: absolute; top: 10px; right: 10px; z-index: 1; background: #DC2626; color: #fff;
  font-size: .66rem; font-weight: 800; padding: 4px 9px; border-radius: 999px;
}
.rc-sub strong { color: var(--text); font-weight: 700; }
.rc-de { font-size: .8rem; font-weight: 600; color: var(--text-secondary); }
.rc-valor .rc-de + strong { color: #DC2626; }
.rc-mes { font-size: .8rem; font-weight: 700; color: var(--text-secondary); margin-left: 2px; letter-spacing: 0; }
.rc2 .rc-foto-fallback { font-size: 2.2rem; }

/* ---------- Página da loja: o item que veio do link da busca ---------- */
/* Rola pro item sem ficar escondido embaixo do cabeçalho fixo, e pisca de leve pra achar. */
.pc-item { scroll-margin-top: 96px; }
.pc-item:target {
  border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, .18);
  animation: pcAlvo 2.6s ease;
}
@keyframes pcAlvo { 0%, 55% { background-color: #EFF5FF; } 100% { background-color: #fff; } }
.pc-item-preco-rot { font-size: .64rem; font-weight: 700; color: var(--text-secondary); }
.pc-item-preco-de { font-size: .72rem; font-weight: 600; color: var(--text-secondary); }

@media (max-width: 720px) {
  .busca-tipos {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-left: -16px; margin-right: -16px; padding: 0 16px 4px;
  }
  .busca-tipos::-webkit-scrollbar { display: none; }
  .busca-tipos .bt-op, .bt-rot { flex: 0 0 auto; }
}
@media (max-width: 560px) {
  .rc2 .rc-tipo { top: 6px; left: 6px; font-size: .6rem; padding: 3px 7px; }
  /* Foto estreita no celular: o selo Fundador desce pro rodapé da foto pra não encavalar na pílula. */
  .rc2 .rc-selo { top: auto; bottom: 6px; left: 6px; right: auto; }
  .rc2 .rc-promo { top: auto; bottom: 6px; left: 6px; right: auto; font-size: .6rem; padding: 3px 7px; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   78. SITE MAIS VISUAL (pedido do dono, 26/09/2026): "está muito simples, sem banners do IntegrApp,
   sem anúncios do IntegrApp, sem logo, sem nossa assistente, as imagens de capa devem ser todas
   quadradas, sem efeitos, sem animações, sem transição — deixe mais bonito visualmente".
   Tudo o que se mexe aqui PARA pra quem pediu menos movimento no aparelho (bloco final do arquivo).
   ═══════════════════════════════════════════════════════════════════════════════════════ */

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@keyframes subir78 { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes daDireita78 { from { opacity: 0; transform: translateX(46px); } to { opacity: 1; transform: none; } }
@keyframes boia78 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes pop78 { 0% { opacity: 0; transform: scale(.6) translateY(8px); } 70% { transform: scale(1.04); } 100% { opacity: 1; transform: none; } }
@keyframes luz78 { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(60px, -40px) scale(1.12); } 66% { transform: translate(-40px, 30px) scale(.94); } }

/* ---------- PÁGINA INICIAL: topo com marca, busca e a assistente ---------- */
.bh { padding: 34px 0 52px; }
.bh-fundo { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  /* trama de pontos por cima do degradê */
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.4px);
  background-size: 22px 22px;
}
.bh-luz { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; animation: luz78 18s ease-in-out infinite; }
.bh-luz.l1 { width: 420px; height: 420px; left: -120px; top: -140px; background: #38BDF8; }
.bh-luz.l2 { width: 360px; height: 360px; right: 8%; top: 30%; background: #10B981; animation-delay: -6s; animation-duration: 22s; }
.bh-luz.l3 { width: 300px; height: 300px; left: 38%; bottom: -160px; background: #818CF8; animation-delay: -11s; animation-duration: 26s; }

.bh-grade { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 34px; align-items: end; }
.bh-esq { min-width: 0; }
.bh-marca {
  display: inline-flex; align-items: center; gap: 12px; color: #fff; margin-bottom: 16px;
  animation: subir78 .7s cubic-bezier(.16, 1, .3, 1) backwards;
}
.bh-marca img { width: 46px; height: 46px; border-radius: 13px; box-shadow: 0 10px 26px rgba(0, 0, 0, .35); }
.bh-marca strong { display: block; font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.05; }
.bh-marca small { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #7DD3FC; }
.bh-card { max-width: none; margin: 0; animation: subir78 .8s .08s cubic-bezier(.16, 1, .3, 1) backwards; }
/* as opções do "Buscar em" entram uma de cada vez */
.bh-abas .bh-aba { animation: pop78 .5s cubic-bezier(.34, 1.56, .64, 1) backwards; }
.bh-abas .bh-aba:nth-of-type(1) { animation-delay: .35s; }
.bh-abas .bh-aba:nth-of-type(2) { animation-delay: .42s; }
.bh-abas .bh-aba:nth-of-type(3) { animation-delay: .49s; }
.bh-abas .bh-aba:nth-of-type(4) { animation-delay: .56s; }
.bh-abas .bh-aba:nth-of-type(5) { animation-delay: .63s; }
.bh-mais a { animation: subir78 .5s cubic-bezier(.16, 1, .3, 1) backwards; animation-delay: .5s; }
.bh-btn { position: relative; overflow: hidden; }
/* brilho que atravessa o botão Buscar de vez em quando */
.bh-btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
  animation: brilho78 4.5s ease-in-out 1.5s infinite;
}
@keyframes brilho78 { 0%, 70% { left: -60%; } 100% { left: 130%; } }

.bh-dir { position: relative; align-self: stretch; min-height: 380px; }
.bh-esq .bh-rodape { justify-content: flex-start; max-width: none; margin: 16px 0 0; }
.bh-assistente { position: absolute; inset: 0; animation: daDireita78 .9s .25s cubic-bezier(.16, 1, .3, 1) backwards; }
.bh-assist-img { position: absolute; right: -10px; bottom: -52px; width: 300px; animation: boia78 6s ease-in-out infinite; }
.bh-assist-img img { width: 100%; height: auto; filter: drop-shadow(0 22px 40px rgba(2, 8, 23, .45)); }
.bh-balao {
  position: absolute; top: 10px; left: 0; right: 24px; z-index: 2;
  background: #fff; color: var(--text); border-radius: 20px 20px 20px 6px; padding: 13px 16px;
  font-size: .92rem; font-weight: 600; line-height: 1.4; box-shadow: 0 16px 36px rgba(2, 8, 23, .32);
  animation: pop78 .65s 1s cubic-bezier(.34, 1.56, .64, 1) backwards;
}
.bh-balao strong { color: var(--blue); }
.bh-balao::after {
  content: ""; position: absolute; left: 34px; bottom: -9px; width: 18px; height: 18px; background: #fff;
  transform: rotate(45deg); border-radius: 0 0 4px 0;
}
/* Selo SEM animação de entrada própria: ele entra deslizando junto com a assistente (o pai) e só a
   camada de dentro flutua. 🐛 Achado nos testes de 26/09/2026: qualquer animação de entrada no próprio
   selo (com ou sem opacidade, com qualquer atraso) fazia o Chrome não desenhá-lo — embora o navegador
   dissesse que ele estava visível e por cima de tudo. */
.bh-flutua { position: absolute; z-index: 2; }
.bh-flutua > span {
  display: block; background: rgba(255, 255, 255, .96); color: var(--text);
  font-size: .78rem; font-weight: 800; padding: 8px 13px; border-radius: 999px;
  box-shadow: 0 12px 28px rgba(2, 8, 23, .3); white-space: nowrap;
  animation: boia78 5s ease-in-out infinite;
}
.bh-flutua.f1 { left: -26px; top: 150px; }
.bh-flutua.f2 { right: -8px; top: 210px; }
.bh-flutua.f2 > span { animation-delay: -1.6s; }
.bh-flutua.f3 { left: 6px; top: 268px; }
.bh-flutua.f3 > span { animation-delay: -3.2s; }

/* ---------- DESTAQUES (carrossel de banners do IntegrApp) ---------- */
.dz { padding: 18px 0 8px; }
.dz-carrossel { position: relative; border-radius: 28px; overflow: hidden; box-shadow: 0 26px 60px rgba(15, 23, 42, .18); }
.dz-trilho { display: grid; touch-action: pan-y; }
.dz-slide {
  grid-area: 1 / 1; position: relative; overflow: hidden; color: #fff;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 24px;
  min-height: 360px; padding: 46px 84px 58px;
  opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s;
}
.dz-slide.ativo { opacity: 1; visibility: visible; z-index: 1; transition: opacity .7s ease, visibility 0s; }
/* decoração: círculos de luz + trama */
.dz-slide::before, .dz-slide::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.dz-slide::before { width: 520px; height: 520px; right: -140px; top: -200px; background: radial-gradient(circle, rgba(255, 255, 255, .18), transparent 65%); }
.dz-slide::after { width: 380px; height: 380px; left: -120px; bottom: -220px; background: radial-gradient(circle, rgba(255, 255, 255, .12), transparent 65%); }
.dz-s1 { background: linear-gradient(120deg, #050F29 0%, #0B2A6B 55%, #1D4ED8 100%); }
.dz-s2 { background: linear-gradient(120deg, #0B3B8C 0%, #2563EB 58%, #38BDF8 100%); }
.dz-s3 { background: linear-gradient(120deg, #053B31 0%, #0F766E 52%, #14B8A6 100%); }
.dz-s4 { background: linear-gradient(120deg, #2E0A5E 0%, #6D28D9 55%, #A855F7 100%); }
.dz-s5 { background: linear-gradient(120deg, #0B1B3A 0%, #1E3A8A 58%, #0EA5E9 100%); }

.dz-texto { position: relative; z-index: 2; }
.dz-texto > * { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .7s cubic-bezier(.16, 1, .3, 1); }
.dz-slide.ativo .dz-texto > * { opacity: 1; transform: none; }
.dz-slide.ativo .dz-texto > :nth-child(1) { transition-delay: .15s; }
.dz-slide.ativo .dz-texto > :nth-child(2) { transition-delay: .25s; }
.dz-slide.ativo .dz-texto > :nth-child(3) { transition-delay: .35s; }
.dz-slide.ativo .dz-texto > :nth-child(4) { transition-delay: .45s; }
.dz-eyebrow {
  display: inline-block; font-size: .76rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .25); padding: 6px 12px; border-radius: 999px;
  margin-bottom: 14px; backdrop-filter: blur(4px);
}
.dz-texto h3 { font-size: clamp(1.45rem, 3vw, 2.25rem); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; margin-bottom: 12px; }
.dz-texto p { font-size: 1.02rem; line-height: 1.55; color: rgba(255, 255, 255, .88); max-width: 520px; margin-bottom: 22px; }
.dz-btn {
  display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--text); font-weight: 800;
  font-size: .95rem; text-decoration: none; padding: 13px 22px; border-radius: 999px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .25); transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease;
}
.dz-btn:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 18px 36px rgba(0, 0, 0, .32); }
.dz-lojas img { height: 44px; width: auto; transition: transform .25s ease; }
.dz-lojas a:hover img { transform: translateY(-2px); }

.dz-arte {
  position: relative; z-index: 1; align-self: stretch; min-height: 260px;
  opacity: 0; transform: translateX(50px) scale(.95);
  transition: opacity .8s ease .12s, transform 1s cubic-bezier(.16, 1, .3, 1) .12s;
}
.dz-slide.ativo .dz-arte { opacity: 1; transform: none; }
.dz-mascote {
  position: absolute; right: -20px; bottom: -58px; height: calc(100% + 100px); width: auto; max-width: none;
  /* bordas esfumadas: o fundo da arte se funde com o do slide */
  -webkit-mask-image: radial-gradient(ellipse 62% 70% at 55% 48%, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 62% 70% at 55% 48%, #000 62%, transparent 100%);
}
.dz-selo {
  position: absolute; z-index: 2; background: rgba(255, 255, 255, .96); color: var(--text); font-size: .8rem; font-weight: 800;
  padding: 9px 14px; border-radius: 999px; box-shadow: 0 14px 30px rgba(0, 0, 0, .3); white-space: nowrap;
  animation: boia78 5s ease-in-out infinite;
}
.dz-selo.s-a { left: 0; top: 18%; }
.dz-selo.s-b { right: 2%; bottom: 14%; animation-delay: -2.5s; }
.dz-selo.s-c { left: 4%; bottom: 16%; animation-delay: -1.2s; }
.dz-cartas .dz-carta {
  position: absolute; border-radius: 22px; box-shadow: 0 30px 60px rgba(0, 0, 0, .38);
  width: 190px; height: auto; top: 50%;
}
.dz-cartas .c-frente { left: 50%; transform: translate(-60%, -50%) rotate(-5deg); animation: cartaBoia78 7s ease-in-out infinite; }
.dz-cartas .c-tras { left: 50%; transform: translate(-5%, -54%) rotate(8deg); opacity: .92; animation: cartaBoiaTras78 8s ease-in-out infinite; }
.dz-cartas .c-frente.quadrada { width: 250px; }
@keyframes cartaBoia78 { 0%, 100% { transform: translate(-60%, -50%) rotate(-5deg); } 50% { transform: translate(-60%, -54%) rotate(-3deg); } }
@keyframes cartaBoiaTras78 { 0%, 100% { transform: translate(-5%, -54%) rotate(8deg); } 50% { transform: translate(-5%, -50%) rotate(10deg); } }
.dz-chat .dz-assist { position: absolute; right: 0; bottom: -58px; width: 290px; height: auto; filter: drop-shadow(0 22px 40px rgba(0, 0, 0, .4)); animation: boia78 6s ease-in-out infinite; }
.dz-msgs { position: absolute; left: 0; top: 8%; display: flex; flex-direction: column; gap: 10px; max-width: 250px; z-index: 2; }
.dz-msg { font-size: .85rem; font-weight: 600; line-height: 1.4; padding: 10px 14px; border-radius: 18px; box-shadow: 0 12px 28px rgba(0, 0, 0, .28); opacity: 0; transform: translateY(10px) scale(.9); transition: opacity .5s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.dz-msg.eu { align-self: flex-end; background: #DCF8C6; color: #0F172A; border-bottom-right-radius: 6px; }
.dz-msg.ela { align-self: flex-start; background: #fff; color: #0F172A; border-bottom-left-radius: 6px; }
.dz-slide.ativo .dz-msg.eu { opacity: 1; transform: none; transition-delay: .7s; }
.dz-slide.ativo .dz-msg.ela { opacity: 1; transform: none; transition-delay: 1.6s; }

.dz-seta {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .14); color: #fff; font-size: 1.6rem; line-height: 1;
  cursor: pointer; display: grid; place-items: center; backdrop-filter: blur(6px); transition: background-color .2s ease, transform .2s ease;
}
.dz-seta:hover { background: rgba(255, 255, 255, .3); transform: translateY(-50%) scale(1.08); }
.dz-seta.esq { left: 14px; }
.dz-seta.dir { right: 14px; }
.dz-pontos { position: absolute; left: 84px; bottom: 22px; z-index: 3; display: flex; gap: 8px; }
.dz-pontos button {
  width: 30px; height: 6px; border-radius: 999px; border: none; padding: 0; cursor: pointer; overflow: hidden;
  background: rgba(255, 255, 255, .35); position: relative; transition: width .3s ease;
}
.dz-pontos button.ativo { width: 54px; }
.dz-pontos button span { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #fff; border-radius: inherit; }
.dz-pontos button.ativo span { animation: dzProgresso var(--dz-tempo, 6.5s) linear forwards; }
.dz-carrossel.pausado .dz-pontos button.ativo span { animation-play-state: paused; }
.dz-carrossel.parado .dz-pontos button.ativo span { animation: none; width: 100%; }
@keyframes dzProgresso { from { width: 0; } to { width: 100%; } }

/* ---------- CONHEÇA O APP (faixa rolando) ---------- */
.ap { padding: 54px 0 36px; background: linear-gradient(180deg, #FFFFFF 0%, #F2F5FF 100%); overflow: hidden; }
.ap-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.ap-cab h2 { font-size: clamp(1.35rem, 3vw, 1.8rem); font-weight: 800; letter-spacing: -.02em; margin: 6px 0 4px; }
.ap-cab p { color: var(--text-secondary); font-size: .95rem; }
.ap-cab .store-badges img { height: 42px; }
.ap-faixa {
  overflow: hidden; padding: 14px 0 30px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ap-trilho { display: flex; width: max-content; animation: apRola78 60s linear infinite; }
.ap-faixa:hover .ap-trilho, .ap-trilho.pausado { animation-play-state: paused; }
.ap-grupo { display: flex; gap: 22px; padding-right: 22px; }
.ap-grupo img {
  width: 210px; height: 315px; object-fit: cover; border-radius: 26px; display: block;
  box-shadow: 0 18px 40px rgba(76, 29, 149, .22);
  transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s ease;
}
.ap-grupo img:hover { transform: translateY(-12px) rotate(-1.5deg) scale(1.04); box-shadow: 0 30px 60px rgba(76, 29, 149, .34); }
@keyframes apRola78 { to { transform: translateX(-50%); } }

/* ---------- Categorias: entram uma de cada vez + brilho ao passar o mouse ---------- */
.cc-card { position: relative; animation: subir78 .6s cubic-bezier(.16, 1, .3, 1) backwards; }
.cc-card:nth-child(2) { animation-delay: .07s; }
.cc-card:nth-child(3) { animation-delay: .14s; }
.cc-card:nth-child(4) { animation-delay: .21s; }
.cc-card:nth-child(5) { animation-delay: .28s; }
.cc-card:nth-child(n+6) { animation-delay: .35s; }
.cc-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .5) 45%, transparent 60%);
  transform: translateX(-120%); transition: transform .8s cubic-bezier(.16, 1, .3, 1);
}
.cc-card:hover::after { transform: translateX(120%); }

/* ---------- BUSCA: capas QUADRADAS, cards que entram animados, esqueleto e anúncios do IntegrApp ---------- */
.rc2 .rc-foto { aspect-ratio: 1 / 1; }
.res-card.rc-entra { animation: subir78 .55s cubic-bezier(.16, 1, .3, 1) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
.res-card .rc-foto::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(2, 8, 23, .28));
  opacity: 0; transition: opacity .3s ease;
}
.res-card:hover .rc-foto::after { opacity: 1; }

.rc-sk { border-radius: 16px; background: #fff; border: 1px solid var(--border); overflow: hidden; }
.rc-sk-foto, .rc-sk-linha {
  background: linear-gradient(90deg, var(--bg-soft) 25%, #EDF1F6 37%, var(--bg-soft) 63%);
  background-size: 400% 100%; animation: shimmer 1.4s ease infinite;
}
.rc-sk-foto { aspect-ratio: 1 / 1; }
.rc-sk-linha { height: 12px; border-radius: 6px; margin: 14px 16px 0; }
.rc-sk-linha.l2 { width: 55%; }
.rc-sk-linha.l3 { width: 40%; height: 20px; margin-bottom: 18px; }

/* Anúncio do IntegrApp no meio dos resultados */
.res-card.rc-anuncio { color: #fff; border: none; background: linear-gradient(150deg, #0B1B3A 0%, #12337E 55%, #2563EB 100%); }
.rc-anuncio.an-vitrine { background: linear-gradient(150deg, #0B3B8C 0%, #2563EB 60%, #38BDF8 100%); }
.rc-anuncio.an-comerciante { background: linear-gradient(150deg, #2E0A5E 0%, #6D28D9 60%, #A855F7 100%); }
.rc-anuncio.an-pague { background: linear-gradient(150deg, #053B31 0%, #0F766E 55%, #14B8A6 100%); }
.rc-anuncio .rc-foto { background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .22), transparent 70%); display: grid; place-items: center; }
.rc-anuncio .rc-foto img { position: static; width: 78%; height: 78%; object-fit: contain; filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .35)); animation: boia78 6s ease-in-out infinite; }
.rc-anuncio .rc-foto::after { display: none; }
/* arte que já é um banner completo: ocupa a capa inteira; celular do app: cartão arredondado */
.rc-anuncio.an-app .rc-foto img, .rc-anuncio.an-vitrine .rc-foto img { width: 100%; height: 100%; object-fit: cover; animation: none; filter: none; }
.rc-anuncio.an-pague .rc-foto img, .rc-anuncio.an-comerciante .rc-foto img { width: auto; height: 84%; border-radius: 14px; object-fit: cover; }
.rc-anuncio .an-tag { background: rgba(255, 255, 255, .95); color: #1D4ED8; }
.rc-anuncio .rc-nome { color: #fff; }
.rc-anuncio .rc-sub { color: rgba(255, 255, 255, .85); white-space: normal; }
.an-cta {
  display: inline-flex; align-self: flex-start; margin: 14px 0 16px; background: #fff; color: var(--text);
  font-size: .84rem; font-weight: 800; padding: 9px 14px; border-radius: 999px; transition: transform .25s ease;
}
.rc-anuncio:hover .an-cta { transform: translateX(4px); }

/* A assistente espiando no topo da busca */
.bl-topo .shell { position: relative; }
.bl-assist { position: absolute; right: 24px; bottom: -20px; display: flex; align-items: flex-end; gap: 10px; pointer-events: none; }
/* a assistente fica inteira dentro da faixa azul (antes o pé dela era cortado pela seção de baixo) */
.bl-topo { overflow: hidden; }
.bl-assist img { width: 112px; height: auto; filter: drop-shadow(0 14px 26px rgba(2, 8, 23, .45)); animation: boia78 6s ease-in-out infinite; }
.bl-balao {
  margin-bottom: 64px; background: #fff; color: var(--text); font-size: .86rem; font-weight: 700; line-height: 1.35;
  padding: 10px 14px; border-radius: 16px 16px 4px 16px; max-width: 290px; box-shadow: 0 12px 28px rgba(2, 8, 23, .3);
}
/* "pulo" só com escala: com opacidade na animação o Chrome deixava o balão apagado (mesma falha dos selos) */
.bl-balao.novo { animation: balao78 .55s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes balao78 { 0% { transform: scale(.85); } 70% { transform: scale(1.05); } 100% { transform: none; } }
.bl-form { max-width: 760px; }

/* ---------- Responsivo ---------- */
@media (max-width: 1100px) {
  .bl-assist { display: none; }
}
@media (max-width: 980px) {
  /* minmax(0, 1fr): sem isso a coluna não encolhe abaixo do conteúdo e o cartão de busca vazava da tela */
  .bh-grade { grid-template-columns: minmax(0, 1fr); }
  .bh-balao .bb-longo { display: none; }
  .bh-marca small { letter-spacing: .05em; font-size: .6rem; }
  .bh-dir { position: absolute; top: -4px; right: 0; min-height: 0; height: auto; width: auto; }
  .bh-assistente { position: static; display: flex; align-items: center; gap: 8px; flex-direction: row-reverse; }
  .bh-assist-img { position: static; width: 64px; }
  .bh-balao { position: relative; top: auto; left: auto; right: auto; font-size: .8rem; padding: 7px 11px; white-space: nowrap; border-radius: 14px 14px 4px 14px; }
  .bh-balao::after { left: auto; right: -5px; bottom: 10px; width: 12px; height: 12px; }
  .bh-flutua { display: none; }
}
@media (max-width: 760px) {
  .dz-slide { grid-template-columns: 1fr; gap: 6px; min-height: 0; padding: 28px 22px 52px; }
  .dz-texto p { font-size: .94rem; margin-bottom: 16px; }
  .dz-arte { min-height: 220px; }
  .dz-mascote { height: 280px; right: 50%; transform: translateX(50%); bottom: -52px; }
  .dz-cartas .dz-carta { width: 128px; }
  .dz-cartas .c-frente.quadrada { width: 170px; }
  .dz-chat .dz-assist { width: 180px; bottom: -52px; }
  .dz-msgs { max-width: 200px; }
  .dz-msg { font-size: .76rem; }
  .dz-seta { display: none; }
  .dz-pontos { left: 22px; bottom: 18px; }
  .dz-lojas img { height: 38px; }
  .ap-cab { flex-direction: column; align-items: flex-start; }
  .ap-grupo img { width: 150px; height: 225px; border-radius: 20px; }
}
@media (max-width: 560px) {
  /* capa QUADRADA também no card em linha do celular: foto 112×112 à esquerda, local embaixo */
  .res-card.rc2 { grid-template-columns: 124px minmax(0, 1fr); grid-template-rows: auto auto; }
  .rc2 .rc-foto { grid-row: 1; grid-column: 1; aspect-ratio: 1 / 1; min-height: 0; height: auto; align-self: start; margin: 12px 0 0 12px; border-radius: 12px; }
  .rc2 .rc-body { grid-row: 1; grid-column: 2; }
  .rc2 .rc-lugar { grid-row: 2; grid-column: 1 / 3; }
  .rc-anuncio .an-cta { margin-bottom: 12px; }
}

/* Quem pediu menos movimento: nada rola sozinho, nada flutua. */
@media (prefers-reduced-motion: reduce) {
  .ap-trilho { animation: none !important; }
  .ap-faixa { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .bh-luz, .bh-assist-img, .bh-flutua > span, .dz-selo, .dz-carta, .dz-assist, .bl-assist img, .rc-anuncio .rc-foto img, .bh-btn::after { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   79. PÁGINA DO COMÉRCIO no layout da foto de referência do dono (26/09/2026) + cabeçalho e
   rodapé das páginas geradas pela Cloud Function `paginaComercio`.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* ---------- Cabeçalho das páginas geradas: links + campo de busca + Baixar app ---------- */
.gh-busca {
  display: flex; align-items: center; gap: 8px; width: 290px; height: 40px; margin: 0 6px 0 10px;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px; padding: 0 12px;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.gh-busca:focus-within { border-color: var(--blue); background: #fff; box-shadow: 0 0 0 4px rgba(37, 99, 235, .12); }
.gh-busca span { font-size: .9rem; }
.gh-busca input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-family: inherit; font-size: .84rem; color: var(--text);
}
@media (max-width: 1240px) {
  .gh-busca { width: auto; height: 48px; margin: 14px 0 0; }
}

/* ---------- Rodapé claro das páginas geradas ---------- */
.gh-rodape { background: #fff; border-top: 1px solid var(--border); padding: 22px 0; }
.gh-rodape .shell { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 28px; }
.gh-rodape .logo-mark img { width: 30px; height: 30px; }
.gh-rodape nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.gh-rodape nav a { font-size: .85rem; color: var(--text-secondary); text-decoration: none; }
.gh-rodape nav a:hover { color: var(--blue); }
.gh-copy { margin-left: auto; font-size: .78rem; color: var(--text-secondary); }

/* ---------- Capa larga + perfil ---------- */
@keyframes capaZoom79 { from { transform: scale(1); } to { transform: scale(1.08); } }
.pc2-capa {
  position: relative; height: 170px; overflow: hidden;
  background: linear-gradient(120deg, #0B1B3A 0%, #1E3A8A 60%, #2563EB 100%);
}
/* A capa é a 1ª foto da galeria DESFOCADA: vira fundo de ambiente — sem desfoque, um close (ex.: de um
   corte de cabelo) esticado na largura toda ficava estranho. inset negativo esconde a borda do desfoque. */
.pc2-capa-img { position: absolute; inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px); object-fit: cover; filter: blur(4px) saturate(1.15); animation: capaZoom79 20s ease-in-out infinite alternate; }
.pc2-capa-veu { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2, 8, 23, .6) 0%, rgba(2, 8, 23, .2) 55%, rgba(2, 8, 23, .35) 100%); }
.pc2-migalhas { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 14px; font-size: .8rem; color: rgba(255, 255, 255, .85); }
.pc2-migalhas a { color: #fff; font-weight: 600; text-decoration: none; }
.pc2-migalhas a:hover { text-decoration: underline; }

.pc2-perfil { background: #fff; padding-bottom: 8px; }
.pc2-perfil-grade { display: grid; grid-template-columns: 212px minmax(0, 1fr) auto; gap: 28px; align-items: start; }
.pc2-avatar {
  position: relative; width: 212px; height: 212px; margin-top: -96px; border-radius: 50%;
  border: 6px solid #fff; background: var(--bg-soft); box-shadow: 0 18px 44px rgba(15, 23, 42, .22);
  display: grid; place-items: center; font-size: 4rem; animation: subir78 .7s cubic-bezier(.16, 1, .3, 1) backwards;
}
.pc2-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.pc2-fundador {
  position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); white-space: nowrap;
  background: #0B1B3A; color: #fff; font-size: .72rem; font-weight: 800; padding: 6px 12px; border-radius: 999px;
}
.pc2-info { padding-top: 20px; min-width: 0; animation: subir78 .7s .08s cubic-bezier(.16, 1, .3, 1) backwards; }
.pc2-info h1 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.pc2-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 12px; }
.pc2-chip {
  display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; font-weight: 600; color: #1E293B;
  background: #F1F5F9; border: 1px solid #E2E8F0; padding: 6px 12px; border-radius: 999px;
}
.pc2-nota { font-size: .9rem; color: var(--text-secondary); margin-bottom: 8px; }
.pc2-nota strong { color: var(--text); }
.pc2-estrela { color: #F59E0B; font-size: 1rem; }
.pc2-local { font-size: .9rem; color: var(--text-secondary); }
.pc2-acoes { display: flex; flex-direction: column; gap: 10px; padding-top: 22px; min-width: 250px; animation: subir78 .7s .16s cubic-bezier(.16, 1, .3, 1) backwards; }
.pc2-btn-app {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; position: relative; overflow: hidden;
  background: linear-gradient(90deg, #7C3AED 0%, #4F46E5 50%, #2563EB 100%); color: #fff; font-weight: 800;
  font-size: .98rem; text-decoration: none; padding: 15px 24px; border-radius: 12px;
  box-shadow: 0 12px 28px rgba(79, 70, 229, .35); transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease;
}
.pc2-btn-app:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(79, 70, 229, .45); }
.pc2-btn-app::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
  animation: brilho78 5s ease-in-out 1.5s infinite;
}
.pc2-btn-sec {
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-weight: 700; font-size: .88rem;
  color: var(--blue); background: #fff; border: 1.5px solid #BFD3FB; padding: 11px 20px; border-radius: 12px;
  transition: background-color .2s ease, border-color .2s ease;
}
.pc2-btn-sec:hover { background: #EFF5FF; border-color: var(--blue); }

/* ---------- Corpo ---------- */
.pc2-corpo { padding: 26px 0 64px; background: #fff; }
.pc2-sobre { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; margin-bottom: 18px; }
.pc2-sobre.so-texto { grid-template-columns: 1fr; }
.pc2-desc { display: flex; gap: 16px; background: #EEF4FF; border: 1px solid #DCE6FA; border-radius: 16px; padding: 22px 24px; }
.pc2-desc-ic { font-size: 1.6rem; line-height: 1; }
.pc2-desc h2 { font-size: 1.05rem; font-weight: 800; margin-bottom: 6px; }
.pc2-desc p { font-size: .9rem; line-height: 1.6; color: #334155; white-space: pre-line; }
.pc2-comodidades { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; white-space: normal !important; }
.pc2-comodidades span { font-size: .78rem; font-weight: 600; color: #334155; background: #fff; border: 1px solid #DCE6FA; border-radius: 999px; padding: 5px 11px; }
.pc2-desc-foto { position: relative; border-radius: 16px; overflow: hidden; min-height: 180px; }
.pc2-desc-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.pc2-desc-foto:hover img { transform: scale(1.05); }

.pc2-aviso { display: flex; align-items: center; gap: 14px; background: #EFF6FF; border: 1px solid #DBEAFE; border-radius: 16px; padding: 16px 20px; margin-bottom: 32px; }
.pc2-aviso-ic { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; background: #DBEAFE; display: grid; place-items: center; font-size: 1.3rem; }
.pc2-aviso p { font-size: .9rem; color: #334155; line-height: 1.5; }
.pc2-aviso p strong:first-child { display: block; color: var(--blue); font-size: .95rem; }

.pc2-bloco { margin-bottom: 34px; }
.pc2-bloco h2 { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; margin-bottom: 14px; }
.pc2-h-ic { font-size: 1.15rem; }
.pc2-qtd { font-size: .95rem; font-weight: 600; color: var(--text-secondary); }
.pc2-nota-bloco { font-size: .8rem; color: var(--text-secondary); margin: -6px 0 12px; }

.pc2-itens { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.pc2-item {
  display: flex; gap: 12px; background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 10px;
  box-shadow: var(--shadow-sm); scroll-margin-top: 96px;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease, border-color .2s ease;
}
.pc2-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #CFE0F7; }
.pc2-item:target { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, .2); animation: pcAlvo 2.6s ease; }
.pc2-item-foto {
  flex: 0 0 104px; width: 104px; height: 104px; border-radius: 10px; overflow: hidden; background: var(--bg-soft);
  display: grid; place-items: center; font-size: 2rem;
}
.pc2-item-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.pc2-item:hover .pc2-item-foto img { transform: scale(1.07); }
.pc2-item-txt { display: flex; flex-direction: column; min-width: 0; gap: 4px; padding: 2px 0; }
.pc2-item-txt strong { font-size: .9rem; font-weight: 800; line-height: 1.25; }
.pc2-item-det { font-size: .76rem; color: var(--text-secondary); }
.pc2-item-preco { display: flex; flex-direction: column; margin-top: auto; line-height: 1.15; }
.pc2-item-preco small { font-size: .7rem; color: var(--text-secondary); font-weight: 600; }
.pc2-item-preco s { font-size: .76rem; color: var(--text-secondary); }
.pc2-item-preco s + b { color: #DC2626; }
.pc2-item-preco b { font-size: 1.18rem; font-weight: 800; color: var(--text); letter-spacing: -.01em; }
.pc2-item-preco b i { font-style: normal; font-size: .76rem; color: var(--text-secondary); margin-left: 2px; }
.pc2-item-preco .pc2-sem-preco { font-size: .88rem; color: var(--text-secondary); }
.pc2-item-nota { font-size: .7rem; color: var(--text-secondary); }

.pc2-duas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.pc2-duas.uma { grid-template-columns: 1fr; }
.pc2-profs { display: flex; flex-direction: column; gap: 12px; }
.pc2-prof { display: flex; gap: 18px; align-items: flex-start; background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 18px; box-shadow: var(--shadow-sm); }
.pc2-prof img, .pc2-prof-inicial { flex: 0 0 auto; width: 104px; height: 104px; border-radius: 50%; object-fit: cover; }
.pc2-prof-inicial { display: grid; place-items: center; background: #EFF5FF; color: var(--blue); font-size: 2rem; font-weight: 800; }
.pc2-prof strong { display: block; font-size: 1rem; font-weight: 800; }
.pc2-prof-esp { display: block; font-size: .84rem; color: var(--text-secondary); margin: 2px 0 8px; }
.pc2-prof p { font-size: .86rem; line-height: 1.55; color: #334155; }
.pc2-horario { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #fff; }
.pc2-horario li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 16px; font-size: .85rem; color: #334155; }
.pc2-horario li:nth-child(odd) { background: #F8FAFC; }
.pc2-horario li strong { font-weight: 600; color: var(--text); }

.pc2-fotos { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.pc2-foto { position: relative; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; background: var(--bg-soft); }
.pc2-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.pc2-foto:hover img { transform: scale(1.08); }
.pc2-foto-mais span {
  position: absolute; inset: 0; background: rgba(15, 23, 42, .62); color: #fff; display: grid; place-content: center;
  text-align: center; font-size: 1.7rem; font-weight: 800; line-height: 1.1;
}
.pc2-foto-mais small { display: block; font-size: .8rem; font-weight: 600; }

.pc2-cta {
  position: relative; display: flex; align-items: center; gap: 22px; margin-top: 10px; overflow: hidden;
  background: linear-gradient(90deg, #EEF2FF 0%, #F5F3FF 100%); border: 1px solid #E0E7FF; border-radius: 18px;
  padding: 20px 28px 20px 190px; min-height: 118px;
}
.pc2-cta-assist { position: absolute; left: 22px; bottom: -44px; width: 150px; height: auto; filter: drop-shadow(0 12px 22px rgba(30, 27, 75, .25)); animation: boia78 6s ease-in-out infinite; }
.pc2-cta-txt { flex: 1; min-width: 0; }
.pc2-cta-txt h2 { font-size: 1.35rem; font-weight: 800; color: #1E1B4B; letter-spacing: -.01em; margin-bottom: 4px; }
.pc2-cta-txt p { font-size: .9rem; color: #475569; }

@media (max-width: 1100px) {
  .pc2-perfil-grade { grid-template-columns: 170px minmax(0, 1fr); }
  .pc2-avatar { width: 170px; height: 170px; margin-top: -80px; }
  .pc2-acoes { grid-column: 1 / -1; flex-direction: row; padding-top: 0; min-width: 0; }
  .pc2-acoes a { flex: 1; }
  .pc2-fotos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .pc2-capa { height: 120px; }
  .pc2-perfil-grade { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 12px; }
  .pc2-avatar { width: 132px; height: 132px; margin-top: -70px; border-width: 5px; }
  .pc2-info { padding-top: 6px; }
  .pc2-cats { justify-content: center; }
  .pc2-acoes { flex-direction: column; width: 100%; }
  .pc2-sobre { grid-template-columns: 1fr; }
  .pc2-desc { padding: 18px; }
  .pc2-desc-foto { min-height: 200px; }
  .pc2-duas { grid-template-columns: 1fr; }
  .pc2-prof img, .pc2-prof-inicial { width: 76px; height: 76px; }
  .pc2-cta { flex-direction: column; text-align: center; padding: 22px 18px 20px; }
  .pc2-cta-assist { position: static; width: 110px; margin-bottom: -6px; }
  .pc2-cta .pc2-btn-app { width: 100%; }
  .gh-copy { margin-left: 0; }
}
@media (max-width: 520px) {
  .pc2-itens { grid-template-columns: 1fr; }
  .pc2-item-foto { flex-basis: 92px; width: 92px; height: 92px; }
}
@media (prefers-reduced-motion: reduce) {
  .pc2-capa-img, .pc2-btn-app::after, .pc2-cta-assist { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   80. /busca COMO NA IMAGEM DE REFERÊNCIA DO DONO (26/09/2026): "4 cards ao lado dos filtros,
   ocupando um pouco mais o espaço do site, e quando acaba a parte dos filtros, 5 por linha".
   A grade é montada pelo busca.js (ajustarLateral) com posição explícita de cada item.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* Página mais larga (as outras continuam em 1180px) */
.bl-topo2 > .shell, .busca-corpo > .shell { width: min(1480px, 100%); }

/* ---------- Topo claro: título + busca + "Achei N resultados" na mesma linha ---------- */
.bl-topo2 { background: #F4F6FB; border-bottom: 1px solid var(--border); padding: 14px 0 18px; }
.bl-migalhas2 { display: flex; flex-wrap: wrap; gap: 8px; font-size: .8rem; color: var(--text-secondary); margin-bottom: 10px; }
.bl-migalhas2 a { color: var(--text); font-weight: 600; text-decoration: none; }
.bl-migalhas2 a:hover { text-decoration: underline; }
.bl-linha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px) auto; align-items: center; gap: 22px; }
.bl-titulos h1 { font-size: clamp(1.2rem, 1.9vw, 1.55rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.bl-titulos .busca-contagem { display: block; margin-top: 4px; font-size: .9rem; font-weight: 500; color: var(--text-secondary); }
.bl-form2 {
  display: flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid #DDE3EE; border-radius: 12px;
  padding: 5px 5px 5px 14px; box-shadow: var(--shadow-sm); transition: border-color .2s ease, box-shadow .2s ease;
}
.bl-form2:focus-within { border-color: #6D5DF6; box-shadow: 0 0 0 4px rgba(109, 93, 246, .14); }
.bl-lupa { font-size: .95rem; }
.bl-form2 input { flex: 1; min-width: 0; height: 40px; border: none; outline: none; background: transparent; font-family: inherit; font-size: .92rem; color: var(--text); }
.bl-form2 button {
  flex: 0 0 auto; border: none; cursor: pointer; font-family: inherit; font-size: .95rem; font-weight: 800; color: #fff;
  background: linear-gradient(90deg, #7C3AED 0%, #4F46E5 100%); padding: 11px 24px; border-radius: 9px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.bl-form2 button:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(79, 70, 229, .3); }
.bl-achei { display: flex; align-items: center; gap: 8px; max-width: 200px; font-size: .86rem; font-weight: 600; line-height: 1.35; color: #334155; }
.bl-brilho { font-size: 1.4rem; }
.bl-topo2 .busca-tipos { margin-top: 16px; }

/* "Buscar em" como na imagem: pílulas simples, a marcada em roxo */
.busca-tipos .bt-marca { display: none; }
.busca-tipos .bt-op { background: #fff; border: 1px solid #DDE3EE; color: #334155; font-weight: 700; padding: 8px 16px; border-radius: 10px; }
.busca-tipos .bt-op .qtd { background: #EEF2FF; color: #4F46E5; border-radius: 999px; padding: 1px 8px; font-size: .74rem; font-weight: 800; opacity: 1; }
.busca-tipos .bt-op.ativo { background: linear-gradient(90deg, #6D5DF6 0%, #4F46E5 100%); border-color: transparent; color: #fff; }
.busca-tipos .bt-op.ativo .qtd { background: rgba(255, 255, 255, .25); color: #fff; }

/* ---------- Grade: filtros na 1ª coluna só na altura deles ---------- */
.busca-corpo { padding: 22px 0 60px; background: #fff; }
.busca-grade { position: relative; }
@media (min-width: 901px) {
  .busca-grade { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
  .busca-grade > .busca-filtros { position: static; top: auto; align-self: start; max-height: none; overflow: visible; }
  .busca-grade > .busca-barra { margin: 0; align-self: center; }
  .busca-grade > .busca-vazio { align-self: start; }
  /* Medição de altura (o busca.js liga por um instante): nada estica e a lateral sai da grade. */
  .busca-grade.medindo > * { align-self: start !important; }
  .busca-grade.medindo > .busca-filtros { position: absolute !important; visibility: hidden; }
  .busca-grade.medindo > .busca-barra, .busca-grade.medindo > .bl-secao, .busca-grade.medindo > .busca-vazio { grid-column: 1 / -1 !important; }
  .busca-grade.medindo > .rc-banner { grid-column: span 2 !important; }
}
@media (min-width: 901px) and (max-width: 1319px) { .busca-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 901px) and (max-width: 1079px) { .busca-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Filtros como na imagem: grupos abertos, caixinhas de marcar, contagem em cinza ---------- */
.busca-grade > .busca-filtros { border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-sm); background: #fff; }
.bf-grupo { padding: 14px 18px 12px; border-bottom: 1px solid var(--border); }
.bf-grupo:last-child { border-bottom: none; }
.bf-titulo { font-size: .95rem; font-weight: 800; color: var(--text); margin-bottom: 6px; }
.bf-grupo .bf-grupo-corpo { padding: 0; }
.bf-grupo .bf-op { justify-content: flex-start; gap: 10px; padding: 5px 2px; }
.bf-grupo .bf-marca { border-radius: 5px; width: 18px; height: 18px; }
.bf-grupo .bf-op.ativo .bf-marca { background: var(--blue); border-color: var(--blue); }
.bf-grupo .bf-op.ativo .bf-marca::after {
  content: "✓"; width: auto; height: auto; background: none; border-radius: 0;
  color: #fff; font-size: 12px; font-weight: 900; line-height: 1;
}
.bf-grupo .bf-txt { flex: 0 1 auto; }
.bf-grupo .bf-op.ativo .bf-txt { color: var(--text); font-weight: 600; }
.bf-grupo .bf-qtd, .bf-grupo .bf-op.ativo .bf-qtd { background: none; padding: 0; color: #94A3B8; font-weight: 500; font-size: .8rem; }
.bf-grupo .bf-preco { padding: 2px 0 0; }
.bf-grupo .bf-preco-ok { background: linear-gradient(90deg, #6D5DF6, #4F46E5); }
.bf-grupo .bf-dica { padding: 4px 0 2px; }

/* ---------- Títulos de seção ("Serviços (15)") ---------- */
.bl-secao { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; }
.bl-secao-qtd { color: var(--text-secondary); font-weight: 600; }

/* ---------- Anúncios do IntegrApp (largos) ---------- */
.rc-banner {
  position: relative; display: flex; align-items: center; gap: 16px; overflow: hidden; text-decoration: none; color: var(--text);
  background: linear-gradient(135deg, #EEF2FF 0%, #F5F3FF 100%); border: 1px solid #E0E7FF; border-radius: 14px;
  padding: 14px 20px 14px 14px; min-height: 124px;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease;
  /* SEM animação de entrada: nos testes, a animação de entrada nos anúncios (com ou sem opacidade)
     deixava o 2º anúncio apagado ou parado no meio do movimento. O efeito fica no hover. */
}
@keyframes sobe80 { from { transform: translateY(18px); } to { transform: none; } }
.rc-banner:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(79, 70, 229, .18); }
.rcb-arte { flex: 0 0 auto; width: 112px; align-self: stretch; display: grid; place-items: center; }
.rcb-arte.cel img { width: 82px; height: auto; border-radius: 14px; transform: rotate(-8deg); box-shadow: 0 14px 28px rgba(30, 27, 75, .25); }
/* SEM flutuar: imagem animada dentro de um anúncio que entra animado fazia o Chrome desenhar o anúncio
   apagado (mesma falha dos selos da página inicial — ver 78.3). */
.rcb-arte.assist img { width: 108px; height: auto; filter: drop-shadow(0 12px 20px rgba(30, 27, 75, .25)); }
.rcb-txt { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rcb-txt strong { font-size: 1.05rem; font-weight: 800; color: #1E1B4B; line-height: 1.2; }
.rcb-txt > span:not(.rcb-btn):not(.rcb-ic) { font-size: .84rem; line-height: 1.4; color: #475569; }
.rcb-btn {
  align-self: flex-start; margin-top: 6px; background: linear-gradient(90deg, #7C3AED 0%, #4F46E5 100%); color: #fff;
  font-size: .84rem; font-weight: 800; padding: 9px 16px; border-radius: 9px; transition: transform .25s ease;
}
.rc-banner:hover .rcb-btn { transform: translateX(3px); }
.rcb-ic { font-size: 2rem; line-height: 1; margin-bottom: 4px; }
.rc-banner.preenche { justify-content: space-between; padding: 24px 26px; }
.rcb-arte.cel.grande { width: 170px; }
.rcb-arte.cel.grande img { width: 150px; transform: rotate(8deg); }

/* ---------- Card compacto (rc3) como na imagem — capa QUADRADA (pedido anterior do dono) ---------- */
.res-card.rc3 { border-radius: 12px; }
.rc3 .rc-foto { aspect-ratio: 1 / 1; }
.rc3 .rc-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rc3-pilulas { position: absolute; top: 8px; left: 8px; right: 8px; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
.rc3-pilulas .rc-tipo { position: static; }
.rc3-tag { background: rgba(255, 255, 255, .95); color: var(--text); font-size: .66rem; font-weight: 700; padding: 4px 8px; border-radius: 999px; box-shadow: 0 2px 8px rgba(15, 23, 42, .14); }
.rc3-tag.rc3-promo { background: #DC2626; color: #fff; }
.rc3 .rc-selo { top: auto; bottom: 8px; left: 8px; right: auto; }
.rc3-corpo { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; min-width: 0; }
.rc3-nome { font-size: .95rem; font-weight: 800; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rc3-sub { font-size: .78rem; color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rc3-preco { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin-top: 6px; font-size: .78rem; color: var(--text-secondary); }
.rc3-preco strong { font-size: 1.12rem; font-weight: 800; color: var(--text); letter-spacing: -.01em; }
.rc3-preco strong i { font-style: normal; font-size: .76rem; font-weight: 600; color: var(--text-secondary); margin-left: 1px; }
.rc3-preco s { font-size: .78rem; }
.rc3-preco .rc3-promo-preco { color: #DC2626; }
.rc3-preco .rc3-sem { font-size: .9rem; color: var(--text-secondary); }
.rc3-dur { margin-left: auto; font-size: .76rem; white-space: nowrap; }
.rc3-linha { font-size: .76rem; line-height: 1.4; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc3-ic { display: inline-block; width: 16px; margin-right: 4px; text-align: center; color: #94A3B8; }
.rc3-estrela { color: #F59E0B; }
.rc3-local { margin-top: auto; padding-top: 2px; }

/* ---------- Rodapé claro (como na imagem) ---------- */
.bl-social { display: flex; gap: 10px; }
.bl-social img { width: 24px; height: 24px; }

/* ---------- Celular e tablet ---------- */
@media (max-width: 900px) {
  .bl-linha { grid-template-columns: 1fr; gap: 12px; }
  .bl-achei { max-width: none; }
  .busca-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
  .busca-grade > .busca-barra, .busca-grade > .bl-secao, .busca-grade > .busca-vazio, .busca-grade > .rc-banner { grid-column: 1 / -1; }
  .busca-grade > .rc-banner.b2 { display: none; }
  .bl-secao { margin-top: 6px; font-size: 1.15rem; }
}
@media (max-width: 560px) {
  .bl-achei { display: none; }
  .bl-form2 button { padding: 11px 16px; }
  .busca-grade { grid-template-columns: 1fr; gap: 12px; }
  /* card em linha: capa quadrada 112×112 à esquerda */
  .res-card.rc3 { display: grid; grid-template-columns: 124px minmax(0, 1fr); align-items: start; }
  .rc3 .rc-foto { margin: 12px 0 12px 12px; border-radius: 10px; }
  .rc3-corpo { padding: 12px; }
  .rc3-pilulas { top: 5px; left: 5px; right: 5px; gap: 4px; }
  .rc3-pilulas .rc-tipo, .rc3-tag { font-size: .58rem; padding: 3px 6px; }
  .rc3-pilulas .rc3-tag:not(.rc3-promo) { display: none; }
  .res-card.rc3:hover { transform: none; }
  .rc-banner { min-height: 0; }
  .rc-banner.preenche .rcb-arte.cel.grande { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   82 — /busca com várias escolhas por filtro (o busca.js faz a lógica; aqui só acabamento)
   ═══════════════════════════════════════════════════════════════════════════════════════ */
/* "R$ mín" e "R$ máx" cabem inteiros: as setinhas do campo numérico comiam o espaço */
.bf-preco input { padding: 9px 8px; -moz-appearance: textfield; appearance: textfield; }
.bf-preco input::-webkit-outer-spin-button,
.bf-preco input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ═══════════════════════════════════════════════════════════════════════════════════════
   83 — Página da loja: descrição de serviço/produto (2 linhas + "Ver mais", igual ao app) e o
   cartão LARGO de plano (descrição, "O que está incluído", benefícios, preço PIX/cartão).
   ═══════════════════════════════════════════════════════════════════════════════════════ */
.pc2-desc-item {
  margin: 0; font-size: .78rem; line-height: 1.45; color: var(--text-secondary);
  white-space: pre-line; overflow-wrap: anywhere;
}
.pc2-desc-item.curta { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.pc2-ver-mais {
  align-self: flex-start; background: none; border: none; padding: 0; margin-top: -2px; cursor: pointer;
  font-family: inherit; font-size: .76rem; font-weight: 700; color: var(--blue);
}
.pc2-ver-mais:hover { text-decoration: underline; }
.pc2-ver-mais[hidden] { display: none; }

.pc2-planos { display: grid; gap: 16px; }
.pc2-plano {
  display: flex; gap: 18px; background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 16px;
  box-shadow: var(--shadow-sm); scroll-margin-top: 96px;
}
.pc2-plano:target { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, .2); animation: pcAlvo 2.6s ease; }
.pc2-plano-foto {
  flex: 0 0 150px; width: 150px; height: 150px; border-radius: 12px; overflow: hidden; background: var(--bg-soft);
  display: grid; place-items: center; font-size: 2.6rem;
}
.pc2-plano-foto img { width: 100%; height: 100%; object-fit: cover; }
.pc2-plano-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.pc2-plano-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px 16px; flex-wrap: wrap; }
.pc2-plano-topo h3 { margin: 0; font-size: 1.1rem; font-weight: 800; line-height: 1.25; }
.pc2-plano-preco { display: flex; flex-direction: column; align-items: flex-end; text-align: right; line-height: 1.15; }
.pc2-plano-preco b { font-size: 1.35rem; font-weight: 800; color: var(--text); letter-spacing: -.01em; }
.pc2-plano-preco b i { font-style: normal; font-size: .8rem; color: var(--text-secondary); margin-left: 2px; }
.pc2-plano-preco small { margin-top: 3px; font-size: .74rem; color: var(--text-secondary); }
.pc2-plano-preco .pc2-sem-preco { font-size: .95rem; color: var(--text-secondary); }
.pc2-plano .pc2-desc-item { font-size: .84rem; }
.pc2-plano-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.pc2-plano-caixa { display: flex; flex-direction: column; gap: 6px; min-width: 0; background: var(--bg-soft); border-radius: 12px; padding: 12px 14px; }
.pc2-plano-caixa h4 { margin: 0 0 2px; font-size: .84rem; font-weight: 800; }
.pc2-plano-caixa ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pc2-plano-caixa li { display: flex; gap: 8px; font-size: .8rem; line-height: 1.4; color: var(--text-secondary); }
.pc2-plano-caixa li strong { color: var(--text); font-weight: 700; }
.pc2-plano-caixa li strong::after { content: ':'; }
.pc2-plano-caixa .pc2-desc-item { font-size: .8rem; }
.pc2-plano-nota { margin: 0; font-size: .74rem; color: var(--text-secondary); }
.pc2-plano-nota span { color: #B45309; font-weight: 700; }
@media (max-width: 640px) {
  .pc2-plano { flex-direction: column; gap: 12px; padding: 12px; }
  .pc2-plano-foto { flex-basis: auto; width: 100%; height: auto; aspect-ratio: 2 / 1; }
  .pc2-plano-foto.sem-foto { aspect-ratio: auto; height: 64px; font-size: 2rem; } /* sem foto: não ocupa meia tela */
  .pc2-plano-preco { align-items: flex-start; text-align: left; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   RESPEITO A QUEM PEDIU MENOS MOVIMENTO — último bloco de propósito, pra vencer tudo acima.
   Não desliga o site: desliga o movimento.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js-efeitos .revelar { opacity: 1 !important; transform: none !important; }
  .showcase-track { animation: none !important; }
  .btn:hover, .step-card:hover, .res-card:hover, .showcase-card:hover { transform: none !important; }
}