/* =========================================================================
   ChaveiroPerto — design system
   Tokens extraídos de ChaveiroPerto.dc.html. Layout mobile-first; os
   breakpoints reproduzem as duas composições do design (390 e 1240).
   ========================================================================= */

:root {
  --navy:        #1B2E4B;
  --navy-deep:   #0F1D31;
  --navy-soft:   #B9C4D6;
  --navy-softer: #8E9CB4;

  --accent:      #F5B70A;
  --accent-ink:  #8A6200;

  --ink:         #1B2E4B;
  --muted:       #4A5A75;
  --muted-2:     #7A8699;

  --line:        #E7EAF0;
  --line-2:      #E2E6EE;
  --line-3:      #D8DEE9;
  --line-4:      #C9D2E0;
  --line-5:      #EEF1F6;

  --bg:          #F7F8FA;
  --page:        #E9ECF1;
  --white:       #FFFFFF;
  --tint:        #F1F4F9;

  --green-bg:    #E8F6EE;
  --green:       #17724A;
  --green-dot:   #1FA463;

  --warn-bg:     #FFF4D6;
  --warn-soft:   #FFF7E2;
  --warn-line:   #F3DFA6;
  --warn-card:   #FFFDF5;

  --sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --r-sm: 8px;
  --r-md: 11px;
  --r-lg: 14px;
  --r-xl: 16px;
  --r-pill: 999px;

  --shadow-card: 0 1px 2px rgba(27, 46, 75, .04);
  --shadow-hover: 0 6px 18px rgba(27, 46, 75, .09);
  --shadow-accent: 0 4px 14px rgba(245, 183, 10, .16);
  --shadow-modal: 0 24px 60px rgba(15, 29, 49, .35);

  --wrap: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { letter-spacing: -.02em; font-weight: 800; }
img, svg { max-width: 100%; }
button { font: inherit; color: inherit; }

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--navy-deep); }

:focus-visible {
  outline: 3px solid rgba(245, 183, 10, .65);
  outline-offset: 2px;
  border-radius: 6px;
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 16px; }
@media (min-width: 900px) { .wrap { padding-inline: 32px; } }

.mono {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 500;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  background: var(--accent); color: var(--ink); font-weight: 800;
  padding: 12px 18px; border-radius: var(--r-md); transition: top .15s;
}
.skip-link:focus { top: 8px; }

/* ------------------------------------------------------------------ topo */

.topbar {
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.topbar--dark { background: var(--navy); border-bottom: 0; }

.topbar__inner {
  display: flex; align-items: center; gap: 14px;
  padding-block: 14px;
}
@media (min-width: 900px) { .topbar__inner { gap: 28px; padding-block: 16px; } }

/* Manrope carrega até 800; é o peso máximo real da fonte. O reforço visual
   vem do tamanho maior, do traço mais espesso do ícone e do letter-spacing
   mais fechado — pedir 900 daria falso negrito sintetizado pelo navegador. */
.logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 24px; font-weight: 800; letter-spacing: -.025em; flex-shrink: 0;
  line-height: 1;
}
@media (min-width: 900px) { .logo { font-size: 28px; } }

/* Tamanho em `em`, não em pixel: o ícone acompanha o texto do logo em
   qualquer breakpoint, sem precisar de uma media query própria para cada um.
   1,1em deixa a chave um pouco acima da altura das maiúsculas, que é onde ela
   lê como parte da marca em vez de um símbolo pendurado ao lado. */
.logo__icon { width: 1.1em; height: 1.1em; flex-shrink: 0; }

.logo b { font-weight: 800; }
.logo .accent { color: var(--accent); }
.topbar--dark .logo, .topbar--dark .logo a { color: var(--white); }

.searchbox {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  background: var(--bg); border: 1px solid var(--line-2);
  border-radius: 12px; padding: 10px 14px;
}
.searchbox input {
  flex: 1; min-width: 0; border: 0; background: transparent;
  font: inherit; font-size: 15px; color: var(--ink); outline: none;
}
.searchbox input::placeholder { color: var(--muted-2); }
.topbar--dark .searchbox { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }
.topbar--dark .searchbox input { color: var(--white); }

.topbar__nav { display: none; align-items: center; gap: 20px; flex-shrink: 0; }
@media (min-width: 900px) { .topbar__nav { display: flex; } }
.topbar__nav a { font-size: 14px; font-weight: 600; color: var(--muted); }
.topbar--dark .topbar__nav a { color: var(--navy-soft); }
.topbar__nav a:hover { color: var(--ink); }
.topbar--dark .topbar__nav a:hover { color: var(--white); }

/* CTA mobile: era texto cinza (--muted) e, no topbar escuro da home, ficava
   com contraste de 1,6:1 — praticamente invisível. Vira botão da cor da marca,
   que é o mesmo par accent/navy usado em "Ligar" e "Cadastrar meu negócio". */
.topbar__cta-mobile {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: var(--navy);
  font-size: 13.5px;
  font-weight: 800;
  padding: 9px 15px;
  border-radius: 10px;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(245, 183, 10, .28);
}
.topbar__cta-mobile:hover,
.topbar__cta-mobile:focus-visible { background: #FFC629; color: var(--navy); }
@media (min-width: 900px) { .topbar__cta-mobile { display: none; } }

/* ---------------------------------------------------------------- botões */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1.5px solid transparent; border-radius: var(--r-md);
  padding: 11px 18px; font-size: 14px; font-weight: 700;
  cursor: pointer; text-align: center; background: none;
  transition: transform .08s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--accent); color: var(--ink); font-weight: 800; }
