/* Hospital Score · identidade "Capital" (v0.5): uma cor de marca fixa (#1F5AE6), claro em branco, escuro quase preto, Newsreader + Inter. Mobile-first. Tokens em docs/IDENTIDADE.md */
:root {
  --bg: #FFFFFF; --surface: #F7F7F5; --surface-2: #EFEFEC; --line: #E4E4E0;
  --fg: #0A0A0B; --muted: #5C5C66; --accent: #1F5AE6; --accent-soft: #1F5AE6; --accent-ink: #FFFFFF; --brand: #1F5AE6;
  --ink-block: #0A0A0B; --ink-block-fg: #FFFFFF; --field: #FFFFFF;
  --r-45: #0B8A4A; --r-45-fg: #FFFFFF; --r-40: #6CBF5A; --r-40-fg: #0E1726; --r-35: #E3B23C; --r-35-fg: #0E1726;
  --r-30: #E07A2F; --r-30-fg: #FFFFFF; --r-lt: #B9402E; --r-lt-fg: #FFFFFF; --r-none: #9AA0A6; --r-none-fg: #0E1726;
  --serif: Newsreader, 'Instrument Serif', Georgia, serif;
  --font: Inter, 'Segoe UI', system-ui, sans-serif;
  --radius: 18px; --radius-sm: 12px; --shadow: 0 8px 24px rgba(10,10,11,.06);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A0A0B; --surface: #141416; --surface-2: #1C1C1F; --line: rgba(255,255,255,.12);
    --fg: #F5F5F4; --muted: #A1A1AA; --accent: #1F5AE6; --accent-soft: #7FB0FF; --accent-ink: #FFFFFF;
    --ink-block: #1F5AE6; --ink-block-fg: #FFFFFF; --field: #141416;
    --r-45: #2FB46B; --r-45-fg: #06130B; --shadow: none;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0A0A0B; --surface: #141416; --surface-2: #1C1C1F; --line: rgba(255,255,255,.12);
  --fg: #F5F5F4; --muted: #A1A1AA; --accent: #1F5AE6; --accent-soft: #7FB0FF; --accent-ink: #FFFFFF;
  --ink-block: #1F5AE6; --ink-block-fg: #FFFFFF; --field: #141416;
  --r-45: #2FB46B; --r-45-fg: #06130B; --shadow: none;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font); font-size: 16px; line-height: 1.5; font-variant-numeric: tabular-nums; }
a { color: inherit; text-decoration-color: color-mix(in srgb, var(--accent-soft) 60%, transparent); text-underline-offset: 2px; }
a:hover { color: var(--accent-soft); }
h1, h2, h3, h4 { line-height: 1.1; margin: 0 0 .5rem; letter-spacing: -.01em; }
h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.125rem, 6vw, 3.5rem); letter-spacing: -.03em; font-variation-settings: 'opsz' 72; }
h1 em, .serif em { font-style: italic; color: var(--brand); }   /* o mesmo azul do "score" do logo, nos dois temas */
h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.6rem, 3vw, 2rem); letter-spacing: -.02em; }
h3 { font-size: 1.05rem; font-weight: 600; }
.serif { font-family: var(--serif); font-weight: 400; }
p { margin: 0 0 .75rem; }
small, .muted { color: var(--muted); }
.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px; }

/* botões e chips */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer; text-decoration: none; min-height: 40px; }
.btn:hover { border-color: var(--accent-soft); color: var(--accent-soft); }
.btn.pri { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.pri:hover { filter: brightness(1.08); color: var(--accent-ink); }
.btn.ink { background: var(--ink-block); color: var(--ink-block-fg); border-color: var(--ink-block); }
.btn.icon { width: 40px; padding: 0; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: .88rem; font-weight: 500; color: var(--fg); cursor: pointer; user-select: none; min-height: 38px; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip.on, .chip:has(input:checked) { background: var(--ink-block); border-color: var(--ink-block); color: var(--ink-block-fg); }
.chip .n { font-weight: 400; opacity: .7; font-size: .8rem; }

/* cabeçalho */
.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 10px; min-height: 60px; }
.logo { display: inline-flex; align-items: center; gap: 9px; color: var(--fg); text-decoration: none; white-space: nowrap; }
.logo .logo-mark { width: 28px; height: 28px; flex: none; }
.logo .logo-word { font-family: var(--font); font-weight: 600; font-size: 19px; letter-spacing: -.03em; line-height: 1; }
.logo .logo-word b { font-weight: 600; color: var(--brand); }
.logo.mono rect { fill: currentColor; } .logo.mono text { fill: var(--bg); } .logo.mono path { stroke: var(--bg); } .logo.mono .logo-word b { color: currentColor; }
.top nav { margin-left: auto; display: flex; gap: 4px; align-items: center; padding: 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.top nav .btn { min-height: 36px; padding: 0 14px; border: 0; background: transparent; font-weight: 500; font-size: .88rem; color: var(--fg); }
.top nav .btn:hover { background: var(--surface-2); color: var(--fg); }
.top nav .btn.icon { width: 36px; }
.top nav .btn.heart { color: var(--accent-soft); }
.top nav .btn.near { gap: 6px; color: var(--fg); }
@media (max-width: 520px) { .top nav .btn.text { display: none; } .top nav .btn.near { width: 36px; padding: 0; justify-content: center; } .top nav .btn.near span { display: none; } }
.top .ask-mini { flex: 1; max-width: 520px; display: none; margin-left: 12px; }
/* menu lateral (estilo america.gov): pílula "Menu" à esquerda abre um painel pela lateral esquerda com as páginas principais */
.menu-btn { gap: 7px; min-height: 36px; padding: 0 14px 0 12px; font-weight: 500; font-size: .88rem; flex: none; }
.menu-btn svg { width: 18px; height: 18px; }
@media (max-width: 520px) { .menu-btn span { display: none; } .menu-btn { width: 40px; padding: 0; } }
.menu { position: fixed; inset: 0; z-index: 40; }
.menu[hidden] { display: none; }
.menu-backdrop { position: absolute; inset: 0; background: rgba(10,10,11,.45); backdrop-filter: blur(6px); }
.menu-panel { position: absolute; top: 0; bottom: 0; left: 0; width: min(440px, 100%); background: var(--bg); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 18px; padding: 14px 20px max(20px, env(safe-area-inset-bottom)); overflow-y: auto; animation: menu-in .22s ease; }
@keyframes menu-in { from { transform: translateX(-28px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .menu-panel { animation: none; } }
.menu-top { display: flex; justify-content: space-between; align-items: center; }
.menu-theme { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.menu-theme button { width: 38px; height: 32px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.menu-theme button:hover { color: var(--fg); }
.menu-theme button[aria-pressed="true"] { background: var(--surface-2); color: var(--fg); box-shadow: var(--shadow); }
.menu-theme svg { width: 16px; height: 16px; }
.menu-links { list-style: none; margin: auto 0; padding: 8px 0; display: grid; gap: 4px; text-align: center; }
.menu-links a { display: block; padding: 6px 8px; text-decoration: none; color: var(--fg); font-family: var(--serif); font-size: 1.75rem; font-weight: 500; letter-spacing: -.01em; line-height: 1.2; border-radius: var(--radius-sm); }
.menu-links a:hover { background: var(--surface); }
.menu-links a[aria-current] { text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 2px; text-decoration-color: var(--accent); }
.menu-links li.sep { height: 10px; }
.menu-links li.grp { margin: 14px 0 2px; font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.menu-links li.grp:first-of-type { margin-top: 6px; }
.menu-links small { display: block; margin: -4px 0 4px; font-size: .74rem; color: var(--muted); letter-spacing: .01em; }
.menu-links li.sec a { font-family: var(--font); font-size: .98rem; font-weight: 500; color: var(--muted); padding: 5px 8px; }
.menu-links li.sec a:hover, .menu-links li.sec a[aria-current] { color: var(--fg); }
.menu-foot { padding: 14px 16px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); text-align: center; font-size: .8rem; color: var(--muted); display: grid; gap: 4px; justify-items: center; }
.menu-foot img { width: 26px; height: 26px; border-radius: 6px; }
.menu-foot a { color: inherit; }
body.menu-open { overflow: hidden; }
@media (max-width: 899px) { .menu-links a { font-size: 1.6rem; } }
@media (min-width: 900px) { .top .ask-mini { display: flex; } }

/* campo Pergunte */
.ask { display: flex; align-items: center; gap: 8px; background: var(--field); border: 1px solid var(--line); border-radius: 999px; padding: 6px 6px 6px 18px; box-shadow: var(--shadow); }
.ask input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 1rem; color: var(--fg); outline: none; text-overflow: ellipsis; }
.ask input::placeholder { color: var(--muted); opacity: .75; font-size: .9em; transition: opacity .45s ease; }   /* o exemplo cabe inteiro; o texto digitado fica em 16 px+ (iOS não dá zoom) */
.ask input.ph-out::placeholder { opacity: 0; }
.ask button { width: 40px; height: 40px; border-radius: 999px; border: 0; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; cursor: pointer; flex: none; }
.ask .loc { background: var(--surface-2); color: var(--fg); position: relative; }
.ask a.loc { width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; flex: none; text-decoration: none; }
.ask.big a.loc { width: 46px; height: 46px; }
/* dica da 1ª visita no botão de localização (home): anéis saindo do botão + balão abaixo; com "reduzir movimento", só o balão */
.ask.big { position: relative; }
.loc-hint { position: absolute; top: calc(100% + 12px); right: var(--hint-r, 40px); z-index: 5; max-width: min(260px, calc(100vw - 48px)); padding: 9px 14px; border-radius: 12px; background: #FFFFFF; color: #0A0A0B; font-size: .86rem; line-height: 1.3; text-align: left; box-shadow: 0 10px 30px rgba(0,0,0,.45); pointer-events: none; }
.loc-hint[hidden] { display: none; }
.loc-hint::before { content: ""; position: absolute; top: -6px; right: var(--hint-ax, 18px); width: 12px; height: 12px; background: inherit; transform: rotate(45deg); border-radius: 2px; }
.loc-hint strong { font-weight: 700; }
.ask .loc.hinting { background: var(--accent); color: var(--accent-ink); }
@media (prefers-reduced-motion: no-preference) {
  .loc-hint:not([hidden]) { animation: hs-hint-in .35s ease-out both; }
  .ask .loc.hinting::before, .ask .loc.hinting::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent-soft, #7FB0FF); animation: hs-ring 1.6s ease-out infinite; pointer-events: none; }
  .ask .loc.hinting::after { animation-delay: .8s; }
}
@keyframes hs-ring { from { transform: scale(1); opacity: .9; } to { transform: scale(2.1); opacity: 0; } }
@keyframes hs-hint-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.ask.big { padding: 8px 8px 8px 22px; }
.ask.big input { font-size: 1.1rem; }
.ask.big input::placeholder { font-size: .84em; }
.ask.big button { width: 46px; height: 46px; }
.ask-examples { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
.ask-hero { text-align: center; padding: 28px 0 10px; }
.ask-hero .lead { color: var(--muted); font-size: 1.05rem; max-width: 60ch; margin: 10px auto 18px; }
.answer { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-top: 18px; }
.answer[hidden] { display: none; }
.answer .lede { font-family: var(--serif); font-weight: 500; font-size: 1.45rem; line-height: 1.15; letter-spacing: -.02em; }
.answer .ctx { color: var(--muted); font-size: .92rem; margin: 6px 0 12px; }
.answer .cards { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.answer .card { display: block; text-decoration: none; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.answer .card .r { display: flex; justify-content: space-between; align-items: center; font-size: .78rem; color: var(--muted); }
.answer .card b { display: block; margin-top: 6px; }
.answer .card small { display: block; color: var(--muted); }
.answer .foot { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 12px; font-size: .85rem; color: var(--muted); }
.answer .foot a { color: var(--accent-soft); font-weight: 600; text-decoration: none; }
.answer .head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.answer .quota { font-size: .78rem; color: var(--muted); white-space: nowrap; }
@media (max-width: 640px) { .answer .head { flex-direction: column-reverse; gap: 4px; } .answer .lede { font-size: 1.25rem; } }
.answer.err .lede { color: var(--muted); font-size: 1.1rem; font-family: var(--font); }

/* placa de nota */
.plate { display: inline-block; min-width: 44px; padding: 3px 9px; border-radius: 9px; font-weight: 700; font-size: .95rem; text-align: center; white-space: nowrap; }
.plate.r45 { background: var(--r-45); color: var(--r-45-fg); } .plate.r40 { background: var(--r-40); color: var(--r-40-fg); }
.plate.r35 { background: var(--r-35); color: var(--r-35-fg); } .plate.r30 { background: var(--r-30); color: var(--r-30-fg); }
.plate.rlt { background: var(--r-lt); color: var(--r-lt-fg); } .plate.rnone { background: var(--surface-2); color: var(--muted); font-weight: 500; }
.plate.few { background: transparent; border: 2px dashed currentColor; }
.plate.few.r45 { color: var(--r-45); } .plate.few.r40 { color: var(--r-40); } .plate.few.r35 { color: var(--r-35); } .plate.few.r30 { color: var(--r-30); } .plate.few.rlt { color: var(--r-lt); }

/* breadcrumb + hero */
.crumbs { display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 14px 0 4px; font-size: .85rem; color: var(--muted); list-style: none; margin: 0; }
.crumbs li + li::before { content: "›"; margin-right: 8px; opacity: .6; }
.hero { padding: 8px 0 14px; }
.hero p.lead { color: var(--muted); max-width: 70ch; }
.srcnote { font-size: .8rem; color: var(--muted); }

/* seletor de região */
.region-sel { display: flex; flex-wrap: nowrap; gap: 8px; margin: 4px 0 14px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.region-sel::-webkit-scrollbar { display: none; }
.rs-wrap { position: relative; }
.rs-arrow { position: absolute; top: 4px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--fg); font-size: 1.3rem; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.18); display: none; }
.rs-arrow.prev { left: -6px; } .rs-arrow.next { right: -6px; }
.rs-wrap.can-prev .rs-arrow.prev, .rs-wrap.can-next .rs-arrow.next { display: grid; place-items: center; }
.rs-wrap::before, .rs-wrap::after { content: ""; position: absolute; top: 0; bottom: 18px; width: 56px; pointer-events: none; opacity: 0; transition: opacity .2s; z-index: 1; }
.rs-wrap::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.rs-wrap::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.rs-wrap.can-prev::before, .rs-wrap.can-next::after { opacity: 1; }
@media (hover: none) { .rs-arrow { display: none !important; } }
.region-sel .chip { flex: none; }

/* kpis */
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 8px 0 16px; }
@media (min-width: 720px) { .kpis { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }   /* 3 ou 4, sem buraco */
.kpi[hidden], .panel[hidden] { display: none; }
/* ficha: detalhes longos do CNES recolhidos atrás de um "+" */
.more-block { margin-top: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.more-block > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 14px; font-weight: 600; }
.more-block > summary::-webkit-details-marker { display: none; }
.more-block > summary::before { content: "+"; display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); font-weight: 500; }
.more-block[open] > summary::before { content: "−"; }
.more-block > summary .muted { font-weight: 400; font-size: .88rem; }
.more-block > :not(summary) { margin: 0 14px 14px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; min-width: 0; }
.kpi small { display: block; font-size: .78rem; color: var(--muted); }
.kpi b { display: block; font-family: var(--serif); font-weight: 500; font-size: 2.4rem; line-height: 1.05; margin-top: 2px; letter-spacing: -.02em; }
.kpi b .star { font-size: 1.2rem; color: var(--accent-soft); }
.kpi span { font-size: .78rem; color: var(--muted); display: block; }
.kpi .vs { font-style: normal; color: var(--accent-soft); white-space: nowrap; }
.kpi.hl { background: var(--ink-block); color: var(--ink-block-fg); border-color: var(--ink-block); }
.kpi.hl small, .kpi.hl span { color: color-mix(in srgb, var(--ink-block-fg) 75%, transparent); }
.kpi.hl b .star { color: var(--ink-block-fg); }

/* barra de visão: mapa/tabela + faixas */
.viewbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.seg { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.seg button { font: inherit; font-weight: 600; font-size: .88rem; padding: 7px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--fg); cursor: pointer; min-height: 36px; }
.seg button.on { background: var(--ink-block); color: var(--ink-block-fg); }
.ranges { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-left: auto; }
.ranges .lbl { font-size: .78rem; color: var(--muted); }
.range { font: inherit; font-weight: 700; font-size: .78rem; padding: 5px 10px; border-radius: 999px; border: 2px solid transparent; cursor: pointer; min-height: 32px; opacity: .55; }
.range.on { opacity: 1; border-color: var(--fg); }
.ranges:not(.active) .range { opacity: 1; }
.range.r45 { background: var(--r-45); color: var(--r-45-fg); } .range.r40 { background: var(--r-40); color: var(--r-40-fg); }
.range.r35 { background: var(--r-35); color: var(--r-35-fg); } .range.r30 { background: var(--r-30); color: var(--r-30-fg); } .range.rlt { background: var(--r-lt); color: var(--r-lt-fg); }

/* filtros */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; }
.filters select, select.sel { font: inherit; font-size: .88rem; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); min-height: 38px; max-width: 100%; }

/* layout */
.cols { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.cols > * { min-width: 0; }
@media (min-width: 900px) { .cols { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.panel h3 { margin-bottom: 8px; }
.panel.sponsor { border-style: dashed; }
.panel.highlights small { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 6px; }
.panel.highlights ul { list-style: none; margin: 0; padding: 0; }
.panel.highlights li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 0; border-top: 1px solid var(--line); align-items: center; }
.panel.highlights li:first-child { border-top: 0; }
.panel.highlights .k { grid-column: 1 / -1; font-size: .72rem; color: var(--muted); }
.panel.highlights a { font-weight: 600; text-decoration: none; color: var(--fg); font-size: .92rem; }
.panel.highlights .v { font-size: .82rem; color: var(--muted); white-space: nowrap; }
.panel.highlights .v.up { color: var(--accent-soft); font-weight: 700; }
.panel.sponsor small { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 4px; }
.ad-slot { min-height: 90px; border: 1px dashed var(--line); border-radius: var(--radius); display: grid; place-items: center; color: var(--muted); font-size: .8rem; }
.ad-slot:empty { display: none; }

/* visão mapa: faixas + mapa + maiores notas */
.mapview .ranges { margin: 0 0 10px; }
.map-row { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .map-row { grid-template-columns: minmax(0, 1fr) 320px; align-items: stretch; } }
.mapview[hidden], .tableview[hidden], .options[hidden] { display: none; }
#view-list, #view-map, #dados { scroll-margin-top: 76px; }

/* páginas de lugar: linha de contexto, opções em cards, "Mais filtros", seção de dados */
.ctxline { margin: 0 0 12px; font-size: .88rem; color: var(--muted); }
.ctxline b { color: var(--fg); font-weight: 600; }
.ctxline span:empty { display: none; }
.ctxline span + span::before { content: "·"; margin: 0 8px; }
.more-filters { display: inline-block; position: relative; border: 0; padding: 0; margin: 0; background: none; border-radius: 0; }
.more-filters > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; border: 1px dashed var(--line); font-size: .88rem; font-weight: 500; cursor: pointer; min-height: 38px; }
.more-filters > summary::-webkit-details-marker { display: none; }
.more-filters > summary::after { content: "▾"; font-size: .75rem; color: var(--muted); }
.more-filters[open] > summary::after { content: "▴"; }
.more-filters .mf-body { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.more-filters[open] { flex-basis: 100%; }
.opt-head { margin: 0 0 4px; font-size: .82rem; color: var(--muted); }
.ocards.grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); align-items: stretch; margin-top: 8px; }
.ocards.grid > div { display: flex; }
.opt-more { margin: 14px 0 0; text-align: center; }
.opt-more .btn[hidden] { display: none; }
.dados { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); }
.dados > h2 { margin-bottom: 10px; }
.dados > h2 .muted { font-family: var(--font); font-size: .95rem; font-weight: 400; }
.rank-ctl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0 10px; }
.rank-ctl .rank-search { flex: 1 1 260px; margin: 0; }
.rank-ctl select { font: inherit; font-size: .88rem; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); min-height: 38px; max-width: 100%; }
.sec-h { margin: 26px 0 10px; }
.count-line { margin: -6px 0 6px; font-size: .85rem; }
.top-lists { display: grid; gap: 4px 28px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .top-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.linkgrid.one { grid-template-columns: minmax(0, 1fr); }

/* índice do estado: escolha a cidade */
.pick-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); margin: 6px 0 4px; }
.pick, .data-cta { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); text-decoration: none; color: var(--fg); }
.pick:hover, .data-cta:hover { border-color: var(--accent-soft); }
.pick small, .data-cta small { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.pick b, .data-cta b { font-family: var(--serif); font-weight: 500; font-size: 1.45rem; line-height: 1.15; }
.pick span, .data-cta span { font-size: .84rem; color: var(--muted); }
.data-cta { margin-top: 32px; background: var(--ink-block); border-color: var(--ink-block); color: var(--ink-block-fg); }
.data-cta small, .data-cta span { color: color-mix(in srgb, var(--ink-block-fg) 75%, transparent); }
.city-search { margin: 0 0 10px; }
.gmap { position: relative; width: 100%; height: clamp(340px, 62vh, 560px); border-radius: var(--radius); overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; }
.gmap.loaded { display: block; }
.gmap .map-load { position: relative; z-index: 2; }
.gmap .map-error { padding: 16px; color: var(--muted); text-align: center; font-size: .9rem; max-width: 46ch; }
.map-legend { margin: 0 0 24px 10px; padding: 8px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); display: flex; flex-wrap: wrap; gap: 4px 10px; max-width: 320px; font: 500 .72rem var(--font); color: var(--fg); }
.map-legend span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.map-legend i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; border: 1.5px solid transparent; }
.map-legend i.few { background: transparent; border-style: dashed; border-width: 2px; }
@media (max-width: 640px) { .map-legend { max-width: 220px; font-size: .68rem; gap: 3px 8px; } }
.gm-style .hs-iw a.dir { display: inline-block; margin-top: 6px; font-weight: 600; }
.datanote { margin: -4px 0 14px; font-size: .8rem; color: var(--muted); }
.datanote b { font-weight: 600; color: var(--fg); }
.btn.heart { gap: 6px; color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.btn.heart:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
@media (max-width: 520px) { .btn.heart span { display: none; } .btn.heart { width: 40px; padding: 0; justify-content: center; } }
.panel.donate { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.donate-box { margin: 18px 0; padding: 16px 18px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--line); }
.donate-box .pix { font-size: 1rem; padding: 4px 8px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); user-select: all; }
.ask-dock { position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 24; width: min(640px, calc(100% - 32px)); box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.ask-dock[hidden] { display: none; }
@media (max-width: 899px) { body.has-bottomnav .ask-dock { display: none; } }
.map-hint { margin-top: 10px; padding: 6px 12px; border-radius: 999px; background: var(--surface); color: var(--fg); font: 600 .78rem var(--font); border: 1px solid var(--line); pointer-events: none; box-shadow: var(--shadow); }
.gm-style .hs-iw { font-family: var(--font); color: #1a1714; font-size: .9rem; line-height: 1.35; max-width: 260px; }
.gm-style .hs-iw b { font-size: 1rem; }
.gm-style .hs-iw .r { font-weight: 700; }
.gm-style .hs-iw a { color: #0B5FB3; }
.top20 { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; overflow: hidden; max-height: clamp(340px, 62vh, 560px); }
.top20 header { padding: 10px 14px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.top20 header b { font-family: var(--serif); font-weight: 500; font-size: 1.2rem; }
.top20 header small { font-size: .75rem; }
.top20 ol { list-style: none; margin: 0; padding: 0; overflow-y: auto; }
.top20 li a { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--line); text-decoration: none; font-size: .88rem; }
.top20 li a:hover { background: var(--surface-2); }
.top20 li .i { color: var(--muted); font-weight: 600; font-size: .78rem; }
.top20 li .sub { display: block; font-size: .76rem; color: var(--muted); }
.top20 .empty { padding: 18px 14px; color: var(--muted); font-size: .88rem; }

/* tabela do ranking */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
table.rank { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.rank th, table.rank td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.rank th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; white-space: nowrap; cursor: pointer; }
table.rank th[aria-sort="descending"]::after { content: " ↓"; color: var(--accent-soft); }
table.rank th[aria-sort="ascending"]::after { content: " ↑"; color: var(--accent-soft); }
table.rank td.num, table.rank th.num { text-align: right; }
table.rank tr:last-child td { border-bottom: 0; }
table.rank tr.hidden, table.rank tr.off-page { display: none; }
.rank-search { margin: 4px 0 8px; }
.rank-search input { width: 100%; max-width: 420px; font: inherit; font-size: .95rem; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); min-height: 44px; }
.rank-search input:focus { outline: 2px solid var(--accent-soft); outline-offset: 1px; }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 12px 0 4px; }
.pager[hidden] { display: none; }
.pager .pg-info { width: 100%; text-align: center; font-size: .8rem; color: var(--muted); }
.pager .pg-n { min-width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }
.pager .pg-n.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.pager .pg-gap { color: var(--muted); padding: 0 2px; }
.pager .btn[disabled] { opacity: .4; cursor: default; }
table.rank td a.name { font-weight: 600; text-decoration: none; }
table.rank td a.name:hover { text-decoration: underline; }
table.rank td .sub { display: block; font-size: .76rem; color: var(--muted); }
.pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .72rem; font-weight: 600; border: 1px solid var(--line); white-space: nowrap; }
.pill.pub { background: color-mix(in srgb, var(--accent-soft) 14%, transparent); border-color: color-mix(in srgb, var(--accent-soft) 40%, transparent); }
.pill.priv { background: var(--surface-2); }
.pill.sus { background: color-mix(in srgb, var(--r-40) 18%, transparent); border-color: color-mix(in srgb, var(--r-40) 45%, transparent); }
.rating { font-weight: 700; white-space: nowrap; }
.rating.none { color: var(--muted); font-weight: 400; }
.rating.few { color: var(--muted); font-weight: 500; }
.star { color: var(--accent-soft); }
.empty { padding: 24px; text-align: center; color: var(--muted); }

