/*==============================================================
  Visy — Camada visual 2026 (atual e moderno)
  Carregado por ÚLTIMO (depois de styles.css/colors.css) e sobrescreve
  com segurança. Reverter = remover o <link> deste arquivo no head.php.
==============================================================*/
:root {
  /* Paleta "Visy 2026" — coluna clara de docs/layout/plataforma_2026.md (mesma do visyadm) */
  --vz-navy:    #0b1f3a;   /* texto principal / marca */
  --vz-blue:    #2f6bff;   /* primary — botões, links, abas ativas */
  --vz-blue-d:  #1f56e0;   /* primary escuro (hover) */
  --vz-cyan:    #10b8d9;   /* accent */
  --vz-aqua:    #10b8d9;   /* (legado) agora = accent */
  --vz-violet:  #6d5dfc;
  --vz-green:   #1a9e66;   /* ok — validado, online */
  --vz-green-2: #22c07d;
  --vz-amber:   #f5a524;   /* warn */
  --vz-red:     #d63445;   /* danger */
  --vz-ink:     #5b6b85;   /* texto secundário (muted) */
  --vz-line:    #e3eaf5;
  --vz-bg:      #f5f8fd;
  --vz-surface-2: #eef3fb;

  --vz-grad:      linear-gradient(120deg, #2f6bff 0%, #10b8d9 100%);
  --vz-grad-dark: linear-gradient(135deg, #0b1f3a 0%, #12345f 55%, #0b5f86 100%);
  --vz-grad-soft: linear-gradient(120deg, #eef4ff 0%, #ecfbff 55%, #f3f1ff 100%);
  --vz-shadow:    0 10px 30px rgba(11, 31, 58, .08);
  --vz-shadow-sm: 0 2px 10px rgba(11, 31, 58, .06);
  --vz-shadow-lg: 0 18px 50px rgba(11, 31, 58, .14);
  --vz-ring:      0 0 0 .2rem rgba(47, 107, 255, .22);

  /* reaproveita as variáveis já usadas pelo site (styles.css "NOVO LAYOUT") */
  --hero1: #2f6bff;
  --hero2: #1f56e0;
  --hero3: #0b1f3a;
  --hero-gradient: var(--vz-grad-soft);
  --badge1: rgba(47, 107, 255, .10);
  --badge2: rgba(47, 107, 255, .18);
  --primary: #2f6bff;
  --secondary: #0b1f3a;
  --surface: #f5f8fd;
  --contrast: #10b8d9;
  --success: #1a9e66;
  --warning: #f5a524;
  --danger: #d63445;
}

body { color: var(--vz-navy); }

/*---------- Hero claro e moderno ----------*/
.hero-section {
  background: var(--vz-grad-soft) !important;
  border-radius: 0 0 56px 56px;
}
.hero-section .hero-text h1,
.fundo .hero-text h1 { color: var(--vz-navy) !important; letter-spacing: -.5px; }
.hero-text h1 span,
.section-title span {
  background: var(--vz-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero-text p, .hero-section .hero-text p { color: var(--vz-ink) !important; }
.hero-badges span {
  color: var(--vz-navy) !important;
  background: #fff; border: 1px solid var(--vz-line);
  border-radius: 999px; padding: 4px 12px; margin: 0 6px 8px 0;
  box-shadow: 0 2px 8px rgba(11,31,58,.05);
}
.badge-plan, .badge-plan2 {
  background: rgba(47,107,255,.10) !important; color: var(--vz-blue) !important;
  border: 1px solid rgba(47,107,255,.18);
}
.text-muted { color: var(--vz-ink) !important; }

/*---------- CTAs com gradiente ----------*/
.btn-conheca, .btn-conheca2, .btn-conheca3 {
  background: var(--vz-grad) !important; border: none !important; color: #fff !important;
  box-shadow: 0 10px 24px rgba(47,107,255,.28) !important;
  transition: transform .15s ease, filter .15s ease;
}
.btn-conheca:hover, .btn-conheca2:hover, .btn-conheca3:hover {
  filter: brightness(1.07); transform: translateY(-2px);
}
.btn-vz-outline {
  border: 2px solid var(--vz-blue); color: var(--vz-blue); background: #fff;
  border-radius: 999px; padding: 10px 26px; font-weight: 600;
}
.btn-vz-outline:hover { background: var(--vz-blue); color: #fff; text-decoration: none; }

/*---------- Seções / cartões ----------*/
.vz-tint { background: #f6f9ff; }
.vz-section { padding: 72px 0; }
.vz-eyebrow {
  display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .6px;
  text-transform: uppercase; color: var(--vz-blue);
  background: rgba(47,107,255,.08); border-radius: 999px; padding: 4px 12px; margin-bottom: 14px;
}
.vz-h2 { font-weight: 700; font-size: 32px; color: var(--vz-navy); letter-spacing: -.3px; }
.vz-h2 span {
  background: var(--vz-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.vz-lead { color: var(--vz-ink); font-size: 1.05rem; max-width: 760px; }

/*---------- Catálogo "O que o Anti-furto identifica" ----------*/
.vz-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 991px) { .vz-cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .vz-cat-grid { grid-template-columns: 1fr; } .vz-h2 { font-size: 26px; } }

.vz-card {
  background: #fff; border: 1px solid var(--vz-line); border-radius: 20px;
  box-shadow: var(--vz-shadow); overflow: hidden; display: flex; flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.vz-card:hover { transform: translateY(-4px); box-shadow: var(--vz-shadow-lg); }
.vz-card-img { position: relative; aspect-ratio: 4 / 3; background: #0b1f3a; overflow: hidden; }
.vz-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vz-card-img .vz-alert-chip {
  position: absolute; left: 12px; bottom: 12px; right: 12px;
  background: rgba(11,31,58,.82); color: #fff; font-size: 12.5px; line-height: 1.35;
  border-radius: 12px; padding: 8px 10px; backdrop-filter: blur(4px);
}
.vz-alert-chip i { color: #25d366; margin-right: 6px; }
.vz-card-body { padding: 20px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.vz-card h3 { font-size: 19px; font-weight: 700; margin: 6px 0 8px; color: var(--vz-navy); }
.vz-card p { color: var(--vz-ink); font-size: 14.5px; margin-bottom: 12px; }
.vz-steps { list-style: none; padding: 0; margin: 4px 0 0; counter-reset: s; }
.vz-steps li {
  position: relative; padding-left: 30px; margin-bottom: 8px; font-size: 14px; color: var(--vz-navy);
}
.vz-steps li::before {
  counter-increment: s; content: counter(s);
  position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%;
  background: var(--vz-grad); color: #fff; font-size: 11.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.vz-steps-title { font-size: 12.5px; font-weight: 700; color: var(--vz-blue);
  text-transform: uppercase; letter-spacing: .5px; margin: 6px 0 8px; }

.vz-pill {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  border-radius: 999px; padding: 3px 10px; align-self: flex-start;
}
.vz-pill.ok    { background: rgba(31,191,117,.12); color: #12935a; }
.vz-pill.wait  { background: rgba(245,165,36,.14); color: #a46a07; }
.vz-pill.cat   { background: rgba(47,107,255,.10); color: var(--vz-blue); }

.vz-card.pending .vz-card-img {
  display: flex; align-items: center; justify-content: center;
  background: var(--vz-grad-dark); color: rgba(255,255,255,.9); font-size: 46px;
}

.vz-filter { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 30px; }
.vz-filter a {
  border: 1px solid var(--vz-line); background: #fff; color: var(--vz-navy);
  border-radius: 999px; padding: 7px 16px; font-size: 14px; font-weight: 500;
}
.vz-filter a:hover { border-color: var(--vz-blue); color: var(--vz-blue); text-decoration: none; }

/*---------- Blocos informativos ----------*/
.vz-feature {
  background: #fff; border: 1px solid var(--vz-line); border-radius: 18px; padding: 22px;
  height: 100%; box-shadow: var(--vz-shadow);
}
.vz-feature .vz-ico {
  width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center;
  justify-content: center; color: #fff; background: var(--vz-grad); font-size: 20px; margin-bottom: 14px;
}
.vz-feature h4 { font-size: 17px; font-weight: 700; color: var(--vz-navy); }
.vz-feature p { color: var(--vz-ink); font-size: 14.5px; margin: 0; }

.vz-dark {
  background: var(--vz-grad-dark); color: #fff; border-radius: 28px; padding: 44px;
}
.vz-dark h2, .vz-dark h3 { color: #fff; }
.vz-dark p, .vz-dark li { color: rgba(255,255,255,.85); }
.vz-dark .vz-h2 span { -webkit-text-fill-color: transparent; }

.vz-note {
  border-left: 4px solid var(--vz-amber); background: #fffaf0; border-radius: 12px;
  padding: 14px 18px; color: #6b4f12; font-size: 14.5px;
}

/* mídia do hero: só em telas largas (o site sobrescreve .d-lg-block) */
.vz-hero-media { display: none; }
@media (min-width: 992px) { .vz-hero-media { display: block; } }

/*==============================================================
  Alinhamento global "Visy 2026" (10/10/2026)
  Todas as páginas públicas. Só sobrescritas de CSS — reverter =
  apagar daqui até o fim do arquivo (backup em
  visy/.backups/2026-10-10_visy-site_identidade/).
==============================================================*/

/*---------- Base ----------*/
body { font-family: 'Poppins', sans-serif; background: #fff; }
h1, h2, h3, h4, h5, h6 { color: var(--vz-navy); }
a { color: var(--vz-blue); }
a:hover { color: var(--vz-blue-d); }
::selection { background: rgba(47,107,255,.18); }

/* resíduos de cores antigas (colors.css / styles.css) */
.bg-primary { background-color: var(--vz-blue) !important; }
.bg-dark { background-color: var(--vz-navy) !important; }
.bg-light { background-color: var(--vz-bg) !important; }
.text-primary, .text-default, .text-blue, .highlight { color: var(--vz-blue) !important; }
.text-light-blue { color: #7fd8ee !important; }
.text-dark.text-hover-default:hover, .text-hover-default:hover,
.link-focus-redirect:hover, .footer-link:hover { color: var(--vz-blue) !important; }
.color-success { color: var(--vz-green) !important; }
.color-alert   { color: var(--vz-amber) !important; }
.color-error   { color: var(--vz-red) !important; }
.color-info    { color: var(--vz-cyan) !important; }
.border-b-default { border-bottom-color: rgba(47,107,255,.15) !important; }
.alert-info { background: rgba(47,107,255,.08); border-color: rgba(47,107,255,.16); color: var(--vz-blue); }

/*---------- Botões ----------*/
.btn { border-radius: 999px; font-weight: 600; }
.btn-primary, .btn-blue, .btn-depoimentos2, .hero-input button,
.btn-price.selected-price, .btn-primary-gradient,
#contact-form .btn-success, #footer-form .btn-success {
  background: var(--vz-grad) !important; border: none !important; color: #fff !important;
  box-shadow: 0 8px 20px rgba(47,107,255,.24);
  transition: transform .15s ease, filter .15s ease;
}
.btn-primary:hover, .btn-blue:hover, .btn-depoimentos2:hover, .hero-input button:hover,
#contact-form .btn-success:hover, #footer-form .btn-success:hover {
  filter: brightness(1.07); transform: translateY(-1px); color: #fff !important;
}
.btn-primary:focus-visible, .btn-conheca:focus-visible, .btn-outline-primary:focus-visible,
.btn-vz-outline:focus-visible, a:focus-visible, button:focus-visible {
  outline: none; box-shadow: var(--vz-ring) !important;
}
.btn-outline-primary { border-color: var(--vz-blue); color: var(--vz-blue); }
.btn-outline-primary:hover { background: var(--vz-blue); border-color: var(--vz-blue); color: #fff; }
.btn-depoimentos { border-color: var(--vz-blue); color: var(--vz-blue); }

/* chips da seção "Confira tudo o que a Visy faz" — pílulas suaves em vez de 7 gradientes */
.btn-conheca2 {
  background: #fff !important; color: var(--vz-navy) !important;
  border: 1px solid var(--vz-line) !important; box-shadow: var(--vz-shadow-sm) !important;
  font-weight: 500; white-space: normal; min-height: 44px;
}
.btn-conheca2:hover { color: var(--vz-blue) !important; border-color: var(--vz-blue) !important; filter: none; }
.botoes-func { gap: 10px; }
.botoes-func a { max-width: 100%; }
.botoes-func .btn-conheca2 { margin-right: 0 !important; }

/* CTA dentro do bloco escuro: botão claro */
.cta-box .btn-conheca3 {
  background: #fff !important; color: var(--vz-blue) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.18) !important;
}

/*---------- Títulos de seção ----------*/
.hero-text h1, .erp-header h1, .faq-like-section h1 { color: var(--vz-navy); letter-spacing: -.4px; }
.erp-header p, .faq-like-section p { color: var(--vz-ink) !important; }
.hero-text h2, .hero-text h3 { color: var(--vz-navy); }
.hero-text h1 span, .faq-like-section h1 span, .titulo-func span,
.titulo-depoimentos span, .titulo-clientes span, .logos-title span, .cta-content h2 span {
  background: var(--vz-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; text-decoration: none;
}
.titulo-func, .titulo-depoimentos { color: var(--vz-navy); }

/* separadores antigos → barrinha em gradiente */
.separator { height: 4px; width: 56px; margin: 12px 0 22px; border-radius: 4px; background: var(--vz-grad); }
.separator:after { display: none; }
.text-center > .separator, .text-center + .separator, .text-center .separator { margin-left: auto; margin-right: auto; }

/* páginas sem hero (dúvidas, contato, política, privacidade): espaço p/ o menu fixo */
header + section.mg-t-60 { padding-top: 70px; }
@media (max-width: 1000px) { header + section.mg-t-60:not(.p-top) { padding-top: 60px; } }

/*---------- Navbar ----------*/
#navbar {
  background: rgba(255,255,255,.96) !important; border: 1px solid var(--vz-line);
  box-shadow: var(--vz-shadow) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
#navbar .nav-link { color: var(--vz-ink) !important; font-weight: 500; border-radius: 999px; padding: 8px 14px !important; }
#navbar .nav-link:hover { color: var(--vz-blue) !important; }
#navbar .nav-item.active .nav-link { color: var(--vz-blue) !important; background: rgba(47,107,255,.08); font-weight: 600; }
.btn-login { color: var(--vz-blue) !important; background: rgba(47,107,255,.10) !important; min-height: 40px; padding: 8px 18px; }
.btn-login:hover { background: var(--vz-blue) !important; color: #fff !important; }
#navbar .navbar-toggler { min-width: 44px; min-height: 44px; border: 1px solid var(--vz-line); border-radius: 12px; }
@media (max-width: 991px) {
  #navbar { left: 12px !important; right: 12px !important; width: auto; max-width: none; height: auto !important; min-height: 70px; border-radius: 28px; }
  #navbar .navbar-collapse { padding: 6px 0 14px; }
  #navbar .nav-link { min-height: 44px; display: flex; align-items: center; }
  #navbar .btn-login { justify-content: center; min-height: 44px; }
}

/*---------- Cartões ----------*/
.card { border: 1px solid var(--vz-line); border-radius: 16px; box-shadow: var(--vz-shadow-sm); }
.card-header { background: #fff; border-bottom-color: var(--vz-line); }
.preco-card, .depo-card, .card-hero, .city-card .card { border-radius: 20px; box-shadow: var(--vz-shadow); }

/* cartões azuis da home/funcionalidades */
.erp-card { background: var(--vz-grad) !important; box-shadow: var(--vz-shadow-lg); border-radius: 28px; }
.erp-card h3 { color: #fff; }
.erp-card p, .erp-card a { color: rgba(255,255,255,.92); }
.erp-card a:hover { color: #fff; }
.erp-container .badge-plan, .erp-card .badge-plan {
  background: rgba(255,255,255,.18) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.28);
}
.erp-card .btn-outline-primary, .erp-card .btn-outline-primary:hover, .erp-card .btn-outline-primary:active {
  background: rgba(255,255,255,.14) !important; border: 1px solid rgba(255,255,255,.35) !important;
  color: #fff !important; font-size: 14px;
}

/* "Por que escolher a Visy" */
.bling-like-section { background: linear-gradient(180deg, var(--vz-bg) 0%, #fff 100%); }
.bling-text h3 { color: var(--vz-navy); }
.bling-text p { color: var(--vz-ink); }
.bling-item .badge { background: rgba(47,107,255,.10); color: var(--vz-blue); }
.bling-item a { color: var(--vz-blue); }
.progress-line { background: var(--vz-surface-2); }
.progress-bar, .progress-segment::after { background: var(--vz-grad) !important; }
.bling-image img, .faq-image img, .erp-image-wrapper img { box-shadow: var(--vz-shadow); }

/* faixa "A Visy identifica intrusos todos os dias" → bloco escuro navy */
.usuarios-section { background: var(--vz-grad-dark) !important; box-shadow: none; }
.depoimentos-section { background: var(--vz-bg) !important; }

/*---------- FAQ da home / funcionalidades (cards claros com chevron) ----------*/
.faq-like-section { background: var(--vz-bg) !important; box-shadow: none; border-radius: 56px 56px 0 0; }
.faq-like-section h1 { color: var(--vz-navy) !important; }
.faq-item {
  background: #fff; border: 1px solid var(--vz-line) !important; border-radius: 16px;
  box-shadow: var(--vz-shadow-sm); padding: 16px 20px; margin-bottom: 12px;
}
.faq-item.active { border-color: rgba(47,107,255,.35) !important; box-shadow: var(--vz-shadow); }
.faq-item h3 { color: var(--vz-navy) !important; font-size: 1.08rem; margin: 4px 0 0; }
.faq-item:hover h3 { color: var(--vz-blue) !important; }
.faq-item p { color: var(--vz-ink) !important; }
.faq-item .badge { background: rgba(47,107,255,.10) !important; color: var(--vz-blue) !important; font-size: .75rem; }
.faq-header { gap: 12px; min-height: 44px; }
.faq-arrow {
  color: var(--vz-blue) !important; background: rgba(47,107,255,.08); border-radius: 50%;
  width: 32px; height: 32px; flex: 0 0 32px; display: inline-flex; align-items: center; justify-content: center;
}
.faq-like-section a { color: var(--vz-blue) !important; text-decoration: underline; }

/*---------- Dúvidas (accordion Bootstrap) ----------*/
#accordion .card { border-radius: 16px !important; overflow: hidden; margin-bottom: 12px !important; }
#accordion .card-header { background: #fff; border: 0; padding: 0 !important; }
#accordion .card-header .btn {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  min-height: 52px; padding: 14px 18px; color: var(--vz-navy); font-weight: 600; font-size: 1rem; border-radius: 0;
}
#accordion .card-header .btn:hover { color: var(--vz-blue); }
#accordion .card-header .btn::after {
  content: "\f078"; font-family: FontAwesome; font-size: 12px; color: var(--vz-blue);
  flex: 0 0 30px; height: 30px; border-radius: 50%; background: rgba(47,107,255,.08);
  display: inline-flex; align-items: center; justify-content: center; transition: transform .2s ease;
}
#accordion .card-header .btn[aria-expanded="true"] { color: var(--vz-blue); }
#accordion .card-header .btn[aria-expanded="true"]::after { transform: rotate(180deg); }
#accordion .card-body { color: var(--vz-ink); padding: 4px 18px 18px; font-size: .95rem; }
#accordion .card-body strong { color: var(--vz-navy); }

/*---------- CTA final ----------*/
.cta-visy { background: #fff; }
.cta-box { background: var(--vz-grad-dark) !important; border-radius: 28px; box-shadow: var(--vz-shadow-lg); }
.cta-content h2 { color: #fff; }
.cta-content p { color: rgba(255,255,255,.85); }
.call-to-trial.bg-dark { background: var(--vz-grad-dark) !important; }

/*---------- Planos / preços ----------*/
.planos-bg .text-white, .planos-bg .hero-text h2 { color: var(--vz-navy) !important; }
.planos-bg .hero-text p { color: var(--vz-ink) !important; }
.toggle-buttons { background: var(--vz-surface-2); border: 1px solid var(--vz-line); }
.toggle-buttons .btn, .toggle-buttons .btn.active { color: var(--vz-navy); min-height: 44px; }
.toggle-buttons .btn.active { color: var(--vz-blue); }
.toggle-slider { box-shadow: var(--vz-shadow-sm); }
.plano-card {
  position: relative; border-radius: 24px; border: 1px solid var(--vz-line);
  box-shadow: var(--vz-shadow); padding-top: 34px;
}
.plano-card:hover { box-shadow: var(--vz-shadow-lg); }
.plano-card h5 { color: var(--vz-blue); }
.plano-card .descricao, .plano-card .detalhe, .preco-texto, .a-partir-hr span { color: var(--vz-ink); }
.preco-novo { color: var(--vz-navy); }
.preco-novo span { color: var(--vz-ink); }
.preco-economia { color: var(--vz-green); }
.a-partir-hr hr { border-top-color: var(--vz-line); }
.plano-card.destaque { border: 2px solid var(--vz-blue); box-shadow: 0 18px 44px rgba(47,107,255,.20); }
.plano-card.destaque::before {
  content: "Recomendado"; position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--vz-grad); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .3px;
  padding: 4px 14px; border-radius: 999px; box-shadow: 0 6px 14px rgba(47,107,255,.25); white-space: nowrap;
}
.planos-container { overflow: visible; }
.planos-bloco { padding-top: 14px; }

/*---------- Formulários (agendar, contato) ----------*/
.form-control {
  border: 1px solid var(--vz-line); border-radius: 12px; color: var(--vz-navy) !important;
  font-size: 15px; transition: border-color .15s ease, box-shadow .15s ease;
}
input.form-control, select.form-control { height: 42px; }
textarea.form-control { padding-top: 10px; }
.form-control::placeholder { color: #8a99b3; }
.form-control:focus { border-color: var(--vz-blue) !important; box-shadow: var(--vz-ring) !important; }
.form-control-icon { color: var(--vz-ink); }
.form-control-custom .form-control { padding-right: 40px; }
#agendar-form .btn-conheca { min-height: 48px; }
@media (max-width: 767px) { .form-control { font-size: 16px; } } /* evita zoom no iOS */

/*---------- Tabelas (modelos compatíveis) ----------*/
.table-responsive { border-radius: 16px; border: 1px solid var(--vz-line); box-shadow: var(--vz-shadow-sm); background: #fff; }
.table-responsive .table { margin: 0; }
.table thead th { background: var(--vz-surface-2); color: var(--vz-navy); border-color: var(--vz-line) !important; font-weight: 600; }
.table td, .table th { border-color: var(--vz-line) !important; }
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(47,107,255,.03); }
.table-bordered { border: 0; }

/*---------- Faixa fixa "Fale com um especialista" ----------*/
.contact-dock__inner { background: var(--vz-grad) !important; }
.dock-pill, .contact-dock__title { background: var(--vz-navy) !important; }
.contact-dock__whatsapp { min-height: 48px; }
.contact-dock__whatsapp .wa-text { color: var(--vz-navy) !important; }
/* a faixa "estaciona" logo acima de #site-footer (scripts.js): reserva a altura dela
   para não cobrir o fim do conteúdo — vira a "aba" do rodapé */
#site-footer { display: block; height: 0; margin-top: var(--vz-dock-h, 66px) !important; }

/*---------- Rodapé (bloco escuro navy) ----------*/
.footer-section { background: var(--vz-grad-dark) !important; color: rgba(255,255,255,.82) !important; }
.footer-section h4 { color: #fff; font-size: 1.15rem; }
.footer-section .separator-2-light { background: var(--vz-grad); height: 3px; width: 48px; border-radius: 3px; }
.footer-section .text-primary, .col-md-3 .text-primary { color: #7fd8ee !important; }
.footer-section span, .footer-section p { color: rgba(255,255,255,.82); }
.footer-link { color: rgba(255,255,255,.82) !important; padding: 4px 0; }
.footer-link:hover { color: #fff !important; text-decoration: underline; }
.footer-section hr { border-color: rgba(255,255,255,.14) !important; }
.footer-section .form-footer, .footer-section .form-footer.bg-dark {
  background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.18);
  color: #fff !important;
}
.footer-section .form-footer::placeholder { color: rgba(255,255,255,.6); }
.footer-section .form-footer:focus { border-color: #7fd8ee !important; box-shadow: 0 0 0 .2rem rgba(16,184,217,.25) !important; }
.footer-section .form-control-icon { color: rgba(255,255,255,.6) !important; }
@media (max-width: 767px) {
  .footer-link { padding: 11px 0; margin: 0; }            /* toque ≥ 44px */
}

/*---------- Mobile: calhas de 16px, sem rolagem lateral ----------*/
@media (max-width: 575px) {
  .container, .container-fluid { padding-left: 16px !important; padding-right: 16px !important; }
  .hero-section { border-radius: 0 0 32px 32px; }
  .faq-like-section, .bling-like-section { border-radius: 32px 32px 0 0; }
  .erp-card { padding: 28px 22px !important; border-radius: 22px; }
  .erp-card h3 { font-size: 1.45rem; }
  .cta-box { padding: 32px 22px !important; border-radius: 22px; }
  .cta-content h2 { font-size: 26px; }
  .hero-text h1, .erp-header h1, .faq-like-section h1 { font-size: 26px; }
  .usuarios-text { font-size: 22px !important; }
  .btn-conheca2 { font-size: 13px !important; padding: 10px 16px !important; }
  .botoes-func a { flex: 1 1 100%; }
  .botoes-func .btn-conheca2 { width: 100%; }
  .btn-conheca, .btn-conheca3 { font-size: 15px !important; min-height: 48px; white-space: normal; }
  .vz-dark { padding: 28px 22px; border-radius: 22px; }
}

/*---------- Ajustes finos ----------*/
#agendar-form .btn .form-control-icon { position: static; color: #fff; width: auto; margin-left: 8px; }
#contact-form .btn, #footer-form .btn { min-height: 44px; padding-left: 22px; padding-right: 22px; }
#more_doubts .alert-info { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 767px) {
  .btn-sm { padding: .62rem 1rem; }
  .btn-login, .toggle-buttons .btn { min-height: 44px; }
}
@media (max-width: 767px) {
  input.form-control, select.form-control { height: 44px; }
  .btn-sm { padding: .72rem 1rem; }
  .erp-card .btn-outline-primary { min-height: 44px; }
  .erp-card a { display: inline-block; padding: 10px 0; }
  .plano-card .btn { min-height: 44px; }
  .vz-filter a { padding: 11px 16px; }
}
header + section.p-top { padding-bottom: 10px !important; }
.separator-2 { height: 3px; width: 44px; border-radius: 3px; background: var(--vz-grad); }
.separator-2:after, .separator-2:before { display: none; }
#overview h2 span {
  background: var(--vz-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
@media (max-width: 767px) { .bling-item.active a { padding: 10px 0; } }
header + section.p-top + .container > .row:first-child { margin-top: 20px !important; }
/* títulos dentro de blocos escuros continuam brancos */
.text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white h5, .text-white h6,
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6,
.vz-dark h4, .vz-dark h5, .usuarios-section h1, .usuarios-section h2, .usuarios-section h3 { color: #fff; }

/* Combinações no catálogo: fotos dos sinais lado a lado */
.vz-combo-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 991px) { .vz-combo-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .vz-combo-grid { grid-template-columns: 1fr; } }
.vz-combo-imgs { display: grid; gap: 3px; background: var(--vz-navy); }
.vz-combo-imgs.n2 { grid-template-columns: 1fr 1fr; }
.vz-combo-imgs.n3 { grid-template-columns: 1fr 1fr 1fr; }
.vz-combo-imgs figure { position: relative; margin: 0; aspect-ratio: 1 / 1; overflow: hidden; }
.vz-combo-imgs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vz-combo-imgs figcaption {
  position: absolute; left: 6px; right: 6px; bottom: 6px; text-align: center;
  background: rgba(11,31,58,.82); color: #fff; font-size: 11.5px; font-weight: 600; line-height: 1.25;
  border-radius: 8px; padding: 4px 6px;
}
.vz-combo h3 { font-size: 17px; }

/* ===== Home: Funcionalidades 2026 ===== */
/* Seção #funcionalidades do index.php (Anti-furto em destaque, Anti-intruso secundário,
   Leitura de placas como menção). Reverter = apagar este bloco até "fim Home: Funcionalidades 2026"
   (backup em visy/.backups/2026-10-10_home_funcionalidades/). */
.vzf { padding: 80px 0 72px; scroll-margin-top: 96px; overflow: hidden; }
.vzf-head { margin-bottom: 40px; }
.vzf-head .vz-h2 { font-size: 38px; line-height: 1.18; }
.vzf-tag {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600;
  color: var(--vz-blue); background: rgba(47,107,255,.10); border-radius: 999px; padding: 5px 12px;
}
.vzf-tag-muted { color: var(--vz-ink); background: var(--vz-surface-2); }
.vzf-list { list-style: none; padding: 0; margin: 0 0 18px; }
.vzf-list li { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; color: var(--vz-navy); font-size: 15px; line-height: 1.45; }
.vzf-list li i {
  flex: 0 0 22px; height: 22px; border-radius: 50%; background: var(--vz-grad); color: #fff;
  font-size: 11px; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px;
}
.vzf-list-sm li { font-size: 14px; margin-bottom: 8px; }

/* Anti-furto (bloco principal) */
.vzf-main {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center;
  background: var(--vz-grad-soft); border: 1px solid var(--vz-line); border-radius: 32px;
  padding: 44px; box-shadow: var(--vz-shadow);
}
.vzf-main h3 { font-size: 30px; font-weight: 700; line-height: 1.2; margin: 14px 0 10px; letter-spacing: -.3px; }
.vzf-main h3 span { background: var(--vz-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.vzf-benefit { color: var(--vz-ink); font-size: 16px; margin-bottom: 18px; }
.vzf-signals { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; }
.vzf-signals span {
  font-size: 12.5px; font-weight: 500; color: var(--vz-navy); background: #fff;
  border: 1px solid var(--vz-line); border-radius: 999px; padding: 4px 11px;
}
.vzf-ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.vzf-ctas .btn-conheca { border-radius: 999px; padding: 12px 22px; margin: 0; font-size: 15px; }
.vzf-ctas .btn-vz-outline { font-size: 15px; }
.vzf-ctas .btn-vz-outline { padding: 10px 22px; }
.vzf-ctas .btn-vz-outline:hover { color: #fff; }

.vzf-main-media { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.vzf-shot { position: relative; margin: 0; border-radius: 14px; overflow: hidden; background: var(--vz-navy); aspect-ratio: 4 / 3; box-shadow: var(--vz-shadow-sm); }
.vzf-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vzf-shot-big { grid-column: 1 / -1; border-radius: 20px; box-shadow: var(--vz-shadow-lg); }
.vzf-shot figcaption {
  position: absolute; left: 6px; right: 6px; bottom: 6px; text-align: center;
  background: rgba(11,31,58,.82); color: #fff; font-size: 11.5px; font-weight: 600; line-height: 1.25;
  border-radius: 8px; padding: 4px 6px;
}
.vzf-shot-big figcaption.vz-alert-chip {
  left: 12px; right: 12px; bottom: 12px; text-align: left; font-weight: 400; font-size: 12.5px;
  line-height: 1.35; padding: 8px 10px; border-radius: 12px; backdrop-filter: blur(4px);
}

/* Anti-intruso (secundário) + Leitura de placas (menção) */
.vzf-sub { display: grid; grid-template-columns: 2.2fr 1fr; gap: 24px; margin-top: 24px; }
.vzf-intruso {
  display: grid; grid-template-columns: 1fr 1.15fr; background: #fff; border: 1px solid var(--vz-line);
  border-radius: 24px; overflow: hidden; box-shadow: var(--vz-shadow);
}
.vzf-intruso-img { background: var(--vz-navy); min-height: 220px; }
.vzf-intruso-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vzf-intruso-body { padding: 26px 28px 14px; }
.vzf-intruso h3 { font-size: 22px; font-weight: 700; margin: 12px 0 8px; }
.vzf-intruso p { color: var(--vz-ink); font-size: 14.5px; margin-bottom: 14px; }
.vzf-placas {
  background: #fff; border: 1px dashed #c9d6ec; border-radius: 24px; padding: 26px;
  display: flex; flex-direction: column; align-items: flex-start;
}
.vzf-placas-ico {
  width: 44px; height: 44px; border-radius: 14px; background: var(--vz-surface-2); color: var(--vz-blue);
  display: flex; align-items: center; justify-content: center; font-size: 19px; margin-bottom: 14px;
}
.vzf-placas h4 { font-size: 18px; font-weight: 700; margin: 12px 0 6px; }
.vzf-placas p { color: var(--vz-ink); font-size: 14px; margin: 0; }

/* Como funciona */
.vzf-how { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; margin-top: 48px; padding: 48px; }
.vzf-eyebrow-dark { background: rgba(255,255,255,.12); color: #7fd8ee; }
.vzf-how .vz-h2 { color: #fff; margin-bottom: 24px; }
.vzf-steps { list-style: none; padding: 0; margin: 0; counter-reset: vzf; }
.vzf-steps li { display: flex; gap: 16px; align-items: flex-start; position: relative; padding-bottom: 22px; }
.vzf-steps li:last-child { padding-bottom: 0; }
.vzf-steps li:not(:last-child)::after {
  content: ""; position: absolute; left: 23px; top: 50px; bottom: 4px; width: 2px;
  background: linear-gradient(180deg, rgba(127,216,238,.6), rgba(127,216,238,0));
}
.vzf-step-ico {
  flex: 0 0 48px; height: 48px; border-radius: 14px; background: var(--vz-grad); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  box-shadow: 0 8px 20px rgba(16,184,217,.25);
}
.vzf-steps h4 { color: #fff; font-size: 17px; font-weight: 600; margin: 2px 0 4px; }
.vzf-steps h4::before { counter-increment: vzf; content: counter(vzf) ". "; color: #7fd8ee; }
.vzf-steps p { margin: 0; font-size: 14.5px; }

/* mockup de alerta no WhatsApp (HTML/CSS + foto real) */
.vzf-phone {
  width: 100%; max-width: 330px; margin: 0 auto; border-radius: 30px; background: #0e1a2b;
  padding: 10px; box-shadow: 0 30px 60px rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.12);
}
.vzf-phone-top {
  display: flex; align-items: center; gap: 10px; background: #075e54; color: #fff;
  border-radius: 22px 22px 0 0; padding: 12px 14px;
}
.vzf-phone-top b { display: block; font-size: 14px; line-height: 1.2; }
.vzf-phone-top small { font-size: 11px; opacity: .8; }
.vzf-phone-avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--vz-grad); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.vzf-phone-chat {
  background: #e9e2d8; border-radius: 0 0 22px 22px; padding: 16px 12px 18px; min-height: 260px;
  background-image: radial-gradient(rgba(11,31,58,.05) 1px, transparent 1px); background-size: 14px 14px;
}
.vzf-bubble {
  background: #fff; border-radius: 4px 14px 14px 14px; padding: 5px 5px 6px; max-width: 92%;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.vzf-bubble img { width: 100%; height: auto; display: block; border-radius: 10px; aspect-ratio: 4 / 3; object-fit: cover; }
.vzf-how .vzf-bubble p { color: #1f2c34; font-size: 13px; line-height: 1.45; margin: 7px 6px 0; }
.vzf-bubble p b { color: #1f2c34; }
.vzf-bubble p b i { color: var(--vz-red); }
.vzf-bubble p span { color: #667781; }
.vzf-bubble time { display: block; text-align: right; font-size: 10.5px; color: #667781; margin: 0 6px; }
.vzf-bubble time i { color: #53bdeb; font-size: 10px; margin-left: 1px; }
.vzf-bubble time i + i { margin-left: -4px; }

/* Destaques */
.vzf-highlights { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 28px; }
.vzf-hl {
  display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid var(--vz-line);
  border-radius: 18px; padding: 16px 18px; box-shadow: var(--vz-shadow-sm);
}
.vzf-hl > i {
  flex: 0 0 40px; height: 40px; border-radius: 12px; background: rgba(47,107,255,.10); color: var(--vz-blue);
  display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.vzf-hl b { display: block; color: var(--vz-navy); font-size: 14.5px; line-height: 1.3; }
.vzf-hl span { display: block; color: var(--vz-ink); font-size: 13px; line-height: 1.4; margin-top: 2px; }

@media (max-width: 1199px) {
  .vzf-main { padding: 36px; gap: 32px; }
  .vzf-sub { grid-template-columns: 1fr; }
  .vzf-placas { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 14px; }
  .vzf-placas-ico { margin: 0; }
  .vzf-placas h4 { margin: 0; }
  .vzf-placas p { flex: 1 1 100%; margin-top: 8px; }
  .vzf-placas .vzf-tag { order: 3; }
  .vzf-highlights { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 991px) {
  .vzf { padding: 64px 0 56px; }
  .vzf-main { grid-template-columns: 1fr; }
  .vzf-how { grid-template-columns: 1fr; padding: 36px; }
}
@media (max-width: 767px) {
  .vzf-intruso { grid-template-columns: 1fr; }
  .vzf-intruso-img { min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 575px) {
  .vzf { padding: 48px 0 40px; scroll-margin-top: 88px; }
  .vzf-head { margin-bottom: 28px; }
  .vzf-head .vz-h2 { font-size: 27px; }
  .vzf-main { padding: 22px 18px; border-radius: 24px; gap: 24px; }
  .vzf-main h3 { font-size: 24px; }
  .vzf-benefit { font-size: 15px; }
  .vzf-main-media { gap: 6px; }
  .vzf-shot figcaption { font-size: 10px; padding: 3px 4px; left: 4px; right: 4px; bottom: 4px; }
  .vzf-ctas > a { width: 100%; text-align: center; justify-content: center; }
  .vzf-intruso-body { padding: 22px 20px 12px; }
  .vzf-placas { padding: 20px; }
  .vzf-how { padding: 28px 20px; margin-top: 32px; gap: 28px; }
  .vzf-how .vz-h2 { font-size: 24px; }
  .vzf-highlights { grid-template-columns: 1fr; gap: 10px; }
}
/* ===== fim Home: Funcionalidades 2026 ===== */

/* ===== Tipografia Inter 2026 ===== */
/* Inter (Google Fonts, eixo opsz): font-optical-sizing:auto usa o corte "Display" em tamanhos grandes.
   Sobrescreve os 'Poppins' de styles.css sem editar o arquivo legado. */
:root { --vz-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; }
body {
  font-family: var(--vz-font); font-optical-sizing: auto;
  font-weight: 400; line-height: 1.6;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
p, a, li, label, small, strong, span:not(.fa), td, th,
.btn, button, input, select, textarea, .form-control,
.navbar, .nav-link, .dropdown-menu, .modal, .tooltip, .popover,
.btn-conheca, .btn-agendar-stone, .btn-agendar, .btn-entrar, .btn-revenda, .btn-front,
.anota-hero, .bling-text, .footer-section, .vz-h2 {
  font-family: var(--vz-font); font-optical-sizing: auto;
}
h1, h2, .h1, .h2, .vz-h2 { font-weight: 700; letter-spacing: -0.02em; }
h3, .h3 { font-weight: 600; letter-spacing: -0.01em; }
h4, h5, h6, .h4, .h5, .h6 { font-weight: 600; }
.btn, button { font-weight: 600; }
.hero-text h1, .hero-text h2, .erp-header h1, .erp-header h2, .faq-like-section h1, .faq-like-section h2,
#overview h1, #overview h2, .cta-content h2, .vzf-head .vz-h2, .vzf-how .vz-h2,
.hero-section .hero-text h1, .fundo .hero-text h1, .hero-section .hero-text h2.vz-as-h1 { letter-spacing: -0.02em; }
.fa { font-family: FontAwesome; }
/* ===== fim Tipografia Inter 2026 ===== */

/* recursos.php: ícones de ambientes no lugar das fotos de pessoas */
.avatar-group .avatar i { color: var(--vz-blue); font-size: 20px; line-height: 1; }
.avatar-group .avatar { display: inline-flex; align-items: center; justify-content: center; }

/*---------- Home: card de alerta do Anti-furto no hero (10/10/2026) ----------*/
.vz-home-hero-card { max-width: 460px; margin-left: auto; }
.vz-home-hero-card:hover { transform: none; }
.vz-home-hero-card .vz-card-img img { border-radius: 0; height: 100%; }
.vz-home-hero-card .vz-alert-chip { text-align: left; font-size: 13px; }
.vz-alert-chip .vz-alert-cam { opacity: .78; font-size: 12px; }
.vz-alert-chip .vz-alert-cam i { color: inherit; margin-right: 5px; }
@media (max-width: 767px) {
  .vz-home-hero-card { margin: 32px auto 0; max-width: 100%; }
  .vz-home-hero-card .vz-alert-chip { font-size: 12px; left: 10px; right: 10px; bottom: 10px; }
}

/* ===== Onda 2 (10/10/2026): objeções, anti-intruso, 404, LGPD, navbar ===== */
/* Objeções (index.php, o-que-detecta.php) e grades de 4 cartões */
.vz-obj-grid, .vz-lgpd-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.vz-lgpd-grid { grid-template-columns: repeat(3, 1fr); margin-top: 18px; }
@media (max-width: 1199px) { .vz-obj-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 991px)  { .vz-lgpd-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .vz-obj-grid, .vz-lgpd-grid { grid-template-columns: 1fr; } }
.vz-obj-grid .vz-feature h3, .vz-lgpd-grid .vz-feature h3 { font-size: 17px; font-weight: 700; color: var(--vz-navy); margin-bottom: 8px; }
.vz-obj-grid .vz-feature a, .vz-lgpd-grid .vz-feature a { color: var(--vz-blue); font-weight: 600; }
.vz-obj-alt { margin: 16px 0 0; color: var(--vz-ink); font-size: 14.5px; }
.vz-obj-alt a, .vzf-intruso-link { color: var(--vz-blue); font-weight: 600; }
.vzf-intruso-link { display: inline-block; margin-top: 10px; }

/* Anti-intruso (anti-intruso.php) */
.vz-ai-hero-card { max-width: 460px; margin-left: auto; }
.vz-ai-hero-card .vz-ai-img { aspect-ratio: 16 / 9; }
.vz-ai-steps { padding-left: 20px; margin: 16px 0 0; }
.vz-ai-steps li { margin-bottom: 10px; }
.vz-ai-cross {
  display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
  background: var(--vz-grad-soft); border: 1px solid var(--vz-line); border-radius: 28px; padding: 40px;
}
.vz-ai-cross > div:first-child { flex: 1 1 420px; }
.vz-ai-cross-cta { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
@media (max-width: 575px) { .vz-ai-cross { padding: 28px 22px; border-radius: 22px; } }

/* 404 */
.vz-404 { padding-top: 150px !important; padding-bottom: 80px !important; }
.vz-404 h1 { font-weight: 700; color: var(--vz-navy); letter-spacing: -.5px; }
.vz-404 h1 span { background: var(--vz-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.vz-404-code { display: block; font-size: 88px; font-weight: 800; line-height: 1; letter-spacing: -2px;
  background: var(--vz-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.vz-404-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 32px; text-align: left; }
.vz-404-links .vz-feature { display: block; color: inherit; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.vz-404-links .vz-feature:hover { transform: translateY(-3px); box-shadow: var(--vz-shadow-lg); }
.vz-404-links h2 { font-size: 17px; font-weight: 700; color: var(--vz-navy); margin-bottom: 4px; }
@media (max-width: 991px) { .vz-404-links { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .vz-404 { padding-top: 120px !important; } .vz-404-links { grid-template-columns: 1fr; } .vz-404-code { font-size: 64px; } }

/* Navbar com 5 itens + Login: cabe de 992 a 1440 */
@media (min-width: 992px) and (max-width: 1199px) {
  #navbar .nav-item.mg-r-5 { margin-right: 0 !important; }
  #navbar .nav-link { padding: 8px 9px !important; font-size: 13.5px; }
  #navbar .navbar-brand img { width: 112px; }
  #navbar .btn-login { padding: 8px 14px; }
}
.vz-404 .vz-404-links h2 { font-size: 17px !important; line-height: 1.3; letter-spacing: 0; }
.vz-404 .vz-404-links p { font-size: 14.5px !important; }
#lgpd, #duvidas-comuns { scroll-margin-top: 110px; }
/* ===== fim Onda 2 ===== */

/* ===== Home hero 2026 ===== */
/* Hero da home (10/10/2026). Só CSS (sem libs); animações desligadas com prefers-reduced-motion. */
.vzh {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 148px 0 104px;
  background: var(--vz-grad-soft);
  border-radius: 0 0 56px 56px;
  text-align: left;
}
.vzh-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.vzh-bg::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(47,107,255,.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,107,255,.075) 1px, transparent 1px);
  background-size: 44px 44px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 60% 35%, #000 30%, transparent 85%);
          mask-image: radial-gradient(ellipse 75% 70% at 60% 35%, #000 30%, transparent 85%);
}
.vzh-bg::after { /* linha luminosa na base */
  content: ""; position: absolute; left: 10%; right: 10%; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(47,107,255,.35), rgba(16,184,217,.35), transparent);
}
.vzh-glow { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; }
.vzh-glow-1 { width: 520px; height: 520px; right: -120px; top: -140px; background: radial-gradient(circle, rgba(47,107,255,.45), transparent 70%); }
.vzh-glow-2 { width: 460px; height: 460px; right: 22%; bottom: -220px; background: radial-gradient(circle, rgba(16,184,217,.40), transparent 70%); }
.vzh-glow-3 { width: 380px; height: 380px; left: -160px; top: 30%; background: radial-gradient(circle, rgba(109,93,252,.22), transparent 70%); }

.vzh-wrap { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 56px; align-items: center; }

/* ---- texto ---- */
.vzh-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 600; letter-spacing: .01em; color: var(--vz-navy);
  background: rgba(255,255,255,.75); border: 1px solid rgba(47,107,255,.18);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-radius: 999px; padding: 6px 14px 6px 10px; box-shadow: 0 4px 14px rgba(11,31,58,.06);
}
.vzh-live { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--vz-green-2); flex: none; }
.vzh-live::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid rgba(34,192,125,.45); animation: vzh-ping 1.8s ease-out infinite;
}
.vzh .vzh-title {
  margin: 22px 0 18px; color: var(--vz-navy) !important;
  font-size: clamp(34px, 3.7vw, 58px); line-height: 1.06; font-weight: 750;
  letter-spacing: -0.022em; font-optical-sizing: auto; text-wrap: pretty;
}
.vzh .vzh-title span {
  background: var(--vz-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.vzh .vzh-sub {
  max-width: 540px; margin: 0 0 30px; color: var(--vz-ink) !important;
  font-size: 18.5px; line-height: 1.6; text-wrap: pretty;
}
.vzh-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; }
.vzh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 26px; border-radius: 14px;
  font-size: 16px; font-weight: 650; text-decoration: none !important; white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}
.vzh-btn-primary {
  color: #fff !important; background: var(--vz-grad);
  box-shadow: 0 12px 28px rgba(47,107,255,.32), inset 0 1px 0 rgba(255,255,255,.25);
}
.vzh-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(47,107,255,.40), inset 0 1px 0 rgba(255,255,255,.25); }
.vzh-btn-primary .fa { transition: transform .2s ease; }
.vzh-btn-primary:hover .fa { transform: translateX(3px); }
.vzh-btn-ghost {
  color: var(--vz-navy) !important; background: rgba(255,255,255,.8);
  border: 1px solid var(--vz-line); box-shadow: var(--vz-shadow-sm);
}
.vzh-btn-ghost .fa { color: #22c07d; font-size: 20px; }
.vzh-btn-ghost:hover { transform: translateY(-2px); border-color: rgba(47,107,255,.35); background: #fff; }
.vzh-btn:focus-visible { outline: none; box-shadow: var(--vz-ring); }

.vzh-trust {
  list-style: none; margin: 0; padding: 22px 0 0; border-top: 1px solid rgba(11,31,58,.08);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; max-width: 600px;
}
.vzh-trust li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 550; color: var(--vz-navy); line-height: 1.3; }
.vzh-ti {
  flex: none; width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--vz-blue); box-shadow: 0 2px 8px rgba(11,31,58,.07); font-size: 14px;
}

/* ---- composição visual ---- */
.vzh-visual { position: relative; padding: 30px 64px 56px 0; }
.vzh-cam {
  position: relative; margin: 0; border-radius: 22px; overflow: hidden;
  background: #0b1f3a; padding: 0 0 0;
  box-shadow: 0 30px 70px rgba(11,31,58,.22), 0 0 0 1px rgba(255,255,255,.6), 0 0 0 7px rgba(255,255,255,.45);
}
.vzh-cam-bar {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  background: linear-gradient(180deg, #102a4d, #0b1f3a); color: rgba(255,255,255,.85); font-size: 12.5px; font-weight: 500;
}
.vzh-rec { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; letter-spacing: .06em; color: #fff; font-size: 11.5px;
  background: rgba(214,52,69,.22); border: 1px solid rgba(214,52,69,.5); padding: 2px 8px; border-radius: 6px; }
.vzh-rec-dot { width: 7px; height: 7px; border-radius: 50%; background: #ff4d5e; animation: vzh-blink 1.2s steps(2, start) infinite; }
.vzh-cam-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vzh-cam-name .fa { color: #7fd8ee; margin-right: 3px; }
.vzh-cam-ai { margin-left: auto; white-space: nowrap; color: #7fd8ee; font-weight: 600; }
.vzh-cam-img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.vzh-cam-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vzh-cam-img::after { /* leve vinheta */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(11,31,58,.35) 100%);
}
.vzh-scan {
  position: absolute; left: 0; right: 0; top: -90px; height: 90px; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(16,184,217,.18) 85%, rgba(16,184,217,.75) 100%);
  border-bottom: 1px solid rgba(127,216,238,.9);
  animation: vzh-scan 4.5s cubic-bezier(.45,0,.55,1) infinite;
}
.vzh-corner { position: absolute; width: 22px; height: 22px; border: 2px solid rgba(255,255,255,.85); z-index: 1; }
.vzh-c1 { top: 12px; left: 12px; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.vzh-c2 { top: 12px; right: 12px; border-left: 0; border-bottom: 0; border-radius: 0 6px 0 0; }
.vzh-c3 { bottom: 12px; left: 12px; border-right: 0; border-top: 0; border-radius: 0 0 0 6px; }
.vzh-c4 { bottom: 12px; right: 12px; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }

/* celular (CSS puro) */
.vzh-phone {
  position: absolute; right: 0; bottom: 0; width: 214px; z-index: 2;
  padding: 8px; border-radius: 34px; background: #0b1f3a;
  box-shadow: 0 30px 60px rgba(11,31,58,.35), inset 0 0 0 1.5px rgba(255,255,255,.12);
  transform: rotate(3deg);
}
.vzh-phone::before { content: ""; position: absolute; top: 14px; left: 50%; width: 62px; height: 16px; margin-left: -31px; border-radius: 10px; background: #0b1f3a; z-index: 3; }
.vzh-phone-screen { border-radius: 27px; overflow: hidden; background: #efe9e1; }
.vzh-chat-head {
  display: flex; align-items: center; gap: 8px; padding: 34px 12px 10px;
  background: #0f5c4c; color: #fff; font-size: 12px; line-height: 1.2;
}
.vzh-chat-head b { display: block; font-weight: 650; }
.vzh-chat-head small { opacity: .75; font-size: 10.5px; }
.vzh-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--vz-grad); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; flex: none; }
.vzh-chat-body {
  padding: 12px 10px 16px;
  background-color: #efe9e1;
  background-image: radial-gradient(rgba(11,31,58,.05) 1px, transparent 1px); background-size: 12px 12px;
}
.vzh-bubble {
  position: relative; background: #fff; border-radius: 4px 12px 12px 12px; padding: 5px 5px 18px;
  box-shadow: 0 1px 1px rgba(11,31,58,.12); font-size: 11.5px; line-height: 1.35; color: #1d2b3a;
  animation: vzh-pop .6s cubic-bezier(.2,.8,.2,1) .9s both;
}
.vzh-bubble img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; margin-bottom: 6px; }
.vzh-bubble b, .vzh-bubble span, .vzh-bubble small { display: block; padding: 0 4px; }
.vzh-bubble b { color: #0f5c4c; font-weight: 700; }
.vzh-bubble small { color: #5b6b85; font-size: 10.5px; margin-top: 2px; }
.vzh-bubble em { position: absolute; right: 8px; bottom: 4px; font-style: normal; font-size: 9.5px; color: #8a99b3; }
.vzh-bubble em .fa { color: #34b7f1; font-size: 9px; margin-left: 1px; }
.vzh-bubble em .fa + .fa { margin-left: -4px; }

/* chips de sinais */
.vzh-chip {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 8px; border-radius: 999px; white-space: nowrap;
  background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.9); box-shadow: 0 12px 30px rgba(11,31,58,.16);
  font-size: 13.5px; font-weight: 650; color: var(--vz-navy);
  animation: vzh-float 6s ease-in-out infinite;
}
.vzh-chip .fa {
  width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--vz-grad); color: #fff; font-size: 12px;
}
.vzh-chip::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--vz-green-2); box-shadow: 0 0 0 3px rgba(34,192,125,.18); }
.vzh-chip-1 { left: -34px; top: 26%; }
.vzh-chip-2 { left: 8%; bottom: 20px; animation-delay: -2s; }
.vzh-chip-3 { left: 30%; top: -6px; animation-delay: -4s; }

/* ---- faixa "o que a Visy identifica" ---- */
.vzh-signals { padding: 28px 0 0; }
.vzh-signals-wrap { display: flex; align-items: center; gap: 24px; }
.vzh-signals-label {
  flex: none; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--vz-ink) !important; text-decoration: none !important;
}
.vzh-signals-label:hover { color: var(--vz-blue) !important; }
.vzh-marquee {
  position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.vzh-track { display: flex; width: max-content; animation: vzh-marquee 48s linear infinite; }
.vzh-marquee:hover .vzh-track, .vzh-marquee:focus-within .vzh-track { animation-play-state: paused; }
.vzh-set { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0 10px 0 0; }
.vzh-set a {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--vz-line);
  font-size: 14px; font-weight: 550; color: var(--vz-navy) !important; text-decoration: none !important;
  transition: border-color .2s ease, color .2s ease;
}
.vzh-set a .fa { color: var(--vz-blue); width: 14px; text-align: center; }
.vzh-set a:hover { border-color: rgba(47,107,255,.4); color: var(--vz-blue) !important; }

/* espaçamento hero → faixa → funcionalidades */
.vzh-signals + .vzf, .vzh-signals ~ #funcionalidades { padding-top: 64px; }

@keyframes vzh-ping { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }
@keyframes vzh-blink { to { visibility: hidden; } }
@keyframes vzh-scan { 0% { top: -90px; } 100% { top: 100%; } }
@keyframes vzh-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes vzh-pop { from { transform: translateY(10px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes vzh-marquee { to { transform: translateX(-50%); } }

/* ---- responsivo ---- */
@media (max-width: 1199px) {
  .vzh-wrap { gap: 44px; }
  .vzh-visual { padding: 30px 48px 48px 0; }
  .vzh-btn { padding: 0 20px; font-size: 15px; }
  .vzh-phone { width: 180px; }
  .vzh-chip-1 { left: -22px; }
  .vzh .vzh-sub { font-size: 17px; }
}
@media (max-width: 991px) {
  .vzh { padding: 124px 0 72px; border-radius: 0 0 40px 40px; }
  .vzh-wrap { grid-template-columns: 1fr; gap: 48px; }
  .vzh-copy { max-width: 640px; }
  .vzh .vzh-title { font-size: clamp(32px, 6vw, 48px); }
  .vzh-visual { max-width: 600px; width: 100%; margin: 0 auto; }
  .vzh-signals-wrap { flex-direction: column; align-items: stretch; gap: 12px; }
  .vzh-signals-label { text-align: center; }
}
@media (max-width: 575px) {
  .vzh { padding: 128px 0 48px; border-radius: 0 0 32px 32px; }
  .vzh-wrap { gap: 36px; }
  .vzh-eyebrow { font-size: 12px; }
  .vzh .vzh-title { font-size: 32px; line-height: 1.1; margin: 18px 0 14px; letter-spacing: -0.03em; }
  .vzh .vzh-sub { font-size: 16px; margin-bottom: 24px; }
  .vzh-ctas { flex-direction: column; margin-bottom: 26px; }
  .vzh-btn { width: 100%; }
  .vzh-trust { gap: 12px 12px; }
  .vzh-trust li { font-size: 13px; align-items: flex-start; }
  .vzh-ti { width: 26px; height: 26px; font-size: 12px; border-radius: 8px; }
  .vzh-visual { padding: 0 0 22px; }
  .vzh-btn { font-size: 16px; }
  .vzh-phone, .vzh-chip-1, .vzh-chip-3 { display: none; }
  .vzh-chip-2 { left: 12px; bottom: 0; }
  .vzh-cam { border-radius: 18px; }
  .vzh-cam-ai { display: none; }
  .vzh-signals { padding-top: 22px; }
  .vzh-signals + .vzf, .vzh-signals ~ #funcionalidades { padding-top: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .vzh-live::after, .vzh-rec-dot, .vzh-scan, .vzh-chip, .vzh-bubble, .vzh-track { animation: none !important; }
  .vzh-scan { display: none; }
  .vzh-btn, .vzh-btn .fa { transition: none; }
  .vzh-btn:hover { transform: none; }
  .vzh-marquee { -webkit-mask-image: none; mask-image: none; }
  .vzh-track { width: auto; }
  .vzh-set { flex-wrap: wrap; justify-content: center; padding: 0; }
  .vzh-set-dup { display: none; }
}
/* ===== fim Home hero 2026 ===== */

/* ===== Recursos hero 2026 ===== */
/* 10/10/2026 — hero de recursos.php + componentes do padrão de imagens (docs/site/padrao_imagens.md):
   moldura "câmera Visy" (.vz-camframe), cena noturna em CSS (.vz-nightscene), cartão de configuração
   (.vz-cfgcard), celular estático (.vz-phone-static), palco do bloco "bling" (.vz-bling-stage). */

/* ---- moldura padrão "câmera Visy" ---- */
.vz-camframe {
  position: relative; margin: 0; border-radius: 18px; overflow: hidden; background: #0b1f3a;
  border: 1px solid var(--vz-line); box-shadow: var(--vz-shadow-lg); text-align: left;
}
.vz-camframe-bar {
  display: flex; align-items: center; gap: 10px; padding: 9px 13px;
  background: linear-gradient(180deg, #102a4d, #0b1f3a); color: rgba(255,255,255,.85);
  font-size: 12px; font-weight: 500; line-height: 1.2;
}
.vz-camframe-rec {
  display: inline-flex; align-items: center; gap: 6px; flex: none; font-weight: 700; letter-spacing: .06em; color: #fff;
  font-size: 11px; background: rgba(214,52,69,.22); border: 1px solid rgba(214,52,69,.5); padding: 2px 7px; border-radius: 6px;
}
.vz-camframe-rec::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ff4d5e; animation: vzh-blink 1.2s steps(2, start) infinite; }
.vz-camframe-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vz-camframe-name .fa { color: #7fd8ee; margin-right: 4px; }
.vz-camframe-ai { margin-left: auto; flex: none; white-space: nowrap; color: #7fd8ee; font-weight: 600; }
.vz-camframe-img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #0b1f3a; }
.vz-camframe-img--wide { aspect-ratio: 16 / 9; }
.vz-camframe .vz-camframe-img img {
  display: block; width: 100% !important; max-width: none !important; height: 100% !important; object-fit: cover;
  border-radius: 0 !important; box-shadow: none !important; margin: 0;
}
.vz-camframe-img::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(11,31,58,.32) 100%); }
.vz-camframe-chip {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2;
  background: rgba(255,255,255,.95); color: #1d2b3a; border-radius: 12px; padding: 8px 11px;
  font-size: 12.5px; line-height: 1.35; box-shadow: 0 8px 22px rgba(11,31,58,.22);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.vz-camframe-chip b { color: #0f5c4c; font-weight: 700; }
.vz-camframe-chip > .fa-whatsapp { color: #25d366; margin-right: 5px; font-size: 14px; }
.vz-camframe-chip small { display: block; color: var(--vz-ink); font-size: 11.5px; margin-top: 1px; }
.vz-badge-night, .vz-camframe-tag {
  position: absolute; top: 12px; left: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 650; letter-spacing: .01em;
  color: #fff; background: rgba(11,31,58,.78); border: 1px solid rgba(127,216,238,.45);
}
.vz-badge-night .fa { color: #ffd36b; }
.vz-camframe-tag { background: rgba(47,107,255,.88); border-color: rgba(255,255,255,.4); }
.vz-camframe-area { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.vz-camframe--fill { height: 100%; border: 0; border-radius: 0; box-shadow: none; display: flex; flex-direction: column; }
.vz-camframe--fill .vz-camframe-img { flex: 1 1 auto; aspect-ratio: auto; min-height: 200px; }

/* ---- cena noturna (composição em CSS, sem pessoa identificável) ---- */
.vz-nightscene {
  position: absolute; inset: 0; overflow: hidden;
  background:
    radial-gradient(ellipse 60% 45% at 50% 62%, rgba(150,190,170,.20), transparent 70%),
    linear-gradient(180deg, #13201d 0%, #1b2c27 48%, #24372f 100%);
}
.vz-ns-shelf { position: absolute; top: 0; bottom: 0; width: 32%;
  background: repeating-linear-gradient(180deg, rgba(190,220,205,.20) 0 2px, rgba(120,150,135,.06) 2px 24px); }
.vz-ns-shelf-l { left: 0; -webkit-clip-path: polygon(0 0, 100% 16%, 100% 72%, 0 100%); clip-path: polygon(0 0, 100% 16%, 100% 72%, 0 100%); }
.vz-ns-shelf-r { right: 0; -webkit-clip-path: polygon(0 16%, 100% 0, 100% 100%, 0 72%); clip-path: polygon(0 16%, 100% 0, 100% 100%, 0 72%); }
.vz-nightscene::after { /* ruído/grão de imagem infravermelha */
  content: ""; position: absolute; inset: 0; opacity: .35; mix-blend-mode: overlay;
  background-image: radial-gradient(rgba(255,255,255,.35) 1px, transparent 1px); background-size: 3px 3px;
}
.vz-ns-floor { position: absolute; left: 32%; right: 32%; top: 72%; bottom: 0; background: linear-gradient(180deg, rgba(150,190,170,.10), rgba(150,190,170,.02)); }
.vz-ns-box {
  position: absolute; left: 44%; top: 24%; width: 13%; height: 42%; z-index: 1;
  border: 2px solid #ff8a1f; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.25);
}
.vz-ns-box::before { /* silhueta genérica (não identificável) */
  content: ""; position: absolute; left: 50%; bottom: 0; width: 70%; height: 70%; transform: translateX(-50%);
  background: rgba(205,225,215,.30); border-radius: 40% 40% 10% 10%; filter: blur(2px);
}
.vz-ns-box::after {
  content: ""; position: absolute; left: 50%; top: 8%; width: 34%; aspect-ratio: 1; transform: translateX(-50%);
  background: rgba(205,225,215,.34); border-radius: 50%; filter: blur(1.5px);
}
.vz-ns-label { position: absolute; left: -2px; bottom: 100%; margin-bottom: 3px; font: 700 11px/1 Inter, sans-serif; color: #ff8a1f; white-space: nowrap; letter-spacing: .02em; }
.vz-ns-ir { position: absolute; right: 42px; top: 14px; z-index: 2; font: 700 10.5px/1 Inter, sans-serif; letter-spacing: .1em; color: rgba(220,240,230,.8); border: 1px solid rgba(220,240,230,.4); border-radius: 5px; padding: 3px 6px; }

/* ---- cartão "Configuração da câmera" ---- */
.vz-cfgcard {
  background: #fff; border: 1px solid var(--vz-line); border-radius: 18px; box-shadow: var(--vz-shadow-lg);
  padding: 14px 16px 10px; font-size: 13px; color: var(--vz-navy); text-align: left; width: 250px;
}
.vz-cfgcard-head { display: flex; align-items: center; gap: 9px; padding-bottom: 10px; border-bottom: 1px solid var(--vz-line); margin-bottom: 4px; }
.vz-cfgcard-head .fa { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--vz-grad); color: #fff; font-size: 13px; flex: none; }
.vz-cfgcard-head b { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.2; }
.vz-cfgcard-head small { display: block; color: var(--vz-ink); font-size: 11.5px; }
.vz-cfgcard ul { list-style: none; margin: 0; padding: 0; }
.vz-cfgcard li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px dashed rgba(11,31,58,.08); font-weight: 550; line-height: 1.25; }
.vz-cfgcard li:last-child { border-bottom: 0; }
.vz-cfgcard li.vz-cfg-strong { font-weight: 700; color: var(--vz-blue); }
.vz-cfgcard .vz-cfg-sched { color: var(--vz-ink); font-weight: 600; font-size: 12px; white-space: nowrap; }
.vz-switch { flex: none; position: relative; width: 32px; height: 18px; border-radius: 999px; background: #cfd8e6; }
.vz-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(11,31,58,.25); transition: left .2s ease; }
.vz-switch.is-on { background: var(--vz-green-2); }
.vz-switch.is-on::after { left: 16px; }

/* ---- celular estático com alertas (usa .vzh-phone-screen, .vzh-chat-head, .vzh-chat-body e .vzh-bubble do hero da home) ---- */
.vz-phone-static {
  position: relative; width: 270px; max-width: 100%; margin: 0 auto; padding: 9px; border-radius: 38px; background: #0b1f3a;
  box-shadow: 0 30px 60px rgba(11,31,58,.28), inset 0 0 0 1.5px rgba(255,255,255,.12); text-align: left;
}
.vz-phone-static::before { content: ""; position: absolute; top: 16px; left: 50%; width: 70px; height: 18px; margin-left: -35px; border-radius: 10px; background: #0b1f3a; z-index: 3; }
.vz-phone-static .vzh-phone-screen { border-radius: 30px; }
.vz-phone-static .vzh-chat-body { display: grid; gap: 10px; }
.vz-phone-static .vzh-bubble img { border-radius: 8px !important; box-shadow: none !important; max-width: 100%; }
.vz-phone-static .vzh-bubble + .vzh-bubble { animation-delay: 1.4s; }

/* ---- palco do bloco "bling" (troca de painéis, scripts.js) ---- */
.vz-bling-stage { position: relative; display: grid; max-width: 480px; margin: 0 auto; }
.vz-bling-panel { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: scale(.98); transition: opacity .45s ease, transform .45s ease, visibility 0s linear .45s; align-self: center; }
.vz-bling-panel.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .45s ease, transform .45s ease; }
.vz-events { background: #fff; border: 1px solid var(--vz-line); border-radius: 18px; box-shadow: var(--vz-shadow-lg); padding: 14px; text-align: left; }
.vz-events-head { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--vz-navy); font-size: 14px; padding: 2px 4px 10px; }
.vz-events-head .fa { color: var(--vz-blue); }
.vz-events ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vz-events li { display: flex; align-items: center; gap: 12px; padding: 7px; border-radius: 12px; background: var(--vz-bg); }
.vz-events li img { width: 76px !important; height: 57px !important; object-fit: cover; border-radius: 8px !important; box-shadow: none !important; flex: none; }
.vz-events li b { display: block; font-size: 13.5px; color: var(--vz-navy); }
.vz-events li small { display: block; font-size: 12px; color: var(--vz-ink); }
.vz-events li small .fa { margin-right: 4px; }

/* ---- CTA final: moldura no lugar da foto de câmeras ---- */
.vz-cta-frame { position: absolute; right: 56px; top: 50%; width: 330px; transform: translateY(-50%) rotate(2deg); z-index: 2; }
.vz-cta-frame .vz-camframe { border-color: rgba(255,255,255,.18); box-shadow: 0 24px 60px rgba(0,0,0,.35); }
@media (max-width: 1199px) { .vz-cta-frame { width: 280px; right: 32px; } }
@media (max-width: 992px) { .vz-cta-frame { display: none; } }

/* ---- hero de recursos.php (reaproveita .vzh-*) ---- */
.vzr .vzh-title { font-size: clamp(32px, 3.3vw, 52px); }
.vzr-visual { position: relative; padding: 18px 72px 118px 0; }
.vzr-mosaic {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 10px; border-radius: 22px;
  background: #0b1f3a; box-shadow: 0 30px 70px rgba(11,31,58,.22), 0 0 0 1px rgba(255,255,255,.6), 0 0 0 7px rgba(255,255,255,.45);
}
.vzr-mosaic-bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 2px 4px 2px; color: rgba(255,255,255,.85); font-size: 12px; font-weight: 500; }
.vzr-tile { position: relative; margin: 0; border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 3; background: #102a4d; }
.vzr-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vzr-tile figcaption {
  position: absolute; left: 7px; bottom: 7px; display: inline-flex; align-items: center; gap: 5px; max-width: calc(100% - 14px);
  padding: 3px 8px; border-radius: 999px; background: rgba(11,31,58,.82); color: #fff; font-size: 11.5px; font-weight: 600; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vzr-tile figcaption .fa { color: #7fd8ee; }
.vzr-tile-cam { position: absolute; left: 7px; top: 7px; font-size: 10px; font-weight: 600; color: rgba(255,255,255,.88); background: rgba(11,31,58,.55); border-radius: 5px; padding: 2px 6px; white-space: nowrap; }
.vzr-tile::after { content: ""; position: absolute; inset: 0; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); pointer-events: none; }
.vzr-cfg { position: absolute; right: 0; bottom: 0; z-index: 3; animation: vzh-float 7s ease-in-out infinite; }
.vzr-chip { left: -30px; bottom: 150px; }

@media (max-width: 1199px) {
  .vzr-visual { padding: 18px 48px 110px 0; }
  .vzr-cfg .vz-cfgcard { width: 228px; }
}
@media (max-width: 991px) {
  .vzr-visual { max-width: 600px; width: 100%; margin: 0 auto; padding: 0 56px 120px 0; }
}
@media (max-width: 575px) {
  .vzr-visual { padding: 0; }
  .vzr-mosaic { gap: 6px; padding: 6px; border-radius: 16px; }
  .vzr-mosaic-bar { font-size: 11px; }
  .vzr-tile { border-radius: 9px; }
  .vzr-tile figcaption { font-size: 10.5px; padding: 2px 6px; left: 5px; bottom: 5px; }
  .vzr-tile-cam { display: none; }
  .vzr-cfg { position: relative; margin: -18px 12px 0 auto; width: max-content; max-width: calc(100% - 24px); animation: none; }
  .vzr-cfg .vz-cfgcard { width: 240px; max-width: 100%; }
  .vzr-chip { display: none; }
  .vz-camframe-chip { font-size: 11.5px; left: 8px; right: 8px; bottom: 8px; padding: 6px 9px; }
  .vz-camframe-ai { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .vz-camframe-rec::before, .vzr-cfg, .vz-phone-static .vzh-bubble { animation: none !important; }
  .vz-bling-panel, .vz-switch::after { transition: none; }
}
/* ---- molduras dentro dos blocos legados (.erp-image-wrapper / .faq-image) ---- */
.erp-image-wrapper > .vz-camframe { width: 100%; max-width: 500px; }
.vz-cfg-stack { flex-direction: column; }
.vz-cfg-stack > .vz-camframe { width: 100%; max-width: 520px; }
.vz-cfg-stack-card { align-self: flex-end; position: relative; z-index: 2; margin: -48px -8px 0 0; }
.faq-image .vz-phone-static { width: 290px; }
@media (max-width: 991px) {
  .erp-image-wrapper > .vz-camframe, .vz-cfg-stack { width: 100%; max-width: 520px; margin-left: auto; margin-right: auto; }
  .vz-cfg-stack-card { margin: -36px 8px 0 0; }
}
@media (max-width: 575px) {
  .vz-cfg-stack-card { align-self: center; margin: -24px 0 0; }
}
/* ===== fim Recursos hero 2026 ===== */