/* Vvivva Interior — camada visual (09/11/2026, pendência 60)
   Site (inicial .vvh) e portal. Só aparência: nada aqui muda dados ou regras.
   Para desligar tudo: tirar as 2 linhas de vv-visual do index.html. */
:root{--vv-navy:#122C3D;--vv-navy-deep:#0C1F2C;--vv-brass:#C08A3E;--vv-brass-light:#D9AE72;--vv-brass-soft:#F3E7D2;--vv-cream:#F5F1E7;--vv-line:#E4DDCB;--vv-ink:#1D2A2F;--vv-ink-soft:#5B6B70;--vv-ease:cubic-bezier(.2,.8,.2,1)}

/* ---------- Toques gerais (site e portal) ---------- */
button,a{-webkit-tap-highlight-color:transparent}
button:not(:disabled),a[class]{transition:transform .15s var(--vv-ease),box-shadow .2s var(--vv-ease),background-color .2s,color .2s,border-color .2s}
button:not(:disabled):active,a[class]:active{transform:scale(.97)}
.scroll-hide,.vv-scroll{scrollbar-width:none}
.scroll-hide::-webkit-scrollbar,.vv-scroll::-webkit-scrollbar{display:none}

/* ---------- Portal: cores fora da marca → paleta Vvivva ---------- */
/* verde-água (#1F9A96) em links e etiquetas */
#root [style*="rgb(31, 154, 150)"]{color:var(--vv-navy)!important}
#root span.rounded-full[style*="rgb(31, 154, 150)"]{color:#8A5F22!important;background:var(--vv-brass-soft)!important;border-color:transparent!important}
#root [style*="background: rgb(31, 154, 150)"],#root [style*="background-color: rgb(31, 154, 150)"]{background:var(--vv-navy)!important;color:#fff!important}
#root [style*="border: 1px solid rgb(31, 154, 150)"]{border-color:var(--vv-navy)!important}
/* vermelho só onde é alerta de verdade: botões "Apagar" ficam discretos */
#root button[style*="rgb(179, 38, 30)"]:not([style*="background: rgb(179"]){color:#9B4A3F!important}

/* Linhas de botões (filtros): uma linha que rola para o lado, com esmaecido na ponta */
#root .flex.flex-wrap:has(> button.rounded-full + button.rounded-full + button.rounded-full + button.rounded-full){flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent);padding-right:24px}
#root .flex.flex-wrap:has(> button.rounded-full + button.rounded-full + button.rounded-full + button.rounded-full)::-webkit-scrollbar{display:none}
#root .flex.flex-wrap:has(> button.rounded-full + button.rounded-full + button.rounded-full + button.rounded-full) > button{flex-shrink:0;white-space:nowrap}
#root .chips:has(> button + button + button + button){flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent);padding-right:24px}
#root .chips:has(> button + button + button + button)>button{flex-shrink:0;white-space:nowrap}
#root .flex.overflow-x-auto{-webkit-mask-image:linear-gradient(90deg,#000 90%,transparent);mask-image:linear-gradient(90deg,#000 90%,transparent)}
#root .vvtopnav{-webkit-mask-image:none;mask-image:none}
/* No computador (mouse) as linhas de botões voltam a quebrar em 2 linhas: sem barra, rolar de lado esconde botões (ex.: "Minha agenda" em Leads antigos). No celular continua deslizando. */
@media (hover:hover) and (pointer:fine){
#root .flex.flex-wrap:has(> button.rounded-full + button.rounded-full + button.rounded-full + button.rounded-full),#root .chips:has(> button + button + button + button){flex-wrap:wrap!important;overflow-x:visible;-webkit-mask-image:none;mask-image:none;padding-right:0}
}

/* Gaveta de filtros (montada pelo vv-visual.js quando a tela tem 3+ linhas de filtro) */
.vv-filtros-bar{display:flex;align-items:center;gap:8px;margin:4px 0 10px}
.vv-filtros-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;border:1px solid var(--vv-line);background:#fff;color:var(--vv-navy);font-weight:600;font-size:14px;font-family:inherit;cursor:pointer;box-shadow:0 1px 2px rgba(18,44,61,.06)}
.vv-filtros-btn svg{width:17px;height:17px}
.vv-filtros-resumo{font-size:12.5px;color:var(--vv-ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.vv-gaveta-fundo{position:fixed;inset:0;background:rgba(12,31,44,.45);backdrop-filter:blur(2px);z-index:80;opacity:0;pointer-events:none;transition:opacity .25s}
.vv-gaveta{position:fixed;left:0;right:0;bottom:0;z-index:81;background:var(--vv-cream);border-radius:22px 22px 0 0;padding:10px 18px calc(18px + env(safe-area-inset-bottom,0px));max-height:78vh;overflow:auto;transform:translateY(105%);transition:transform .32s var(--vv-ease);box-shadow:0 -12px 40px rgba(0,0,0,.18)}
.vv-gaveta::before{content:"";display:block;width:42px;height:5px;border-radius:5px;background:#CFC6B2;margin:0 auto 12px}
.vv-gaveta h4{font-family:'Lora',serif;font-size:19px;color:var(--vv-navy);margin:0 0 10px}
.vv-gaveta .vv-gaveta-ok{width:100%;margin-top:14px;padding:13px;border-radius:12px;border:0;background:var(--vv-navy);color:#fff;font-weight:700;font-size:15px;font-family:inherit}
.vv-gaveta .flex.flex-wrap{flex-wrap:wrap!important;overflow:visible!important;-webkit-mask-image:none!important;mask-image:none!important;padding-right:0!important;margin-bottom:12px}
.vv-gaveta-aberta .vv-gaveta-fundo{opacity:1;pointer-events:auto}
.vv-gaveta-aberta .vv-gaveta{transform:none}
body.vv-gaveta-aberta #root .vv-na-gaveta{flex-wrap:wrap!important;overflow:visible!important;-webkit-mask-image:none!important;mask-image:none!important;padding-right:0!important;row-gap:8px}
@media(min-width:900px){.vv-gaveta{left:50%;right:auto;width:560px;margin-left:-280px;bottom:auto;top:50%;border-radius:20px;transform:translateY(-40%) scale(.96);opacity:0;pointer-events:none;transition:transform .25s var(--vv-ease),opacity .25s}.vv-gaveta::before{display:none}.vv-gaveta-aberta .vv-gaveta{transform:translateY(-50%);opacity:1;pointer-events:auto}}

/* Ícones no lugar dos emojis (vv-visual.js troca) */
.vv-ic{display:inline-block;width:1.05em;height:1.05em;vertical-align:-.16em;margin-right:.35em;flex-shrink:0;color:var(--vv-brass)}
button .vv-ic,a .vv-ic{color:currentColor;opacity:.9}

/* Etapas do lead: Novo → Em atendimento → Visita → Proposta → Fechado */
.vv-etapas{display:flex!important;flex-wrap:nowrap!important;gap:0!important;overflow-x:auto;scrollbar-width:none;padding:6px 2px 4px;-webkit-mask-image:none!important;mask-image:none!important}
.vv-etapas::-webkit-scrollbar{display:none}
.vv-etapas>button{position:relative;flex:1 0 auto;border:0!important;background:transparent!important;color:var(--vv-ink-soft)!important;font-size:11px!important;padding:26px 6px 2px!important;border-radius:0!important;min-width:64px;text-align:center}
.vv-etapas>button::before{content:"";position:absolute;top:6px;left:50%;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:#fff;border:2px solid #CFC6B2;z-index:1;transition:all .25s}
.vv-etapas>button::after{content:"";position:absolute;top:13px;left:-50%;width:100%;height:2px;background:#E4DDCB}
.vv-etapas>button:first-child::after{display:none}
.vv-etapas>button.vv-feito::before{background:var(--vv-brass);border-color:var(--vv-brass)}
.vv-etapas>button.vv-feito::after,.vv-etapas>button.vv-atual::after{background:var(--vv-brass)}
.vv-etapas>button.vv-atual{color:var(--vv-navy)!important;font-weight:700!important}
.vv-etapas>button.vv-atual::before{background:var(--vv-navy);border-color:var(--vv-navy);box-shadow:0 0 0 5px rgba(18,44,61,.12)}
.vv-etapas>button.vv-perdido{flex:0 0 auto;margin-left:10px;padding:4px 10px!important;border:1px solid var(--vv-line)!important;border-radius:999px!important;align-self:center}
.vv-etapas>button.vv-perdido::before,.vv-etapas>button.vv-perdido::after{display:none}
.vv-etapas>button.vv-perdido.vv-atual{background:#9B4A3F!important;color:#fff!important;border-color:#9B4A3F!important}

/* Listas vazias: cartão com ícone */
.vv-vazio{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:28px 18px!important;border:1px dashed #D6CDB8;border-radius:18px;background:#FFFDF8;color:var(--vv-ink-soft)!important;line-height:1.5}
.vv-vazio::before{content:"";width:54px;height:54px;border-radius:50%;background:var(--vv-brass-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C08A3E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V20h14V9.5'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3C/svg%3E") center/26px no-repeat}

/* Carregando: barras cinza animadas no lugar do texto */
.vv-carregando{position:relative;color:transparent!important;min-height:54px;border-radius:14px;overflow:hidden;background:linear-gradient(90deg,#EEE8DA 25%,#F7F3EA 50%,#EEE8DA 75%);background-size:200% 100%;animation:vvbrilho 1.2s linear infinite}
.vv-carregando *{visibility:hidden}
@keyframes vvbrilho{to{background-position:-200% 0}}

/* Cartões e telas */
#root .rounded-2xl,#root .rounded-xl{transition:box-shadow .2s,transform .2s}
.vv-entra{animation:vventra .35s var(--vv-ease) backwards}
@keyframes vventra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Botão de ajuda "?": menor e sem cobrir texto */
.v2help{width:36px!important;height:36px!important;font-size:16px!important;right:10px!important;bottom:92px!important;opacity:.82;box-shadow:0 4px 12px rgba(0,0,0,.18)!important;transition:opacity .2s,transform .2s!important}
.v2help:hover,.v2help:focus{opacity:1}
.vv-rolando .v2help{opacity:.35;transform:scale(.9)}

/* Números da Gestão em destaque */
.vv-numero{font-family:'Lora',serif!important;font-size:26px!important;line-height:1!important;color:var(--vv-navy)!important}
.vv-numero.vv-zero{color:#B9AE97!important}

/* ---------- Site (inicial) ---------- */
.vvh .hero{min-height:min(92vh,760px);display:flex;align-items:center}
.vvh .hero>.vv-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s}
.vvh .hero>.vv-hero-video.vv-ok{opacity:1}
.vvh .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,31,44,.55) 0%,rgba(12,31,44,.25) 35%,rgba(12,31,44,.7) 78%,rgba(12,31,44,.92) 100%);pointer-events:none}
.vvh .hero .in{z-index:2;width:100%}
.vvh .hero h1{text-shadow:0 2px 18px rgba(0,0,0,.35)}
.vvh .hero h1 .vv-w{display:inline-block;opacity:0;transform:translateY(18px);filter:blur(6px);animation:vvpalavra .6s var(--vv-ease) forwards}
@keyframes vvpalavra{to{opacity:1;transform:none;filter:none}}
.vvh .busca{background:rgba(255,253,248,.82)!important;backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);border:1px solid rgba(255,255,255,.55);box-shadow:0 18px 50px rgba(0,0,0,.28)!important}
.vvh .busca input{background:rgba(255,255,255,.9)}
.vvh .chip{transition:background .2s,color .2s,border-color .2s,transform .15s}
.vvh .btn-brass{background:linear-gradient(135deg,#C99545,#B07A33)!important;box-shadow:0 6px 18px rgba(192,138,62,.35)}
.vvh .btn-zap{background:var(--vv-navy)!important;color:#fff!important}
.vvh .btn-zap::before{content:"";width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2325D366'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm4.5 12.1c-.2-.1-1.5-.7-1.7-.8s-.4-.1-.6.1-.7.8-.8 1-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.3-.4.3-.4.7-1.3.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.2 5.2 0 0 0 1.1 2.7 11.8 11.8 0 0 0 4.5 4c1.7.7 2.3.8 3.2.6a2.7 2.7 0 0 0 1.8-1.2 2.2 2.2 0 0 0 .1-1.2c0-.1-.2-.2-.5-.3z'/%3E%3C/svg%3E") center/contain no-repeat}
.vvh .btn-zap svg{display:none}
.vvh .fixo{background:rgba(255,253,248,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.vvh .tag{background:var(--vv-brass-soft)!important;color:#8A5F22!important}
.vvh .card{transition:transform .25s var(--vv-ease),box-shadow .25s}
.vvh .card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(18,44,61,.12)}
.vvh .card img{transition:transform .6s var(--vv-ease)}
.vvh .card:hover img{transform:scale(1.04)}
.vvh .dnum div{background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,0)) ,#0C1F2C!important;backdrop-filter:blur(6px)}
.vvh .dnum b{font-size:24px!important}
/* aparece ao rolar */
.vv-revela{opacity:0;transform:translateY(26px);transition:opacity .7s var(--vv-ease),transform .7s var(--vv-ease)}
.vv-revela.vv-visto{opacity:1;transform:none}
/* passos da consultoria viram linha do tempo */
.vvh .passos.vv-linha{position:relative}
@media(max-width:560px){
 .vvh .passos.vv-linha{padding-left:26px}
 .vvh .passos.vv-linha::before{content:"";position:absolute;left:8px;top:10px;bottom:10px;width:2px;background:var(--vv-line)}
 .vvh .passos.vv-linha::after{content:"";position:absolute;left:8px;top:10px;width:2px;height:calc(var(--vv-prog,0) * (100% - 20px));background:var(--vv-brass);transition:height .2s linear}
 .vvh .passos.vv-linha .passo{position:relative}
 .vvh .passos.vv-linha .passo::before{content:"";position:absolute;left:-25px;top:18px;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid #CFC6B2;transition:all .3s}
 .vvh .passos.vv-linha .passo.vv-visto::before{background:var(--vv-brass);border-color:var(--vv-brass);box-shadow:0 0 0 5px rgba(192,138,62,.18)}
}

@media (prefers-reduced-motion: reduce){
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
 .vv-revela{opacity:1;transform:none}
 .vvh .hero>.vv-hero-video{display:none}
}