/* =====================================================================================
   VetCuritiba — 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: #e7ecf6;
  padding: max(18px, env(safe-area-inset-top, 0px)) 20px 4px;
  color: #0b1220}
.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 .vp-rv-btn-top {
  position: static; top: auto; right: auto; height: 46px; padding: 0 16px 0 14px; gap: 8px;
  border: 0; background: #ffffff; color: #0b1220; font-size: 14px; font-weight: 800;
  box-shadow: 0 8px 20px -8px rgba(11,18,32,0.35)}
.vh .vp-rv-btn-top svg { width: 17px; height: 17px; fill: #8a6400}

.vh-bell {
  position: relative; width: 46px; height: 46px; border: 0; border-radius: 50%; background: #ffffff; color: #0b1220;
  display: inline-flex; align-items: center; justify-content: center; font-size: 21px; cursor: pointer;
  box-shadow: 0 8px 20px -8px rgba(11,18,32,0.35); -webkit-tap-highlight-color: transparent; transition: transform .15s ease}
.vh-bell:active { transform: scale(.94)}
.vh-bell:focus-visible, .vh .vp-rv-btn-top:focus-visible { outline: 3px solid #e8b923; outline-offset: 2px}
.vh-dot {
  position: absolute; top: 9px; right: 10px; min-width: 11px; height: 11px; border-radius: 50%; background: #e5252a;
  border: 2px solid #d8dfee; 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: #ffffff;
  background: linear-gradient(155deg, #17233f 0%, #17233f 100%);
  box-shadow: 0 22px 36px -18px rgba(11,18,32,0.65)}
.vh-card::before {
  content: ''; position: absolute; width: 64%; aspect-ratio: 1; right: -27%; top: -16%; border-radius: 50%; background: #2c9a4a; 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: #8a6400; font-size: 18px}
.vh-city { margin: 6px 0 0; line-height: 1.02; font-weight: 800; color: #8a6400; font-size: clamp(36px, 11.5vw, 46px); letter-spacing: -.8px}
.vh-city small { font-size: .42em; font-weight: 800; color: #ffffff; 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,0.14); color: #ffffff; font-size: 13px; font-weight: 700}
.vh-card .home-weather i { font-size: 16px; color: #8a6400}
.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: #ffffff; box-shadow: 0 10px 24px -12px rgba(11,18,32,0.45)}
.vh-search > i { color: #566883; 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: #0b1220; padding: 0}
.vh-search input::placeholder { color: #566883}
.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: #e8b923; color:#0b1220; 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 #e8b923; 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 .vp-rv-btn-top span:not(.vp-rv-chip) { font-size: 13px}
  .vh .vp-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: #0b1220}
.vc-head a { color: #1f7a37; 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: #ffffff; text-decoration: none; color: #0b1220;
  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 #e8b923; outline-offset: 2px}
.vc-img { flex: 0 0 auto; width: 118px; height: 94px; border-radius: 18px; overflow: hidden; background: #e3ebfd}
.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: #0b1220}
.vc-txt small { font-size: 13.5px; font-weight: 700; color: #566883; 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: #e3ebfd; color: #0b1220; 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}
}
/* V125: cartão de Laboratórios (botão) e 4 colunas no computador */
.vc-card--btn { width: 100%; border: 0; font: inherit; text-align: left; cursor: pointer}
@media (min-width: 768px) and (max-width: 1023px) {
  .vc-list { grid-template-columns: repeat(2, minmax(0, 1fr))}
}
@media (min-width: 1024px) {
  .vc-list { grid-template-columns: repeat(4, minmax(0, 1fr))}
}
/* V125: cabeçalho centralizado na versão para computador */
@media (min-width: 1024px) {
  .vh-card { margin-left: auto; margin-right: auto; text-align: center}
  .vh-loc { justify-content: center}
  .vh-card .home-weather { margin-left: auto; margin-right: auto}
  .vh-search { margin-left: auto; margin-right: auto}
  .vp-loc { justify-content: center}
  .header-inner.vp h1 { text-align: center}
}
@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: #e7ecf6; color: #0b1220; 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: #ffffff; color: #0b1220; font-size: 19px; display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; box-shadow: 0 8px 20px -8px rgba(11,18,32,0.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 #e8b923; 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: #e8b923; color:#0b1220; font-size: 15px; font-weight: 800; text-decoration: none; box-shadow: 0 12px 22px -10px rgba(232,185,35,0.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: #566883}
.vp-loc i { color: #8a6400; 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: #0b1220}
.header-inner.vp h1 em { font-style: normal; color: #8a6400}
.header-inner.vp ~ .professionals-container,
.header-inner.vp ~ main { margin-top: 0; border-radius: 0; background: #e7ecf6; padding-top: 14px}
.app-container:has(> .header-inner.vp) { background-color: #e7ecf6 !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) */
.vp-search {
  height: 58px; padding: 6px 7px 6px 20px; gap: 10px; border: 0; border-radius: 999px; background: #ffffff; margin-bottom: 18px;
  box-shadow: 0 12px 26px -14px rgba(11,18,32,0.35)}
.vp-search:focus-within { box-shadow: 0 0 0 3px rgba(232,185,35,0.35), 0 12px 26px -14px rgba(11,18,32,0.35); border: 0}
.vp-search > i { color: #566883; font-size: 20px}
.vp-search input { font-size: 15px; font-weight: 500; color: #0b1220}
.vp-search input::placeholder { color: #566883}
.vp-search-filter {
  flex: 0 0 auto; width: 46px; height: 46px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: #17233f; color: #ffffff; font-size: 20px;
  display: inline-flex; align-items: center; justify-content: center}
.vp-search-filter.is-on { background: #e8b923; color:#0b1220}

/* 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: #0b1220}
.vl-head .bairro-wrap { flex: 0 1 auto; width: auto; max-width: 62%; min-width: 196px}
.vl-head .vp-select, .vl-head .vps-trigger {
  background-color: #ffffff; border: 1.5px solid #d8dfee; border-radius: 999px; padding: 10px 16px; font-size: 13.5px; font-weight: 800; color: #0b1220;
  box-shadow: 0 6px 14px -10px rgba(11,18,32,0.5)}
.vl-head .vps { width: auto}
.vl-head .vps-trigger { white-space: nowrap; gap: 12px}
.vl-head .vps-panel { left: auto; right: 0; min-width: 230px}
.filter-bar.vl-bar { margin-bottom: 0}

/* ------------------------------------------------------------------ 4. Cards de estabelecimentos */
.ve {
  position: relative; background: #ffffff; 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(232,185,35,0.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: #ebeff8; 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, #e3ebfd, #f8f9fd)}
.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: #d62839; color: #ffffff; font-size: 13px; font-weight: 800; box-shadow: 0 6px 12px -6px rgba(214,40,57,0.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: #0b1220; 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: #d9f6e8; color: #1f7a37}
.ve-st::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor}
.ve-st.is-closed { background: #fde5e1; color: #c4252f}
.ve-cat { margin: 0; font-size: 13px; font-weight: 700; color: #566883; line-height: 1.3}
.ve-an { margin: 0; font-size: 12.5px; color: #566883; line-height: 1.35}
.ve-an b { color: #0b1220}
.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 #d8dfee; background: #ffffff; color: #0b1220; -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 #e8b923; outline-offset: 2px}
.ve-btn--green, .vv-btn--green { background: #2c9a4a; border-color: #2c9a4a; color: #ffffff}
.ve-btn--navy { background: #17233f; border-color: #0b1220; color: #ffffff}
.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: #ffffff; 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(232,185,35,0.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: #e3ebfd; color: #566883; display: inline-flex; align-items: center; justify-content: center; font-size: 32px;
  box-shadow: 0 0 0 3px #ffffff, 0 6px 14px -6px rgba(11,18,32,0.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: #566883; 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: #0b1220; overflow-wrap: anywhere}
.vv-spec { margin: 0; font-size: 13.5px; font-weight: 500; color: #566883; 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: #e3ebfd; color: #0b1220; font-size: 12.5px; font-weight: 700; line-height: 1.2}
.vv-chips span.vv-more { background: #e7ecf6; color: #566883}
.vv-at { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: 16px; background: #e7ecf6}
.vv-at .vv-atl { font-size: 10.5px; letter-spacing: .08em; font-weight: 800; color: #566883; text-transform: uppercase; margin-right: 2px}
.vv-at span:not(.vv-atl) { padding: 5px 11px; border-radius: 999px; background: #ffffff; color: #0b1220; 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(11,18,32,0.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: #e7ecf6; color: #0b1220;
  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: #ffffff; color: #0b1220; font-size: 19px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 8px 20px -8px rgba(11,18,32,0.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 #e8b923; 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: #e3ebfd; color: #566883; font-size: 40px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 4px #ffffff}
.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: #0b1220; overflow-wrap: anywhere}
.vd-kind { display: block; margin-bottom: 4px; font-size: 10.5px; letter-spacing: .08em; font-weight: 800; color: #566883; 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: #e3ebfd}
.vd-tab { height: 44px; border: 0; border-radius: 999px; background: transparent; color: #566883; 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: #ffffff; color: #0b1220; box-shadow: 0 6px 14px -8px rgba(11,18,32,0.55)}
.vd-pane { margin-top: 16px; display: grid; gap: 14px}
.vd-pane[hidden] { display: none}
.vd-card { background: #ffffff; 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 #d8dfee}
.vd-ico { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 14px; background: #e3ebfd; color: #0b1220; 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: #566883; text-transform: uppercase; margin-bottom: 3px}
.vd-val { display: block; font-size: 15px; line-height: 1.35; font-weight: 800; color: #0b1220; 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: #0b1220; white-space: pre-line}
.vd-map { background: #ffffff; border-radius: 26px; padding: 12px; box-shadow: var(--vz-shadow)}
.vd-map-art { position: relative; height: 150px; border-radius: 18px; overflow: hidden; background: #e3ebfd}
.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 #d8dfee; background: #ffffff; color: #0b1220;
  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: #e3ebfd; color: #0b1220; font-size: 13px; font-weight: 700}
.vd-chips span.is-24 { background: #fde5e1; color: #c4252f}
.vd-sub { margin: 0; padding: 14px 0 0; font-size: 10.5px; letter-spacing: .1em; font-weight: 800; color: #566883; text-transform: uppercase}
.vd-empty { margin: 0; padding: 16px 0; font-size: 14px; color: #566883; 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: #ffffff; border-radius: 28px 28px 0 0; box-shadow: 0 -16px 30px -18px rgba(11,18,32,0.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(11,18,32,0.55)}
  .vd-foot { border-radius: 0}
}
@media (prefers-reduced-motion: reduce) { .vd-wrap, .vd { transition: none} }

/* ------------------------------------------------------------------ 7. Notificações (Padrão Menu Lateral .sm) */
body.vn-lock { overflow: hidden}
.vn-wrap {
  position: fixed; inset: 0; z-index: 2100; display: flex; align-items: stretch; justify-content: flex-end; padding: 0;
  background: rgba(11,18,32,0.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .35s ease; font-family: 'Inter', system-ui, sans-serif}
.vn-wrap.is-open { opacity: 1}
.vn {
  position: relative; width: min(88vw, 344px); max-width: none; height: 100%; height: 100dvh; max-height: 100dvh;
  margin-left: auto; display: flex; flex-direction: column; overflow: hidden;
  background-color: var(--ice, #e7ecf6);
  background-image: linear-gradient(var(--grid, #d8dfee) 2px, transparent 2px), linear-gradient(90deg, var(--grid, #d8dfee) 2px, transparent 2px);
  background-size: 40px 40px;
  border-radius: 28px 0 0 28px; border: 0;
  color: #0b1220; box-shadow: -24px 0 44px -12px rgba(11,18,32,0.5);
  transform: translate3d(100%, 0, 0); transition: transform .48s cubic-bezier(.2, .8, .2, 1)}
.vn-wrap.is-open .vn { transform: translate3d(0, 0, 0)}
.vn-head {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: max(16px, env(safe-area-inset-top)) 16px 10px;
  background: rgba(231,236,246,0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 0}
.vn-head::after { display: none}
.vn-head-ic {
  width: 36px; height: 36px; border-radius: 12px; background: #ffffff;
  box-shadow: 0 8px 14px -10px rgba(11,18,32,0.45), inset 0 0 0 1px #d8dfee;
  display: grid; place-items: center; flex-shrink: 0;
  color: #0b1220; font-size: 19px}
.vn-head-ic svg { width: 20px; height: 20px; stroke: #0b1220; fill: #e8b923; stroke-width: 2}
.vn-head-tx { flex: 1; min-width: 0}
.vn-kicker { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #566883; margin-bottom: 2px}
.vn-head h2 { margin: 0; font-size: 18px; font-weight: 900; letter-spacing: -.035em; line-height: 1.1; color: #0b1220}
.vn-head h2 .mk { background: #e8b923; color: #0b1220; padding: 0 6px; display: inline-block; rotate: -1.5deg}
.vn-x {
  width: 44px; height: 44px; border: 0; border-radius: 14px; background: #ffffff; color: #0b1220;
  font-size: 22px; font-weight: 800; display: grid; place-items: center;
  cursor: pointer; flex-shrink: 0; box-shadow: 0 10px 16px -12px rgba(11,18,32,0.6);
  transition: transform .2s cubic-bezier(.2,.8,.2,1)}
.vn-x:active { transform: scale(.92)}
.vn-x:focus-visible, .vn-btn:focus-visible, .vn-close-btn:focus-visible { outline: 3px solid #e8b923; outline-offset: 2px}
.vn-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 6px 16px 18px; display: flex; flex-direction: column; gap: 8px}
.vn-item {
  position: relative; background: #ffffff; border-radius: 14px; padding: 12px;
  box-shadow: 0 8px 12px -10px rgba(11,18,32,0.55);
  display: grid; gap: 8px;
  animation: vnItemIn .4s cubic-bezier(.2,.8,.2,1) both}
@keyframes vnItemIn { from { opacity: 0; transform: translateY(12px)} to { opacity: 1; transform: none} }
.vn-item.is-new { box-shadow: 0 8px 12px -10px rgba(11,18,32,0.55), 0 0 0 2px #e8b923}
.vn-top { display: flex; align-items: center; gap: 10px}
.vn-ico { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; background: #0b1220; color: #e8b923}
.vn-ico--novidade { background: #d9f6e8; color: #1f7a37; box-shadow: inset 0 0 0 1.5px #a7ebcb}
.vn-ico--evento { background: #e3ebfd; color: #2f55c8; box-shadow: inset 0 0 0 1.5px #bdd1fb}
.vn-ico--alerta { background: #fde5e1; color: #c4252f; box-shadow: inset 0 0 0 1.5px #f9bdb4}
.vn-ico--promocao { background: #fbf0c8; color: #8a6400; box-shadow: inset 0 0 0 1.5px #f3d97d}
.vn-tt { min-width: 0; flex: 1}
.vn-tt h3 { margin: 0; font-size: 13.8px; line-height: 1.22; font-weight: 800; letter-spacing: -.02em; color: #0b1220; overflow-wrap: anywhere}
.vn-tt time { display: inline-block; margin-top: 3px; font-size: 10.5px; font-weight: 800; color: #566883; background: #f4f7fc; padding: 2px 7px; border-radius: 99px}
.vn-pin { margin-left: auto; flex: 0 0 auto; font-size: 10px; font-weight: 900; color: #0b1220; background: #e8b923; padding: 3px 8px; border-radius: 999px; box-shadow: 0 2px 0 #c4981a}
.vn-new { position: absolute; top: 12px; right: 12px; width: 9px; height: 9px; border-radius: 50%; background: #e5252a; box-shadow: 0 0 0 3px rgba(229,37,42,0.2)}
.vn-pin + .vn-new { display: none}
.vn-txt { margin: 0; font-size: 12.8px; font-weight: 600; line-height: 1.48; color: #334155; white-space: pre-line; overflow-wrap: anywhere}
.vn-imgs { display: grid; gap: 6px}
.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: 240px; object-fit: cover; border-radius: 12px; background: #e3ebfd; display: block}
.vn-imgs.n1 img { max-height: 280px}
.vn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 14px; border-radius: 11px;
  background: #e8b923; color: #0b1220; box-shadow: 0 4px 0 #c4981a;
  font: 800 12.5px/1 'Inter', system-ui, sans-serif; text-decoration: none; justify-self: start;
  transition: transform .15s ease, box-shadow .15s ease}
.vn-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #c4981a}
.vn-empty {
  text-align: center; padding: 20px 16px; background: #ffffff; border-radius: 14px;
  box-shadow: 0 8px 12px -10px rgba(11,18,32,0.55); color: #566883}
.vn-empty-ic {
  width: 44px; height: 44px; border-radius: 13px; background: #f4f7fc;
  box-shadow: inset 0 0 0 1px #d8dfee; display: grid; place-items: center;
  margin: 0 auto 10px; color: #0b1220; font-size: 22px}
.vn-empty i { display: block; font-size: 22px; color: #0b1220}
.vn-empty b { display: block; color: #0b1220; font-size: 14px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 4px}
.vn-empty p { margin: 0; font-size: 12.5px; font-weight: 600; line-height: 1.45; color: #566883}
.vn-foot {
  flex-shrink: 0; display: flex; flex-direction: column; gap: 8px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 2px solid #d8dfee;
  background: rgba(255,255,255,0.72)}
.vn-close-btn {
  width: 100%; height: 46px; border-radius: 14px; border: 0;
  background: #e8b923; color: #0b1220; box-shadow: 0 5px 0 #c4981a;
  font: 800 15px/1 'Inter', system-ui, sans-serif; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease}
.vn-close-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #c4981a}
.vn-load { text-align: center; padding: 24px; color: #566883; font-size: 13px; font-weight: 700}
@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: #0b1220; color: #ffffff; font: 700 14px/1.3 'Inter', system-ui, sans-serif; box-shadow: 0 14px 30px -12px rgba(11,18,32,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: #ffffff; box-shadow: var(--vz-shadow); color: #0b1220; 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 #e8b923; 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: #e3ebfd}
.hsv-card:nth-child(5n+2) .hsv-img { background: #d9f6e8}
.hsv-card:nth-child(5n+3) .hsv-img { background: #fbf0c8}
.hsv-card:nth-child(5n+4) .hsv-img { background: #e3ebfd}
.hsv-card:nth-child(5n+5) .hsv-img { background: #e3ebfd}
.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: #566883}
.hsv-go { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #e8b923; color:#0b1220; display: flex; align-items: center; justify-content: center; font-size: 15px; box-shadow: 0 8px 16px -8px rgba(232,185,35,0.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: #e3ebfd; 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: #566883}
@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: #fde5e1; color: #d62839; display: flex; align-items: center; justify-content: center; font-size: 30px}
.header-inner.vp .vp-menu-btn { border: 0; cursor: pointer; font: inherit; padding: 0}