.btn--primary:hover { background: #e5aa06; color: var(--ink); }

.btn--dark { background: var(--navy); color: var(--white); font-weight: 800; }
.btn--dark:hover { background: var(--navy-deep); color: var(--white); }

.btn--outline { border-color: var(--navy); color: var(--ink); background: var(--white); }
.btn--outline:hover { background: var(--bg); }

.btn--ghost { border-color: var(--line-3); color: var(--ink); background: var(--white); }
.btn--ghost:hover { border-color: var(--line-4); }

.btn--accent-outline { border-color: var(--accent); color: var(--accent); }
.btn--accent-outline:hover { background: rgba(245,183,10,.12); color: var(--accent); }

.btn--lg { padding: 15px 26px; font-size: 16px; }
.btn--block { width: 100%; }

/* ----------------------------------------------------------------- chips */

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips--scroll {
  flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.chips--scroll::-webkit-scrollbar { display: none; }

.chip {
  display: inline-flex; align-items: center;
  padding: 8px 14px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 700; white-space: nowrap;
  border: 1.5px solid var(--line-4); background: transparent; color: var(--ink);
  cursor: pointer;
}
@media (min-width: 900px) { .chip { padding: 9px 15px; font-size: 13.5px; } }
.chip:hover { border-color: var(--muted-2); color: var(--ink); }
.chip.is-on { background: var(--accent); border-color: var(--accent); font-weight: 800; }

/* --------------------------------------------------------------- badges */

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 6px;
  white-space: nowrap;
}
.badge--24h { background: var(--accent); color: var(--ink); }
.badge--destaque { background: var(--navy); color: var(--accent); letter-spacing: .04em; font-size: 10.5px; padding: 4px 9px; }
.badge--plan { background: var(--navy); color: var(--accent); font-size: 10.5px; padding: 4px 8px; }

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 700; padding: 4px 9px; border-radius: var(--r-pill);
  white-space: nowrap;
}
@media (min-width: 900px) { .pill { font-size: 12px; padding: 5px 10px; } }
.pill--open { background: var(--green-bg); color: var(--green); }
.pill--warn { background: var(--warn-bg); color: var(--accent-ink); font-weight: 800; }

.dot { width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--green-dot); flex-shrink: 0; }

.open-now {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--green); font-size: 12px; font-weight: 700;
}

/* ----------------------------------------------------------- breadcrumb */

.breadcrumb {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12px; color: var(--muted-2); font-weight: 500;
}
@media (min-width: 900px) { .breadcrumb { font-size: 13px; } }
.breadcrumb a { color: var(--muted-2); }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb [aria-current] { color: var(--ink); font-weight: 700; }

/* --------------------------------------------------------------- layout */

.layout {
  display: flex; flex-direction: column; gap: 24px;
  padding-block: 20px 40px;
}
@media (min-width: 1040px) {
  .layout { flex-direction: row; gap: 32px; padding-block: 28px 56px; }
  .layout__main { flex: 1; min-width: 0; }
  .layout__aside { width: 300px; flex-shrink: 0; }
}
.layout__main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.layout__aside { display: flex; flex-direction: column; gap: 14px; }

.page-bg { background: var(--bg); }

/* ---------------------------------------------------------------- cards */

.card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: 20px;
}
@media (min-width: 900px) { .card { padding: 22px 24px; } }
.card--accent { background: var(--warn-card); border: 1.5px solid var(--accent); }
.card--soft { background: var(--warn-soft); border: 1px solid var(--warn-line); }
.card--navy { background: var(--navy); border: 0; color: var(--white); }
.card__title { font-size: 15px; font-weight: 800; }
.card__stack { display: flex; flex-direction: column; gap: 12px; }

/* ------------------------------------------------- card do chaveiro (lista) */

.lock {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 13px; padding: 13px 14px;
  box-shadow: var(--shadow-card);
}
@media (min-width: 720px) {
  .lock { gap: 18px; align-items: center; border-radius: var(--r-lg); padding: 16px 18px; }
}
.lock:hover { border-color: var(--line-4); box-shadow: var(--shadow-hover); }

.lock--featured {
  background: var(--warn-card); border: 1.5px solid var(--accent);
  box-shadow: var(--shadow-accent);
}
.lock--featured:hover { border-color: var(--accent); box-shadow: 0 8px 22px rgba(245,183,10,.24); }

.lock__avatar {
  width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0;
  background: var(--navy); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; overflow: hidden;
}
.lock__avatar img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 720px) {
  .lock__avatar { width: 52px; height: 52px; border-radius: 13px; font-size: 17px; }
  .lock--featured .lock__avatar { width: 54px; height: 54px; }
}

.lock__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
@media (min-width: 720px) { .lock__body { gap: 6px; } }

.lock__head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
@media (min-width: 720px) { .lock__head { gap: 10px; } }

.lock__name {
  font-size: 15px; font-weight: 800; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
@media (min-width: 720px) { .lock__name { font-size: 17px; white-space: normal; } }
.lock--featured .lock__name { font-size: 15px; }
@media (min-width: 720px) { .lock--featured .lock__name { font-size: 17.5px; } }

.lock__meta {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--muted); font-weight: 600;
}
@media (min-width: 720px) { .lock__meta { gap: 14px; font-size: 13.5px; } }
.lock__meta .sep { color: var(--muted-2); font-weight: 500; }
.lock__rating { display: inline-flex; align-items: center; gap: 5px; }
.lock__rating b { color: var(--ink); }
.lock__rating span { color: var(--muted-2); font-weight: 500; }
.lock__eta { font-size: 12.5px; font-weight: 700; color: var(--accent-ink); }

.lock__actions {
  display: flex; flex-direction: column; gap: 6px; flex-shrink: 0;
}
@media (min-width: 720px) { .lock__actions { flex-direction: row-reverse; align-items: center; gap: 9px; } }
.lock__actions .btn { white-space: nowrap; }
.lock__actions .btn--wa { padding: 7px 15px; font-size: 12.5px; }
@media (min-width: 720px) { .lock__actions .btn--wa { padding: 11px 15px; font-size: 14px; } }

.list-divider {
  display: flex; align-items: center; gap: 12px; padding: 10px 0 2px;
}
.list-divider .line { flex: 1; height: 1px; background: var(--line-2); }

.featured-label {
  display: flex; align-items: center; gap: 9px;
  color: var(--accent-ink); font-weight: 500;
}

/* --------------------------------------------------------------- banners */

.notice {
  display: flex; gap: 10px;
  background: var(--warn-soft); border: 1px solid var(--warn-line);
  border-radius: 12px; padding: 12px 14px;
  font-size: 13px; line-height: 1.5; color: var(--ink); font-weight: 600;
}
.notice svg { flex-shrink: 0; margin-top: 1px; }

/* ------------------------------------------------------------------ FAQ */