/* listas de links */
.linkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 14px; padding: 0; margin: 0; list-style: none; }
.linkgrid a { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 10px; text-decoration: none; }
.linkgrid a:hover { background: var(--surface-2); }
.linkgrid a .n { color: var(--muted); font-size: .85rem; }

/* gráficos (SVG do build) */
.insights { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); margin-top: 24px; }
@media (min-width: 900px) { .insights { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.insight { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.insight h3 { font-family: var(--serif); font-weight: 500; font-size: 1.25rem; }
.insight p { color: var(--muted); font-size: .9rem; }
.insight svg { width: 100%; height: auto; display: block; }
.insight .lg { display: flex; gap: 14px; font-size: .78rem; color: var(--muted); margin-top: 6px; }
.insight .lg i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.c-pub { fill: var(--fg); } .c-priv { fill: var(--brand); } .c-grid { stroke: var(--line); } .c-txt { fill: var(--muted); font-size: 11px; font-family: var(--font); } .c-val { fill: var(--fg); font-size: 11px; font-weight: 600; font-family: var(--font); }
.c-bar { fill: var(--brand); } .c-bar.dim { fill: var(--line); } .c-hl { stroke: var(--fg); stroke-width: 1.5; fill: none; }

/* ficha */
.fact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.fact { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.fact small { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.fact b { font-size: 1.05rem; }
.fact-hours { grid-column: span 2; } .fact ul.hours { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 2px; font-size: .9rem; }
.fact ul.hours li { display: flex; justify-content: space-between; gap: 10px; } .fact ul.hours b { font-size: .9rem; font-weight: 600; }
@media (max-width: 480px) { .fact-hours { grid-column: auto; } }
.tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; list-style: none; }
.tags li { padding: 4px 10px; border-radius: 999px; background: var(--surface-2); font-size: .85rem; }
.map { aspect-ratio: 4 / 3; max-height: 420px; border: 0; border-radius: var(--radius); width: 100%; background: var(--surface-2); }
.map-wrap { position: relative; }
.map-wrap .map-cta { position: absolute; right: 10px; bottom: 10px; }
/* comentários: galeria vertical no fim do arquivo (.gallery, .reviews) */

/* espera (ficha): heatmap no fim do arquivo (.heat) */
.spark { width: 100%; height: 120px; display: block; }
.spark .grid { stroke: var(--line); stroke-width: 1; }
.spark .line { fill: none; stroke: var(--accent-soft); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.spark .dot { fill: var(--surface); stroke: var(--accent-soft); stroke-width: 2; }
.spark text { fill: var(--muted); font-size: 10px; font-family: var(--font); }
.tip { position: absolute; z-index: 30; pointer-events: none; background: var(--surface); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-size: .8rem; box-shadow: var(--shadow); white-space: nowrap; transform: translate(-50%, calc(-100% - 10px)); }
.tip[hidden] { display: none; }
form.wait { display: grid; gap: 10px; }
form.wait label { display: grid; gap: 4px; font-size: .9rem; font-weight: 600; }
form.wait select, form.wait input[type="number"] { font: inherit; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); min-height: 44px; }
form.wait .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
form.wait .hp { position: absolute; left: -9999px; }
form.wait .msg { font-size: .9rem; min-height: 1.2em; }
form.wait .msg.ok { color: var(--r-45); } form.wait .msg.err { color: var(--r-lt); }
.conf { font-weight: 600; white-space: nowrap; }
.conf.high { color: var(--r-45); } .conf.medium { color: var(--r-35); } .conf.low { color: var(--muted); }
/* ALTCHA (prova de trabalho self-hosted): segue o tema do site */
altcha-widget { display: block; --altcha-color-base: var(--surface); --altcha-color-text: var(--fg); --altcha-color-border: var(--line); --altcha-color-border-focus: var(--accent-soft); --altcha-border-width: 1px; --altcha-border-radius: 12px; --altcha-max-width: 100%; }
altcha-widget .altcha { font: inherit; font-size: .9rem; }

/* rodapé: ver bloco "rodapé" no fim do arquivo */

/* prosa */
.prose { max-width: 72ch; }
.prose h2 { margin-top: 24px; }
details { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; margin-bottom: 8px; background: var(--surface); }
details summary { cursor: pointer; font-weight: 600; }
.notice { border: 1px solid var(--line); padding: 10px 12px 10px 40px; background: var(--surface-2); border-radius: 12px; font-size: .9rem; position: relative; }
.notice::before { content: ""; position: absolute; left: 12px; top: 11px; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M10 2.5l8 14H2z' stroke-linejoin='round'/%3E%3Cpath d='M10 8v4M10 14.5v.1'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M10 2.5l8 14H2z' stroke-linejoin='round'/%3E%3Cpath d='M10 8v4M10 14.5v.1'/%3E%3C/svg%3E") center / contain no-repeat; }

/* busca com sugestões (índice estático) */
.search { position: relative; }
.search ul { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); list-style: none; margin: 0; padding: 6px; max-height: 320px; overflow: auto; z-index: 15; }
.search ul:empty { display: none; }
.search li a { display: block; padding: 8px 10px; border-radius: 8px; text-decoration: none; }
.search li a:hover, .search li a:focus { background: var(--surface-2); }
.search li a small { display: block; }

/* barra inferior (celular) */
.bottomnav { display: none; }
@media (max-width: 899px) {
  .bottomnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--line); padding: 8px 0 max(10px, env(safe-area-inset-bottom)); }
  .bottomnav a, .bottomnav button { font: inherit; font-size: .78rem; font-weight: 600; color: var(--muted); text-decoration: none; background: none; border: 0; padding: 6px 0; display: grid; justify-items: center; gap: 2px; cursor: pointer; }
  .bottomnav .on { color: var(--accent-soft); }
  .bottomnav a { position: relative; }
  .bottomnav a.on::before { content: ""; position: absolute; top: -8px; left: 50%; width: 26px; height: 3px; margin-left: -13px; border-radius: 0 0 3px 3px; background: var(--accent-soft); }
  .bottomnav svg { width: 20px; height: 20px; }
  .bn-badge { position: absolute; top: 0; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--brand); color: #fff; font-size: .7rem; line-height: 18px; text-align: center; }
  .bn-badge.bump { animation: bn-bump .5s ease; }
  .bn-hint { position: fixed; left: 12px; right: 12px; bottom: calc(74px + env(safe-area-inset-bottom)); z-index: 26; background: var(--ink-block); color: var(--ink-block-fg); border-radius: 12px; padding: 10px 14px; font-size: .86rem; box-shadow: 0 10px 30px rgba(0,0,0,.2); }
  .bn-hint::after { content: ""; position: absolute; bottom: -6px; left: 62%; width: 12px; height: 12px; background: var(--ink-block); transform: rotate(45deg); }
  .bn-hint .lnk { color: inherit; font-weight: 700; margin-left: 6px; }
  body.has-bottomnav .cmp-tray { display: none !important; }   /* no celular, o item Comparar da barra substitui a bandeja */
  .hs-toast { position: fixed; left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 27; background: var(--ink-block); color: var(--ink-block-fg); border-radius: 12px; padding: 10px 14px; font-size: .86rem; opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; pointer-events: none; }
  .hs-toast.on { opacity: 1; transform: none; }
}
@keyframes bn-bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .bn-badge.bump { animation: none; } .hs-toast { transition: none; } }
.bottomnav[hidden], .bn-hint[hidden] { display: none !important; }
@media print { .top nav, .menu-btn, .menu, .filters, form.wait, .panel.sponsor, .ad-slot, .bottomnav, .viewbar, .cmp-tray, button.cmp, .cmp-tools, .cmp-head .rm { display: none !important; } }

/* comparador: botão "Comparar" (ranking, Top 20, ficha), bandeja fixa e página /<uf>/comparar/ */
button.cmp { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; padding: 2px 8px; border-radius: 999px; border: 1px dashed var(--line); background: transparent; color: var(--muted); font: 600 .72rem var(--font); cursor: pointer; min-height: 24px; }
button.cmp i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid currentColor; display: inline-block; }
button.cmp:hover { color: var(--accent-soft); border-color: var(--accent-soft); }
button.cmp.on { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); border-style: solid; }
button.cmp.on i { background: currentColor; border-color: transparent; }
button.btn.cmp { font-size: .9rem; padding: 9px 16px; min-height: 40px; margin-top: 0; border-style: solid; color: var(--fg); }
button.btn.cmp.on { color: var(--accent-ink); }
.btn[hidden] { display: none; }
/* Top 20 em camadas: linha 1 posição + nome + nota (placa menor), linha 2 rede/SUS/24h/porte/avaliações, linha 3 "Comparar"
   alinhado ao nome (14px de padding + 22px da posição + 8px de gap). Antes a placa e o botão dividiam a linha e espremiam o nome. */
