.elementor-kit-5{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:350px;}.e-con{--container-max-width:350px;}}
/* Start custom CSS */:root{
--vb-n950:#021B27; --vb-navy:#003C52; --vb-n600:#0B5672;
--vb-teal:#6EC4BC; --vb-teal-d:#2F8F87; --vb-sand:#F4F2ED;
--vb-ink:#0B2230; --vb-muted:#55666F; --vb-line:rgba(11,34,48,.12);
--vb-ease:cubic-bezier(.16,1,.3,1);
}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* ---------- 1. DESTAQUES NOS TÍTULOS ----------
No widget Título, escreva em HTML:
Onde a cidade encontra o mar. → parte mais leve e acinzentada
A nova vibe → palavra na cor de destaque
Em seção escura, coloque a classe vb-dark no container da seção. */
.elementor-heading-title .s{font-weight:300;color:#6E7F88}
.vb-dark .elementor-heading-title .s{color:rgba(255,255,255,.55)}
.elementor-heading-title .t{color:var(--vb-teal)}
.elementor-heading-title{text-wrap:balance}
/* ---------- 2. CURSOR + BARRA DE PROGRESSO (criados pelo script) ---------- */
.vb-cursor{position:fixed;left:0;top:0;z-index:99999;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;
border:1px solid var(--vb-teal);pointer-events:none;mix-blend-mode:difference;opacity:0;
transition:width .35s var(--vb-ease),height .35s var(--vb-ease),margin .35s var(--vb-ease),opacity .3s,background .3s}
.vb-cursor.on{opacity:1}
.vb-cursor.big{width:80px;height:80px;margin:-40px 0 0 -40px;background:rgba(110,196,188,.15)}
@media (pointer:coarse){.vb-cursor{display:none}}
.vb-progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:99998;background:var(--vb-teal);transform-origin:left;transform:scaleX(0);pointer-events:none}
/* ---------- 3. HEADER ----------
Container do header (Theme Builder): vb-header · widget Menu: vb-menu */
.vb-header{transition:background .5s var(--vb-ease),padding .5s var(--vb-ease)}
.vb-header.vb-solid{background:rgba(2,27,39,.84)!important;-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 1px 0 rgba(255,255,255,.06)}
.vb-menu .elementor-nav-menu--main>.elementor-nav-menu{padding:6px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:background .4s,border-color .4s}
.vb-solid .vb-menu .elementor-nav-menu--main>.elementor-nav-menu{background:transparent;border-color:transparent}
.vb-menu .elementor-nav-menu--main .elementor-item{border-radius:999px;padding:9px 16px!important;transition:background .35s var(--vb-ease)}
.vb-menu .elementor-nav-menu--main .elementor-item:hover,.vb-menu .elementor-nav-menu--main .elementor-item.elementor-item-active{background:rgba(255,255,255,.1)}
/* ---------- 4. HERO ----------
Título: classe vb-lines (quebre a linha com
) */
.vb-lines .vb-ln{display:block;overflow:hidden;padding-bottom:.07em}
.vb-lines .vb-ln>span{display:block;transform:translateY(105%);transition:transform 1.3s var(--vb-ease)}
.vb-lines.in .vb-ln>span{transform:none}
/* faixa de números sobre a foto: container vb-glass (filhos = cada número) */
.vb-glass{background:rgba(2,27,39,.42)!important;border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:20px;overflow:hidden}
.vb-glass>.e-con,.vb-glass>.e-con-inner>.e-con{border-left:1px solid rgba(255,255,255,.1)}
.vb-glass>.e-con:first-child,.vb-glass>.e-con-inner>.e-con:first-child{border-left:0}
@media (max-width:767px){
.vb-glass>.e-con:nth-child(3),.vb-glass>.e-con-inner>.e-con:nth-child(3){border-left:0}
.vb-glass>.e-con:nth-child(n+3),.vb-glass>.e-con-inner>.e-con:nth-child(n+3){border-top:1px solid rgba(255,255,255,.1)}
}
/* ---------- 5. TEXTO QUE ACENDE PALAVRA POR PALAVRA ---------- classe: vb-words */
.vb-words .vb-w{opacity:.14;transition:opacity .5s ease}
.vb-words .vb-w.on{opacity:1}
.vb-words .vb-hl,.vb-words em{color:var(--vb-teal-d);font-style:normal}
/* ---------- 6. PARALLAX EM IMAGENS ----------
Widget Imagem: Avançado > Atributos: data-speed|0.1
Container pai com Overflow = Oculto e cantos arredondados. */
[data-speed] img,img[data-speed]{will-change:transform}
/* ---------- 7. REVELAÇÃO COM RECORTE (torre) ---------- classe: vb-clip */
.vb-clip{clip-path:inset(16% 10% 16% 10% round 18px);transition:clip-path 1.6s var(--vb-ease)}
.vb-clip.in{clip-path:inset(0 0 0 0 round 18px)}
.elementor-editor-active .vb-clip{clip-path:none}
/* ---------- 8. CARDS ----------
vb-card → card branco arredondado (use em containers)
vb-lift → sobe no hover
vb-zoom → foto aproxima no hover (no container que tem a imagem ou o fundo)
vb-pill → etiqueta branca arredondada (widget Título ou Texto) */
.vb-card{background:#fff;border-radius:18px}
.vb-lift{transition:transform .6s var(--vb-ease),box-shadow .6s var(--vb-ease)}
.vb-lift:hover{transform:translateY(-6px);box-shadow:0 40px 70px -40px rgba(2,27,39,.45)}
.vb-zoom{overflow:hidden}
.vb-zoom img{transition:transform 1.4s var(--vb-ease)}
.vb-zoom:hover img{transform:scale(1.05)}
.vb-pill .elementor-heading-title,.vb-pill p{display:inline-block;padding:8px 13px;border-radius:999px;background:rgba(255,255,255,.94);color:var(--vb-n950)!important;font-size:13px;font-weight:600;line-height:1.2}
.vb-pill.vb-pill-glass .elementor-heading-title{background:rgba(255,255,255,.14);color:#fff!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
/* diferenciais do projeto (Caixa de ícone, ícone à esquerda): vb-ft */
.vb-ft{background:#fff;border-radius:16px;padding:20px 20px 20px 18px;transition:transform .5s var(--vb-ease),box-shadow .5s var(--vb-ease);height:100%}
.vb-ft:hover{transform:translateY(-3px);box-shadow:0 24px 40px -30px rgba(2,27,39,.4)}
.vb-ft .elementor-icon{background:var(--vb-sand)!important;border-radius:12px!important}
/* lazer (Caixa de ícone, ícone em cima): vb-am */
.vb-am{background:#fff;border-radius:18px;padding:22px;min-height:170px;height:100%;transition:background .45s var(--vb-ease),transform .5s var(--vb-ease)}
.vb-am .elementor-icon-box-wrapper{height:100%;display:flex;flex-direction:column;justify-content:space-between;gap:30px}
.vb-am .elementor-icon-box-icon{margin:0!important}
.vb-am .elementor-icon,.vb-am .elementor-icon-box-title,.vb-am .elementor-icon-box-description{transition:color .35s}
.vb-am:hover{background:var(--vb-n950);transform:translateY(-4px)}
.vb-am:hover .elementor-icon{color:var(--vb-teal)!important}
.vb-am:hover .elementor-icon svg{fill:var(--vb-teal)!important}
.vb-am:hover .elementor-icon-box-title,.vb-am:hover .elementor-icon-box-title a{color:#fff!important}
.vb-am:hover .elementor-icon-box-description{color:rgba(255,255,255,.6)!important}
@media (max-width:767px){.vb-am{min-height:140px;padding:18px}.vb-am .elementor-icon-box-wrapper{gap:20px}}
/* ---------- 9. CARDS EMPILHADOS (lazer) ----------
Container pai: vb-stack · cada card (container com foto de fundo): vb-stack-card */
.vb-stack-card{position:sticky!important;top:calc(90px + var(--vb-i,0) * 16px);transform-origin:50% 0;will-change:transform;overflow:hidden}
.vb-stack-card>.vb-shade{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;z-index:1}
.vb-stack-card>.e-con,.vb-stack-card>.elementor-element{position:relative;z-index:2}
/* ---------- 10. ROLAGEM LATERAL QUE TRAVA A TELA (bairro) ----------
vb-hx (seção) > vb-hx-pin (container do meio) > vb-hx-track (fila de cards) */
.vb-hx{overflow:clip!important;justify-content:flex-start!important}
.vb-hx>.e-con-inner{justify-content:flex-start!important;overflow:visible!important}
.vb-hx-track{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;width:max-content!important;max-width:none!important;will-change:transform}
.vb-hx-track>.e-con,.vb-hx-track>.elementor-element,.vb-hx-track>.e-con-inner>*{flex:none!important}
.vb-hx-track>.e-con-inner{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;gap:inherit;width:max-content!important;max-width:none!important;margin:0!important}
.vb-hx-bar{height:2px;background:var(--vb-line);margin:30px 40px 0;position:relative;border-radius:2px;overflow:hidden}
.vb-hx-bar i{position:absolute;inset:0;background:var(--vb-n950);transform-origin:left;transform:scaleX(0)}
.vb-hx-pin{position:sticky!important}
@media (max-width:767px){
.vb-hx-track>.e-con,.vb-hx-track>.e-con-inner>.e-con{width:82vw!important;max-width:82vw!important}
.vb-hx-bar{margin:24px 20px 0}
}
/* ---------- 11. SELO IPTU VERDE (bloco HTML) ---------- */
.vb-badge{width:120px;height:120px;border-radius:50%;background:#2E8B3E;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-shadow:0 0 0 6px rgba(255,255,255,.9),0 20px 40px -10px rgba(0,0,0,.4);font-family:inherit}
.vb-badge b{font-weight:800;font-size:22px;line-height:1;letter-spacing:.02em}
.vb-badge span{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-top:6px;line-height:1.3;opacity:.92}
@media (prefers-reduced-motion:reduce){
.vb-lines .vb-ln>span,.vb-clip{transition:none;transform:none;clip-path:none}
.vb-words .vb-w{opacity:1}
}/* End custom CSS */