/* =====================================================================================
   VetUberlândia — Layout V102 (cabeçalho da home, categorias, cabeçalho das páginas, cards de
   estabelecimentos e de veterinários, janela de detalhes e notificações).
   Carregado por ÚLTIMO em todas as páginas que usam esses blocos. Só usa classes novas (vh-, vc-, vp-, ve-, vv-, vd-, vn-)
   e, quando precisa vencer regras antigas, as sobrescreve com seletor mais específico.
   Sem imagens externas, sem scripts, sem @import.
   ===================================================================================== */

:root {
  --vz-navy: #1b3b64;
  --vz-navy-2: #234a7c;
  --vz-orange: #f28a2e;
  --vz-orange-d: #c85a0c;
  --vz-green: #3f7d2a;
  --vz-green-soft: #dff3e3;
  --vz-bg: #f2f4f8;
  --vz-ink: #1b3b64;
  --vz-muted: #5f6f88;
  --vz-line: #e3e8f0;
  --vz-red: #d62839;
  --vz-shadow: 0 12px 30px -14px rgba(27, 59, 100, .30);
}

/* ------------------------------------------------------------------ 1. Cabeçalho da home */
.vh {
  position: relative;
  background: var(--vz-bg);
  padding: max(18px, env(safe-area-inset-top, 0px)) 20px 4px;
  color: var(--vz-ink);
}
.vh-in { max-width: 1200px; margin: 0 auto; }
.vh-top { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.vh-title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.vh-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

/* botão Avaliações (reaproveita o do site: avaliacoes.js liga no atributo data-avaliacoes) */
.vh .vu-rv-btn-top {
  position: static; top: auto; right: auto; height: 46px; padding: 0 16px 0 14px; gap: 8px;
  border: 0; background: #fff; color: var(--vz-ink); font-size: 14px; font-weight: 800;
  box-shadow: 0 8px 20px -8px rgba(27, 59, 100, .35);
}
.vh .vu-rv-btn-top svg { width: 17px; height: 17px; fill: var(--vz-orange); }

.vh-bell {
  position: relative; width: 46px; height: 46px; border: 0; border-radius: 50%; background: #fff; color: var(--vz-ink);
  display: inline-flex; align-items: center; justify-content: center; font-size: 21px; cursor: pointer;
  box-shadow: 0 8px 20px -8px rgba(27, 59, 100, .35); -webkit-tap-highlight-color: transparent; transition: transform .15s ease;
}
.vh-bell:active { transform: scale(.94); }
.vh-bell:focus-visible, .vh .vu-rv-btn-top:focus-visible { outline: 3px solid var(--vz-orange); outline-offset: 2px; }
.vh-dot {
  position: absolute; top: 9px; right: 10px; min-width: 11px; height: 11px; border-radius: 50%; background: #e5252a;
  border: 2px solid #fff; box-sizing: content-box; transform: translate(35%, -35%);
}
.vh-dot[hidden] { display: none; }
.vh-bell.has-new i { animation: vhRing 2.8s ease-in-out 1s 2; transform-origin: 50% 10%; }
@keyframes vhRing { 0%, 12%, 100% { transform: rotate(0); } 3% { transform: rotate(14deg); } 6% { transform: rotate(-12deg); } 9% { transform: rotate(8deg); } }

.vh-card {
  position: relative; overflow: hidden; margin-top: 18px; padding: 22px 20px 20px; border-radius: 30px; color: #fff;
  background: linear-gradient(155deg, #1f4474 0%, #17335a 100%);
  box-shadow: 0 22px 36px -18px rgba(27, 59, 100, .65);
}
.vh-card::before {
  content: ''; position: absolute; width: 64%; aspect-ratio: 1; right: -27%; top: -16%; border-radius: 50%; background: #4a7d2e; pointer-events: none;
}
.vh-card > * { position: relative; }
.vh-loc { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 600; color: #eaf0fa; }
.vh-loc i { color: var(--vz-orange); font-size: 18px; }
.vh-city { margin: 6px 0 0; line-height: 1.02; font-weight: 800; color: var(--vz-orange); font-size: clamp(36px, 11.5vw, 46px); letter-spacing: -.8px; }
.vh-city small { font-size: .42em; font-weight: 800; color: #fff; letter-spacing: 0; margin-left: 1px; }
.vh-card .home-weather[hidden] { display: none; }
.vh-card .home-weather {
  display: inline-flex; align-items: center; gap: 7px; margin: 14px 0 0; padding: 7px 13px; border-radius: 999px;
  background: rgba(255, 255, 255, .14); color: #fff; font-size: 13px; font-weight: 700;
}
.vh-card .home-weather i { font-size: 16px; color: #ffd9ae; }
.vh-card .home-weather .home-weather-src { display: none; }
.vh-search {
  position: relative; display: flex; align-items: center; gap: 10px; margin: 20px 0 0; padding: 6px 6px 6px 18px; height: 58px;
  border-radius: 999px; background: #fff; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .45);
}
.vh-search > i { color: #6c7b93; font-size: 21px; flex: 0 0 auto; }
.vh-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 500 15px/1.2 'Inter', system-ui, sans-serif; color: var(--vz-ink); padding: 0; }
.vh-search input::placeholder { color: #8493a8; }
.vh-search input::-webkit-search-cancel-button { display: none; }
.vh-go {
  flex: 0 0 auto; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--vz-orange-d); color: #fff; font-size: 20px;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .15s ease;
}
.vh-go:active { transform: scale(.93); }
.vh-go:focus-visible { outline: 3px solid var(--vz-orange); outline-offset: 2px; }

/* o conteúdo da home passa a começar logo abaixo do cartão */
.vh ~ .main-content { padding-top: 22px; margin-top: 0; border-radius: 0; background: transparent; }
.vh ~ .main-content .collapsible-inner { display: block; overflow: visible; }

@media (max-width: 359px) {
  .vh { padding-left: 14px; padding-right: 14px; }
  .vh .vu-rv-btn-top span:not(.vu-rv-chip) { font-size: 13px; }
  .vh .vu-rv-btn-top { padding: 0 12px 0 11px; }
}
@media (min-width: 768px) {
  .vh { padding-left: var(--page-pad, 32px); padding-right: var(--page-pad, 32px); padding-top: 28px; }
  .vh-card { max-width: 860px; padding: 30px 34px 28px; }
  .vh-city { font-size: 64px; }
  .vh-search { max-width: 640px; height: 62px; }
}

/* ------------------------------------------------------------------ 2. Categorias da home */
.vc-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 14px; }
.vc-head h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.3px; color: var(--vz-ink); }
.vc-head a { color: var(--vz-green); font-size: 14px; font-weight: 800; text-decoration: none; padding: 4px 0; }
.vc-list { display: grid; gap: 14px; margin-bottom: 30px; }
.vc-card {
  display: flex; align-items: center; gap: 16px; padding: 12px 14px 12px 12px; border-radius: 26px; background: #fff; text-decoration: none; color: var(--vz-ink);
  box-shadow: var(--vz-shadow); transition: transform .15s ease, box-shadow .15s ease; -webkit-tap-highlight-color: transparent;
}
.vc-card:active { transform: scale(.985); }
.vc-card:focus-visible { outline: 3px solid var(--vz-orange); outline-offset: 2px; }
.vc-img { flex: 0 0 auto; width: 118px; height: 94px; border-radius: 18px; overflow: hidden; background: #e8eef6; }
.vc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vc-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.vc-txt b { font-size: 18px; line-height: 1.16; font-weight: 800; letter-spacing: -.2px; color: var(--vz-ink); }
.vc-txt small { font-size: 13.5px; font-weight: 700; color: var(--vz-muted); line-height: 1.25; }
.vc-txt small.vc-red { color: #c4252f; }
.vc-go { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: #eff2f8; color: var(--vz-ink); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; }
@media (min-width: 768px) {
  .vc-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vc-card { flex-direction: column; align-items: stretch; text-align: left; padding: 12px 12px 16px; }
  .vc-img { width: 100%; height: 150px; }
  .vc-txt { padding: 4px 6px 0; }
  .vc-go { display: none; }
}
@media (max-width: 359px) {
  .vc-img { width: 96px; height: 80px; }
  .vc-txt b { font-size: 16px; }
}

/* ------------------------------------------------------------------ 3. Cabeçalho das páginas internas */
.header-inner.vp {
  display: block; position: relative; overflow: hidden; margin: 0; border-radius: 0;
  padding: max(16px, env(safe-area-inset-top, 0px)) 20px 14px; background: var(--vz-bg); color: var(--vz-ink); min-height: 0;
}
/* V104: sem bolas coloridas de fundo no cabeçalho das páginas */
.header-inner.vp::before, .header-inner.vp::after { content: none !important; display: none !important; background: none !important; }
.header-inner.vp > * { position: relative; z-index: 1; }
.vp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.header-inner.vp .back-btn {
  width: 48px; height: 48px; border-radius: 50%; background: #fff; color: var(--vz-ink); font-size: 19px; display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; box-shadow: 0 8px 20px -8px rgba(27, 59, 100, .35); flex: 0 0 auto;
}
.header-inner.vp .back-btn:active { transform: scale(.94); }
.header-inner.vp .back-btn:focus-visible, .header-inner.vp .header-cta:focus-visible { outline: 3px solid var(--vz-orange); outline-offset: 2px; }
.header-inner.vp .header-cta {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 20px 0 16px; border-radius: 999px;
  background: var(--vz-orange-d); color: #fff; font-size: 15px; font-weight: 800; text-decoration: none; box-shadow: 0 12px 22px -10px rgba(200, 90, 12, .8);
}
.header-inner.vp .header-cta i { font-size: 21px; }
.vp-loc { display: flex; align-items: center; gap: 7px; margin: 18px 0 4px; font-size: 14px; font-weight: 700; color: var(--vz-muted); }
.vp-loc i { color: var(--vz-orange-d); font-size: 16px; }
.header-inner.vp h1 { margin: 0; font-size: clamp(27px, 8.6vw, 36px); line-height: 1.08; font-weight: 800; letter-spacing: -.6px; color: var(--vz-ink); }
.header-inner.vp h1 em { font-style: normal; color: var(--vz-orange-d); }
.header-inner.vp ~ .professionals-container,
.header-inner.vp ~ main { margin-top: 0; border-radius: 0; background: var(--vz-bg); padding-top: 14px; }
.app-container:has(> .header-inner.vp) { background-color: var(--vz-bg) !important; }
@media (min-width: 768px) {
  .header-inner.vp { padding: 28px var(--page-pad, 32px) 18px; }
  .header-inner.vp h1 { font-size: 44px; }
}

/* barra de pesquisa das páginas (mesmo estilo do cabeçalho) */
.vu-search {
  height: 58px; padding: 6px 7px 6px 20px; gap: 10px; border: 0; border-radius: 999px; background: #fff; margin-bottom: 18px;
  box-shadow: 0 12px 26px -14px rgba(27, 59, 100, .35);
}
.vu-search:focus-within { box-shadow: 0 0 0 3px rgba(235, 130, 35, .35), 0 12px 26px -14px rgba(27, 59, 100, .35); border: 0; }
.vu-search > i { color: #6c7b93; font-size: 20px; }
.vu-search input { font-size: 15px; font-weight: 500; color: var(--vz-ink); }
.vu-search input::placeholder { color: #8493a8; }
.vu-search-filter {
  flex: 0 0 auto; width: 46px; height: 46px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--vz-navy); color: #fff; font-size: 20px;
  display: inline-flex; align-items: center; justify-content: center;
}
.vu-search-filter.is-on { background: var(--vz-orange-d); color: #fff; }

/* título da lista + filtro de bairro em pílula */
.vl-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 14px; }
.vl-head h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.3px; color: var(--vz-ink); }
.vl-head .bairro-wrap { flex: 0 1 auto; width: auto; max-width: 62%; min-width: 196px; }
.vl-head .vu-select, .vl-head .vus-trigger {
  background-color: #fff; border: 1.5px solid var(--vz-line); border-radius: 999px; padding: 10px 16px; font-size: 13.5px; font-weight: 800; color: var(--vz-ink);
  box-shadow: 0 6px 14px -10px rgba(27, 59, 100, .5);
}
.vl-head .vus { width: auto; }
.vl-head .vus-trigger { white-space: nowrap; gap: 12px; }
.vl-head .vus-panel { left: auto; right: 0; min-width: 230px; }
.filter-bar.vl-bar { margin-bottom: 0; }

/* ------------------------------------------------------------------ 4. Cards de estabelecimentos */
.ve {
  position: relative; background: #fff; border-radius: 26px; padding: 16px 14px 14px; margin: 0 0 16px; box-shadow: var(--vz-shadow);
}
.ve.is-featured { box-shadow: 0 0 0 2px rgba(242, 138, 46, .5), var(--vz-shadow); }
.ve-top { display: flex; gap: 14px; align-items: flex-start; }
.ve-logo {
  position: relative; flex: 0 0 100px; width: 100px; height: 100px; border-radius: 20px; overflow: hidden; background: #eef1f6; display: block;
}
.ve-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ve-logo .ve-logo-bg { object-fit: cover; filter: blur(14px) saturate(1.1); transform: scale(1.25); opacity: .55; }
.ve-logo--art { background: linear-gradient(135deg, #e8f0fb, #f4f7fc); }
.ve-logo--art img { object-fit: contain; padding: 10px; }
.ve-24 {
  position: absolute; left: 12px; top: -9px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px 0 8px;
  border-radius: 10px 10px 10px 4px; background: var(--vz-red); color: #fff; font-size: 13px; font-weight: 800; box-shadow: 0 6px 12px -6px rgba(214, 40, 57, .8);
}
.ve-24 i { font-size: 14px; }
.ve-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; padding-top: 2px; }
.ve-name { margin: 0; font-size: 17px; line-height: 1.2; font-weight: 800; letter-spacing: -.2px; color: var(--vz-ink); overflow-wrap: anywhere; }
.ve-st {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 800;
  background: var(--vz-green-soft); color: #1e8a43;
}
.ve-st::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ve-st.is-closed { background: #fde7e8; color: #c4252f; }
.ve-cat { margin: 0; font-size: 13px; font-weight: 700; color: #51607a; line-height: 1.3; }
.ve-an { margin: 0; font-size: 12.5px; color: #51607a; line-height: 1.35; }
.ve-an b { color: var(--vz-ink); }
.ve-act { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.ve-btn, .vv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; border-radius: 999px; font: 800 15px/1 'Inter', system-ui, sans-serif;
  text-decoration: none; cursor: pointer; border: 1.5px solid var(--vz-line); background: #fff; color: var(--vz-ink); -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease;
}
.ve-btn:active, .vv-btn:active { transform: scale(.97); }
.ve-btn:focus-visible, .vv-btn:focus-visible { outline: 3px solid var(--vz-orange); outline-offset: 2px; }
.ve-btn--green, .vv-btn--green { background: var(--vz-green); border-color: var(--vz-green); color: #fff; }
.ve-btn--navy { background: var(--vz-navy); border-color: var(--vz-navy); color: #fff; }
.ve-btn i, .vv-btn i { font-size: 18px; }

/* grade nas telas grandes: sobrescreve a regra antiga (que fazia tudo que não é .pro-card ocupar a linha toda) */
#clinicsList > .ve, #pharmaciesList > .ve, #hotelList > .ve, #banhoList > .ve, #lojaList > .ve, #petsitterList > .ve, #taxiList > .ve,
#funerariaList > .ve, #representanteList > .ve, #grandesList > .ve { grid-column: auto; margin-bottom: 0; }
@media (max-width: 767px) {
  #clinicsList > .ve, #pharmaciesList > .ve, #hotelList > .ve, #banhoList > .ve, #lojaList > .ve { margin-bottom: 16px; }
}
@media (max-width: 359px) {
  .ve-logo { flex-basis: 84px; width: 84px; height: 84px; }
  .ve-name { font-size: 15.5px; }
  .ve-btn, .vv-btn { height: 46px; font-size: 14px; }
}

/* ------------------------------------------------------------------ 5. Cards de veterinários / pessoas */
.person-list.vv-list { display: grid; gap: 16px; padding: 0; background: transparent; border-radius: 0; box-shadow: none; border: 0; overflow: visible; }
@media (min-width: 768px) { .person-list.vv-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .person-list.vv-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vv { background: #fff; border-radius: 26px; padding: 16px 14px 14px; box-shadow: var(--vz-shadow); position: relative; margin: 0; border: 0; }
.vv.is-featured { box-shadow: 0 0 0 2px rgba(242, 138, 46, .5), var(--vz-shadow); }
.vv-top { display: flex; gap: 14px; align-items: center; }
.vv-av {
  flex: 0 0 66px; width: 66px; height: 66px; border-radius: 50%; overflow: hidden; background: #e3ebf6; color: #8aa0bf; display: inline-flex; align-items: center; justify-content: center; font-size: 32px;
  box-shadow: 0 0 0 3px #fff, 0 6px 14px -6px rgba(27, 59, 100, .5);
}
.vv-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vv-id { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.vv-kind { font-size: 10.5px; letter-spacing: .08em; font-weight: 800; color: #62728c; text-transform: uppercase; line-height: 1.2; }
.vv-name { margin: 0; font-size: 18px; line-height: 1.18; font-weight: 800; letter-spacing: -.2px; color: var(--vz-ink); overflow-wrap: anywhere; }
.vv-spec { margin: 0; font-size: 13.5px; font-weight: 500; color: #51607a; line-height: 1.3; }
.vv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.vv-chips span { padding: 6px 12px; border-radius: 999px; background: #eaf0fa; color: var(--vz-ink); font-size: 12.5px; font-weight: 700; line-height: 1.2; }
.vv-chips span.vv-more { background: #f1f3f8; color: #62728c; }
.vv-at { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: 16px; background: #f3f5f9; }
.vv-at .vv-atl { font-size: 10.5px; letter-spacing: .08em; font-weight: 800; color: #62728c; text-transform: uppercase; margin-right: 2px; }
.vv-at span:not(.vv-atl) { padding: 5px 11px; border-radius: 999px; background: #fff; color: var(--vz-ink); font-size: 12.5px; font-weight: 700; }
.vv-act { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }

/* ------------------------------------------------------------------ 6. Janela de detalhes (Sobre / Serviços / Contato) */
body.vd-lock { overflow: hidden; }
.vd-wrap {
  position: fixed; inset: 0; z-index: 2000; display: flex; align-items: stretch; justify-content: center; background: rgba(15, 30, 50, .55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .22s ease;
}
.vd-wrap.is-open { opacity: 1; }
.vd {
  position: relative; width: 100%; max-width: 480px; height: 100%; display: flex; flex-direction: column; overflow: hidden; background: var(--vz-bg); color: var(--vz-ink);
  transform: translateY(24px); transition: transform .3s cubic-bezier(.22, 1, .36, 1); font-family: 'Inter', system-ui, sans-serif;
}
.vd-wrap.is-open .vd { transform: none; }
.vd-scroll { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: max(16px, env(safe-area-inset-top, 0px)) 20px 24px; }
.vd-bar { display: flex; align-items: center; gap: 10px; }
.vd-bar .vd-sp { flex: 1; }
.vd-ib {
  width: 46px; height: 46px; border-radius: 50%; border: 0; background: #fff; color: var(--vz-ink); font-size: 19px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 8px 20px -8px rgba(27, 59, 100, .35); -webkit-tap-highlight-color: transparent;
}
.vd-ib:active { transform: scale(.94); }
.vd-ib:focus-visible, .vd-tab:focus-visible, .vd-link:focus-visible { outline: 3px solid var(--vz-orange); outline-offset: 2px; }
.vd-ib.is-on { color: #e5252a; }
.vd-id { display: flex; align-items: center; gap: 16px; margin-top: 22px; }
.vd-id .ve-logo { flex-basis: 84px; width: 84px; height: 84px; border-radius: 22px; overflow: visible; }
.vd-id .ve-logo img { border-radius: 22px; }
.vd-id .ve-24 { left: -8px; top: -10px; }
.vd-av { flex: 0 0 84px; width: 84px; height: 84px; border-radius: 50%; overflow: hidden; background: #e3ebf6; color: #8aa0bf; font-size: 40px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 4px #fff; }
.vd-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vd-name { margin: 0; font-size: 23px; line-height: 1.16; font-weight: 800; letter-spacing: -.4px; color: var(--vz-ink); overflow-wrap: anywhere; }
.vd-kind { display: block; margin-bottom: 4px; font-size: 10.5px; letter-spacing: .08em; font-weight: 800; color: #62728c; text-transform: uppercase; }
.vd-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.vd-meta .ve-cat { font-size: 13.5px; }
.vd-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 18px; padding: 5px; border-radius: 999px; background: #dfe7f5; }
.vd-tab { height: 44px; border: 0; border-radius: 999px; background: transparent; color: #4d5f7c; font: 800 14px/1 'Inter', system-ui, sans-serif; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.vd-tab[aria-selected="true"] { background: #fff; color: var(--vz-ink); box-shadow: 0 6px 14px -8px rgba(27, 59, 100, .55); }
.vd-pane { margin-top: 16px; display: grid; gap: 14px; }
.vd-pane[hidden] { display: none; }
.vd-card { background: #fff; border-radius: 24px; padding: 6px 16px; box-shadow: var(--vz-shadow); }
.vd-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; }
.vd-row + .vd-row { border-top: 1px solid #eef1f6; }
.vd-ico { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 14px; background: #eaf0fa; color: var(--vz-ink); display: inline-flex; align-items: center; justify-content: center; font-size: 19px; }
.vd-lab { display: block; font-size: 10.5px; letter-spacing: .1em; font-weight: 800; color: #62728c; text-transform: uppercase; margin-bottom: 3px; }
.vd-val { display: block; font-size: 15px; line-height: 1.35; font-weight: 800; color: var(--vz-ink); overflow-wrap: anywhere; }
.vd-val a { color: inherit; text-decoration: none; }
.vd-txt { margin: 0; padding: 12px 0; font-size: 14.5px; line-height: 1.6; color: #3d4c66; white-space: pre-line; }
.vd-map { background: #fff; border-radius: 26px; padding: 12px; box-shadow: var(--vz-shadow); }
.vd-map-art { position: relative; height: 150px; border-radius: 18px; overflow: hidden; background: #e5ecf6; }
.vd-map-art svg { width: 100%; height: 100%; display: block; }
.vd-link {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 50px; margin-top: 12px; border-radius: 999px; border: 1.5px solid var(--vz-line); background: #fff; color: var(--vz-ink);
  font: 800 14.5px/1 'Inter', system-ui, sans-serif; text-decoration: none;
}
.vd-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 0; }
.vd-chips span { padding: 8px 14px; border-radius: 999px; background: #eaf0fa; color: var(--vz-ink); font-size: 13px; font-weight: 700; }
.vd-chips span.is-24 { background: #fde7e8; color: #c4252f; }
.vd-sub { margin: 0; padding: 14px 0 0; font-size: 10.5px; letter-spacing: .1em; font-weight: 800; color: #62728c; text-transform: uppercase; }
.vd-empty { margin: 0; padding: 16px 0; font-size: 14px; color: var(--vz-muted); line-height: 1.5; }
.vd-foot {
  position: relative; flex: 0 0 auto; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 12px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  background: #fff; border-radius: 28px 28px 0 0; box-shadow: 0 -16px 30px -18px rgba(27, 59, 100, .4);
}
.vd-foot .ve-btn { border: 0; }
.vd-foot:empty { display: none; }
@media (min-width: 560px) {
  .vd-wrap { align-items: center; padding: 20px; }
  .vd { height: auto; max-height: min(880px, calc(100vh - 40px)); border-radius: 32px; box-shadow: 0 40px 90px -20px rgba(0, 0, 0, .55); }
  .vd-foot { border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) { .vd-wrap, .vd { transition: none; } }

/* ------------------------------------------------------------------ 7. Notificações */
body.vn-lock { overflow: hidden; }
.vn-wrap {
  position: fixed; inset: 0; z-index: 2100; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 30, 50, .58);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .22s ease;
}
.vn-wrap.is-open { opacity: 1; }
.vn {
  position: relative; width: 100%; max-width: 460px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; overflow: hidden;
  background: var(--vz-bg); border-radius: 30px; color: var(--vz-ink); box-shadow: 0 40px 90px -20px rgba(0, 0, 0, .55);
  transform: translateY(20px) scale(.97); transition: transform .3s cubic-bezier(.2, .9, .3, 1.2); font-family: 'Inter', system-ui, sans-serif;
}
.vn-wrap.is-open .vn { transform: none; }
.vn-head { display: flex; align-items: center; gap: 12px; padding: 18px 18px 12px 22px; }
.vn-head h2 { margin: 0; flex: 1; font-size: 21px; font-weight: 800; letter-spacing: -.3px; }
.vn-x { width: 42px; height: 42px; border: 0; border-radius: 50%; background: #fff; color: var(--vz-ink); font-size: 18px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 16px -8px rgba(27, 59, 100, .4); }
.vn-x:focus-visible, .vn-btn:focus-visible { outline: 3px solid var(--vz-orange); outline-offset: 2px; }
.vn-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 4px 16px 20px; display: grid; gap: 12px; align-content: start; }
.vn-item { position: relative; background: #fff; border-radius: 22px; padding: 16px; box-shadow: var(--vz-shadow); display: grid; gap: 10px; }
.vn-item.is-new { box-shadow: 0 0 0 2px rgba(229, 37, 42, .35), var(--vz-shadow); }
.vn-top { display: flex; align-items: center; gap: 12px; }
.vn-ico { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; font-size: 19px; background: #eaf0fa; color: var(--vz-navy); }
.vn-ico--novidade { background: #e0f3e4; color: #2c7a37; }
.vn-ico--evento { background: #e8e5fb; color: #5a43c4; }
.vn-ico--alerta { background: #fde7e8; color: #c4252f; }
.vn-ico--promocao { background: #fff0dc; color: #c85a0c; }
.vn-tt { min-width: 0; }
.vn-tt h3 { margin: 0; font-size: 16.5px; line-height: 1.25; font-weight: 800; letter-spacing: -.2px; overflow-wrap: anywhere; }
.vn-tt time { display: block; margin-top: 3px; font-size: 12px; font-weight: 700; color: #6c7b93; }
.vn-pin { margin-left: auto; flex: 0 0 auto; font-size: 11px; font-weight: 800; color: var(--vz-orange-d); background: #fff0dc; padding: 4px 9px; border-radius: 999px; }
.vn-new { position: absolute; top: 14px; right: 14px; width: 10px; height: 10px; border-radius: 50%; background: #e5252a; }
.vn-pin + .vn-new { display: none; }
.vn-txt { margin: 0; font-size: 14.5px; line-height: 1.6; color: #34445f; white-space: pre-line; overflow-wrap: anywhere; }
.vn-imgs { display: grid; gap: 8px; }
.vn-imgs.n2, .vn-imgs.n4 { grid-template-columns: 1fr 1fr; }
.vn-imgs.n3 { grid-template-columns: 1fr 1fr; }
.vn-imgs.n3 img:first-child { grid-column: 1 / -1; }
.vn-imgs img { width: 100%; height: auto; max-height: 340px; object-fit: cover; border-radius: 16px; background: #e8eef6; display: block; }
.vn-imgs.n1 img { max-height: 420px; }
.vn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: 999px; background: var(--vz-green); color: #fff; font: 800 14.5px/1 'Inter', system-ui, sans-serif; text-decoration: none; justify-self: start; }
.vn-empty { text-align: center; padding: 38px 20px 44px; color: var(--vz-muted); }
.vn-empty i { display: block; font-size: 46px; color: #b4c0d4; margin-bottom: 10px; }
.vn-empty b { display: block; color: var(--vz-ink); font-size: 16px; margin-bottom: 4px; }
.vn-empty p { margin: 0; font-size: 14px; line-height: 1.5; }
.vn-load { text-align: center; padding: 30px; color: var(--vz-muted); font-size: 14px; }
@media (max-width: 480px) {
  .vn-wrap { align-items: flex-end; padding: 0; }
  .vn { max-width: none; max-height: 90vh; max-height: 90dvh; border-radius: 30px 30px 0 0; }
}
@media (prefers-reduced-motion: reduce) { .vn-wrap, .vn, .vh-bell.has-new i { transition: none; animation: none; } }

.ve-act--1, .vv-act--1 { grid-template-columns: 1fr; }
.vd-toast {
  position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 2300; transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  max-width: calc(100vw - 40px); padding: 12px 20px; border-radius: 999px; background: #0f2a4a; color: #fff; font: 700 14px/1.3 'Inter', system-ui, sans-serif; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .55);
  transition: opacity .25s ease, transform .25s ease;
}
.vd-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* V106 — Home: "Outros Serviços" (todos na tela) e "Atalhos" em cartões */
.hsv, .hat { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hsv { margin-bottom: 30px; }
.hat { margin-bottom: 12px; }
.hsv-card, .hat-card { min-width: 0; background: #fff; box-shadow: var(--vz-shadow); color: var(--vz-navy); text-decoration: none; -webkit-tap-highlight-color: transparent; transition: transform .15s ease; }
.hsv-card:active, .hat-card:active { transform: scale(.97); }
.hsv-card:focus-visible, .hat-card:focus-visible { outline: 3px solid var(--vz-orange); outline-offset: 2px; }
.hsv-card { display: flex; flex-direction: column; padding: 10px 10px 14px; border-radius: 28px; }
.hsv-img { display: flex; align-items: center; justify-content: center; height: 112px; border-radius: 20px; background: #e6effc; }
.hsv-card:nth-child(5n+2) .hsv-img { background: #e3f4e6; }
.hsv-card:nth-child(5n+3) .hsv-img { background: #fff0e0; }
.hsv-card:nth-child(5n+4) .hsv-img { background: #efe9fb; }
.hsv-card:nth-child(5n+5) .hsv-img { background: #e8f4f8; }
.hsv-img img { max-width: 86%; max-height: 88%; width: auto; height: auto; object-fit: contain; display: block; }
.hsv-t { display: block; min-height: 34px; margin: 12px 4px 4px; font-size: 15px; font-weight: 800; line-height: 1.15; letter-spacing: -.2px; }
.hsv-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: auto 4px 0; }
.hsv-foot small { flex: 1; min-width: 0; font-size: 11.5px; font-weight: 600; line-height: 1.25; color: var(--vz-muted); }
.hsv-go { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--vz-orange-d); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; box-shadow: 0 8px 16px -8px rgba(200, 90, 12, .8); }
.hat-card { display: block; padding: 14px; border: 0; border-radius: 24px; text-align: left; font: inherit; cursor: pointer; position: relative; }
.hat-card--sangue { box-shadow: var(--vz-shadow), inset 0 0 0 1.5px #f3c9cd; }
.hat-ico { display: block; }
.hat-ico img { width: 54px; height: 54px; object-fit: contain; display: block; }
.hat-ar { position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; border-radius: 50%; background: #eff2f8; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.hat-card b { display: block; margin-top: 12px; padding-right: 4px; font-size: 14.5px; font-weight: 800; line-height: 1.15; letter-spacing: -.2px; }
.hat-card small { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 600; line-height: 1.25; color: var(--vz-muted); }
@media (max-width: 599px) {
  /* o último cartão ímpar ocupa a linha inteira */
  .hsv-card:last-child:nth-child(odd), .hat-card:last-child:nth-child(odd) { grid-column: 1 / -1; display: grid; align-items: center; column-gap: 14px; }
  .hsv-card:last-child:nth-child(odd) { grid-template-columns: 76px 1fr 32px; padding: 12px 14px 12px 12px; border-radius: 26px; }
  .hsv-card:last-child:nth-child(odd) .hsv-img { grid-column: 1; grid-row: 1 / 3; height: 76px; border-radius: 20px; }
  .hsv-card:last-child:nth-child(odd) .hsv-t { grid-column: 2; grid-row: 1; min-height: 0; margin: 0; align-self: end; }
  .hsv-card:last-child:nth-child(odd) .hsv-foot { display: contents; }
  .hsv-card:last-child:nth-child(odd) .hsv-foot small { grid-column: 2; grid-row: 2; align-self: start; margin-top: 3px; }
  .hsv-card:last-child:nth-child(odd) .hsv-go { grid-column: 3; grid-row: 1 / 3; }
  .hat-card:last-child:nth-child(odd) { grid-template-columns: 54px 1fr 28px; padding: 12px 14px; }
  .hat-card:last-child:nth-child(odd) .hat-ico { grid-column: 1; grid-row: 1 / 3; }
  .hat-card:last-child:nth-child(odd) b { grid-column: 2; grid-row: 1; margin: 0; align-self: end; }
  .hat-card:last-child:nth-child(odd) small { grid-column: 2; grid-row: 2; align-self: start; }
  .hat-card:last-child:nth-child(odd) .hat-ar { position: static; grid-column: 3; grid-row: 1 / 3; }
}
@media (min-width: 600px) { .hsv { grid-template-columns: repeat(3, 1fr); } .hat { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 340px) { .hsv-img { height: 96px; } .hsv-t { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .hsv-card, .hat-card { transition: none; } }
.hat-card--tel { text-decoration: none; box-shadow: var(--vz-shadow), inset 0 0 0 1.5px #f3c9cd; }
.hat-ph { width: 54px; height: 54px; border-radius: 16px; background: #fde8ea; color: #d62839; display: flex; align-items: center; justify-content: center; font-size: 30px; }