.top20 li { display: block; border-bottom: 1px solid var(--line); }
.top20 li a { border-bottom: 0; padding-bottom: 6px; }
.top20 li .plate { font-size: .8rem; padding: 2px 7px; min-width: 38px; border-radius: 7px; }
.top20 li button.cmp { margin: 0 14px 9px; }
.cmp-tray { position: fixed; left: 50%; transform: translateX(-50%); bottom: 14px; z-index: 26; width: min(760px, calc(100% - 24px)); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 10px 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; }
.cmp-tray[hidden] { display: none; }
.cmp-tray ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cmp-tray li { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 4px 4px 4px 10px; border-radius: 999px; background: var(--surface-2); font-size: .82rem; font-weight: 600; }
.cmp-tray li a { text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.cmp-tray li button { width: 22px; height: 22px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); font: 700 1rem/1 var(--font); cursor: pointer; }
.cmp-tray li button:hover { background: var(--line); color: var(--fg); }
.cmp-tray .acts { display: flex; gap: 6px; }
.cmp-tray .msg { grid-column: 1 / -1; font-size: .76rem; }
.cmp-tray .msg:empty { display: none; }
.cmp-tray .btn.disabled { opacity: .5; cursor: not-allowed; }
.cmp-tray.shake { animation: cmp-shake .4s ease; }
@keyframes cmp-shake { 20% { transform: translateX(calc(-50% - 6px)); } 60% { transform: translateX(calc(-50% + 6px)); } }
body.has-cmp .ask-dock { bottom: 96px; }
@media (max-width: 899px) {
  .cmp-tray { grid-template-columns: minmax(0, 1fr); bottom: 10px; }
  body.has-bottomnav .cmp-tray { bottom: calc(68px + env(safe-area-inset-bottom)); }
  .cmp-tray .acts .btn { flex: 1; }
  body.has-cmp footer.foot .foot-main { padding-bottom: 150px; }
}
@media (min-width: 900px) { body.has-cmp footer.foot .foot-main { padding-bottom: 110px; } }