.faq { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 8px 20px 12px; }
@media (min-width: 900px) { .faq { padding: 8px 28px 12px; } }

.faq__item { border-bottom: 1px solid var(--line-5); }
.faq__item:last-child { border-bottom: 0; }

.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 0; background: none; border: 0; cursor: pointer; text-align: left;
  font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--ink);
}
@media (min-width: 900px) { .faq__q { font-size: 16px; padding: 20px 0; } }
.faq__sign { font-size: 22px; font-weight: 600; color: var(--accent); line-height: 1; flex-shrink: 0; }

.faq__a { padding: 0 0 18px; }
.faq__a p { font-size: 14px; line-height: 1.6; color: var(--muted); max-width: 72ch; text-wrap: pretty; }
@media (min-width: 900px) { .faq__a p { font-size: 14.5px; } }
[hidden] { display: none !important; }

/* -------------------------------------------------------------- prose */

.prose h2 { font-size: 19px; margin-bottom: 12px; }
@media (min-width: 900px) { .prose h2 { font-size: 21px; } }
.prose p { font-size: 15px; line-height: 1.65; color: var(--muted); text-wrap: pretty; }
.prose .tags { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 14px; }
.prose .tags a {
  font-size: 13px; font-weight: 700; background: var(--tint);
  padding: 8px 13px; border-radius: var(--r-sm);
}
.prose .tags a:hover { background: var(--line); }

/* --------------------------------------------------------- links laterais */

.linklist { display: flex; flex-direction: column; gap: 9px; font-size: 14px; font-weight: 600; }
.linklist a { display: flex; justify-content: space-between; gap: 12px; }
.linklist a span { color: var(--muted-2); font-weight: 500; }

/* ---------------------------------------------------------------- hero */

.hero { background: var(--navy); color: var(--white); }
.hero__inner {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding-block: 44px 52px; text-align: center;
}
@media (min-width: 900px) { .hero__inner { padding-block: 56px 64px; gap: 20px; } }
.hero h1 { font-size: 30px; color: var(--white); letter-spacing: -.03em; line-height: 1.15; }
@media (min-width: 900px) { .hero h1 { font-size: 46px; } }
.hero p { font-size: 15px; color: var(--navy-soft); max-width: 52ch; line-height: 1.55; }
@media (min-width: 900px) { .hero p { font-size: 17px; } }
.hero__alt { font-size: 13.5px; color: var(--navy-softer); font-weight: 600; }
.hero__alt button {
  background: none; border: 0; color: var(--accent); font-weight: 700; cursor: pointer; padding: 0;
}

.hero-search { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 640px; padding-top: 6px; }
@media (min-width: 720px) { .hero-search { flex-direction: row; } }
/* Classe própria: NÃO reaproveita .field, que é coluna (rótulo acima do
   campo). Reusar .field aqui fazia o ícone empilhar sobre o input e a
   largura do input cair para o tamanho padrão, cortando o placeholder. */
.hero-search .searchfield {
  flex: 1; min-width: 0;
  display: flex; flex-direction: row; align-items: center; gap: 11px;
  background: var(--white); border-radius: 13px; padding: 14px 16px;
}
.hero-search .searchfield > svg { flex-shrink: 0; }
.hero-search input { flex: 1; min-width: 0; border: 0; outline: none; font: inherit; font-size: 15.5px; }
.hero-search input::placeholder { color: var(--muted-2); }
.hero-search .btn { border-radius: 13px; padding: 15px 30px; font-size: 16px; }

/* ------------------------------------------------------------- seções */

.section { display: flex; flex-direction: column; gap: 14px; }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.section h2 { font-size: 20px; }
@media (min-width: 900px) { .section h2 { font-size: 22px; } }

.grid { display: grid; gap: 10px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--services { grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 900px) { .grid--services { grid-template-columns: repeat(4, 1fr); } }
.grid--cities { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .grid--cities { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .grid--cities { grid-template-columns: repeat(4, 1fr); } }

.tile {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 18px; display: flex; flex-direction: column; gap: 8px;
}
@media (min-width: 900px) { .tile { padding: 22px; } }
.tile:hover { border-color: var(--accent); }
.tile__title { font-size: 15px; font-weight: 800; }
@media (min-width: 900px) { .tile__title { font-size: 16.5px; } }
.tile__text { font-size: 13.5px; line-height: 1.5; color: var(--muted); font-weight: 500; }

.city-link {
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.city-link:hover { border-color: var(--line-4); }
.city-link b { font-size: 15px; font-weight: 700; }
.city-link span { font-size: 12.5px; color: var(--muted-2); font-weight: 600; }

.cta-strip {
  background: var(--warn-soft); border: 1px solid var(--warn-line); border-radius: var(--r-xl);
  padding: 22px; display: flex; flex-direction: column; gap: 16px;
}
@media (min-width: 900px) {
  .cta-strip { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 28px; }
}
.cta-strip__title { font-size: 18px; font-weight: 800; letter-spacing: -.015em; }
@media (min-width: 900px) { .cta-strip__title { font-size: 21px; } }
.cta-strip__text { font-size: 14.5px; color: var(--muted); font-weight: 600; }

/* ------------------------------------------------------------- formulário */

.field { display: flex; flex-direction: column; gap: 6px; }
.field label, .label { font-size: 12.5px; font-weight: 700; color: var(--muted); }

.input, .select, .textarea {
  width: 100%; font: inherit; font-size: 14.5px; color: var(--ink);
  border: 1px solid var(--line-2); background: var(--bg);
  border-radius: 10px; padding: 12px 14px; outline: none;
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--accent); background: var(--white); }
.input::placeholder, .textarea::placeholder { color: var(--muted-2); }
.textarea { min-height: 80px; resize: vertical; line-height: 1.55; }
.select {
  appearance: none; font-weight: 600;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%237A8699' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px;
}
.field--white .input, .field--white .select, .field--white .textarea { background: var(--white); }

.form-row { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 560px) { .form-row { flex-direction: row; } .form-row > * { flex: 1; min-width: 0; } }

.form-error {
  background: #FDECEC; border: 1px solid #F3C9C9; color: #9A2727;
  border-radius: 10px; padding: 11px 13px; font-size: 13.5px; font-weight: 600;
}
.form-note { font-size: 11.5px; line-height: 1.5; color: var(--muted-2); font-weight: 500; }

/* radio em cartão (formas de pagamento) */
.radio-card {
  display: flex; align-items: center; gap: 13px; cursor: pointer;
  border: 1.5px solid var(--line-2); background: var(--white);
  border-radius: 12px; padding: 15px 16px;
}
.radio-card:has(input:checked) { border-color: var(--navy); background: var(--bg); }
.radio-card input { position: absolute; opacity: 0; pointer-events: none; }
.radio-card__dot {
  width: 17px; height: 17px; border-radius: var(--r-pill);
  border: 2px solid var(--line-4); background: var(--white); flex-shrink: 0;
}
.radio-card:has(input:checked) .radio-card__dot { border-color: var(--accent); background: var(--accent); }
.radio-card__label { font-size: 15px; font-weight: 700; }
.radio-card__hint { font-size: 12.5px; color: var(--muted-2); font-weight: 600; margin-left: auto; }

/* checkbox em cartão (serviços do painel) */
.check-card {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  border: 1.5px solid var(--line-2); background: var(--white);
  border-radius: 10px; padding: 12px 13px; font-size: 14px; font-weight: 700;
}
.check-card:has(input:checked) { border-color: var(--accent); background: var(--warn-card); }
.check-card input { position: absolute; opacity: 0; pointer-events: none; }
.check-card__box {
  width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--line-4);
  background: var(--white); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: var(--ink);
}
.check-card:has(input:checked) .check-card__box { background: var(--accent); border-color: var(--accent); }
.check-card:has(input:checked) .check-card__box::after { content: '✓'; }

/* toggle 24h */
.toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle__label { font-size: 13.5px; font-weight: 700; color: var(--muted); }
.toggle__track {
  width: 42px; height: 24px; border-radius: var(--r-pill); background: var(--line-2);
  position: relative; display: inline-block; flex-shrink: 0; transition: background .15s;
}
.toggle__track::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: var(--r-pill); background: var(--white);
  box-shadow: 0 1px 3px rgba(27,46,75,.3); transition: left .15s;
}
.toggle input:checked + .toggle__track { background: var(--accent); }
.toggle input:checked + .toggle__track::after { left: 20px; }