.cmp-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.cmp-tools[hidden] { display: none; }
.cmp-tools .btn.ok { border-color: var(--r-45); color: var(--r-45); }
.cmp-tools .muted { font-size: .82rem; }
.cmp-howto { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; max-width: 70ch; }
.cmp-howto ol { padding-left: 20px; }
.cmp-head { display: grid; gap: 2px; position: relative; padding-right: 28px; }
.cmp-head .name { font-weight: 600; text-decoration: none; font-size: .95rem; line-height: 1.25; }
.cmp-head small { color: var(--muted); font-size: .74rem; text-transform: none; letter-spacing: 0; font-weight: 400; }
.cmp-head .rm { position: absolute; right: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font: 700 1rem/1 var(--font); cursor: pointer; }
.cmp-head .rm:hover { color: var(--r-lt); border-color: var(--r-lt); }
table.cmp { width: 100%; border-collapse: collapse; font-size: .92rem; table-layout: fixed; }
table.cmp th, table.cmp td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; }
table.cmp thead th { vertical-align: bottom; background: var(--surface-2); }
table.cmp thead th:first-child { width: 150px; }
table.cmp tbody th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
table.cmp tr:last-child th, table.cmp tr:last-child td { border-bottom: 0; }
table.cmp td small, .cmp-card dd small { display: block; font-size: .74rem; color: var(--muted); font-weight: 400; }
table.cmp td.best, .cmp-card .best dd { background: color-mix(in srgb, var(--accent-soft) 12%, transparent); box-shadow: inset 3px 0 0 var(--accent-soft); font-weight: 600; }
.cmp .yes { color: var(--r-45); font-weight: 700; } .cmp .no, .cmp-card .no { color: var(--muted); }
.cmp-card .yes { color: var(--r-45); font-weight: 700; }
table.cmp tr.focus th, table.cmp tr.focus td, .cmp-card dl > div.focus { background: color-mix(in srgb, var(--accent) 7%, transparent); }
table.cmp tr.focus th { color: var(--fg); }
.cmp-spec { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 600; }
.cmp-spec[hidden] { display: none; }
.cmp-spec select { min-height: 40px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); font: inherit; font-weight: 500; }
.cmp-route { display: flex; flex-wrap: wrap; gap: 6px; }
.cmp-specs { margin-top: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.cmp-specs summary { font-weight: 600; }
.cmp-specs .tbl-wrap { margin-top: 10px; overflow-x: auto; }
.cmp-specs .muted { font-size: .8rem; margin: 10px 0 0; }
table.cmp-spec-table thead th { background: transparent; }
.cmp-colname { display: block; font-size: .8rem; font-weight: 600; text-transform: none; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 899px) { table.cmp-spec-table thead th:first-child { width: 110px; } table.cmp-spec-table th, table.cmp-spec-table td { padding: 8px 6px; font-size: .82rem; } }
button.lnk { border: 0; background: none; padding: 0; font: inherit; font-size: .85rem; color: var(--accent-soft); text-decoration: underline; cursor: pointer; }
.cmp-cards { display: none; gap: 12px; }
.cmp-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.cmp-card .cmp-head { margin-bottom: 8px; }
.cmp-card dl { margin: 0; display: grid; }
.cmp-card dl > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); }
.cmp-card dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.cmp-card dd { margin: 0; font-size: .92rem; padding: 2px 6px; border-radius: 6px; }
/* comparar: montar na página (vagas, busca, sugestões) e, no celular, linhas empilhadas sem rolagem lateral */
.cmp-builder { display: grid; gap: 10px; margin: 0 0 16px; }
.cmp-builder[hidden] { display: none; }
.cmp-slots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.slot { position: relative; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 10px 30px 10px 12px; display: grid; gap: 6px; min-height: 76px; align-content: start; }
.slot a { font-weight: 600; font-size: .9rem; line-height: 1.25; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.slot .slot-meta { display: flex; align-items: center; gap: 6px; min-width: 0; }
.slot .slot-meta small { color: var(--muted); font-size: .74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot .rm { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); color: var(--muted); font: 700 1rem/1 var(--font); cursor: pointer; }
.slot.empty { border-style: dashed; background: transparent; padding: 0; place-items: stretch; }
.slot.empty button { border: 0; background: none; color: var(--accent-soft); font: inherit; font-weight: 600; cursor: pointer; border-radius: 14px; }
.cmp-search { position: relative; }
.cmp-search input { width: 100%; font: inherit; font-size: 1rem; padding: 12px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); min-height: 48px; }
.cmp-search input:focus { outline: 2px solid var(--accent-soft); outline-offset: 1px; }
.cmp-ac { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; list-style: none; margin: 0; padding: 4px; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 30px rgba(0,0,0,.16); max-height: 60vh; overflow-y: auto; }
.cmp-ac[hidden] { display: none; }
.cmp-ac li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; cursor: pointer; min-height: 52px; }
.cmp-ac li[aria-selected="true"], .cmp-ac li:hover { background: var(--surface-2); }
.cmp-ac li.in { opacity: .55; cursor: default; }
.cmp-ac li.none { color: var(--muted); cursor: default; font-size: .9rem; }
.cmp-ac .nm { display: block; font-size: .92rem; }
.cmp-ac small { display: block; font-size: .76rem; color: var(--muted); }
.cmp-sugg .sg-h { margin: 2px 0 6px; font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cmp-sugg .sg-list { display: flex; flex-wrap: wrap; gap: 8px; }
.cmp-sugg .chip { gap: 6px; }
.cmp-sugg .chip .plate { font-size: .72rem; padding: 1px 6px; min-width: 0; }
.cmp-sugg .chip small { color: var(--muted); font-size: .72rem; }
.cmp-empty { background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); padding: 14px 16px; max-width: 70ch; }
.cmp-empty p { margin: 0; }
.cmp-tools .seg[hidden] { display: none; }
.cmp-stack { display: none; }
@media (max-width: 719px) {
  .cmp-table, .cmp-specs .tbl-wrap { display: none; }
  .cmp-stack { display: grid; }
  .cs-head { position: sticky; top: 61px; z-index: 5; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 6px; padding: 8px 0; background: var(--bg); border-bottom: 1px solid var(--line); }
  .cmp-stack.cols2 { --n: 2; } .cmp-stack.cols3 { --n: 3; }
  .cs-head a { font-size: .8rem; font-weight: 700; line-height: 1.2; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .cs-row { padding: 8px 0; border-bottom: 1px solid var(--line); display: grid; gap: 6px; }
  .cs-row.focus { background: color-mix(in srgb, var(--accent) 7%, transparent); }
  .cs-label { font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .cs-vals { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 6px; }
  .cs-v { font-size: .86rem; min-width: 0; overflow-wrap: anywhere; border-radius: 8px; padding: 4px 6px; background: var(--surface); }
  .cs-v.best { font-weight: 700; box-shadow: inset 3px 0 0 var(--accent-soft); }
  .cs-v small { display: block; font-size: .72rem; color: var(--muted); font-weight: 400; }
  .cs-v .cmp-route { flex-direction: column; }
  .cs-v .cmp-route .btn.sm { justify-content: center; min-height: 40px; font-size: .75rem; padding: 4px 6px; }
  .cs-spec .cs-head { display: none; }
  .cmp-slots { gap: 6px; }
  .slot { padding: 8px 26px 8px 8px; min-height: 70px; }
  .slot a { font-size: .8rem; }
}
/* ---------------------------------------------------------------- home: hero com fotos de São Paulo (estilo america.gov) */
.home-hero { --bg: #0A0A0B; --surface: #141416; --surface-2: #1C1C1F; --line: rgba(255,255,255,.14); --fg: #F5F5F4; --muted: #A1A1AA; --accent: #1F5AE6; --accent-soft: #7FB0FF; --accent-ink: #FFFFFF; --ink-block: #1F5AE6; --ink-block-fg: #FFFFFF; --field: rgba(20,20,22,.92); --shadow: 0 10px 30px rgba(0,0,0,.35);
  position: relative; width: 100vw; margin-left: calc(50% - 50vw); background: var(--bg); color: var(--fg); overflow: visible; z-index: 2;   /* as sugestões da busca passam da borda do hero */ isolation: isolate; color-scheme: dark;
  padding: clamp(40px, 8vw, 96px) 16px clamp(56px, 9vw, 110px); text-align: center; margin-top: -1px; }
.home-hero .hero-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.home-hero .dmap { position: absolute; top: 4%; height: 108%; width: auto; right: max(-4%, calc(50% - 760px)); }   /* mapa do estado (hero_map; aspect-ratio no HTML): a capital fica à direita do texto em qualquer largura */
.home-hero .dmap .uf { fill: rgba(255,255,255,.03); stroke: rgba(255,255,255,.16); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.home-hero .dmap .w { fill: none; stroke: #FFFFFF; stroke-opacity: .72; stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
@media (prefers-reduced-motion: no-preference) { .home-hero .dmap .w { animation: hs-dots .9s ease-out var(--d, 0s) both; } }   /* ondas a partir da capital, uma vez; o estado final é o mapa inteiro */
@keyframes hs-dots { from { opacity: 0; } 55% { opacity: 1; stroke-opacity: 1; } to { opacity: 1; } }
.home-hero .hero-shade { position: absolute; inset: 0; background: radial-gradient(ellipse 34% 44% at 50% 46%, rgba(10,10,11,.88), rgba(10,10,11,.5) 65%, rgba(10,10,11,0) 100%); }
.home-hero .hero-inner { max-width: 820px; margin: 0 auto; position: relative; }
.home-hero .hero-kicker { font-size: .72rem; font-weight: 500; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 0 0 16px; }
.home-hero h1 { font-size: clamp(2.5rem, 7.6vw, 5rem); line-height: .98; letter-spacing: -.035em; margin: 0 0 16px; text-shadow: 0 2px 24px rgba(0,0,0,.45); }   /* Newsreader (a Bricolage saiu em 24/10) */
.home-hero h1 em { color: var(--brand); }
.home-hero .lead { color: var(--muted); font-weight: 300; font-size: clamp(1.05rem, 2.2vw, 1.2rem); max-width: 42ch; margin: 0 auto 22px; }
.home-hero .ask { text-align: left; border-color: rgba(255,255,255,.18); }
.home-hero .ask input { color: #fff; }
.home-hero .ask input::placeholder { color: rgba(255,255,255,.42); }
.home-hero .ask-examples { margin-top: 14px; }
.home-hero .chip { background: rgba(14,14,16,.9); border-color: rgba(255,255,255,.24); color: #fff; backdrop-filter: blur(8px); box-shadow: 0 2px 12px rgba(0,0,0,.5); }   /* fundo quase sólido: os pontos brancos do mapa não passam por trás do texto */
.home-hero .chip:hover { background: #232327; }
.home-hero .answer { text-align: left; }
.home-hero .hero-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 22px; padding: 6px 14px; border-radius: 999px; background: rgba(10,10,11,.82); font-size: .95rem; font-weight: 600; color: var(--accent-soft); text-decoration: none; }
.home-hero .hero-link:hover { text-decoration: underline; }
.ask .lupa { flex: none; color: var(--muted); }
.hero-credit { position: absolute; right: 12px; bottom: 10px; margin: 0; font-size: .7rem; color: rgba(255,255,255,.62); max-width: calc(100% - 24px); }
@media (max-width: 640px) { .home-hero { padding-bottom: 64px; } .home-hero .ask-examples .chip { font-size: .8rem; } .hero-credit { left: 12px; right: 12px; text-align: center; }
  .home-hero .dmap { top: auto; bottom: 2%; left: -62%; right: auto; width: 230%; height: 52%; aspect-ratio: auto; }   /* celular: o mapa na metade de baixo, Grande SP visível */
  .home-hero .hero-shade { background: linear-gradient(180deg, #0A0A0B 0%, rgba(10,10,11,.85) 45%, rgba(10,10,11,.25) 75%, rgba(10,10,11,.6) 100%); }
  .home-hero .ask-examples { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 14px -16px 0; padding: 0 16px 2px; scrollbar-width: none;   /* chips numa linha que rola de lado */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent); }
  .home-hero .ask-examples::-webkit-scrollbar { display: none; }
  .home-hero .ask-examples .chip { flex: none; } }
.home-state { margin-top: 28px; }
.home-state-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.home-state-head h2 a { text-decoration: none; }

/* ---------------------------------------------------------------- lateral: cartões espaçados */
.side { display: grid; gap: 16px; align-content: start; }
@media (min-width: 900px) { .side { position: sticky; top: 76px; } }

/* ---------------------------------------------------------------- ficha: cabeçalho de comentário (carrossel e popup) */
.rv-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.rv-head img, .rv-ava { width: 32px; height: 32px; border-radius: 50%; flex: none; }
.rv-ava { display: inline-grid; place-items: center; background: var(--ink-block); color: var(--ink-block-fg); font-style: normal; font-weight: 700; font-size: .85rem; }
.rv-head b a { text-decoration: none; }
.stars { position: relative; display: inline-block; font-size: .9rem; letter-spacing: 1px; color: var(--line); line-height: 1; }
.stars::before { content: "★★★★★"; position: absolute; left: 0; top: 0; width: calc(var(--n) / 5 * 100%); overflow: hidden; color: var(--r-35); white-space: nowrap; }
.rv-link { display: inline-block; margin-top: 8px; font-size: .8rem; color: var(--accent-soft); text-decoration: none; font-weight: 600; }

/* ---------------------------------------------------------------- ficha: heatmap da espera (dia da semana × faixa) */
.heat { --w1: #0B8A4A; --w1-fg: #fff; --w2: #6CBF5A; --w2-fg: #0E1726; --w3: #E3B23C; --w3-fg: #0E1726; --w4: #E07A2F; --w4-fg: #fff; --w5: #B9402E; --w5-fg: #fff; }
:root[data-theme="dark"] .heat { --w1: #2FB46B; --w1-fg: #06130B; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .heat { --w1: #2FB46B; --w1-fg: #06130B; } }
.heat-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; margin-top: 8px; }
.heat-date { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.heat-date input { font: inherit; font-weight: 500; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); min-height: 38px; }
.heat-pick { font-size: .82rem; }
.heat-grid { display: grid; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.heat-row { display: grid; grid-template-columns: 44px repeat(6, minmax(44px, 1fr)); gap: 3px; align-items: stretch; }
.heat-row.heat-all { margin-top: 4px; padding-top: 6px; border-top: 1px dashed var(--line); }
.heat-y, .heat-x { font-size: .72rem; color: var(--muted); font-weight: 600; display: flex; align-items: center; }
.heat-x { justify-content: center; white-space: nowrap; }
.heat-cell { display: flex; align-items: center; justify-content: center; min-height: 22px; border-radius: 6px; font-size: .78rem; font-weight: 700; background: var(--surface-2); color: var(--fg); border: 1px solid transparent; cursor: default; transition: transform .15s ease; }
.heat-cell.all { min-height: 32px; border-radius: 8px; }
.heat-cell:hover, .heat-cell:focus-visible { transform: scale(1.06); z-index: 1; }
.heat-cell.none { background: var(--surface-2); opacity: .55; }
.heat-cell.few { background: transparent; border: 1.5px dashed var(--line); color: var(--muted); font-weight: 500; }
.heat-cell.few small { font-size: .72rem; }
.heat-cell.w1 { background: var(--w1); color: var(--w1-fg); } .heat-cell.w2 { background: var(--w2); color: var(--w2-fg); } .heat-cell.w3 { background: var(--w3); color: var(--w3-fg); }
.heat-cell.w4 { background: var(--w4); color: var(--w4-fg); } .heat-cell.w5 { background: var(--w5); color: var(--w5-fg); }
.heat-row.pick .heat-y { color: var(--accent-soft); }
.heat-row.pick .heat-cell { outline: 2px solid var(--accent-soft); outline-offset: 0; }
.heat-row.pick .heat-cell.none { opacity: .8; }
.heat.has-pick .heat-row:not(.pick):not(.heat-cols):not(.heat-all) .heat-cell { opacity: .45; }
.heat-legend { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: .72rem; color: var(--muted); }
.heat-legend span { display: inline-flex; align-items: center; gap: 5px; }
.heat-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.heat-legend i.w1 { background: var(--w1); } .heat-legend i.w2 { background: var(--w2); } .heat-legend i.w3 { background: var(--w3); } .heat-legend i.w4 { background: var(--w4); } .heat-legend i.w5 { background: var(--w5); }
.heat-legend i.few { border: 1.5px dashed var(--muted); }
@media (max-width: 480px) { .heat-row { grid-template-columns: 36px repeat(6, minmax(44px, 1fr)); } .heat-cell { font-size: .72rem; min-height: 30px; } .heat-x { font-size: .64rem; } }
@media (prefers-reduced-motion: reduce) { .heat-cell { transition: none; } .heat-cell:hover { transform: none; } }

/* ---------------------------------------------------------------- ficha: topo (pílulas + links do Maps), porte, "para que serve" discreto */
.hero-row { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.hero-row p { margin: 0; }
.hero-links { display: flex; gap: 8px; flex-wrap: wrap; }
.btn.sm { padding: 6px 12px; min-height: 34px; font-size: .82rem; gap: 6px; }
.pill.sz { background: color-mix(in srgb, var(--fg) 7%, transparent); border-color: color-mix(in srgb, var(--fg) 22%, transparent); text-transform: lowercase; }
.serves { margin-top: 12px; }
.serves-list { display: flex; flex-wrap: wrap; gap: 5px 6px; list-style: none; margin: 0; padding: 0; }
.serves-list .sv { padding: 3px 9px; border-radius: 7px; background: var(--surface-2); font-size: .8rem; color: var(--fg); cursor: default; }
.serves-list .sv b { font-weight: 500; color: var(--muted); margin-left: 3px; }

/* ---------------------------------------------------------------- ficha: carrossel horizontal de comentários + popup */
.rvc-track { display: flex; gap: 10px; list-style: none; margin: 0; padding: 2px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.rvc-track::-webkit-scrollbar { display: none; }
.rvc-track li.rv { flex: 0 0 min(100%, 320px); scroll-snap-align: start; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; min-height: 168px; }
.rvc-track .rv-text { margin: 0; font-size: .9rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.rv-more { align-self: flex-start; margin-top: auto; padding: 6px 0 0; background: none; border: 0; font: inherit; font-size: .8rem; font-weight: 600; color: var(--accent-soft); cursor: pointer; }
.rvc-nav { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.rvc-nav .btn.icon { width: 32px; min-height: 32px; }
.rvc-nav .btn.sm { margin-left: auto; }
.rvc-dots { display: inline-flex; gap: 5px; padding: 0 4px; }
.rvc-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); display: inline-block; }
.rvc-dots i.on { background: var(--accent-soft); }
[data-rvc-pause] .ic-play { display: none; }
[data-rvc-pause][aria-pressed="true"] .ic-play { display: block; } [data-rvc-pause][aria-pressed="true"] .ic-pause { display: none; }
@media (prefers-reduced-motion: no-preference) { .rvc-track { scroll-behavior: smooth; } }
.rv-dialog { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--fg); padding: 0; width: min(680px, calc(100% - 32px)); max-height: min(85vh, 760px); box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.rv-dialog::backdrop { background: rgba(11,13,18,.55); backdrop-filter: blur(3px); }
.rv-dialog header { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface); z-index: 1; }
.rv-dialog header h3 { margin: 0; }
.rv-dialog .reviews-full { list-style: none; margin: 0; padding: 12px 16px; display: grid; gap: 12px; }
.rv-dialog .reviews-full li.rv { background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.rv-dialog .reviews-full p { margin: 0; font-size: .95rem; }
.rv-dialog .srcnote { padding: 0 16px 14px; margin: 0; }

/* ---------------------------------------------------------------- rodapé (mesmo molde do Piso:Alerta e do 4elementslab.com: faixa escura, logo "Built in the Lab", contato, copyright) */
footer.foot { margin-top: 40px; padding: 0; border-top: 0; font-size: .85rem; color: var(--muted); }
.foot-sources { border-top: 1px solid var(--line); padding: 16px 0; font-size: .8rem; color: var(--muted); }
.foot-sources a { text-decoration: none; color: var(--fg); }
.foot-main { background: #0A0A0A; color: #B8B0A8; border-top: 1px solid rgba(255,255,255,.08); padding: 22px 0; }
.foot-main .wrap { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; }
.foot-brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.foot-brand img { width: 30px; height: 30px; border-radius: 6px; display: block; }
.foot-brand span { font-size: 12px; font-weight: 500; text-transform: uppercase; color: #B8B0A8; letter-spacing: .08em; }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; letter-spacing: .02em; }
.foot-links a { color: #B8B0A8; text-decoration: none; }
.foot-links a:hover, .foot-contact a:hover { color: #fff; text-decoration: underline; }
.foot-contact { font-size: 12px; color: #6B6660; letter-spacing: .02em; }
.foot-contact a { color: #B8B0A8; text-decoration: none; }
.foot-copy { font-size: 12px; color: #6B6660; letter-spacing: .02em; flex-basis: 100%; }
@media (max-width: 640px) { .foot-main .wrap { justify-content: center; text-align: center; } .foot-links { justify-content: center; } }
body.has-bottomnav footer.foot .foot-main { padding-bottom: 90px; }

/* ---------------------------------------------------------------- home: três blocos (capital · outras cidades · estado) */
.home-blocks { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); margin-top: 24px; }
@media (min-width: 900px) { .home-blocks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hb { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.hb h2 { font-size: 1.45rem; margin: 0; }
.hb > p { margin: 0; font-size: .9rem; }
.hb .linkgrid { grid-template-columns: 1fr; gap: 2px; }
.hb .linkgrid a { padding: 6px 8px; }
.hb .btn { align-self: flex-start; margin-top: auto; }
.hb-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }

/* ---------------------------------------------------------------- mapa: rótulos por zoom (zona / distrito / bairro / cidade) */
.hs-lbl { pointer-events: none; text-shadow: 0 0 3px #fff, 0 0 6px #fff, 0 1px 2px rgba(255,255,255,.95); letter-spacing: .01em; white-space: nowrap; }
.hs-lbl.dark { text-shadow: 0 0 3px #0B0D12, 0 0 6px #0B0D12, 0 1px 2px rgba(11,13,18,.95); }
.hs-lbl.zone { letter-spacing: .08em; }
.hs-lbl.nb { font-weight: 600 !important; opacity: .9; }

/* ---------------------------------------------------------------- toque: alvos >= 44 px no celular (QA de release) */
@media (max-width: 899px) {
  .btn, .chip, .filters select, select.sel, .seg button, .range, .btn.icon, .btn.sm, .rvc-nav .btn.icon, .gal-nav .btn.icon,
  .more-filters > summary, .rank-ctl select, .ocard .oc-acts button.cmp, .ofact .oc-acts button.cmp { min-height: 44px; }
  .btn.icon, .rvc-nav .btn.icon { width: 44px; }
  .top nav .btn { min-height: 44px; } .top nav .btn.icon { width: 44px; }
  .btn.heart { width: 44px; }
  .ask button { width: 44px; height: 44px; }
  .heat-date input { min-height: 44px; }
  .gm-style .hs-iw .iw-x { width: 44px; height: 44px; right: -14px; top: -14px; }
}
.more-rows { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 0; font-size: .9rem; }

/* ---------------------------------------------------------------- ficha: linha de status (identidade Capital) */
.status-line { font-size: .9rem; color: var(--muted); margin-right: 4px; }
.pill.er { background: var(--ink-block); color: var(--ink-block-fg); border-color: var(--ink-block); }

/* ---------------------------------------------------------------- heatmap: demo animada e demais ajustes */
.linkbtn { background: none; border: 0; padding: 0; font: inherit; font-size: inherit; color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent-soft) 60%, transparent); text-underline-offset: 2px; cursor: pointer; }
.linkbtn:hover { color: var(--accent-soft); }
.heat-demo { margin-top: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.heat-demo[hidden] { display: none; }
.heat-demo .heat-grid.demo { gap: 3px; }
.heat-demo .heat-grid.demo .heat-row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; }
.heat-demo .heat-cell { min-height: 16px; opacity: 0; transform: scale(.6); }
.heat-demo.play .heat-cell { animation: hs-fill .35s ease forwards; }
@keyframes hs-fill { to { opacity: 1; transform: scale(1); } }
.heat-demo .heat-row:nth-child(1) .heat-cell { animation-delay: .05s; } .heat-demo .heat-row:nth-child(2) .heat-cell { animation-delay: .25s; } .heat-demo .heat-row:nth-child(3) .heat-cell { animation-delay: .45s; }
.heat-demo .heat-row:nth-child(4) .heat-cell { animation-delay: .65s; } .heat-demo .heat-row:nth-child(5) .heat-cell { animation-delay: .85s; } .heat-demo .heat-row:nth-child(6) .heat-cell { animation-delay: 1.05s; } .heat-demo .heat-row:nth-child(7) .heat-cell { animation-delay: 1.25s; }
.heat-demo p { margin: 10px 0 0; font-size: .82rem; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .heat-demo .heat-cell { opacity: 1; transform: none; animation: none !important; } }
.heat-pick { font-size: .8rem; }
form.wait .row { grid-template-columns: 1fr 1fr; }
@media (min-width: 640px) { form.wait .row { grid-template-columns: 1fr 1fr 1fr; } }
form.wait input[type="date"] { font: inherit; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); min-height: 44px; width: 100%; min-width: 0; }

/* ---------------------------------------------------------------- aviso para relatar (ficha) */
.nudge { position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 24px); opacity: 0; z-index: 26; width: min(560px, calc(100% - 32px)); display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: var(--surface); color: var(--fg); border: 1px solid var(--line); box-shadow: 0 16px 40px rgba(0,0,0,.25); transition: transform .4s ease, opacity .4s ease; }
.nudge.show { transform: translate(-50%, 0); opacity: 1; }
.nudge-ic { width: 36px; height: 36px; border-radius: 999px; background: var(--ink-block); color: var(--ink-block-fg); display: grid; place-items: center; }
.nudge-t { display: grid; gap: 2px; font-size: .88rem; }
.nudge-t span { color: var(--muted); font-size: .82rem; }
.nudge-a { grid-column: 1 / -1; display: flex; gap: 8px; }
@media (max-width: 899px) { body.has-bottomnav .nudge { bottom: 84px; } }
@media (prefers-reduced-motion: reduce) { .nudge { transition: none; } }

/* ---------------------------------------------------------------- mapa: rótulos em overlay e popup sem cabeçalho */
.hs-lbl { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 1px; pointer-events: none; font-family: Inter, 'Segoe UI', Arial, sans-serif; color: #0E1726; text-shadow: 0 0 3px #fff, 0 0 6px #fff, 0 1px 2px rgba(255,255,255,.95); white-space: nowrap; line-height: 1.05; }
.hs-lbl.dark { color: #FFFFFF; text-shadow: 0 0 3px #0A0A0B, 0 0 6px #0A0A0B, 0 1px 2px rgba(10,10,11,.95); }
.hs-lbl b { font-weight: 700; }
.hs-lbl span { font-weight: 600; font-size: .85em; opacity: .9; }
.hs-lbl.zone { font-size: 13px; letter-spacing: .08em; }
.hs-lbl.zone span { font-size: 12px; letter-spacing: 0; }
.hs-lbl.dist { font-size: 11px; }
.hs-lbl.nb { font-size: 10px; font-weight: 600; opacity: .9; }
.hs-lbl.city { font-size: 12px; }
.hs-lbl.city.ext { font-size: 13px; letter-spacing: .02em; }
.gm-style .gm-style-iw-c { padding: 12px 14px !important; border-radius: 12px !important; }
.gm-style .gm-style-iw-d { overflow: hidden !important; }
.gm-style .hs-iw { position: relative; padding-right: 22px; }
.gm-style .hs-iw .iw-x { position: absolute; right: -6px; top: -6px; width: 28px; height: 28px; border: 0; background: transparent; color: #5C5C66; font-size: 20px; line-height: 1; cursor: pointer; }
.gm-style .hs-iw .iw-x:hover { color: #0A0A0B; }

/* ---------------------------------------------------------------- /pergunte/: conversa com o banco (chat.js) */
.chat-page { max-width: 880px; margin: 0 auto; }
.chat-head { text-align: center; padding: 10px 0 2px; }
.chat-head h1 { margin: 0; font-size: clamp(1.6rem, 6vw, 2.4rem); }
.chat-head .lead { color: var(--muted); font-size: .92rem; max-width: 60ch; margin: 6px auto 0; }
/* foco na conversa: sem trilha, sem rodapé do site; com conversa, o título também sai */
body.chat-mode .crumbs, body.chat-mode footer.foot { display: none; }
body.chat-mode main.wrap { padding-bottom: 12px; }
.chat-page.has-turns .chat-head { display: none; }
.chat-page.has-turns .chat { margin-top: 10px; }
.chat-about { display: block; width: 100%; margin-top: 4px; font-size: .76rem; text-align: center; }
.chat-about summary { cursor: pointer; display: inline; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.chat-about span { display: block; margin-top: 6px; text-align: left; line-height: 1.45; }
.chat-about a { color: var(--accent-soft); }
.chat { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 18px 0 8px; }
.turn { display: flex; min-width: 0; }
.turn.user { justify-content: flex-end; }
.turn.user .bubble { background: var(--accent); color: var(--accent-ink); border-radius: 18px 18px 4px 18px; padding: 10px 16px; max-width: min(80%, 560px); font-weight: 500; line-height: 1.35; }
.turn.bot .bubble { background: var(--surface); border: 1px solid var(--line); border-radius: 4px 18px 18px 18px; padding: 16px 18px; width: 100%; min-width: 0; animation: turn-in .25s ease; }
@keyframes turn-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .turn.bot .bubble { animation: none; } }
.turn.bot .lede { font-family: var(--serif); font-weight: 500; font-size: 1.35rem; line-height: 1.2; letter-spacing: -.02em; margin: 0; }
.turn.bot .ctx { color: var(--muted); font-size: .92rem; margin: 8px 0 10px; }
.turn.bot .ctx.err { color: var(--fg); font-size: 1rem; margin: 0 0 8px; }
.turn.bot .foot { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 12px; font-size: .82rem; color: var(--muted); }
.turn.bot .foot a { color: var(--accent-soft); font-weight: 600; text-decoration: none; }
.turn.typing .bubble { display: inline-flex; align-items: center; gap: 12px; width: auto; color: var(--muted); font-size: .9rem; }
.dots { display: inline-flex; gap: 4px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-soft); animation: dot 1.2s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 80%, 100% { transform: translateY(0); opacity: .45; } 40% { transform: translateY(-5px); opacity: 1; } }
.ask-examples.left { justify-content: flex-start; margin-top: 8px; }
table.opt { width: 100%; border-collapse: collapse; font-size: .9rem; margin-top: 10px; }
table.opt th, table.opt td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
table.opt thead th { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
table.opt tbody th { font-weight: 600; }
table.opt tr:last-child td, table.opt tr:last-child th { border-bottom: 0; }
table.opt .num { text-align: right; white-space: nowrap; }
table.opt td .name { font-weight: 600; text-decoration: none; }
table.opt td .sub { display: block; font-size: .76rem; color: var(--muted); }
table.opt .plate { font-size: .82rem; padding: 2px 7px; min-width: 38px; border-radius: 7px; }
table.opt .yes { color: var(--r-45); font-weight: 700; } table.opt .no { color: var(--muted); }
table.opt button.cmp { margin: 0; }
table.opt.data { margin-top: 6px; }
@media (max-width: 640px) { table.opt .c-tot, table.opt .c-ps, table.opt .c-net { display: none; } table.opt th, table.opt td { padding: 8px 6px; } }
table.opt td .sub.spec, .ocard .sub.spec { color: var(--accent-soft); font-weight: 600; }
/* cards de resposta: galeria horizontal, da maior para a menor nota (sem número de posição); a tabela fica recolhida */
.ocards { display: grid; gap: 10px; margin-top: 12px; }
.ogal-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; font-size: .8rem; color: var(--muted); }
.ogal-nav { display: inline-flex; gap: 6px; flex: none; }
.ogal-nav button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--fg); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.ogal-nav button:hover { border-color: var(--accent-soft); color: var(--accent-soft); }
.ogal { width: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 290px); gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 2px 10px; overscroll-behavior-x: contain; scrollbar-width: thin; }
.ogal > div { scroll-snap-align: start; display: flex; }
.ocard { position: relative; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); display: flex; flex-direction: column; width: 100%; }
/* nome em largura total (não quebra palavra a palavra ao lado da placa); a nota vem logo abaixo, na mesma linha do total */
.ocard .oc-head { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ocard .name { font-weight: 700; font-size: 1rem; text-decoration: none; line-height: 1.3; overflow-wrap: anywhere; }
.ocard .oc-rate { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ocard .oc-rate .plate { flex: none; }
.ocard .oc-rate small { font-size: .78rem; color: var(--muted); }
.ocard .sub { margin: 4px 0 0; font-size: .8rem; color: var(--muted); }
.ocard .sub b { color: var(--fg); }
/* Pergunte, pergunta sobre um estabelecimento: resumo da ficha (rótulo à esquerda, valor à direita; empilha se faltar espaço) */
.ofact { margin-top: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.ofact .oc-head { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ofact .name { font-weight: 700; font-size: 1.05rem; text-decoration: none; line-height: 1.3; }
.ofact .oc-rate { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ofact .oc-rate small { font-size: .78rem; color: var(--muted); }
.ofact .facts { margin: 12px 0 0; display: grid; gap: 8px; }
.ofact .facts > div { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 10px; font-size: .9rem; line-height: 1.4; }
.ofact .facts dt { color: var(--muted); }
.ofact .facts dd { margin: 0; overflow-wrap: anywhere; }
.ofact .oc-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-top: 14px; }
.ofact .oc-acts .btn.sm { padding: 6px 10px; }
.ofact .oc-acts button.cmp { margin: 0; min-height: 34px; padding: 4px 12px; }
@media (max-width: 360px) { .ofact .facts > div { grid-template-columns: minmax(0, 1fr); gap: 0; } }
@media (max-width: 899px) { .ofact .oc-acts button.cmp { min-height: 44px; } }
.ocard .oc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ocard .pill.few { border-style: dashed; color: var(--muted); }
.ocard .oc-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: auto; padding-top: 12px; }
.ocard .oc-acts .btn.sm { padding: 6px 10px; }
.ocard .oc-acts button.cmp { margin: 0; min-height: 34px; padding: 4px 12px; }
@media (max-width: 640px) {   /* tabela de números da conversa: blocos empilhados, sem rolagem lateral */
  table.opt.data, table.opt.data tbody, table.opt.data tr, table.opt.data th, table.opt.data td { display: block; width: auto; }
  table.opt.data thead { display: none; }
  table.opt.data tr { padding: 10px 12px; border-bottom: 1px solid var(--line); }
  table.opt.data th[scope=row] { padding: 0 0 4px; border: 0; }
  table.opt.data td { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; border: 0; text-align: right; }
  table.opt.data td::before { content: attr(data-label); color: var(--muted); text-align: left; }
}
.cta-row { margin: 14px 0 4px; }
.cta-row .btn { min-height: 44px; }
.cta-row.links { display: flex; flex-wrap: wrap; gap: 8px; }
.more-opts { margin-top: 6px; }
.more-opts summary { cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--accent-soft); padding: 6px 0; }
@media (max-width: 640px) { .ogal { grid-auto-columns: 84%; } .ogal-nav { display: none; } .ocard { padding: 12px; } }
@media (max-width: 899px) { .ocard .oc-acts button.cmp { min-height: 44px; } }   /* depois da regra de 34 px: no celular vale o toque de 44 px */
/* "Voltar à conversa": aparece nas outras páginas quando há conversa nesta aba (sessionStorage hs-chat) */
.chat-back { position: fixed; right: 16px; bottom: 18px; z-index: 24; display: inline-flex; align-items: center; gap: 2px; border-radius: 999px; background: var(--brand, #1F5AE6); color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.chat-back[hidden] { display: none; }
.chat-back a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 6px 10px 16px; color: #fff; text-decoration: none; font-weight: 600; font-size: .88rem; min-height: 44px; }
.chat-back a svg { width: 18px; height: 18px; }
.chat-back button { width: 36px; height: 36px; margin-right: 4px; border: 0; border-radius: 50%; background: transparent; color: #fff; font-size: 1.1rem; cursor: pointer; opacity: .8; }
.chat-back button:hover { opacity: 1; background: rgba(255,255,255,.14); }
@media (max-width: 1399px) { .ask-dock:not([hidden]) ~ .chat-back { bottom: 84px; } }
body.has-cmp .chat-back { bottom: 96px; }
@media (max-width: 899px) { body.has-bottomnav .chat-back { bottom: calc(76px + env(safe-area-inset-bottom)); } body.has-cmp .chat-back { bottom: 150px; } }
.chart-box { position: relative; height: 240px; margin: 12px 0 4px; }
@media (max-width: 640px) { .chart-box { height: 210px; } }
.fb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: .8rem; color: var(--muted); }
.fb button[data-vote] { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.fb button[data-vote] svg { width: 16px; height: 16px; }
.fb button[data-vote]:hover, .fb button[data-vote].on { color: var(--accent-soft); border-color: var(--accent-soft); }
@media (max-width: 899px) {   /* toque de 44 px no celular: 👍/👎, "Ver em tabela" e Comparar da tabela da conversa */
  .fb button[data-vote] { width: 44px; height: 44px; }
  .more-opts > summary { min-height: 44px; display: flex; align-items: center; }
  table.opt button.cmp { min-height: 44px; }
}
.fb .reasons { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: 4px; }
.fb .reasons[hidden] { display: none; }
.fb .reasons .chip { min-height: 28px; padding: 0 10px; font-size: .76rem; }
@media (max-width: 899px) { .fb .reasons .chip { min-height: 44px; } }   /* depois da regra de 28 px: no celular vale 44 px */
.fb.done { color: var(--r-45); font-weight: 600; }
.chat-empty { text-align: center; margin: 6px 0 14px; }
.chat-empty[hidden] { display: none; }
.chat-empty .muted { font-size: .85rem; margin-bottom: 8px; }
.chat-composer { position: sticky; bottom: 14px; z-index: 5; margin-top: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.14); }
body.has-cmp .chat-composer { bottom: 112px; }
@media (max-width: 899px) { body.has-cmp .chat-composer { bottom: 150px; } }
.chat-foot { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: center; align-items: center; font-size: .78rem; margin: 8px 0 0; min-height: 1.2em; }
.chat-foot .lnk { font-size: .78rem; }
.chat-foot .lnk[hidden] { display: none; }

/* ---------------------------------------------------------------- motion (referência america.gov): manifesto e linhas
   "quadro animado + texto curto". Estado padrão = estado FINAL (é o que aparece com "reduzir movimento" ou sem JS);
   os keyframes só descrevem o caminho até ele. Quadros "loop" só animam visíveis e sem pausa (motion.js: .vis/.paused). */
.mhead { text-align: center; padding: 30px 0 4px; }
.mhead h1 { font-size: clamp(2.4rem, 7vw, 4.4rem); line-height: 1; letter-spacing: -.035em; margin: 0; }
.mhead h1 em { color: var(--brand); }
.mhead .lead { color: var(--muted); font-size: clamp(1rem, 2.2vw, 1.15rem); max-width: 50ch; margin: 12px auto 0; }
.mrows { margin: 0 0 12px; }
.mrow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: center; padding: 30px 0; max-width: 980px; margin: 0 auto; }
@media (min-width: 860px) { .mrow { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 64px; padding: 46px 0; } }
.mrow-text h2 { font-family: var(--font); font-weight: 600; font-size: clamp(1.55rem, 3.2vw, 2.2rem); letter-spacing: -.03em; line-height: 1.08; margin: 0 0 12px; max-width: 16ch; }
.mrow-text p { color: var(--muted); font-size: 1.02rem; line-height: 1.55; max-width: 38ch; margin: 0 0 14px; }
.mlink { font-weight: 600; text-decoration: none; color: var(--fg); font-size: .95rem; }
.mlink:hover { text-decoration: underline; text-underline-offset: 4px; }
.motion-on [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.motion-on [data-reveal].in, .motion-reduce [data-reveal] { opacity: 1; transform: none; }
.mfoot { max-width: 760px; margin: 8px auto 28px; display: grid; gap: 14px; }
.mdetails { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 12px 18px; }
.mdetails summary { font-weight: 600; padding: 4px 0; }
.mdetails[open] summary { margin-bottom: 8px; }
.mdetails h3 { font-family: var(--font); font-size: 1rem; font-weight: 600; margin: 14px 0 6px; }
.mdetails ul { padding-left: 18px; margin: 0 0 8px; color: var(--muted); font-size: .92rem; line-height: 1.55; }
.mdetails li { margin-bottom: 6px; } .mdetails li strong { color: var(--fg); }
.home-notice { max-width: 760px; margin: 24px auto 8px; }

/* manifesto */
.manifesto { max-width: 1040px; margin: 0 auto; padding: 13vh 0 10vh; text-align: center; }
.mf { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 6.2vw, 4.5rem); line-height: 1.08; letter-spacing: -.035em; margin: 0; }
.motion-on .mf .w { opacity: .13; filter: blur(6px); transition: opacity .55s ease, filter .6s ease, transform .55s cubic-bezier(.2, .9, .3, 1.3); }
.mf .w.on { opacity: 1; filter: none; }
.mf .ic { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; height: .9em; min-width: .9em; border-radius: 999px; margin: 0 .04em; transform: translateY(-.07em); }
.motion-on .mf .ic { transform: translateY(-.07em) scale(.55); }
.motion-on .mf .ic.on { transform: translateY(-.07em) scale(1); }
.mf .ic-go { background: var(--accent); color: #fff; box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 35%, transparent); }
.mf .ic-go svg, .mf .ic-lock svg { width: .52em; height: .52em; }
.mf .ic-cnes { font-family: var(--font); font-weight: 700; font-size: .3em; height: 2.9em; padding: 0 1.1em; letter-spacing: .08em; background: var(--surface-2); border: 1px solid var(--line); color: var(--fg); }
.mf .ic-plate { font-family: var(--font); font-weight: 700; font-size: .36em; height: 2.4em; padding: 0 .75em; border-radius: .55em; background: var(--r-45); color: var(--r-45-fg); }
.mf .ic-lock { background: var(--fg); color: var(--bg); }

/* quadro */
.mtile { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 440px; margin: 0 auto; border-radius: 28px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); isolation: isolate; }
.m-pause { position: absolute; right: 12px; bottom: 12px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--fg) 80%, transparent); color: var(--bg); display: grid; place-items: center; cursor: pointer; z-index: 5; }
.m-pause svg { width: 12px; height: 12px; }
.m-pause .i-play, .paused .m-pause .i-pause { display: none; }
.paused .m-pause .i-play { display: block; }
.motion-reduce .m-pause, html:not(.motion-on) .m-pause { display: none; }
.mtile[data-motion="loop"] * { animation-play-state: paused; }
.mtile[data-motion="loop"].vis:not(.paused) * { animation-play-state: running; }
.motion-reduce .mtile, .motion-reduce .mtile * { animation: none !important; transition: none !important; }

/* 1 · mapa */
.t-map { background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--accent) 12%, var(--surface)) 0%, var(--surface) 72%); }
.t-map svg { position: absolute; left: 6%; top: 5%; width: 88%; height: 78%; overflow: visible; }
.tm-city { fill: color-mix(in srgb, var(--accent) 7%, transparent); stroke: var(--fg); stroke-opacity: .5; stroke-width: 1.3; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.motion-on .t-map.in .tm-city { animation: tm-draw 2.4s ease .2s both; }
@keyframes tm-draw { from { stroke-dashoffset: 1; fill-opacity: 0; } 70% { fill-opacity: 0; } }
.tm-dot { fill: var(--muted); stroke: var(--surface); stroke-width: .8; } .tm-dot.rnone { fill: color-mix(in srgb, var(--muted) 55%, transparent); }
.tm-dot.r45, .tm-legend i.r45 { fill: var(--r-45); background: var(--r-45); } .tm-dot.r40, .tm-legend i.r40 { fill: var(--r-40); background: var(--r-40); }
.tm-dot.r35, .tm-legend i.r35 { fill: var(--r-35); background: var(--r-35); } .tm-dot.r30, .tm-legend i.r30 { fill: var(--r-30); background: var(--r-30); }
.tm-dot.rlt, .tm-legend i.rlt { fill: var(--r-lt); background: var(--r-lt); } .tm-legend i.rnone { background: color-mix(in srgb, var(--muted) 55%, transparent); }
.motion-on .t-map:not(.in) .tm-dot { opacity: 0; }
.motion-on .t-map.in .tm-dot { animation: tm-fly 1.5s cubic-bezier(.2, .8, .2, 1) var(--d) both; }
@keyframes tm-fly { from { transform: translate(var(--dx), var(--dy)) scale(.3); opacity: 0; } 55% { opacity: 1; } }
.tm-count { position: absolute; left: 22px; bottom: 18px; display: grid; line-height: 1; }
.tm-count b { font-family: var(--serif); font-weight: 500; font-size: 2.5rem; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.tm-count small { color: var(--muted); font-size: .78rem; margin-top: 4px; }
.tm-legend { position: absolute; right: 18px; bottom: 22px; display: flex; align-items: center; gap: 3px 9px; flex-wrap: wrap; justify-content: flex-end; max-width: 58%; font-size: .66rem; color: var(--muted); }
.tm-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: -5px; }

/* 2 · nota mínima */
.t-rev { display: grid; align-content: center; gap: 14px; padding: 26px; background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--r-45) 6%, var(--surface))); }
.tr-card { background: var(--bg); border: 1px solid var(--line); border-radius: 18px; padding: 16px; box-shadow: 0 12px 30px rgba(0, 0, 0, .08); }
.tr-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.tr-top b { display: block; } .tr-top small { color: var(--muted); font-size: .78rem; }
.tr-plate { font-size: 1.1rem; transition: background .35s ease, color .35s ease, border-color .35s ease; border: 2px solid transparent; }
.motion-on .t-rev:not(.ok) .tr-plate { background: transparent; color: var(--r-45); border: 2px dashed currentColor; }
.tr-meter { position: relative; height: 8px; border-radius: 999px; background: var(--surface-2); margin: 26px 0 8px; }
.tr-meter i { position: absolute; left: 0; top: 0; bottom: 0; width: 90%; border-radius: inherit; background: var(--r-45); transition: background .3s ease; }
.motion-on .t-rev:not(.ok) .tr-meter i { background: var(--muted); }
.tr-mark { position: absolute; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; background: var(--fg); }
.tr-mark em { position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%); font-style: normal; font-size: .7rem; font-weight: 700; }
.tr-count { display: flex; justify-content: space-between; gap: 8px; font-size: .85rem; }
.tr-count b { font-variant-numeric: tabular-nums; }
.tr-need { color: var(--muted); display: none; } .tr-ok { color: var(--r-45); font-weight: 700; }
.motion-on .t-rev:not(.ok) .tr-need { display: inline; } .motion-on .t-rev:not(.ok) .tr-ok { display: none; }
.tr-rank { list-style: none; margin: 0; padding: 0 6px; display: grid; gap: 6px; counter-reset: tr; }
.tr-rank li { counter-increment: tr; display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 8px; font-size: .84rem; padding: 6px 10px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); max-height: 44px; overflow: hidden; transition: max-height .5s ease, opacity .5s ease, padding .5s ease, transform .5s ease; }
.tr-rank li::before { content: counter(tr); color: var(--muted); font-weight: 700; font-size: .74rem; }
.tr-rank .plate { font-size: .74rem; padding: 2px 6px; min-width: 34px; }
.tr-rank .tr-new { border-color: var(--accent-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-soft) 18%, transparent); font-weight: 600; }
.motion-on .t-rev:not(.ok) .tr-new { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; border-width: 0; transform: translateX(-14px); counter-increment: none; }

/* 3 · localização (loop 8 s) */
.t-loc { background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 14%, var(--surface)), var(--surface) 70%); }
.tl-phone { position: absolute; left: 12%; top: 11%; width: 46%; height: 78%; border-radius: 28px; background: var(--fg); padding: 7px; box-shadow: 0 22px 44px rgba(0, 0, 0, .2); }
.tl-screen { position: relative; width: 100%; height: 100%; border-radius: 21px; overflow: hidden; background: color-mix(in srgb, var(--r-40) 16%, var(--bg)); }
.tl-street { position: absolute; background: var(--bg); }
.tl-street.s1 { left: -10%; right: -10%; top: 38%; height: 7px; transform: rotate(-12deg); }
.tl-street.s2 { top: -10%; bottom: -10%; left: 60%; width: 7px; transform: rotate(8deg); }
.tl-street.s3 { left: -10%; right: -10%; top: 74%; height: 5px; transform: rotate(5deg); }
.tl-pin { position: absolute; left: 50%; top: 50%; width: 26px; height: 34px; margin: -34px 0 0 -13px; color: var(--accent); filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .25)); }
.tl-pin svg { width: 100%; height: 100%; display: block; }
.tl-pulse { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--accent); opacity: 0; }
.tl-h { position: absolute; display: flex; align-items: center; gap: 4px; }
.tl-h.h1 { left: 12%; top: 18%; } .tl-h.h2 { left: 52%; top: 60%; } .tl-h.h3 { left: 10%; top: 80%; }
.tl-h i { position: relative; width: 15px; height: 15px; border-radius: 4px; background: var(--r-lt); flex: none; }
.tl-h i::before, .tl-h i::after { content: ""; position: absolute; background: #fff; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.tl-h i::before { width: 9px; height: 3px; } .tl-h i::after { width: 3px; height: 9px; }
.tl-h em { font-style: normal; font-size: .68rem; font-weight: 700; color: var(--fg); background: var(--bg); padding: 1px 6px; border-radius: 7px; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); white-space: nowrap; }
.tl-db { position: absolute; right: 8%; top: 33%; width: 24%; display: grid; justify-items: center; gap: 6px; color: var(--muted); }
.tl-db svg { width: 62%; height: auto; }
.tl-db small { font-size: .72rem; font-weight: 700; color: var(--r-lt); }
.tl-no { position: absolute; right: 4%; top: -6%; width: 30%; color: var(--r-lt); }
.tl-no svg { width: 100%; height: auto; }
.tl-link { position: absolute; left: 59%; top: 47%; width: 14%; border-top: 2px dashed var(--muted); transform-origin: left center; opacity: 0; }
.tl-pin { animation: tl-drop 8s cubic-bezier(.3, 1.4, .5, 1) infinite both; }
.tl-pulse { animation: tl-ring 8s ease-out infinite both; }
.tl-h { animation: m-pop 8s ease infinite both; }
.tl-h.h1 { animation-delay: .9s; } .tl-h.h2 { animation-delay: 1.3s; } .tl-h.h3 { animation-delay: 1.7s; }
.tl-link { animation: tl-line 8s ease 2.4s infinite both; }
.tl-no, .tl-db small { animation: m-pop 8s ease 3.1s infinite both; }
@keyframes tl-drop { 0% { transform: translateY(-70px); opacity: 0; } 8% { transform: none; opacity: 1; } 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes tl-ring { 0%, 9% { transform: scale(.6); opacity: 0; } 11% { opacity: .45; } 30% { transform: scale(5); opacity: 0; } 100% { opacity: 0; } }
@keyframes m-pop { 0% { transform: scale(.6); opacity: 0; } 7% { transform: none; opacity: 1; } 80% { opacity: 1; } 90%, 100% { opacity: 0; } }
@keyframes tl-line { 0% { transform: scaleX(0); opacity: 1; } 10% { transform: scaleX(1); opacity: 1; } 22% { opacity: 1; } 30%, 100% { opacity: 0; } }

/* 4 · IP vira código diário (loop 9 s) */
.t-hash { display: grid; place-items: center; background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--accent) 8%, var(--surface))); }
.th-col { width: 82%; display: grid; gap: 12px; }
.th-ip, .th-day { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); }
.th-col small { color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.th-col code { font-size: .92rem; white-space: nowrap; }
.th-days { display: grid; gap: 8px; position: relative; padding-top: 22px; }
.th-days::before { content: "↓ código com chave secreta + data"; position: absolute; top: 0; left: 50%; transform: translateX(-50%); font-size: .7rem; color: var(--muted); white-space: nowrap; }
.th-day code { color: var(--accent-soft); font-weight: 600; }
.th-note { text-align: center; }
.th-x { display: inline-block; font-size: .8rem; font-weight: 700; color: var(--r-45); padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--r-45) 12%, transparent); }
.th-ip { animation: th-ip 9s ease infinite both; }
.th-day.d1 { animation: th-d1 9s ease infinite both; }
.th-day.d2 { animation: th-d2 9s ease infinite both; }
.th-days::before { animation: th-d1 9s ease infinite both; }
.th-note { animation: th-note 9s ease infinite both; }
@keyframes th-ip { 0% { opacity: 0; transform: translateY(-8px); } 6%, 30% { opacity: 1; transform: none; filter: none; } 40%, 90% { opacity: .4; filter: blur(2px); } 100% { opacity: 0; } }
@keyframes th-d1 { 0%, 30% { opacity: 0; transform: translateY(-10px); filter: blur(4px); } 40%, 90% { opacity: 1; transform: none; filter: none; } 100% { opacity: 0; } }
@keyframes th-d2 { 0%, 50% { opacity: 0; transform: translateY(-10px); filter: blur(4px); } 60%, 90% { opacity: 1; transform: none; filter: none; } 100% { opacity: 0; } }
@keyframes th-note { 0%, 68% { opacity: 0; transform: scale(.8); } 75%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* 5 · sem cadastro (loop 8 s) */
.t-nod { display: grid; place-items: center; }
.tn-form { width: 72%; display: grid; gap: 10px; }
.tn-f { position: relative; display: grid; gap: 4px; }
.tn-f small { font-size: .72rem; color: var(--muted); font-weight: 600; }
.tn-f span { height: 34px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); }
.tn-f::before { content: ""; position: absolute; left: -5%; right: -5%; top: 68%; height: 2px; border-radius: 2px; background: var(--r-lt); transform-origin: left center; z-index: 2; }
.tn-f { opacity: .45; animation: tn-dim 8s ease infinite both; }
.tn-f::before { animation: tn-strike 8s ease infinite both; }
.tn-f.f1, .tn-f.f1::before { animation-delay: .5s; } .tn-f.f2, .tn-f.f2::before { animation-delay: 1s; }
.tn-f.f3, .tn-f.f3::before { animation-delay: 1.5s; } .tn-f.f4, .tn-f.f4::before { animation-delay: 2s; }
.tn-ok { margin-top: 6px; text-align: center; font-weight: 700; color: var(--r-45); animation: m-pop 8s ease 2.7s infinite both; }
@keyframes tn-strike { 0% { transform: scaleX(0); } 7% { transform: scaleX(1); } 82% { transform: scaleX(1); opacity: 1; } 92%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes tn-dim { 0%, 6% { opacity: 1; } 12%, 82% { opacity: .45; } 92%, 100% { opacity: 1; } }

/* 6 · quadro de espera (loop 9 s) */
.t-heat { --w1: #0B8A4A; --w2: #6CBF5A; --w3: #E3B23C; --w4: #E07A2F; --w5: #B9402E; display: grid; align-content: center; gap: 14px; padding: 24px 22px; }
:root[data-theme="dark"] .t-heat { --w1: #2FB46B; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .t-heat { --w1: #2FB46B; } }
.th-grid { display: grid; grid-template-columns: 30px repeat(6, minmax(0, 1fr)); gap: 4px; align-items: center; }
.th-grid small { font-size: .64rem; color: var(--muted); text-align: center; }
.th-grid i { aspect-ratio: 1.3; border-radius: 6px; background: var(--surface-2); border: 1px dashed var(--line); }
.th-grid i.w1 { background: var(--w1); } .th-grid i.w2 { background: var(--w2); } .th-grid i.w3 { background: var(--w3); }
.th-grid i.w4 { background: var(--w4); } .th-grid i.w5 { background: var(--w5); }
.th-grid i:not(.w0) { border: 0; animation: th-fill 9s ease calc(var(--i) * 40ms) infinite both; }
@keyframes th-fill { 0% { transform: scale(.3); opacity: 0; } 7%, 86% { transform: none; opacity: 1; } 95%, 100% { opacity: 0; } }
.th-key { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; font-size: .68rem; color: var(--muted); }
.th-key span { display: inline-flex; align-items: center; gap: 4px; }
.th-key i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.th-key i.w1 { background: var(--w1); } .th-key i.w5 { background: var(--w5); } .th-key i.w0 { background: var(--surface-2); border: 1px dashed var(--muted); }

/* 7 · mediana, não média (loop 10 s) */
.t-med { display: grid; align-content: center; padding: 34px 30px 48px; }
.tm-axis { position: relative; height: 160px; border-bottom: 2px solid var(--fg); }
.tm-pt { position: absolute; left: var(--x); bottom: 10px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--accent-soft); animation: tm-drop 10s cubic-bezier(.3, 1.3, .5, 1) calc(var(--i) * 170ms) infinite both; }
.tm-pt.tm-out { background: var(--r-30); animation-name: tm-drop-out; animation-delay: 0s; }
.tm-outl { position: absolute; left: 97%; bottom: 30px; transform: translateX(-50%); white-space: nowrap; font-size: .72rem; font-weight: 700; color: var(--r-30); animation: tm-drop-out 10s ease infinite both; }
.tm-break { position: absolute; left: 87%; bottom: -8px; width: 10px; height: 14px; border-left: 2px solid var(--fg); border-right: 2px solid var(--fg); background: var(--surface); transform: skewX(-20deg); }
.tm-mk { position: absolute; left: var(--x); top: 0; bottom: 0; }
.tm-mk em { position: absolute; left: 7px; white-space: nowrap; font-style: normal; font-size: .76rem; font-weight: 700; background: var(--surface); padding: 1px 5px; border-radius: 6px; }
.tm-mean { border-left: 2px dashed var(--r-30); animation: tm-mean 10s ease infinite both; } .tm-mean em { top: 0; color: var(--r-30); }
.tm-median { border-left: 3px solid var(--accent); animation: tm-median 10s ease infinite both; } .tm-median em { top: 34px; color: var(--accent-soft); }
.tm-scale { position: absolute; left: 0; right: 0; top: calc(100% + 8px); display: flex; justify-content: space-between; font-size: .64rem; color: var(--muted); }
.tm-scale small { width: 0; display: flex; justify-content: center; white-space: nowrap; }
@keyframes tm-drop { 0% { transform: translateY(-80px); opacity: 0; } 5% { transform: none; opacity: 1; } 86% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes tm-drop-out { 0%, 30% { transform: translateY(-80px); opacity: 0; } 36% { transform: none; opacity: 1; } 86% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes tm-mean { 0%, 44% { opacity: 0; transform: translateY(-6px); } 50%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }
@keyframes tm-median { 0%, 58% { opacity: 0; transform: translateY(-6px); } 64%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }

/* 8 · prova de trabalho (loop 7 s) */
.t-pow { display: grid; align-content: center; padding: 30px 24px; }
.tp-lanes { display: grid; gap: 20px; }
.tp-lane { display: grid; grid-template-columns: 96px minmax(0, 1fr) 66px; align-items: center; gap: 10px; }
.tp-lbl b { display: block; font-size: .92rem; } .tp-lbl small { color: var(--muted); font-size: .72rem; }
.tp-bar { height: 12px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.tp-bar i { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--r-45); transform-origin: left center; }
.tp-lane.bot .tp-bar i { background: var(--r-lt); transform: scaleX(.06); }
.tp-t { font-size: .8rem; font-weight: 700; white-space: nowrap; }
.tp-lane.you .tp-t { color: var(--r-45); } .tp-lane.bot .tp-t { color: var(--r-lt); }
.tp-hash { text-align: center; } .tp-hash code { font-size: .74rem; color: var(--muted); }
.tp-lane.you .tp-bar i { animation: tp-you 7s ease infinite both; }
.tp-lane.bot .tp-bar i { animation: tp-bot 7s linear infinite both; }
.tp-lane.you .tp-t { animation: m-pop 7s ease 1.1s infinite both; }
@keyframes tp-you { 0% { transform: scaleX(0); } 14% { transform: scaleX(1); } 86% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes tp-bot { 0% { transform: scaleX(0); } 86% { transform: scaleX(.06); opacity: 1; } 94%, 100% { opacity: 0; } }

/* apoie: chave PIX */
.pix-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; margin: 0 0 6px; }
.pix-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 0; }
.pix-row .pix { font-size: 1.05rem; }
.pix-help { font-size: .82rem; margin: 10px 0 0; }

/* ---------------------------------------------------------------- apoie (apoie.html) */
.wm { font-family: var(--font); font-weight: 700; letter-spacing: -.04em; font-style: normal; }
.wm b { color: var(--brand, #1F5AE6); font-weight: 700; }
:root[data-theme="dark"] .wm b { color: var(--accent-soft); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wm b { color: var(--accent-soft); } }
.donate { max-width: 880px; margin: 26px auto 8px; padding: 22px; border-radius: 28px; border: 1px solid var(--line); background: var(--surface); }
@media (min-width: 760px) { .donate { padding: 28px 30px; } }
.dn-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.dn-head h2 { margin: 0; font-size: clamp(1.5rem, 4vw, 2rem); }
.dn-tabs { display: inline-flex; padding: 4px; gap: 4px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }
.dn-tabs button { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 600; font-size: .92rem; padding: 8px 16px; border-radius: 999px; border: 0; background: transparent; color: var(--muted); cursor: pointer; min-height: 40px; }
.dn-tabs button.on { background: var(--bg); color: var(--fg); box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.dn-panel { display: grid; gap: 22px; align-items: center; }
.dn-panel[hidden] { display: none; }
@media (min-width: 760px) { .dn-panel { grid-template-columns: 260px minmax(0, 1fr); gap: 34px; } }
.dn-qr { margin: 0; text-align: center; }
.dn-qr-box { background: #FFFFFF; border-radius: 18px; padding: 10px; width: 220px; max-width: 100%; margin: 0 auto; box-shadow: 0 8px 28px rgba(0,0,0,.12); }
.dn-qr-box svg, .dn-qr-box img { display: block; width: 100%; height: auto; }
.dn-qr figcaption { font-size: .78rem; color: var(--muted); margin-top: 8px; }
.dn-info .pix-row { margin-bottom: 10px; }
.dn-brand { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 1.05rem; }
.dn-brand .muted { font-size: .85rem; }
/* marcas oficiais (simple-icons; fonte: BCB e wise.design), com as cores das marcas no próprio SVG */
.ic-wise { background: #9FE870; border-radius: 6px; padding: 3px; box-sizing: border-box; }
.msec { text-align: center; font-size: clamp(1.6rem, 4.5vw, 2.4rem); margin: 44px 0 0; }
.support-more { max-width: 980px; margin: 0 auto; }
.sm-grid { display: grid; gap: 14px; margin-top: 18px; }
@media (min-width: 760px) { .sm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sm-card { padding: 18px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.sm-card h3 { margin: 0; font-size: 1.05rem; font-family: var(--font); }
.sm-card p { margin: 0 0 4px; color: var(--muted); font-size: .9rem; }

/* compartilhar */
.share { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.hero-share { margin: 10px 0 0; }

/* tiles do apoie */
.t-list, .t-states, .t-fb { display: grid; align-content: center; padding: 26px 22px; }
.tl, .tf { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.tl li { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: var(--bg); border: 1px solid var(--line); }
.tl-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); font-weight: 800; color: var(--accent-soft); }
.tl-ic svg { width: 20px; height: 20px; }
.tl-t b { display: block; font-size: .92rem; } .tl-t small { color: var(--muted); font-size: .74rem; }
.tl em { font-style: normal; font-weight: 700; font-size: .86rem; text-align: right; white-space: nowrap; }
.tl em small { display: block; font-weight: 500; font-size: .68rem; color: var(--muted); }
.ts-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ts { aspect-ratio: 1 / 1; border-radius: 16px; border: 1.5px dashed var(--line); display: grid; place-content: center; text-align: center; color: var(--muted); }
.ts b { font-size: 1.15rem; } .ts small { font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; }
.ts.on { border: 0; background: var(--accent); color: var(--accent-ink, #fff); box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 35%, transparent); }
.tf li { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: center; font-size: .82rem; }
.tf-ask { padding: 8px 10px; border-radius: 12px; background: var(--surface-2); color: var(--muted); font-style: italic; }
.tf-arrow { color: var(--muted); font-weight: 700; }
.tf-done { padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--r-45) 16%, transparent); color: var(--fg); font-weight: 600; }
@keyframes ap-in { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.motion-on .t-list.in .tl li, .motion-on .t-states.in .ts, .motion-on .t-fb.in .tf li { animation: ap-in .55s cubic-bezier(.2, .8, .2, 1) var(--d, 0s) both; }
.motion-on .t-fb.in .tf-done { animation: ap-in .5s ease calc(var(--d, 0s) + .35s) both; }

/* ---------------------------------------------------------------- chat no computador: início centralizado na tela */
@media (min-width: 900px) {
  .chat-page:not(.has-turns) { min-height: calc(100vh - 140px); display: flex; flex-direction: column; justify-content: center; }
  .chat-page:not(.has-turns) .chat { margin: 0; }
  .chat-page:not(.has-turns) .chat-head { padding-bottom: 18px; }
  .chat-page:not(.has-turns) .chat-head h1 { font-size: clamp(2.2rem, 4vw, 3.2rem); }
  .chat-page:not(.has-turns) .chat-composer { position: static; }
  .chat-page:not(.has-turns) .chat-empty { order: 3; margin: 16px 0 0; }
  .chat-page:not(.has-turns) .chat-foot { order: 4; }
}

/* ---------------------------------------------------------------- mapa em tela cheia + painel "Nesta área" (map.js) */
.map-fs { position: relative; min-width: 0; }
.map-side { display: none; }
.map-fs-btn { margin: 10px; width: 40px; height: 40px; border-radius: 8px; border: 0; background: #FFFFFF; color: #3C4043; box-shadow: 0 1px 4px rgba(0,0,0,.3); display: grid; place-items: center; cursor: pointer; }
.map-fs-btn svg { width: 18px; height: 18px; }
.map-fs.fs-on { display: flex; background: var(--bg); width: 100vw; height: 100vh; }
.map-fs.fs-fake { position: fixed; inset: 0; z-index: 1000; }
body.map-fs-lock { overflow: hidden; }
.map-fs.fs-on .gmap { flex: 1; height: 100%; border-radius: 0; border: 0; }
@media (min-width: 900px) {
  .map-fs.fs-on .map-side { display: flex; flex-direction: column; width: 380px; flex: none; height: 100%; overflow-y: auto; border-left: 1px solid var(--line); background: var(--bg); color: var(--fg); padding: 18px 16px 24px; gap: 12px; box-sizing: border-box; }
}
.ms-head b { display: block; font-family: var(--serif); font-size: 1.5rem; font-weight: 500; }
.ms-head small { color: var(--muted); font-size: .78rem; }
.ms-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ms-chips .chip { min-height: 32px; padding: 0 12px; font-size: .8rem; }
.ms-chips .chip.on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.ms-ranges .range { min-height: 30px; padding: 0 10px; font-size: .78rem; }
.ms-svc { width: 100%; font: inherit; font-size: .85rem; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); }
.ms-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.ms-sum div { text-align: center; } .ms-sum b { display: block; font-size: 1.05rem; } .ms-sum small { font-size: .66rem; color: var(--muted); }
.ms-title { font-family: var(--font); font-size: .95rem; margin: 4px 0 6px; }
.ms-title small { display: block; font-weight: 400; font-size: .72rem; color: var(--muted); }
.ms-groups, .ms-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ms-groups button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: left; font: inherit; color: var(--fg); padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.ms-groups button:hover { border-color: var(--accent-soft); }
.ms-g-name { font-weight: 600; font-size: .9rem; } .ms-g-name small { display: block; font-weight: 400; font-size: .72rem; color: var(--muted); }
.ms-items li { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.ms-items li:hover { border-color: var(--accent-soft); }
.ms-i-top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.ms-i-top .name { font-weight: 700; font-size: .9rem; text-decoration: none; }
.ms-items .sub { margin: 2px 0 0; font-size: .74rem; color: var(--muted); }
.ms-tags { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 4px; }
.ms-tags .pill.few { border-style: dashed; color: var(--muted); }
.ms-acts { margin: 8px 0 0; display: flex; gap: 6px; align-items: center; }
.ms-acts button.cmp { margin: 0; }
.ms-empty, .ms-more { font-size: .82rem; color: var(--muted); }


/* ---------------------------------------------------------------- fase 3: Explorar e Dados */
.kicker { margin: 0 0 4px; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-soft); }
/* barra de filtros fixa sob o cabeçalho */
.fbar { position: sticky; top: 61px; z-index: 15; background: var(--bg); padding: 8px 0; margin: 0 0 6px; border-bottom: 1px solid var(--line); display: grid; gap: 8px; }
.fbar-row { display: flex; gap: 8px; align-items: center; min-width: 0; }
.fquick { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; min-width: 0; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); padding-right: 18px; }
.fquick::-webkit-scrollbar { display: none; }
.fquick .chip, .fbtn { flex: none; }
.fbtn { font-weight: 600; border-color: var(--fg); background: var(--bg); }
.fcount { min-width: 20px; height: 20px; border-radius: 999px; background: var(--brand); color: #fff; font-size: .72rem; display: inline-grid; place-items: center; padding: 0 6px; }
.fcount[hidden] { display: none; }
.fbar-row2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fbar-count { font-size: .85rem; }
.factive { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 2px 0 8px; }
.factive[hidden] { display: none; }
.factive .chip { min-height: 32px; padding: 4px 10px; font-size: .82rem; }
.sos { margin: 0 0 10px; font-size: .9rem; }
.sos a { color: var(--accent-soft); }
.sos[hidden] { display: none; }
/* faixas de nota (só no mapa): 5 células iguais numa linha */
.mapview .ranges { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 0 0 10px; max-width: 520px; }
.mapview .ranges .range { padding: 4px 0; font-size: .78rem; white-space: nowrap; min-height: 34px; }
/* folha de filtros: tela cheia no celular, painel centrado no computador */
.fsheet { position: fixed; inset: 0; z-index: 60; display: grid; grid-template: 100% / 100%; }
.fsheet[hidden] { display: none; }
.fsheet-bg { position: absolute; inset: 0; background: rgba(10,10,11,.45); }
.fsheet-panel { position: relative; z-index: 1; background: var(--bg); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; width: 100%; }
@media (min-width: 900px) { .fsheet { place-items: center; } .fsheet-panel { width: min(560px, 92vw); height: auto; max-height: 86vh; border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.25); } }
.fsheet-panel header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); padding-top: max(12px, env(safe-area-inset-top)); }
.fsheet-panel header h2 { margin: 0; font-size: 1.3rem; }
.fsheet-body { overflow-y: auto; padding: 8px 16px 16px; overscroll-behavior: contain; }
.fsheet-body fieldset { border: 0; margin: 0; padding: 14px 0 6px; border-bottom: 1px solid var(--line); display: grid; gap: 10px; }
.fsheet-body fieldset:last-child { border-bottom: 0; }
.fsheet-body legend + * { clear: both; }
.fsheet-body legend { float: left; width: 100%; padding: 0; margin-bottom: 2px; font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fsheet-body .hint { margin: 0; font-size: .78rem; color: var(--muted); }
.fsheet-body .wrapc { display: flex; flex-wrap: wrap; gap: 8px; }
.fsheet-body .chip.on, .fsheet-body .seg button.on { background: var(--ink-block); border-color: var(--ink-block); color: var(--ink-block-fg); }
.seg.wide { display: flex; width: 100%; }
.seg.wide button { flex: 1; }
.fsearch { width: 100%; font: inherit; font-size: .95rem; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); min-height: 44px; }
.fspec { max-height: 220px; overflow-y: auto; }
.fspec .chip[hidden] { display: none; }
.fsheet-panel footer { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 12px 16px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--bg); }
.fsheet-panel footer .btn { min-height: 48px; justify-content: center; }
.fsheet-panel footer .btn.pri[disabled] { opacity: .55; cursor: not-allowed; }
body.sheet-open { overflow: hidden; }
/* cartão para a outra área (Explorar ↔ Dados) */
.data-cta.explore { background: var(--surface); border-color: var(--line); color: var(--fg); }
.data-cta.explore small, .data-cta.explore span { color: var(--muted); }
.datanote { margin-top: 6px; }
/* sem tabela com rolagem lateral no celular: cada linha vira nome + nota e uma linha de detalhes */
@media (max-width: 640px) {
  table.rank thead { display: none; }
  table.rank, table.rank tbody { display: block; }
  table.rank tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n r" "p p" "t b"; gap: 4px 10px; padding: 10px 2px; border-bottom: 1px solid var(--line); }
  table.rank tbody tr.hidden, table.rank tbody tr.off-page { display: none; }
  table.rank tbody td { border: 0; padding: 0; }
  table.rank tbody td:nth-child(1) { grid-area: n; min-width: 0; }
  table.rank tbody td:nth-child(2) { grid-area: p; }
  table.rank tbody td:nth-child(3) { grid-area: r; text-align: right; }
  table.rank tbody td:nth-child(4) { grid-area: t; text-align: left; font-size: .82rem; color: var(--muted); }
  table.rank tbody td:nth-child(5) { grid-area: b; text-align: right; font-size: .82rem; color: var(--muted); }
  table.rank tbody td:nth-child(4)::before { content: "Avaliações: "; }
  table.rank tbody td:nth-child(5)::before { content: "Leitos: "; }
  table.rank.beds tbody tr { grid-template-areas: "n n" "p p" "t b"; }
  table.rank.beds tbody td:nth-child(3)::before { content: "Total: "; }
  table.rank.beds tbody td:nth-child(3) { grid-area: t; text-align: left; font-size: .82rem; color: var(--muted); }
  table.rank.beds tbody td:nth-child(4) { grid-area: b; }
  table.rank.beds tbody td:nth-child(4)::before { content: "SUS: "; }
  table.rank.beds tbody td:nth-child(5)::before { content: none; }
  .tableview .tbl-wrap, .tbl-wrap.beds-wrap { overflow-x: visible; border: 0; background: none; }
}

/* toque ≥ 44 px no celular também nos controles da fase 3 (vêm depois da regra geral) */
@media (max-width: 899px) {
  .factive .chip, .mapview .ranges .range, .cs-v .cmp-route .btn.sm { min-height: 44px; }
  .factive .lnk, .bn-hint .lnk { min-height: 44px; padding: 0 8px; }
  .slot { padding-right: 44px; }
  .slot .rm { width: 44px; height: 44px; top: 0; right: 0; border: 0; background: transparent; font-size: 1.15rem; }
}
.fsheet { z-index: 1100; }   /* acima do mapa em tela cheia simulada (.fs-fake) */

/* Resumo das avaliações (Google), caixa no estilo do Gemini: borda em degradê fino, fundo levemente tingido, estrela de 4 pontas */
.rsum { --rsum-bg: #F5F7FE; max-width: 760px; margin: 14px 0 16px; padding: 14px 18px 12px; border-radius: 18px; border: 1px solid transparent;
  background: linear-gradient(var(--rsum-bg), var(--rsum-bg)) padding-box, linear-gradient(120deg, #4796E3, #9177C7 55%, #CA6673) border-box; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rsum { --rsum-bg: #13151C; } }
:root[data-theme="dark"] .rsum { --rsum-bg: #13151C; }
.rsum-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.rsum-head h2 { font-family: var(--font); font-size: .95rem; font-weight: 600; letter-spacing: 0; margin: 0; }
.rsum-ai { margin-left: auto; font-size: .72rem; font-weight: 600; color: var(--muted); padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); white-space: nowrap; }
.rsum .rsum-text { font-size: 1rem; line-height: 1.55; margin: 0; color: var(--fg); }
.rsum .rsum-disc { font-size: .8rem; color: var(--muted); margin: 6px 0 0; }
.rsum .rsum-links { display: flex; flex-wrap: wrap; gap: 0 16px; margin: 6px 0 2px; font-size: .85rem; }
.rsum .rsum-links a { color: var(--accent-soft); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; }
.rsum .rsum-links a:hover { text-decoration: underline; }
.rsum .rsum-note { font-size: .75rem; color: var(--muted); margin: 2px 0 0; }
@media (max-width: 640px) { .rsum { padding: 12px 14px 10px; } .rsum .rsum-text { font-size: .95rem; } .rsum .rsum-links a { min-height: 44px; } }

/* Resumo do perfil (IA com dados do CNES): caixa neutra, diferente da do Google, com traço da marca à esquerda */
.psum { max-width: 760px; margin: 12px 0 14px; padding: 12px 16px 10px; border-radius: 14px; border: 1px solid var(--line); border-left: 3px solid var(--brand); background: var(--surface); }
.psum-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: var(--muted); }
.psum-head h2 { font-family: var(--font); font-size: .9rem; font-weight: 600; letter-spacing: 0; margin: 0; color: var(--fg); }
.psum-ai { margin-left: auto; font-size: .72rem; font-weight: 600; color: var(--muted); padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); white-space: nowrap; }
.psum-text { font-size: 1.05rem; line-height: 1.55; margin: 0; color: var(--fg); }
.psum-note { font-size: .75rem; color: var(--muted); margin: 6px 0 0; }
@media (max-width: 640px) { .psum-text { font-size: 1rem; } .psum-head { flex-wrap: wrap; } .psum-ai { margin-left: 0; } }

/* Avaliações próprias "Como foi o atendimento?" (care.py): estrelas, chips e resumo por IA */
.care .care-agg { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.care .care-avg { margin: 0 0 8px; font-size: 1rem; }
.care .care-avg b { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; }
.care .care-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 0; }
.care li.care-chip { font-size: .82rem; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); }
.care li.care-chip b { font-weight: 600; margin-left: 4px; }
.care li.care-chip.pos::before, .care-form .care-chip.pos span::before { content: "+ "; color: var(--muted); }
.care li.care-chip.neg::before, .care-form .care-chip.neg span::before { content: "− "; color: var(--muted); }
.care .care-sum-text { margin: 0; line-height: 1.55; }
.care .care-note { font-size: .75rem; color: var(--muted); margin: 6px 0 0; }
.care-form { display: grid; gap: 12px; }
.care-form fieldset { border: 0; margin: 0; padding: 0; }
.care-form legend { font-size: .9rem; font-weight: 600; margin-bottom: 6px; padding: 0; }
.care-form .hp { position: absolute; left: -9999px; }
.care-form .msg { font-size: .9rem; min-height: 1.2em; }
.care-form .msg.ok { color: var(--r-45); } .care-form .msg.err { color: var(--r-lt); }
.care-form .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* estrelas na ordem natural (1→5, setas do teclado no sentido certo): acende tudo e apaga as que vêm depois da escolhida */
.stars-row { display: inline-flex; gap: 2px; }
.stars-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stars-row label { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--muted); }
.stars-row label svg { fill: currentColor; }
.stars-row:has(input:checked) label { color: var(--brand); }
.stars-row input:checked + label ~ label { color: var(--muted); }
/* hover vence a escolha feita: mesma especificidade da regra acima, declarada depois */
.stars-row:hover label, .stars-row:hover input:checked + label ~ label { color: var(--brand); }
.stars-row:hover input ~ label:hover ~ label { color: var(--muted); }
.stars-row input:focus-visible + label { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 8px; }
.care-chiprow { display: flex; flex-wrap: wrap; gap: 6px; }
.care-form .care-chip { position: relative; }
.care-form .care-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.care-form .care-chip:has(input:checked) span::before { color: inherit; }
.care-form .care-chip:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.care-form .care-text { display: grid; gap: 4px; font-size: .9rem; font-weight: 600; }
.care-form textarea { font: inherit; font-weight: 400; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); resize: vertical; min-height: 72px; }
@media (max-width: 640px) { .care-form .care-chip { min-height: 44px; } }

/* busca instantânea (search.js): sugestões abaixo do campo; o assistente é uma das linhas */
form.sx { position: relative; }
.sx-list { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 40; margin: 0; padding: 6px; list-style: none; max-height: min(420px, 60vh); overflow-y: auto; background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 16px 40px rgba(0,0,0,.28); text-align: left; }
.sx-list[hidden] { display: none; }
.sx-opt { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; cursor: pointer; min-height: 48px; }
.sx-opt.on, .sx-opt:hover { background: var(--surface-2); }
.sx-ic { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--surface); color: var(--muted); }
.sx-ic svg { width: 16px; height: 16px; }
.sx-ask .sx-ic { background: var(--accent); color: var(--accent-ink); }
.sx-t { flex: 1; min-width: 0; display: grid; gap: 1px; }
.sx-t b { font-weight: 600; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-t small { color: var(--muted); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-opt .plate { min-width: 38px; padding: 2px 7px; font-size: .82rem; }
.sx-tag { flex: none; font-size: .7rem; font-weight: 600; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; }
.sx-empty { padding: 12px; font-size: .86rem; color: var(--muted); }
.home-hero .sx-list { --bg: #141416; }
.top .ask-mini .sx-list { min-width: 360px; }

/* Perto de mim (/perto/) e Avaliar (/avaliar/) */
.near-page { max-width: 1100px; margin: 0 auto; padding: 8px 0 24px; }
.near-head { text-align: center; padding: 14px 0 4px; }
.near-head .kicker { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 0 0 8px; }
.near-head .lead { color: var(--muted); max-width: 58ch; margin: 8px auto 0; }
.near-bar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: center; margin: 18px 0 6px; }
.near-bar #near-go { min-height: 46px; }
.near-bar #near-go svg { margin-right: 4px; }
.near-filters { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.near-status { text-align: center; color: var(--muted); font-size: .92rem; margin: 10px 0 4px; }
.near-status b { color: var(--fg); }
.near-d { color: var(--fg); font-weight: 700; }
.near-more { text-align: center; }
.near-alt { max-width: 640px; margin: 28px auto 8px; text-align: center; }
.near-alt h2 { font-size: 1.05rem; font-family: inherit; font-weight: 600; margin-bottom: 10px; }
.near-links { max-width: 900px; text-align: left; } .near-links h2 { margin-top: 18px; }
.near-page .notice { max-width: 760px; margin: 20px auto 0; }
.rate-page form.ask { max-width: 640px; margin: 20px auto 0; }
.rate-steps { max-width: 640px; margin: 26px auto 0; padding: 0; list-style: none; counter-reset: st; display: grid; gap: 10px; }
.rate-steps li { counter-increment: st; display: grid; grid-template-columns: 34px 1fr; gap: 0 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm, 12px); background: var(--surface); }
.rate-steps li::before { content: counter(st); grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: .9rem; }
.rate-steps b { font-size: .95rem; }
.rate-steps span { color: var(--muted); font-size: .86rem; }
.rate-note { max-width: 640px; margin: 14px auto 0; text-align: center; font-size: .84rem; }
@media (max-width: 640px) { .near-bar { flex-direction: column; } .near-filters { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; max-width: calc(100% + 32px); margin: 0 -16px; padding: 0 16px 2px; scrollbar-width: none; } .near-filters .chip { flex: none; } .near-bar #near-go { width: 100%; justify-content: center; } .top .ask-mini .sx-list { min-width: 0; } }

/* Transparência (/transparencia/) */
.tp-sec { max-width: 1000px; margin: 28px auto 0; }
.tp-sec h2 { font-size: 1.35rem; margin-bottom: 10px; }
.tp-kpis { grid-template-columns: repeat(auto-fill, minmax(min(100%, 155px), 1fr)); }
.tp-kpis .kpi b { font-family: var(--serif); font-size: 2rem; font-weight: 500; display: block; margin: 2px 0; }
.tp-kpis .kpi span { color: var(--muted); font-size: .82rem; }
.tp-chart { margin-top: 12px; }
.tp-cta { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
table.tp-costs { width: 100%; border-collapse: collapse; }
table.tp-costs th, table.tp-costs td { padding: 10px 4px; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; }
table.tp-costs td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.tp-costs tr.tot th, table.tp-costs tr.tot td { font-weight: 700; border-bottom: 0; }
.mhead .kicker { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 0 0 8px; }
.tp-sec + .notice { max-width: 1000px; margin: 28px auto 0; }

/* impacto de quem contribui (ficha): quanto falta para a espera e a nota do Hospital Score aparecerem */
.contrib { margin: 10px 0 12px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--brand) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent); }
.contrib[hidden] { display: none; }
.contrib p { margin: 0; font-size: .9rem; }
.contrib .cbar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin-top: 8px; }
.contrib .cbar i { display: block; height: 100%; min-width: 4px; border-radius: inherit; background: var(--brand); transition: width .6s ease; }
.contrib small { display: block; margin-top: 4px; font-size: .75rem; color: var(--muted); }
.msg .ask-others { display: block; margin-top: 4px; }

/* atalhos para as páginas por filtro (/ps-24h/, /upa/, /sus/, /maternidade/) e o convite discreto da ficha para gestores */
.qlinks { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 14px; }
.qlinks .chip { text-decoration: none; min-height: 34px; padding: 5px 12px; }
.qlinks .chip .n { font-size: .78rem; opacity: .7; font-variant-numeric: tabular-nums; }
.b2b-ask { margin-top: 22px; font-size: .86rem; }
.b2b-ask a { color: var(--muted); }

/* /para-hospitais/: lista de espera do painel */
.b2b-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 8px 0 18px; }
.b2b-card { border: 1px solid var(--line); border-radius: 14px; padding: 16px; background: var(--surface); display: flex; flex-direction: column; gap: 6px; }
.b2b-card span { color: var(--muted); font-size: .92rem; }
.b2b-rules { max-width: 720px; }
.b2b-rules p { margin: 0 0 10px; }
.b2b-form-wrap { max-width: 520px; margin-top: 22px; }
.b2b-form { display: flex; flex-direction: column; gap: 6px; position: relative; }
.b2b-form label { font-weight: 600; font-size: .9rem; margin-top: 8px; }
.b2b-form input[type=text], .b2b-form input[type=email], .b2b-form select { font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--fg); min-height: 44px; }
.b2b-form .b2b-ok { font-weight: 400; display: flex; gap: 8px; align-items: flex-start; }
.b2b-form .b2b-ok input { margin-top: 4px; }
.b2b-form .btn.pri { align-self: flex-start; margin-top: 10px; }
.b2b-form .hp { position: absolute; left: -9999px; }
.b2b-msg { min-height: 1.3em; margin: 4px 0 0; font-size: .9rem; }
.b2b-done { padding: 14px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.b2b-privacy { font-size: .85rem; margin-top: 10px; }
.sx-anchor { position: relative; display: flex; flex-direction: column; }