/* ---------------------------------------------------------------- modal */

.modal[hidden] { display: none !important; }
.modal {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(27, 46, 75, .55);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0;
}
@media (min-width: 720px) { .modal { align-items: center; padding: 40px 20px; } }

.modal__panel {
  width: 100%; max-width: 452px; background: var(--white);
  border-radius: 22px 22px 0 0; padding: 20px 18px 22px;
  display: flex; flex-direction: column; gap: 15px;
  box-shadow: var(--shadow-modal);
  max-height: 92vh; overflow-y: auto;
}
@media (min-width: 720px) {
  .modal__panel { border-radius: 18px; padding: 26px 26px 24px; gap: 16px; }
}
.modal__grip { width: 44px; height: 4px; border-radius: var(--r-pill); background: var(--line-2); align-self: center; }
@media (min-width: 720px) { .modal__grip { display: none; } }

.modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.modal__title { font-size: 19px; font-weight: 800; letter-spacing: -.015em; }
.modal__sub { font-size: 13.5px; color: var(--muted); font-weight: 600; }
.modal__close {
  background: none; border: 0; cursor: pointer; font-size: 20px;
  color: var(--muted-2); line-height: 1; padding: 0 2px;
}

/* -------------------------------------------------------------- perfil */

.profile-head {
  background: var(--white); border-bottom: 1px solid var(--line);
  padding-block: 22px;
}
.profile-head__inner { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
@media (min-width: 900px) { .profile-head__inner { gap: 22px; flex-wrap: nowrap; } }

.profile-avatar {
  width: 60px; height: 60px; border-radius: 16px; flex-shrink: 0;
  background: var(--navy); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 800; overflow: hidden;
}
@media (min-width: 900px) { .profile-avatar { width: 78px; height: 78px; border-radius: 18px; font-size: 26px; } }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }

.profile-id { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 10px; }
.profile-id h1 { font-size: 22px; }
@media (min-width: 900px) { .profile-id h1 { font-size: 28px; } }
.profile-id__meta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 13.5px; color: var(--muted); font-weight: 600;
}
@media (min-width: 900px) { .profile-id__meta { gap: 16px; font-size: 14px; } }

.profile-cta { display: flex; flex-direction: column; gap: 9px; width: 100%; flex-shrink: 0; }
@media (min-width: 900px) { .profile-cta { width: 212px; } }
.profile-cta__phone { text-align: center; font-size: 12.5px; color: var(--muted-2); font-weight: 600; }

.svc-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 560px) { .svc-grid { grid-template-columns: 1fr 1fr; } }
.svc {
  display: flex; align-items: center; gap: 9px;
  background: var(--bg); border-radius: 10px; padding: 11px 13px;
  font-size: 14px; font-weight: 700;
}
.svc::before {
  content: ''; width: 6px; height: 6px; border-radius: var(--r-pill);
  background: var(--accent); flex-shrink: 0;
}

.review { display: flex; flex-direction: column; gap: 7px; padding-bottom: 14px; border-bottom: 1px solid var(--line-5); }
.review:last-child { border-bottom: 0; padding-bottom: 0; }
.review__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.review__name { font-size: 14.5px; font-weight: 800; }
.review__stars { font-size: 13px; color: var(--accent); letter-spacing: 1px; }
.review__when { font-size: 12.5px; color: var(--muted-2); font-weight: 600; }
.review p { font-size: 14px; line-height: 1.6; color: var(--muted); }

.hours-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.hours-row b { color: var(--ink); }

.area-tags { display: flex; gap: 6px; flex-wrap: wrap; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.area-tags span { background: var(--bg); padding: 6px 10px; border-radius: 7px; }

/* --------------------------------------------------------- estado vazio */

.empty-hero { background: var(--navy); color: var(--white); padding-block: 40px 36px; }
@media (min-width: 900px) { .empty-hero { padding-block: 44px 40px; } }
.empty-hero__inner { display: flex; flex-direction: column; gap: 16px; }
.empty-hero h1 { font-size: 27px; color: var(--white); line-height: 1.12; max-width: 22ch; }
@media (min-width: 900px) { .empty-hero h1 { font-size: 38px; } }
.empty-hero p { font-size: 15px; line-height: 1.6; color: var(--navy-soft); max-width: 58ch; }
@media (min-width: 900px) { .empty-hero p { font-size: 16px; } }
.empty-hero .breadcrumb { color: var(--navy-softer); }
.empty-hero .breadcrumb a { color: var(--navy-softer); }
.empty-hero .breadcrumb [aria-current] { color: var(--white); }
.empty-hero__cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 4px; }
.empty-hero__note { font-size: 13.5px; color: var(--navy-softer); font-weight: 600; }

.benefits { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 560px) { .benefits { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .benefits { grid-template-columns: repeat(4, 1fr); } }
.benefit__n {
  width: 34px; height: 34px; border-radius: 10px; background: var(--warn-bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; color: var(--accent-ink);
}
.benefit__title { font-size: 15px; font-weight: 800; line-height: 1.3; }
.benefit__text { font-size: 13px; line-height: 1.55; color: var(--muted); font-weight: 500; }

.proof { display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.proof__big { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.proof__label { font-size: 14px; font-weight: 700; line-height: 1.4; }
.proof__note { font-size: 13px; line-height: 1.55; color: var(--muted); font-weight: 600; }

/* -------------------------------------------------------------- planos */

.plans { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
@media (min-width: 900px) { .plans { grid-template-columns: 1fr 1fr; } }
.plan { display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: var(--r-xl); }
@media (min-width: 900px) { .plan { padding: 26px; } }
.plan--basic { background: var(--white); border: 1px solid var(--line); }
.plan--featured { background: var(--warn-card); border: 1.5px solid var(--accent); box-shadow: 0 8px 24px rgba(245,183,10,.18); }
.plan__name { font-size: 19px; font-weight: 800; }
.plan__tagline { font-size: 13.5px; color: var(--muted); font-weight: 600; }
.plan__price { display: flex; align-items: baseline; gap: 7px; }
.plan__price b { font-size: 34px; font-weight: 800; letter-spacing: -.03em; }
.plan__price span { font-size: 14px; color: var(--muted-2); font-weight: 700; }
.plan__perks { display: flex; flex-direction: column; gap: 9px; font-size: 14px; font-weight: 600; color: var(--muted); list-style: none; padding: 0; margin: 0; }
.plan__perks li { display: flex; gap: 9px; }
.plan__perks li::before { content: '·'; color: var(--accent); font-weight: 800; }
.plan__note { font-size: 12px; color: var(--accent-ink); font-weight: 700; text-align: center; }

.secure-note {
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; color: var(--muted-2); font-weight: 600;
}

/* ------------------------------------------------------------ checkout */

.steps { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted-2); font-weight: 700; }
.steps [aria-current] { color: var(--ink); }

.summary-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--muted); font-weight: 600; }
.summary-row b { color: var(--ink); }
.summary-total { display: flex; align-items: baseline; justify-content: space-between; }
.summary-total span:first-child { font-size: 14px; font-weight: 700; }
.summary-total span:last-child { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.summary-rule { height: 1px; background: var(--warn-line); }

/* ---------------------------------------------------------- painéis */

.shell { display: flex; flex-direction: column; min-height: 100vh; }
@media (min-width: 900px) { .shell { flex-direction: row; } }

.shell__nav {
  background: var(--navy); padding: 18px 14px;
  display: flex; flex-direction: column; gap: 18px; flex-shrink: 0;
}
@media (min-width: 900px) { .shell__nav { width: 214px; padding: 22px 16px; gap: 22px; } }
.shell__nav--light { background: var(--white); border-right: 1px solid var(--line); }

.shell__brand { display: flex; align-items: center; gap: 9px; padding: 0 6px; font-size: 14.5px; font-weight: 800; color: var(--white); }
.shell__nav--light .shell__brand { color: var(--ink); }

.shell__links { display: flex; flex-direction: column; gap: 3px; }
.shell__links a {
  padding: 10px 12px; border-radius: 9px;
  font-size: 13.5px; font-weight: 600; color: var(--navy-soft);
}
.shell__links a:hover { background: rgba(255,255,255,.07); color: var(--white); }
.shell__links a.is-on { background: var(--accent); color: var(--ink); font-weight: 800; }
.shell__nav--light .shell__links a { color: var(--muted); }
.shell__nav--light .shell__links a:hover { background: var(--bg); color: var(--ink); }
.shell__nav--light .shell__links a.is-on { background: var(--bg); color: var(--ink); font-weight: 800; }

.shell__foot { margin-top: auto; }

.shell__main { flex: 1; min-width: 0; padding: 22px 16px 34px; display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 900px) { .shell__main { padding: 26px 30px 34px; } }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-head h1 { font-size: 22px; }
@media (min-width: 900px) { .page-head h1 { font-size: 25px; } }
.page-head__sub { font-size: 13.5px; color: var(--muted-2); font-weight: 600; }
.page-head__actions { display: flex; gap: 9px; flex-wrap: wrap; }

.progress { height: 5px; border-radius: var(--r-pill); background: var(--warn-line); overflow: hidden; }
.progress > div { height: 100%; background: var(--accent); }

.stat-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--muted); font-weight: 600; }
.stat-row b { color: var(--ink); font-size: 16px; }

/* tabela CRM: grid no desktop, cartão empilhado no mobile */
.crm { display: flex; flex-direction: column; }
.crm__head {
  display: none;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted-2); padding-bottom: 6px; border-bottom: 1px solid var(--line-5);
}
.crm__row {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 0; border-bottom: 1px solid #F3F5F9;
  font-size: 13px; color: var(--muted); font-weight: 600;
}
.crm__row b { color: var(--ink); font-weight: 800; }
.crm__origin { font-family: var(--mono); font-size: 11.5px; color: var(--muted-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm__mobile-label { color: var(--muted-2); font-weight: 600; }
@media (min-width: 1040px) {
  .crm__head, .crm__row {
    display: grid;
    grid-template-columns: 1.2fr 1.1fr 1fr .8fr 1.2fr .9fr;
    gap: 12px; align-items: center;
  }
  .crm__row { padding: 12px 0; }
  .crm__mobile-label { display: none; }
}
.status-pill {
  justify-self: start; font-size: 11.5px; font-weight: 800;
  padding: 5px 10px; border-radius: var(--r-pill); border: 0; cursor: pointer;
}

/* --------------------------------------------------------------- rodapé */

.footer { background: var(--navy); color: var(--navy-soft); margin-top: 40px; }
.footer__inner {
  display: flex; flex-direction: column; gap: 26px;
  padding-block: 34px 30px;
}
@media (min-width: 900px) { .footer__inner { flex-direction: row; justify-content: space-between; gap: 40px; } }
.footer h3 { font-size: 13px; color: var(--white); margin-bottom: 10px; letter-spacing: .02em; }
.footer a { color: var(--navy-soft); font-size: 13.5px; font-weight: 600; }
.footer a:hover { color: var(--white); }
.footer__col { display: flex; flex-direction: column; gap: 8px; }
.footer__legal {
  border-top: 1px solid rgba(255,255,255,.12); padding-block: 16px;
  font-size: 12.5px; color: var(--navy-softer);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
}

/* -------------------------------------------------------------- utilitários */

.stack { display: flex; flex-direction: column; }
.stack-4  { gap: 4px; }  .stack-6  { gap: 6px; }  .stack-8  { gap: 8px; }
.stack-10 { gap: 10px; } .stack-12 { gap: 12px; } .stack-14 { gap: 14px; }
.stack-11 { gap: 11px; } .stack-13 { gap: 13px; } .stack-15 { gap: 15px; }
.stack-16 { gap: 16px; } .stack-20 { gap: 20px; } .stack-24 { gap: 24px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.center { text-align: center; }
.muted { color: var(--muted-2); }
.small { font-size: 12.5px; }
.text-muted { color: var(--muted); font-weight: 600; }
.mt-auto { margin-top: auto; }

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

/* <details> estilizado como o acordeão do design */
.faq__item > summary { list-style: none; cursor: pointer; }
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary::marker { content: ''; }
.faq__sign::after { content: '+'; }
.faq__item[open] > summary .faq__sign::after { content: '−'; }

/* ===================== telas 11 a 14 ===================== */

/* cards de cidade da página de estado (tela 12) */
.city-card {
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  padding: 15px 17px; display: flex; flex-direction: column; gap: 5px;
}
.city-card:hover { border-color: var(--line-4); box-shadow: var(--shadow-hover); }
.city-card--empty { background: var(--warn-card); border: 1.5px solid var(--accent); }
.city-card--empty:hover { border-color: var(--accent); }
.city-card__name { font-size: 15.5px; font-weight: 800; }
.city-card__meta { font-size: 12.5px; color: var(--muted-2); font-weight: 600; }
.city-card__meta--empty { color: var(--accent-ink); font-weight: 700; }

/* bloco de confiança (tela 13) */
.trust-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 720px)  { .trust-grid { grid-template-columns: repeat(3, 1fr); } }
.trust-item { display: flex; gap: 11px; align-items: flex-start; }

.trust-item__icon {
  width: 32px; height: 32px; border-radius: 9px; background: var(--warn-bg);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.trust-item__title { font-size: 14.5px; font-weight: 800; line-height: 1.3; }
.trust-item__text { font-size: 13px; line-height: 1.55; color: var(--muted); font-weight: 500; }
.trust-note { border-radius: 12px; padding: 16px 18px; }
.trust-note .badge { vertical-align: middle; }
.trust-report {
  border-top: 1px solid var(--line-5); padding-top: 16px; gap: 16px; align-items: flex-start;
}
.trust-report .btn { flex-shrink: 0; }

/* guia (tela 14) */
.guide-meta {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  font-size: 13px; color: var(--muted-2); font-weight: 600;
}
.guide-meta b { color: var(--ink); font-weight: 700; }

.quick-answer { border-radius: var(--r-xl); padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.quick-answer p { font-size: 15.5px; line-height: 1.65; color: var(--ink); font-weight: 600; text-wrap: pretty; }
.quick-answer b { font-weight: 800; }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.price-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 460px; }
.price-table thead th {
  text-align: left; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2);
  font-weight: 500; padding: 0 12px 8px 0; border-bottom: 1px solid var(--line-5);
}
.price-table tbody th {
  text-align: left; font-weight: 700; color: var(--ink);
  padding: 12px 12px 12px 0; border-bottom: 1px solid #F3F5F9;
}
.price-table tbody td {
  padding: 12px 12px 12px 0; border-bottom: 1px solid #F3F5F9;
  color: var(--muted); font-weight: 600; white-space: nowrap;
}
.price-table tbody tr:last-child th,
.price-table tbody tr:last-child td { border-bottom: 0; }

.guide-body h2 { font-size: 19px; margin: 26px 0 12px; scroll-margin-top: 20px; }
.guide-body h2:first-child { margin-top: 0; }
.guide-body p { margin-bottom: 14px; }
.guide-body p:last-child { margin-bottom: 0; }
.guide-body ol, .guide-body ul { margin: 0 0 14px; padding-left: 20px; }
.guide-body li { font-size: 15px; line-height: 1.65; color: var(--muted); margin-bottom: 10px; }
.guide-body li b, .guide-body li strong { color: var(--ink); font-weight: 800; }

.guide-toc ol { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
.guide-toc li { font-size: 13.5px; font-weight: 600; }
.guide-toc a { color: var(--muted); }
.guide-toc a:hover { color: var(--ink); }
@media (min-width: 1040px) { .guide-toc { position: sticky; top: 20px; } }

/* URL do webhook no admin — precisa poder ser selecionada por inteiro */
.webhook-url {
  display: block;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12.5px;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: 9px;
  padding: 10px 12px;
  overflow-x: auto;
  white-space: nowrap;
  user-select: all;
}

/* ---------------------------------------------- tela 15 · cidades e bairros */
.geo-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.metric {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px; display: flex; flex-direction: column; gap: 4px;
}
.metric__label { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.metric__value { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.metric__value--sm { font-size: 17px; }
.metric__note { font-size: 12px; color: var(--muted-2); font-weight: 600; }

/* Layout de duas colunas: a lista de municípios é fixa e estreita, a tabela de
   bairros ocupa o resto — é onde o trabalho acontece. */
.geo-split { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 14px; align-items: start; }
.geo-cities, .geo-districts { min-width: 0; }
.geo-districts { min-height: 260px; }

/* Barra de contexto acima das colunas */
.geo-bar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px;
}
.geo-bar__group { display: flex; align-items: center; gap: 9px; margin: 0; }
.geo-bar__group label { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.geo-bar__group .select { width: auto; min-width: 210px; }
.geo-bar__stat { font-size: 13.5px; color: var(--muted); font-weight: 600; }
.geo-bar__search { margin-left: auto; }
.geo-bar__search .searchbox { min-width: 240px; }

/* Linha de município: bolinha de situação em vez de etiqueta repetida 22 vezes */
.geo-city {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px; border-radius: 8px; cursor: pointer;
}
.geo-city:hover { background: var(--bg); }
.geo-city.is-on { background: var(--navy); }
.geo-city.is-on .geo-city__name, .geo-city.is-on .geo-city__count { color: #fff; }
.geo-city__name {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.geo-city__count { font-size: 12px; color: var(--muted-2); font-weight: 600; flex-shrink: 0; }
.geo-city__dot {
  width: 7px; height: 7px; border-radius: 99px; flex-shrink: 0;
  background: var(--line-4); box-shadow: 0 0 0 2px rgba(0,0,0,.02);
}
.geo-city__dot.is-live { background: var(--green-dot); }

/* Barra de ações: o rótulo diz sobre o que a ação age */
.geo-actions {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  border-top: 1px solid var(--line); padding-top: 11px;
}
.geo-actions__hint { font-size: 12px; color: var(--muted-2); font-weight: 600; }

.geo-empty {
  border: 1px dashed var(--line-4); border-radius: 12px;
  padding: 28px 24px; text-align: center; color: var(--muted);
}
.geo-empty__title { font-size: 15px; font-weight: 800; color: var(--ink); margin-bottom: 6px; }
.geo-empty p { margin: 0; font-size: 13.5px; line-height: 1.6; }

.geo-rules > summary {
  cursor: pointer; font-size: 15.5px; font-weight: 800; letter-spacing: -0.01em;
}
.geo-rules > summary::marker { color: var(--accent); }
.geo-col { min-width: 0; }
.geo-col--wide { min-width: 0; }  /* a coluna da tabela: quem cede na hora de encolher */
.geo-list { display: flex; flex-direction: column; gap: 2px; max-height: 460px; overflow-y: auto; }
.geo-item {
  display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
  padding: 8px 10px; border-radius: 8px; font-size: 13.5px; font-weight: 600;
}
.geo-item span { color: var(--muted-2); font-weight: 500; font-size: 12.5px; }
.geo-item:hover { background: var(--bg); }
.geo-item.is-on { background: var(--navy); color: #fff; }
.geo-item.is-on span { color: var(--navy-soft); }
.geo-draft {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted-2); border: 1px solid var(--line-2); border-radius: 5px; padding: 1px 5px;
}
.searchbox--sm { padding: 8px 11px; border-radius: 9px; }
.searchbox--sm input { font-size: 13.5px; }

.geo-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.geo-table th, .geo-table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); }
.geo-table thead th { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-2); }
.geo-table tbody th { font-weight: 700; }
.geo-table__check { width: 34px; }
.geo-manual {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--accent-ink); background: var(--warn-bg); border-radius: 5px; padding: 1px 5px; margin-left: 5px;
}

.geo-badge {
  display: inline-block; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 6px; white-space: nowrap;
}
.geo-badge--index    { background: var(--green-bg); color: var(--green); }
.geo-badge--state_b  { background: var(--warn-bg); color: var(--accent-ink); }
.geo-badge--noindex  { background: var(--tint); color: var(--muted-2); }
.geo-badge--redirect { background: #E7EDF7; color: var(--navy); }

.rule { display: flex; gap: 10px; align-items: baseline; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.rule .geo-badge { flex-shrink: 0; }
.btn--sm { padding: 8px 12px; font-size: 13px; }
.geo-bottom { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; align-items: start; }

@media (max-width: 1100px) {
  .geo-split  { grid-template-columns: 1fr; }
  .geo-bottom { grid-template-columns: 1fr; }
  .geo-list   { max-height: 300px; }
  .geo-bar__search { margin-left: 0; width: 100%; }
}

/* ------------------------------------- ficha "em resumo" (telas 01, 03, 12) */
.summary { display: flex; flex-direction: column; gap: 16px; }
.summary__title { font-size: 18px; font-weight: 800; margin: 0; letter-spacing: -0.01em; }
.summary__schema { font-size: 10.5px; letter-spacing: 0.08em; flex-shrink: 0; }
.summary__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 26px; margin: 0; }
.summary__row {
  display: flex; justify-content: space-between; gap: 14px;
  padding-bottom: 9px; border-bottom: 1px solid var(--line-5); font-size: 14px;
}
.summary__row dt { color: var(--muted-2); font-weight: 600; }
.summary__row dd { margin: 0; font-weight: 700; text-align: right; }
.summary__also { gap: 10px; flex-wrap: wrap; padding-top: 2px; }
.summary__also a {
  font-size: 13px; font-weight: 700; background: var(--tint);
  padding: 8px 13px; border-radius: 8px;
}
@media (max-width: 720px) { .summary__grid { grid-template-columns: 1fr; } }

/* ------------------------------------------ tela 16 · semântica e clusters */
.triples__p { color: var(--muted); font-style: italic; }
.triples__ok { width: 60px; text-align: right; }
.triples code, .geo-table code { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; }
.cluster { border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px; display: flex; flex-direction: column; gap: 10px; }
.cluster__hub { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; font-size: 14px; }
.cluster__hub code { color: var(--muted-2); font-size: 11.5px; }
.cluster__spoke { display: flex; align-items: baseline; gap: 9px; font-size: 13.5px; }
.cluster__spoke a { flex: 1; min-width: 0; font-weight: 600; }
.cluster__spoke .muted { font-size: 12px; color: var(--muted-2); font-weight: 600; }
.cluster__dot { width: 7px; height: 7px; border-radius: 99px; background: var(--green-dot); flex-shrink: 0; }
.cluster__dot.is-orphan { background: var(--accent); }
.cluster__orphan { font-size: 11px; font-weight: 800; color: var(--accent-ink); background: var(--warn-bg); border-radius: 5px; padding: 2px 7px; }

/* Topbar sem busca (home): o nav vai para a direita, já que não há o campo
   flexível no meio para empurrá-lo. */
.topbar--nosearch .topbar__inner { justify-content: space-between; }

/* Aviso de geolocalização na home (fundo escuro do herói) */
.hero__alt--warn { color: var(--accent); font-weight: 700; }

/* Seleção de municípios na tela 15 */
.geo-item--pick { display: flex; align-items: baseline; gap: 8px; }
.geo-item--pick a { flex: 1; min-width: 0; font-weight: 600; color: inherit; }
.geo-item--pick input { flex-shrink: 0; }
.geo-massa > summary {
  cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--muted);
  padding: 8px 0; border-top: 1px solid var(--line);
}
.geo-massa > summary:hover { color: var(--ink); }

/* Barra de importação de bairros na tela 15 */
.geo-import { border-bottom: 1px solid var(--line); padding-bottom: 10px; flex-wrap: wrap; }

/* ---------------------- página de lugar sem chaveiro (tela 04 reescrita) */
.empty-hero__lead {
  font-size: 16px; line-height: 1.65; color: var(--muted);
  max-width: 78ch; text-wrap: pretty; margin: 0;
}
/* Tarja de aviso no herói escuro.
   A cor precisa de `.empty-hero` na frente: `.empty-hero p` já pinta os
   parágrafos de --navy-soft, e vencia esta regra na especificidade — o texto
   saía quase branco sobre o amarelo claro.
   O texto fica num <span> único porque itens flex soltos herdariam o gap. */
.empty-hero .empty-hero__status {
  display: flex; align-items: flex-start; gap: 9px;
  background: var(--warn-bg); color: var(--navy);
  border-left: 3px solid var(--accent);
  border-radius: 10px; padding: 11px 15px;
  font-size: 14px; line-height: 1.5; font-weight: 600;
  max-width: 68ch; margin: 0;
}
.empty-hero .empty-hero__status b { color: var(--navy-deep); font-weight: 800; }
.empty-hero__status-icon { display: flex; flex-shrink: 0; padding-top: 1px; }
.neighbor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 9px; }
.neighbor {
  display: flex; flex-direction: column; gap: 3px;
  border: 1px solid var(--line-2); border-radius: 11px; padding: 12px 14px;
}
.neighbor:hover { border-color: var(--line-4); background: var(--bg); }
.neighbor__name { font-size: 14px; font-weight: 700; }
.neighbor__meta { font-size: 12.5px; color: var(--muted-2); font-weight: 600; }
.alert-box { border-color: var(--line-4); }

/* Bloco de importação em lote da tela 15 */
.import-box {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: var(--bg); border: 1px solid var(--line-2); border-radius: 12px; padding: 14px 16px;
}
.import-box__title { font-size: 14.5px; font-weight: 800; }
.import-box__text { font-size: 13px; line-height: 1.55; color: var(--muted); max-width: 62ch; }

/* Lead vindo de lugar sem chaveiro cadastrado */
.crm__nocover {
  display: inline-block; font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: var(--accent-ink); background: var(--warn-bg);
  border-radius: 5px; padding: 2px 6px; margin-left: 6px; white-space: nowrap;
}

/* ------------------------------------------------ identidade visual (admin) */
.logo__img { height: 30px; width: auto; max-width: 190px; object-fit: contain; display: block; }
@media (min-width: 900px) { .logo__img { height: 34px; max-width: 220px; } }

.brand-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; align-items: start; }
.brand-preview {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 96px; border-radius: 11px; padding: 16px; border: 1px solid var(--line-2);
}
.brand-preview img { max-width: 100%; max-height: 56px; object-fit: contain; }
.brand-preview--light { background: var(--white); }
.brand-preview--dark  { background: var(--navy); border-color: var(--navy); }
.brand-preview--favicon { background: var(--bg); align-items: flex-end; }
.brand-preview--favicon img { max-height: none; }
.brand-meta { font-size: 12px; color: var(--muted-2); font-weight: 600; text-align: center; }

/* ------------------------------------------------------- home v2 (tarefa 2) */
/* Grade de sub-serviços por segmento. As alturas são estáveis: o <details>
   nasce aberto, então não há reflow depois do primeiro paint. */
.svc-tree { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.svc-group {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px;
}
.svc-group__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  cursor: pointer; list-style: none;
}
.svc-group__head::-webkit-details-marker { display: none; }
.svc-group__name { font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.svc-group__count { font-size: 12px; color: var(--muted-2); font-weight: 600; white-space: nowrap; }
.svc-group__blurb { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.svc-group__list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.svc-group__list a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 8px 10px; margin: 0 -10px; border-radius: 8px;
  font-size: 14px; font-weight: 600;
}
.svc-group__list a:hover { background: var(--bg); }
.svc-group__list small { font-size: 12px; color: var(--muted-2); font-weight: 600; white-space: nowrap; }

/* Como funciona — três passos */
.steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.step {
  display: flex; gap: 13px; align-items: flex-start;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px;
}
.step__n {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 99px;
  background: var(--accent); color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800;
}
.step__title { font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; }
.step__text { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }

/* Campo de preço da tela de serviços: largura fixa para as colunas não dançarem */
.input--price { width: 110px; text-align: right; font-weight: 700; }

/* ------------------------------------------- tela de pagamento (Pix/boleto) */
.pay { max-width: 560px; }
.pay__qr { display: flex; justify-content: center; padding: 8px 0; }
.pay__qr img {
  width: 260px; height: 260px; display: block;
  border: 1px solid var(--line); border-radius: 14px; padding: 10px; background: #fff;
}
.pay__code {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12.5px; line-height: 1.5; resize: none; word-break: break-all;
}