/* =====================================================================
   EDIFÍCIO BELA — Camada de identidade visual
   Sobrescreve a template "Nest Vila Ipojuca" (Webflow / Virtus).
   Carregar SEMPRE depois de virtus-nest-vila-ipojuca.css
   Paleta: olive #575549 · areia #d8d7bd · creme #e9e7d7 · off-white #fffdfa
           terracota #b06a45 · fundo quase-preto quente #16150f
   Tipografia: Fraunces (serif editorial) + Inter (sans neutra)
   ===================================================================== */

:root{
  /* ---- Paleta Bela ---- */
  --bela-olive:#575549;
  --bela-olive-deep:#43423a;
  --bela-ink:#16150f;
  --bela-sand:#d8d7bd;
  --bela-cream:#e9e7d7;
  --bela-white:#fffdfa;
  --bela-terra:#b06a45;
  --bela-terra-dk:#95552f;
  --fraunces:'Fraunces', Georgia, 'Times New Roman', serif;
  --inter:'Inter', -apple-system, 'Segoe UI', sans-serif;

  /* ---- Remap das variáveis da template (Nest -> Bela) ---- */
  --base-color-brand--dark-green:#575549 !important;      /* verde escuro -> olive  */
  --base-color-brand--medium-green:#4a493f !important;    /* verde médio  -> olive+ */
  --base-color-brand--light-green:#d8d7bd !important;     /* lime accent  -> areia  */
  --background-color--background-primary:#fffdfa !important;
  --background-color--background-alternate:#e9e7d7 !important; /* creme */
  --background-color--background-secondary:#43423a !important;
  --background-color--background-tertiary:#575549 !important;
  --text-color--text-primary:#2a2a24 !important;
  --text-color--text-secondary:#6a685c !important;
  --text-color--text-tertiary:#3a392f !important;
  --text-color--text-alternate:#fffdfa !important;
  --text-color--text-small-info-darkbg:#fffdfa !important;
  --link-color--link-secondary:#575549 !important;
}

/* -------- Tipografia -------------------------------------------------- */
body, .body{ font-family:var(--inter) !important; color:#2a2a24; -webkit-font-smoothing:antialiased; }

/* Títulos editoriais em Fraunces (substitui Code Pro Lc) */
h1, h2, h3, h4,
.font-codepro, .tile-code-pro,
.heading-about, [class*="titulo-section"], [class*="heading-section"],
.titulo-form{
  font-family:var(--fraunces) !important;
  font-weight:500 !important;
  letter-spacing:-.01em;
}
/* Corpo, labels e botões em Inter */
p, li, a, span, input, textarea, button, label, .paragraph, [class*="text-"], [class*="btn"], [class*="button"]{
  font-family:var(--inter) !important;
}

/* Kicker / eyebrow utilitário (labels em caps) */
.bela-kicker{ display:inline-flex; align-items:center; gap:14px; font-family:var(--inter);
  font-weight:600; font-size:.7rem; letter-spacing:3.4px; text-transform:uppercase; color:var(--bela-terra); }
.bela-kicker::before{ content:""; width:40px; height:1px; background:currentColor; display:inline-block; }
.bela-kicker.on-dark{ color:var(--bela-sand); }

/* -------- Botões (terracota primário / olive-outline secundário) ----- */
.button, .btn, [class*="w-button"]{ font-family:var(--inter) !important; font-weight:600 !important;
  letter-spacing:.02em; border-radius:8px !important; transition:filter .18s, transform .18s, background .18s, color .18s; }
.button:not(.is-secondary), .btn-primary{
  background-color:var(--bela-terra) !important; color:var(--bela-white) !important; border:none !important; }
.button:not(.is-secondary):hover{ filter:brightness(1.06); transform:translateY(-1px); }

/* -------- Fundos escuros da marca (olive) ---------------------------- */
.background-color-tertiary, [class*="dark-green"], .bg-dark-green{ background-color:var(--bela-olive) !important; }

/* -------- Seleção de texto ------------------------------------------- */
::selection{ background:var(--bela-terra); color:var(--bela-white); }

/* (as demais regras por seção são adicionadas abaixo conforme o build) */

/* =====================================================================
   HERO — colunas diagonais + parallax (assinatura Bela)
   ===================================================================== */
.bela-hero{ position:relative; min-height:100svh; min-height:100vh; overflow:hidden;
  background:var(--bela-ink); display:flex; align-items:center; }
/* limpa resíduos da template no header */
.bela-hero .white-radius-container, .bela-hero .img-header-container{ display:none !important; }

/* grupo de colunas (inclinado) */
.bela-hero__cols{ position:absolute; inset:-14% -8%; z-index:0; display:flex; gap:20px;
  transform:rotate(-12deg); transform-origin:center; }
.bela-col{ flex:0 0 auto; width:clamp(74px,9vw,150px); height:100%;
  background:var(--bela-olive-deep); border-radius:3px; will-change:transform; }
.bela-col--img{ background-size:cover; background-position:center; box-shadow:0 20px 60px rgba(0,0,0,.4); }
.bela-col--sand{ background:var(--bela-sand); }
.bela-col--cream{ background:var(--bela-cream); }
.bela-col--olive{ background:var(--bela-olive); }
.bela-col--terra{ background:var(--bela-terra); width:clamp(28px,3vw,50px); }

/* scrim para legibilidade do texto (esquerda escura -> direita revela colunas) */
.bela-hero__scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(100deg, var(--bela-ink) 0%, rgba(22,21,15,.88) 30%, rgba(22,21,15,.42) 58%, rgba(22,21,15,.20) 78%, rgba(22,21,15,.5) 100%); }

.bela-hero__inner{ position:relative; z-index:2; width:100%; max-width:1240px; margin:0 auto;
  padding:120px clamp(24px,5vw,72px) 90px; color:var(--bela-white); }
.bela-hero__logo{ width:clamp(220px,30vw,400px); height:auto; display:block; margin:20px 0 26px; }
.bela-hero__title{ font-family:var(--fraunces) !important; font-weight:400 !important; color:var(--bela-white);
  font-size:clamp(2.6rem,6vw,5.4rem); line-height:1.02; letter-spacing:-.02em; margin:0 0 20px; max-width:15ch; }
.bela-hero__title em{ font-style:italic; color:var(--bela-sand); }
.bela-hero__sub{ font-family:var(--inter); font-weight:300; font-size:clamp(1rem,1.35vw,1.24rem);
  line-height:1.65; color:rgba(255,253,250,.86); max-width:46ch; margin:0 0 22px; }
.bela-hero__meta{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; font-size:.9rem;
  color:rgba(255,253,250,.82); margin-bottom:32px; }
.bela-hero__meta strong{ color:var(--bela-sand); font-weight:600; }
.bela-hero__meta .sep{ width:1px; height:16px; background:rgba(255,253,250,.3); }
.bela-hero__cta{ display:flex; gap:14px; flex-wrap:wrap; }
.bela-hero__cta .button{ padding:15px 32px !important; font-size:.95rem; cursor:pointer; }
.bela-hero__cta .is-secondary{ background:transparent !important; border:1.5px solid rgba(255,253,250,.6) !important; color:var(--bela-white) !important; }
.bela-hero__cta .is-secondary:hover{ background:var(--bela-white) !important; color:var(--bela-olive) !important; }
.bela-hero__scroll{ position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:3;
  color:var(--bela-sand); font-size:24px; text-decoration:none; animation:belaBounce 1.8s infinite; }
@keyframes belaBounce{ 0%,100%{ transform:translateX(-50%) translateY(0);} 50%{ transform:translateX(-50%) translateY(8px);} }
@media (max-width:991px){ .bela-hero__cols{ inset:-18% -14%; gap:14px; } }
@media (max-width:767px){
  .bela-hero__cols{ inset:-24% -30%; opacity:.9; }
  .bela-hero__title{ font-size:clamp(2.2rem,9vw,3.1rem); max-width:100%; }
  .bela-hero__inner{ padding:110px 22px 90px; }
  .bela-hero__cta{ flex-direction:column; align-items:stretch; }
  .bela-hero__cta .button{ width:100%; text-align:center; }
}
@media (prefers-reduced-motion:reduce){ .bela-col{ transform:none !important; } .bela-hero__scroll{ animation:none; } }

/* =====================================================================
   SEÇÕES DE CONTEÚDO — Edifício Bela (navbar -> footer)
   ===================================================================== */

/* -------- Navbar (logo branco sobre o hero escuro) ------------------- */
.nav-menu{ z-index:6; }
.nav-menu .nav-block{ border-bottom-color:rgba(255,253,250,.35); }
.logo-nav-container{ max-width:9.5rem; }
.nav-menu .logo-nav{ width:100%; height:auto; }

/* -------- Menu de âncoras (barra fixa creme) ------------------------- */
.nav-ancoras.nav-fixa{ background:var(--bela-white); box-shadow:0 6px 24px rgba(22,21,15,.08); }

/* -------- Helpers de título de seção -------------------------------- */
.bela-section-title{ font-family:var(--fraunces) !important; font-weight:500 !important;
  color:var(--bela-ink); font-size:clamp(2rem,4vw,3.2rem); line-height:1.05; letter-spacing:-.02em; margin:.35em 0 .3em; }
.bela-section-title em{ font-style:italic; color:var(--bela-terra); }
.bela-section-sub{ font-family:var(--inter) !important; color:var(--bela-olive); font-size:1rem; line-height:1.6; max-width:54ch; margin:0; }

/* Acentos itálicos <em> nos títulos das seções (claras -> terra) */
.heading-about em,
.galeria-title-container h4 em,
.localizacao-title-container h4 em,
.projetistas-container h4 em{ font-style:italic; color:var(--bela-terra); }
/* Acento sobre fundo escuro (wellness) -> areia */
.heading-content-investimento h4 em{ font-style:italic; color:var(--bela-sand); }

/* -------- ABOUT: imagem de fundo -> lobby ---------------------------- */
.img-about{ background-image:url('../images/bela/sections/marquise.webp') !important; }
.heading-about{ line-height:1.05; }

/* -------- PLANTAS: cards de tipologia -------------------------------- */
.bela-plantas-section{ background:var(--bela-cream); }
.bela-plantas-head{ display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:8px; max-width:760px; margin:0 auto 44px; }
.bela-plantas-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.bela-plan-card{ background:var(--bela-white); border:1px solid rgba(87,85,73,.16); border-radius:14px;
  padding:34px 30px; display:flex; flex-direction:column; gap:12px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.bela-plan-card:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(22,21,15,.10); border-color:var(--bela-terra); }
.bela-plan-tipo{ font-family:var(--inter) !important; font-weight:600; font-size:.72rem;
  letter-spacing:2.5px; text-transform:uppercase; color:var(--bela-terra); }
.bela-plan-metragem{ font-family:var(--fraunces) !important; font-weight:500; color:var(--bela-ink);
  font-size:2.7rem; line-height:1; letter-spacing:-.02em; }
.bela-plan-metragem span{ font-family:var(--inter) !important; font-size:1.05rem; font-weight:500; color:var(--bela-olive); }
.bela-plan-note{ font-family:var(--inter) !important; color:var(--bela-olive); font-size:.95rem; line-height:1.5; margin:0; }
.bela-plan-card.is-featured{ background:var(--bela-olive); border-color:var(--bela-olive); }
.bela-plan-card.is-featured .bela-plan-metragem{ color:var(--bela-white); }
.bela-plan-card.is-featured .bela-plan-metragem span,
.bela-plan-card.is-featured .bela-plan-note,
.bela-plan-card.is-featured .bela-plan-tipo{ color:var(--bela-sand); }
@media(max-width:991px){ .bela-plantas-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .bela-plantas-grid{ grid-template-columns:1fr; } }

/* -------- WELLNESS / DIFERENCIAIS ----------------------------------- */
.img-investimento-container{ background-image:url('../images/bela/sections/wellness.webp') !important;
  background-position:center !important; background-size:cover !important; }
.bela-wellness-section .heading-content-investimento{ gap:12px; }
.bela-wellness-grid{ display:grid !important; grid-template-columns:repeat(3,1fr); }
.bela-wellness-grid .bela-diff-item{ flex-direction:column; align-items:flex-start; text-align:left;
  min-height:150px; gap:0; }
.bela-wellness-grid .bela-diff-item .text-color-dark-green{ color:var(--bela-olive-deep) !important; }
.bela-wellness-grid .bela-diff-item strong{ display:block; margin-bottom:6px; color:var(--bela-terra); font-weight:600; }
.bela-wellness-grid .bela-diff-item::before{ content:""; width:26px; height:2px; background:var(--bela-terra);
  display:block; margin-bottom:14px; }
@media(max-width:991px){ .bela-wellness-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .bela-wellness-grid{ grid-template-columns:1fr; } }

/* -------- GALERIA: card único --------------------------------------- */
.galeria-lightbox-container.is-bela-single{ display:block; }
.is-bela-single .galeria-lightbox-wrapper{ max-width:none; width:100%; height:clamp(340px,56vh,600px); max-height:none; }
.mask-img-gradient.perspectivas{ background-image:linear-gradient(#fff0 34%, #16150fcc), url('../images/bela/bela-fachada-1920.webp') !important;
  background-position:0 0, 50% !important; background-size:auto, cover !important; }

/* -------- LOCALIZAÇÃO ------------------------------------------------ */
.localizacao-white-smoke ._120px-img{ max-width:120px; height:auto; }

/* -------- FOOTER ---------------------------------------------------- */
.logo-virtus-footer{ max-width:150px; height:auto; }
.bela-footer-disclaimer{ margin-top:12px; opacity:.7; line-height:1.5; max-width:40ch; }




/* -------- WELLNESS itens: bloco claro, legível (fix contraste) ------- */
.investimento-section .investimento-itens-wrapper.bela-wellness-grid{ background:var(--bela-white) !important; }
.investimento-section .investimento-itens-content-wrapper.bela-diff-item{
  background:transparent !important; background-color:transparent !important;
  border:none !important; border-radius:0 !important; box-shadow:none !important; backdrop-filter:none !important;
  padding:26px 24px 26px 0 !important; }
.bela-wellness-grid .bela-diff-item .text-color-dark-green,
.bela-wellness-grid .bela-diff-item .text-color-dark-green *{ color:#3a392f !important; }
.bela-wellness-grid .bela-diff-item strong{ color:var(--bela-terra) !important; }



/* -------- WELLNESS itens: elimina qualquer fundo escuro residual ----- */
.investimento-section .investimento-itens-wrapper.bela-wellness-grid{ background:var(--bela-white) !important; }
.investimento-section .investimento-itens-wrapper.bela-wellness-grid *{
  background-color:transparent !important; background-image:none !important; box-shadow:none !important; backdrop-filter:none !important; }
.bela-wellness-grid .bela-diff-item .text-color-dark-green{ color:#3a392f !important; }
.bela-wellness-grid .bela-diff-item strong{ color:var(--bela-terra) !important; }


/* -------- Remover grafismo "Virtus" off-brand do Sobre --------------- */
.grafismo-about{ display:none !important; }



/* =====================================================================
   V2 — QA FIXES (dir. arte + funcional)
   ===================================================================== */
/* Localização: verde-floresta off-brand -> olive; acentos verdes -> terra */
.gradient-dark-green, .localizacao-dark-green-container.gradient-dark-green{
  background-image:linear-gradient(300deg, var(--bela-olive), rgba(67,66,58,0)) !important; }
.light-green-span, .span-header-light-green{ color:var(--bela-terra) !important; }
.plant-light-green{ filter:brightness(0) saturate(100%) invert(87%) sepia(9%) saturate(420%) hue-rotate(9deg) brightness(93%) contrast(88%) !important; }

/* FIBRA logo no card claro -> chip olive legível */
.localizacao-white-smoke img[src*="fibra-logo"]{ background:var(--bela-olive) !important; padding:12px 18px; border-radius:8px; box-sizing:content-box; max-width:118px; height:auto; }

/* Subtítulos dos modais: gold -> sand */
.is-gold, .is-subtitle-modal{ color:var(--bela-sand) !important; }

/* Projetistas: abas inativas legíveis + indicador ativo */
.tab-menu-projetistas a .text-size-giant{ color:rgba(87,85,73,.48) !important; transition:color .2s; }
.tab-menu-projetistas a:hover .text-size-giant{ color:var(--bela-olive) !important; }
.tab-menu-projetistas a.w--current{ border-left:2px solid var(--bela-terra); padding-left:14px; }
.tab-menu-projetistas a.w--current .text-size-giant{ color:#1D1F1E !important; }

/* Hero: scrim mais leve p/ colunas aparecerem + terra mais presente */
.bela-hero__scrim{ background:linear-gradient(100deg, var(--bela-ink) 0%, rgba(22,21,15,.85) 28%, rgba(22,21,15,.32) 54%, rgba(22,21,15,.05) 74%, rgba(22,21,15,.24) 100%) !important; }
.bela-col--img{ box-shadow:0 20px 60px rgba(0,0,0,.26) !important; }
.bela-col--terra{ width:clamp(40px,4vw,72px) !important; }

/* Navbar: fixa, transparente sobre o hero; creme sólido ao rolar (logo só aparece rolando) */
.nav-menu{ position:fixed !important; top:0; left:0; right:0; z-index:60; background:transparent; transition:background .3s, box-shadow .3s; }
.nav-menu .logo-nav{ opacity:0; transition:opacity .3s; height:34px; width:auto; }
.nav-menu.nav-fixed{ background:var(--bela-cream); box-shadow:0 2px 18px rgba(22,21,15,.09); }
.nav-menu.nav-fixed .logo-nav{ opacity:1; }

/* Wellness grid: 2 colunas em tablets */
@media(min-width:480px) and (max-width:991px){ .investimento-itens-wrapper.bela-wellness-grid{ grid-template-columns:repeat(2,1fr) !important; } }

/* Títulos de seção: hierarquia editorial consistente + espaçamento do kicker */
.title-about-container .bela-kicker, .galeria-title-container .bela-kicker,
.localizacao-title-container .bela-kicker, .projetistas-container .bela-kicker{ margin-bottom:14px; }
.projetistas-section h4, .galeria-section h4, .localizacao-section h4, .investimento-section h4{
  font-family:var(--fraunces) !important; font-weight:400 !important;
  font-size:clamp(1.9rem,3.2vw,2.9rem) !important; line-height:1.08 !important; letter-spacing:-.02em; }
.projetistas-section h4 em, .galeria-section h4 em, .localizacao-section h4 em, .investimento-section h4 em{
  font-style:italic; color:var(--bela-terra); }



/* =====================================================================
   V3 — POLIMENTO (feedback cliente)
   ===================================================================== */
/* #1 HERO/NAV: remove a linha da navbar; logo visível (branco->olive ao rolar); scrim mais leve */
.nav-menu .nav-block{ border:none !important; }
.nav-menu{ position:fixed !important; background:transparent; z-index:60; padding-top:6px; padding-bottom:6px; }
.nav-menu .logo-nav{ opacity:1 !important; height:34px !important; width:auto !important; }
.nav-menu .logo-nav.is-dark{ display:none; }
.nav-menu.nav-fixed{ background:var(--bela-cream); box-shadow:0 2px 18px rgba(22,21,15,.09); }
.nav-menu.nav-fixed .logo-nav.is-light{ display:none; }
.nav-menu.nav-fixed .logo-nav.is-dark{ display:inline-block; }
.logo-nav-container{ max-width:150px; }
.bela-hero__scrim{ background:linear-gradient(100deg, rgba(22,21,15,.72) 0%, rgba(22,21,15,.44) 24%, rgba(22,21,15,.12) 48%, rgba(22,21,15,0) 70%) !important; }
.bela-hero__logo{ filter:drop-shadow(0 2px 26px rgba(0,0,0,.55)); }
.bela-hero__title{ text-shadow:0 2px 30px rgba(0,0,0,.5); }
.bela-hero__sub, .bela-hero__meta{ text-shadow:0 1px 16px rgba(0,0,0,.6); }

/* #additional BOTÕES: todos redondos (pill) */
.button, a.button, .w-button, input.w-button, .button.is-icon, .btn{ border-radius:999px !important; }
.icon-btn-container, .icon-btn-container.is-localizacao{ border-radius:999px !important; }

/* #2/#6 LOCALIZAÇÃO: verdes -> olive; highlight sem caixa; mapa maior */
.localizacao-green-light-container{ background-color:var(--bela-olive) !important; }
.localizacao-dark-green-container.gradient-dark-green, .gradient-dark-green{
  background-image:linear-gradient(300deg, var(--bela-olive), rgba(67,66,58,.12)) !important; }
.light-green-span, .span-header-light-green{ background-color:transparent !important; color:var(--bela-terra) !important; font-weight:600; padding:0 !important; }
.embed-google-container, .bento-google-wrapper .embed-google-container{ min-height:320px !important; }
.embed-google-container iframe{ min-height:320px !important; border-radius:16px; }

/* #2 estrelas do Sobre -> tom terra (evita verde/cinza off-brand) */
.gbc-container-iten img, .gbc-content-content .link-blockgbc{ }
.gbc-container-iten ._24px-icon{ filter:brightness(0) saturate(100%) invert(45%) sepia(24%) saturate(900%) hue-rotate(340deg) brightness(92%) contrast(88%) !important; }

/* #4 GALERIA: descolar de Plantas + título em coluna */
.galeria-section .padding-section-medium.is-galeria{ padding-top:clamp(56px,7vw,104px) !important; }
.galeria-title-container{ display:flex !important; flex-direction:column; align-items:flex-start; gap:10px; margin-bottom:30px; }
.galeria-title-container .info-galeria-container{ margin-top:2px; }

/* #5 WELLNESS: bullets dentro do container da página */
.investimento-section .investimento-itens-wrapper.bela-wellness-grid{
  max-width:1300px; margin-left:auto !important; margin-right:auto !important;
  padding-left:clamp(24px,5vw,64px) !important; padding-right:clamp(24px,5vw,64px) !important; box-sizing:border-box; }

/* #7 ASSINATURAS: 2 colunas limpas (imagem | abas-acordeão) */
.projetistas-wrapper .tabs.w-tabs{ display:flex !important; flex-direction:row !important; gap:clamp(28px,4vw,60px) !important; align-items:center !important; }
.projetistas-wrapper .tabs-content, .projetistas-wrapper .w-tab-content{ flex:0 0 50% !important; max-width:50% !important; width:50% !important; float:none !important; }
.projetistas-wrapper .tab-menu-projetistas{ flex:1 1 50% !important; max-width:50% !important; float:none !important; }
.projetistas-wrapper .img-projetistas{ width:100% !important; height:clamp(340px,40vw,520px) !important; object-fit:cover !important; border-radius:16px !important; }
.tab-menu-projetistas{ display:flex !important; flex-direction:column; }
.tab-menu-projetistas a{ padding:22px 0 !important; border-top:1px solid rgba(87,85,73,.18); }
.tab-menu-projetistas a:first-child{ border-top:none; }
.tab-menu-projetistas a .text-size-giant{ font-family:var(--fraunces) !important; font-weight:400 !important; font-size:clamp(1.4rem,2.2vw,2rem) !important; }
.tab-menu-projetistas a:not(.w--current) .txt-tab-container{ display:none !important; }
.tab-menu-projetistas a.w--current .txt-tab-container{ display:block !important; margin-top:8px; }
.projetistas-wrapper .is-projetista{ margin-top:36px; }
@media(max-width:767px){ .projetistas-wrapper .tabs.w-tabs{ grid-template-columns:1fr; gap:24px; } }





/* =====================================================================
   V4 — HERO: cacos angulares (estilo KV) que reconstroem a imagem
   ===================================================================== */
.bela-hero__shards{ position:absolute; top:0; right:0; bottom:0; left:36%; z-index:0; }
.bela-shard{ position:absolute; inset:0;
  background:url('../images/bela/sections/fachada.webp') center/cover no-repeat;
  will-change:transform; transform:translateX(var(--dx,0)); }
/* faixas anguladas (com vãos escuros entre elas) */
.bela-shard:nth-child(1){ clip-path:polygon(0 2%, 100% 0, 100% 20%, 0 27%); }
.bela-shard:nth-child(2){ clip-path:polygon(0 30%, 100% 23%, 100% 45%, 0 52%); }
.bela-shard:nth-child(3){ clip-path:polygon(0 55%, 100% 48%, 100% 70%, 0 77%); }
.bela-shard:nth-child(4){ clip-path:polygon(0 80%, 100% 73%, 100% 98%, 0 100%); }
/* scrim: escurece só a faixa do texto (esquerda) e revela os cacos à direita */
.bela-hero__scrim{ background:linear-gradient(95deg,
  var(--bela-ink) 0%, var(--bela-ink) 28%, rgba(22,21,15,.55) 40%, rgba(22,21,15,.08) 50%, rgba(22,21,15,0) 60%) !important; }
@media (max-width:991px){ .bela-hero__shards{ left:30%; } }
@media (max-width:767px){
  .bela-hero__shards{ left:0; opacity:.28; }
  .bela-hero__scrim{ background:linear-gradient(180deg, rgba(22,21,15,.78) 0%, rgba(22,21,15,.6) 55%, rgba(22,21,15,.86) 100%) !important; }
}

/* =====================================================================
   V5 — AJUSTES (hero cacos variados / nav / localização)
   ===================================================================== */
/* #2 NAV: só o menu de âncoras fixa; o logo (nav-menu) rola junto com o hero */
.nav-menu{ position:absolute !important; top:0; left:0; right:0; z-index:40; background:transparent !important; box-shadow:none !important; }
.nav-menu .logo-nav{ opacity:1 !important; }
.nav-menu .logo-nav.is-dark{ display:none !important; }
.nav-menu .logo-nav.is-light{ display:inline-block !important; }

/* #1 HERO: efeito estritamente à direita; texto na esquerda (sem sobreposição) */
.bela-hero__shards{ left:50% !important; }
@media(min-width:992px){
  .bela-hero__inner{ padding-right:54% !important; }
  .bela-hero__title{ max-width:12ch !important; font-size:clamp(2.4rem,4.2vw,4.4rem) !important; }
  .bela-hero__sub, .bela-hero__meta{ max-width:40ch; }
}
/* cacos em ÂNGULOS ALTERNADOS que se cruzam (seams em direções opostas) */
.bela-shard:nth-child(1){ clip-path:polygon(0 0, 100% 0, 100% 17%, 0 29%) !important; }
.bela-shard:nth-child(2){ clip-path:polygon(0 25%, 100% 33%, 100% 49%, 0 45%) !important; }
.bela-shard:nth-child(3){ clip-path:polygon(0 51%, 100% 43%, 100% 66%, 0 74%) !important; }
.bela-shard:nth-child(4){ clip-path:polygon(0 70%, 100% 79%, 100% 100%, 0 95%) !important; }

/* #3 LOCALIZAÇÃO: sem overflow + botões sem quebra de linha */
.localizacao-white-smoke, .localizacao-green-light-container, .localizacao-dark-green-container,
.bento-google-wrapper, .bento-localizacao-wrapper, .bento-container{ overflow:hidden; min-width:0; }
.btn-localizacao-container{ display:flex; flex-wrap:wrap; gap:12px; }
.btn-localizacao-container .button{ white-space:nowrap; }
.btn-localizacao-container .button > div{ white-space:nowrap !important; }
.localizacao-green-light-container .img-fachada-localizacao{ max-width:100%; height:auto; }



/* =====================================================================
   V6 — QA VISUAL FIXES
   ===================================================================== */
/* P1 ícones lime-green residuais -> paleta da marca */
.localizacao-dark-title-container img[src*="plant-light-green"], img[src*="plant-light-green"]{
  filter:brightness(0) saturate(100%) invert(92%) sepia(11%) saturate(380%) hue-rotate(9deg) brightness(93%) contrast(88%) !important; }
.link-grey-container img[src*="gps-icon"]{
  filter:brightness(0) saturate(100%) invert(45%) sepia(24%) saturate(900%) hue-rotate(340deg) brightness(92%) contrast(88%) !important; }

/* P2 botões Waze/Maps: ícone + label alinhados à esquerda (sem vão) */
.btn-localizacao-container .button.is-icon{ justify-content:flex-start !important; gap:12px !important; }
.btn-localizacao-container .button.is-icon > div:last-child{ text-align:left; }

/* P2 acento do Wellness em fundo escuro -> areia (consistência com o hero) */
.investimento-section h4 em{ color:var(--bela-sand) !important; }

/* P2 CTA do Wellness sem quebra de linha */
.investimento-section .button > div{ white-space:nowrap; }

/* P3 subtítulo da galeria sem quebra estranha */
.info-galeria-container .text-size-small{ max-width:44ch; }

/* P3 imagem do Sobre sem faixa clara na base */
.img-about{ background-position:66% top !important; background-size:cover !important; }


/* =====================================================================
   V7 — HERO: correção de legibilidade + efeito em caixa contida (clean)
   (desfaz o padding-right:54% que colapsava o texto em telas largas)
   ===================================================================== */
.bela-hero{ min-height:92vh !important; }
.bela-hero__inner{ max-width:1320px !important; margin:0 auto !important;
  padding:clamp(96px,12vh,150px) clamp(24px,5vw,64px) clamp(70px,9vh,110px) !important; }
/* coluna de texto à esquerda, largura legível fixa */
.bela-hero__badge, .bela-hero__logo, .bela-hero__title, .bela-hero__sub,
.bela-hero__meta, .bela-hero__cta{ max-width:480px !important; }
.bela-hero__title{ max-width:9ch !important; font-size:clamp(2.3rem,3.6vw,4rem) !important; }
.bela-hero__sub{ max-width:36ch !important; }
/* EFEITO: caixa MENOR, contida à direita, centralizada na vertical (não ocupa toda a altura) */
.bela-hero__shards{ left:auto !important; top:50% !important; transform:translateY(-50%);
  right:calc((100% - min(1320px, 100% - 40px)) / 2) !important;
  width:min(540px, 40vw) !important; height:min(620px, 70vh) !important;
  border-radius:8px; overflow:hidden; box-shadow:0 30px 90px rgba(0,0,0,.45); }
.bela-shard{ border-radius:0; }
/* scrim: como o efeito agora é contido, escurecer menos o fundo geral */
.bela-hero__scrim{ background:linear-gradient(95deg, var(--bela-ink) 0%, var(--bela-ink) 44%, rgba(22,21,15,.4) 55%, rgba(22,21,15,0) 66%) !important; }
@media(max-width:991px){
  .bela-hero__shards{ right:20px !important; width:42vw !important; height:60vh !important; }
}
@media(max-width:767px){
  .bela-hero{ min-height:100svh !important; }
  .bela-hero__shards{ left:0 !important; right:0 !important; top:0 !important; transform:none !important;
    width:100% !important; height:100% !important; border-radius:0; box-shadow:none; opacity:.24; }
  .bela-hero__inner{ max-width:none !important; }
  .bela-hero__badge, .bela-hero__logo, .bela-hero__title, .bela-hero__sub, .bela-hero__meta, .bela-hero__cta{ max-width:100% !important; }
  .bela-hero__scrim{ background:linear-gradient(180deg, rgba(22,21,15,.8) 0%, rgba(22,21,15,.62) 55%, rgba(22,21,15,.88) 100%) !important; }
}

/* =====================================================================
   V8 — HERO: caixa maior (telas grandes) · logo menor · botões padrão · ícone redondo
   ===================================================================== */
/* caixa do efeito maior, sobretudo em telas grandes */
.bela-hero__shards{ width:min(760px, 42vw) !important; height:min(760px, 76vh) !important; }
/* logo do hero menor */
.bela-hero__logo{ width:clamp(150px, 15vw, 240px) !important; margin:14px 0 22px !important; }

/* CTAs do hero no padrão .button.is-icon (igual ao Wellness) */
.bela-hero__cta{ gap:14px; }
.bela-hero__cta .button.is-icon{ padding:.28rem 1.3rem .28rem .32rem !important; font-size:.95rem; display:inline-flex; align-items:center; gap:.7rem; }

/* ÍCONE REDONDO dos botões: círculo perfeito + ícone centralizado (corrige o "torto") */
.icon-btn-container{ width:2.5rem !important; height:2.5rem !important; min-width:2.5rem !important;
  padding:0 !important; border-radius:50% !important; display:flex !important;
  align-items:center !important; justify-content:center !important; flex:0 0 2.5rem !important;
  background:var(--bela-white) !important; overflow:hidden; }
.icon-btn-container img, .icon-btn-container ._15px-icon{ width:1.05rem !important; height:1.05rem !important;
  object-fit:contain !important; display:block !important; margin:0 !important; }


/* =====================================================================
   V9 — HERO: sem moldura/quadrado · silhueta irregular · mais à direita · logo menor
   ===================================================================== */
.bela-hero__logo{ width:clamp(116px, 10vw, 168px) !important; margin:12px 0 20px !important; }
.bela-hero__inner{ max-width:1500px !important; }
.bela-hero__badge, .bela-hero__title, .bela-hero__sub, .bela-hero__meta, .bela-hero__cta{ max-width:440px !important; }

/* efeito: caixa contida à direita, afastada do texto, SEM moldura */
.bela-hero__shards{
  right:calc((100% - min(1500px, 100% - 40px)) / 2) !important;
  width:min(620px, 40vw) !important; height:min(720px, 80vh) !important;
  top:50% !important; transform:translateY(-50%);
  background:transparent !important; box-shadow:none !important; border-radius:0 !important; overflow:visible !important; }
.bela-shard{ border-radius:0 !important; box-shadow:none !important; }

/* clip-paths com cantos ABERTOS -> silhueta irregular (dark bg em volta, como o KV) */
.bela-shard:nth-child(1){ clip-path:polygon(0 2%, 80% 0, 100% 13%, 0 26%) !important; }
.bela-shard:nth-child(2){ clip-path:polygon(0 24%, 100% 18%, 100% 44%, 18% 50%) !important; }
.bela-shard:nth-child(3){ clip-path:polygon(14% 53%, 100% 46%, 100% 70%, 0 76%) !important; }
.bela-shard:nth-child(4){ clip-path:polygon(0 74%, 86% 70%, 100% 84%, 100% 100%, 0 97%) !important; }

/* scrim só na faixa do texto (esquerda); não toca o efeito */
.bela-hero__scrim{ background:linear-gradient(95deg, var(--bela-ink) 0%, var(--bela-ink) 40%, rgba(22,21,15,0) 50%) !important; }

@media(max-width:991px){ .bela-hero__shards{ right:18px !important; width:44vw !important; } }
@media(max-width:767px){
  .bela-hero__shards{ left:0 !important; right:0 !important; width:100% !important; height:100% !important; top:0 !important; transform:none !important; opacity:.2; }
  .bela-hero__inner{ max-width:none !important; }
  .bela-hero__badge,.bela-hero__title,.bela-hero__sub,.bela-hero__meta,.bela-hero__cta{ max-width:100% !important; }
  .bela-hero__scrim{ background:linear-gradient(180deg, rgba(22,21,15,.8) 0%, rgba(22,21,15,.62) 55%, rgba(22,21,15,.88) 100%) !important; }
}

/* =====================================================================
   V10 — HERO: 5 RETÂNGULOS ROTACIONADOS (igual à referência KV) + fix ícone botão
   (imagem upright por trás; cada faixa é um retângulo em ângulo diferente)
   ===================================================================== */
.bela-shard:nth-child(1){ clip-path:polygon(-26.8% 10.8%, 124.0% -7.7%, 126.8% 15.2%, -24.0% 33.7%) !important; }
.bela-shard:nth-child(2){ clip-path:polygon(5.1% 17.5%, 120.7% 27.6%, 118.9% 48.5%, 3.3% 38.4%) !important; }
.bela-shard:nth-child(3){ clip-path:polygon(-20.8% 47.7%, 96.6% 35.4%, 98.8% 56.3%, -18.6% 68.6%) !important; }
.bela-shard:nth-child(4){ clip-path:polygon(4.4% 54.3%, 123.8% 66.8%, 121.6% 87.7%, 2.2% 75.2%) !important; }
.bela-shard:nth-child(5){ clip-path:polygon(-26.7% 82.3%, 125.0% 71.7%, 126.7% 95.7%, -25.0% 106.3%) !important; }

/* ícone dos botões is-icon: leve folga à esquerda (igual às margens sup/inf da pílula) */
.button.is-icon{ padding-left:.5rem !important; }


/* =====================================================================
   V11 — HERO: retângulos ESCALONADOS (larguras/posições variadas) + sem corte
   (cantos mantidos dentro de [3,96]% na vertical; bordas esq/dir desalinhadas)
   ===================================================================== */
.bela-shard:nth-child(1){ clip-path:polygon(-14.6% 14.2%, 92.8% 2.9%, 94.6% 19.8%, -12.8% 31.1%) !important; }
.bela-shard:nth-child(2){ clip-path:polygon(18.7% 21.7%, 114.4% 28.4%, 113.3% 44.3%, 17.6% 37.6%) !important; }
.bela-shard:nth-child(3){ clip-path:polygon(-14.5% 46.4%, 85.1% 37.7%, 86.5% 53.6%, -13.1% 62.3%) !important; }
.bela-shard:nth-child(4){ clip-path:polygon(16.1% 53.9%, 113.6% 64.2%, 111.9% 80.1%, 14.4% 69.8%) !important; }
.bela-shard:nth-child(5){ clip-path:polygon(-3.5% 77.9%, 106.2% 70.2%, 107.5% 88.1%, -2.2% 95.8%) !important; }


/* =====================================================================
   V12 — Novo logo (lockup) · hero título 2 linhas · rodapé legal full-width
   ===================================================================== */
/* nav logo = novo lockup EDIFÍCIO BELA (aspecto ~3.3:1) */
.nav-menu .logo-nav{ height:44px !important; width:auto !important; }
.logo-nav-container{ max-width:180px !important; }

/* hero: título em 2 linhas (quebra explícita) */
.bela-hero__title{ max-width:none !important; font-size:clamp(1.9rem,2.8vw,3rem) !important; line-height:1.06 !important; }
.bela-hero__title br{ display:block; }

/* rodapé: texto legal ocupando a base inteira (2 colunas) — reduz a altura */
.footer-content-politica{ width:100% !important; }
.footer-content-politica .padding-section-tiny{ width:100% !important; max-width:none !important; }
.bela-footer-disclaimer{ width:100% !important; max-width:none !important;
  column-count:2; column-gap:46px; text-align:justify; margin-top:14px; opacity:.62; line-height:1.55; }
@media(max-width:767px){ .bela-footer-disclaimer{ column-count:1; text-align:left; } }

/* =====================================================================
   V13 — PLANTAS (bento) · GALERIA (4 cards) · LIGHTBOX · legendas de seção
   ===================================================================== */
.bela-bento{ display:grid; grid-template-columns:minmax(300px,360px) 1fr; grid-template-rows:auto 1fr; gap:18px; margin-top:clamp(20px,3vw,36px); }
.bela-bento__tabs{ grid-column:1; grid-row:1; background:var(--bela-cream); border-radius:16px; padding:18px; display:flex; flex-direction:column; gap:10px; }
.bela-tab{ font-family:var(--inter) !important; font-weight:600; font-size:1rem; text-align:left; padding:13px 18px; border-radius:10px; border:1px solid transparent; background:transparent; color:#5a5648; cursor:pointer; transition:all .18s; }
.bela-tab:hover{ background:rgba(87,85,73,.08); }
.bela-tab.is-active{ background:var(--bela-olive); color:var(--bela-white); }
.bela-bento__meta{ grid-column:1; grid-row:2; background:var(--bela-olive); color:var(--bela-white); border-radius:16px; padding:26px 24px; display:flex; flex-direction:column; justify-content:center; }
.bela-bento__meta .bela-plan-tipo{ font-family:var(--inter); font-weight:600; font-size:.72rem; letter-spacing:2.5px; text-transform:uppercase; color:var(--bela-sand); }
.bela-bento__meta .bela-plan-metragem{ font-family:var(--fraunces); font-weight:400; font-size:clamp(2.4rem,4vw,3.4rem); line-height:1; margin:10px 0 8px; color:var(--bela-white); }
.bela-bento__meta .bela-plan-metragem span{ font-size:.4em; color:var(--bela-sand); }
.bela-bento__meta .bela-plan-note{ font-family:var(--inter); font-weight:300; font-size:.95rem; line-height:1.5; color:rgba(255,253,250,.82); margin:0; }
.bela-bento__right{ grid-column:2; grid-row:1 / span 2; background:#f2f1ea; border-radius:16px; overflow:hidden; min-height:clamp(360px,42vw,560px); position:relative; }
.bela-plan-stage{ position:absolute; inset:0; overflow:hidden; }
.bela-plan-track{ display:flex; height:100%; transition:transform .45s cubic-bezier(.5,0,.2,1); }
.bela-plan-slide{ flex:0 0 100%; height:100%; display:flex; align-items:center; justify-content:center; padding:24px; cursor:zoom-in; }
.bela-plan-slide img{ max-width:100%; max-height:100%; object-fit:contain; }
.bela-plan-empty{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#8a8577; font-family:var(--inter); }
.bela-plan-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:44px; height:44px; border-radius:50%; border:none; background:rgba(255,253,250,.92); color:var(--bela-olive); font-size:26px; line-height:1; cursor:pointer; box-shadow:0 4px 16px rgba(0,0,0,.12); transition:all .16s; }
.bela-plan-arrow:hover{ background:var(--bela-olive); color:#fff; }
.bela-plan-arrow.is-prev{ left:14px; } .bela-plan-arrow.is-next{ right:14px; }
.bela-plan-count{ position:absolute; bottom:14px; left:50%; transform:translateX(-50%); z-index:3; font-family:var(--inter); font-size:.8rem; color:#5a5648; background:rgba(255,253,250,.92); padding:4px 12px; border-radius:999px; }
.bela-plan-zoom{ position:absolute; top:14px; right:14px; z-index:3; width:38px; height:38px; border-radius:50%; background:rgba(22,21,15,.55); color:#fff; display:flex; align-items:center; justify-content:center; font-size:18px; pointer-events:none; }
@media(max-width:860px){
  .bela-bento{ grid-template-columns:1fr; grid-template-rows:auto auto auto; }
  .bela-bento__tabs{ grid-row:1; flex-direction:row; flex-wrap:wrap; } .bela-tab{ flex:1 1 40%; text-align:center; }
  .bela-bento__meta{ grid-row:2; } .bela-bento__right{ grid-column:1; grid-row:3; min-height:340px; }
}
/* Galeria 4 cards */
.bela-gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:clamp(20px,3vw,34px); }
.bela-gcard{ position:relative; border:none; padding:0; cursor:pointer; border-radius:16px; overflow:hidden; aspect-ratio:3/4; background:var(--bela-olive-deep); text-align:left; }
.bela-gcard[disabled]{ opacity:.45; cursor:default; }
.bela-gcard__img{ position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .6s ease; }
.bela-gcard:hover .bela-gcard__img{ transform:scale(1.06); }
.bela-gcard__scrim{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(22,21,15,0) 38%,rgba(22,21,15,.78) 100%); }
.bela-gcard__body{ position:absolute; left:0; right:0; bottom:0; padding:20px; display:flex; flex-direction:column; gap:4px; z-index:2; }
.bela-gcard__label{ font-family:var(--fraunces) !important; font-weight:400; font-size:clamp(1.2rem,1.6vw,1.6rem); color:var(--bela-white); }
.bela-gcard__more{ font-family:var(--inter); font-weight:600; font-size:.72rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--bela-sand); display:inline-flex; align-items:center; gap:6px; opacity:0; transform:translateY(6px); transition:all .22s; }
.bela-gcard:hover .bela-gcard__more{ opacity:1; transform:none; }
@media(max-width:860px){ .bela-gallery-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:479px){ .bela-gallery-grid{ grid-template-columns:1fr; } .bela-gcard{ aspect-ratio:16/10; } }
/* Lightbox */
.bela-lb{ position:fixed; inset:0; z-index:9999; background:rgba(16,15,11,.94); display:none; align-items:center; justify-content:center; padding:40px; }
.bela-lb.is-open{ display:flex; }
.bela-lb__fig{ margin:0; display:flex; flex-direction:column; align-items:center; gap:12px; }
.bela-lb__fig img{ max-width:92vw; max-height:82vh; object-fit:contain; border-radius:6px; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.bela-lb__fig figcaption{ font-family:var(--inter); font-size:.8rem; letter-spacing:.5px; color:rgba(255,253,250,.72); }
.bela-lb__close{ position:absolute; top:22px; right:26px; width:46px; height:46px; border-radius:50%; border:none; background:rgba(255,253,250,.12); color:#fff; font-size:20px; cursor:pointer; }
.bela-lb__close:hover{ background:rgba(255,253,250,.24); }
.bela-lb__arrow{ position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%; border:none; background:rgba(255,253,250,.12); color:#fff; font-size:30px; cursor:pointer; }
.bela-lb__arrow:hover{ background:rgba(255,253,250,.24); }
.bela-lb__arrow.is-prev{ left:24px; } .bela-lb__arrow.is-next{ right:24px; }
.bela-lb__count{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%); font-family:var(--inter); font-size:.8rem; color:rgba(255,253,250,.7); }
/* Legenda em imagens de seção (fundo) */
.bela-cap-sec{ position:relative; }
.bela-cap-sec::after{ content:attr(data-cap); position:absolute; right:12px; bottom:10px; z-index:4;
  font-family:var(--inter); font-size:.62rem; letter-spacing:.3px; color:rgba(255,253,250,.92);
  background:rgba(10,9,7,.42); padding:4px 9px; border-radius:6px; pointer-events:none; }


/* V13.1 — legenda no hero (imagem fatiada dos cacos) */
.bela-hero::after{ content:"Perspectiva artística da fachada"; position:absolute; right:20px; bottom:14px; z-index:5;
  font-family:var(--inter); font-size:.62rem; letter-spacing:.3px; color:rgba(255,253,250,.58); pointer-events:none; }
@media(max-width:767px){ .bela-hero::after{ right:14px; bottom:76px; } }



.popup-block,.pop-up-ajuda{display:none!important}

.popup-block,.pop-up-ajuda{display:none!important}

/* =====================================================================
   V14 — nav align · rodapé 1 coluna · zoom clicável · polish bento · legendas
   ===================================================================== */
/* #1 nav logo alinhado ao mesmo container/padding do hero (hero__inner = 1500px) */
.nav-menu .container-nav{ max-width:1500px !important; margin:0 auto !important; width:100% !important;
  padding:8px clamp(24px,5vw,64px) !important; box-sizing:border-box; display:flex !important; justify-content:flex-start !important; }
.nav-menu .nav-block{ max-width:none !important; width:auto !important; padding:0 !important; border:none !important; margin:0 !important; justify-content:flex-start !important; }
.nav-menu .logo-nav-container{ max-width:none !important; margin:0 !important; padding:0 !important; justify-content:flex-start !important; }

/* #5 rodapé: texto legal em UMA coluna preenchendo toda a largura */
.bela-footer-disclaimer{ column-count:1 !important; column-gap:0 !important; text-align:justify; max-width:none !important; width:100% !important; }

/* #6 ícone de tela cheia (zoom) clicável + visível */
.bela-plan-zoom{ pointer-events:auto !important; cursor:pointer; border:none; transition:background .16s, transform .16s; }
.bela-plan-zoom:hover{ background:rgba(22,21,15,.82); transform:scale(1.06); }
.bela-plan-slide img{ transition:transform .3s; }
.bela-plan-slide:hover img{ transform:scale(1.02); }

/* #6 polish do bento */
.bela-bento__right{ box-shadow:inset 0 0 0 1px rgba(87,85,73,.10); }
.bela-tab{ position:relative; }
.bela-tab.is-active::after{ content:""; position:absolute; right:14px; top:50%; transform:translateY(-50%);
  width:6px; height:6px; border-radius:50%; background:var(--bela-sand); }
.bela-bento__meta{ position:relative; overflow:hidden; }
.bela-bento__meta::after{ content:""; position:absolute; right:-30px; bottom:-30px; width:120px; height:120px;
  border-radius:50%; background:rgba(255,253,250,.05); }

/* legenda de seção (wellness é split -> canto inferior esquerdo p/ não cortar) */
.investimento-section .img-investimento-container.bela-cap-sec::after{ right:auto; left:14px; bottom:14px; }



/* =====================================================================
   V15 — POLIMENTO GERAL (ritmo · botões · header · reveal · parallax)
   ===================================================================== */
/* ---- Ritmo vertical consistente ---- */
.section-about,.section-obra,.section_gallery21,.section-galeria,#galeria,
.section-planta,.section_video,.section_cta,.investimento-section{
  padding-top:clamp(58px,6.2vw,112px) !important; padding-bottom:clamp(58px,6.2vw,112px) !important; }
.bela-kicker{ margin-bottom:16px !important; }
.bela-plantas-head, .galeria-title-container, .localizacao-title-container{ margin-bottom:clamp(26px,3vw,40px); }
.bela-section-sub{ margin-top:12px !important; max-width:52ch; }
.galeria-title-container .info-galeria-container{ margin-top:10px; }

/* ---- Botões: mesma altura, ícone+texto centralizados ---- */
.button.is-icon{ display:inline-flex !important; align-items:center !important; gap:.7rem !important;
  min-height:58px; box-sizing:border-box; }
.button.is-icon > div:last-child{ line-height:1.15; }
.bela-hero__cta .button, .btn-localizacao-container .button{ min-height:58px; }
.btn-localizacao-container{ gap:12px; }

/* ---- HEADER esquerda: diagramação + respiro ---- */
.bela-hero__title{ margin:0 0 22px !important; }
.bela-hero__sub{ margin:0 0 22px !important; line-height:1.62 !important; color:rgba(255,253,250,.82) !important; }
.bela-hero__meta{ flex-direction:column !important; align-items:flex-start !important; gap:7px !important;
  margin:0 0 34px !important; padding-top:20px; border-top:1px solid rgba(255,253,250,.15); font-size:.82rem !important; }
.bela-hero__meta .sep{ display:none !important; }
.bela-hero__meta span{ letter-spacing:.02em; color:rgba(255,253,250,.72) !important; }
.bela-hero__meta strong{ color:var(--bela-sand) !important; font-weight:600; }
.bela-hero__cta{ gap:14px !important; margin-top:2px; }

/* ---- Reveal on scroll ---- */
.bela-rv{ opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.bela-rv.in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){ .bela-rv{ opacity:1 !important; transform:none !important; } }

/* ---- Parallax leve das imagens de seção (via variável) ---- */
.img-about{ background-position:66% var(--bpy,32%) !important; }
.investimento-section .img-investimento-container{ background-position:center var(--bpy,50%) !important; }


/* V15.1 — alinhamento óptico fino do logo do nav (compensa padding interno do SVG) */


/* =====================================================================
   V16 — BOTÕES reconstruídos (igual à print: pill terra + círculo branco)
   ===================================================================== */
.button.is-icon, a.button.is-icon, .button.is-icon.is-secondary, .button.is-icon.is-waze{
  display:inline-flex !important; align-items:center !important; gap:14px !important;
  background:var(--bela-terra) !important; background-image:none !important; color:var(--bela-white) !important;
  border:none !important; border-radius:999px !important; padding:8px 32px 8px 8px !important;
  min-height:0 !important; height:auto !important; font-family:var(--inter) !important; font-weight:600 !important;
  font-size:1rem !important; letter-spacing:.01em; line-height:1; text-decoration:none; white-space:nowrap;
  box-shadow:0 8px 20px -12px rgba(90,44,22,.65); cursor:pointer;
  transition:transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s, filter .22s; }
.button.is-icon:hover{ transform:translateY(-2px) !important; box-shadow:0 14px 28px -12px rgba(90,44,22,.7) !important; filter:brightness(1.05); }
.button.is-icon:active{ transform:translateY(0) !important; }
.button.is-icon .icon-btn-container{
  flex:0 0 46px !important; width:46px !important; height:46px !important; min-width:46px !important;
  border-radius:50% !important; background:var(--bela-white) !important; padding:0 !important; margin:0 !important;
  display:flex !important; align-items:center !important; justify-content:center !important; box-shadow:none !important; overflow:hidden; }
.button.is-icon .icon-btn-container img, .button.is-icon .icon-btn-container svg{
  width:19px !important; height:19px !important; object-fit:contain !important; margin:0 !important; }
.button.is-icon > div:last-child, .button.is-icon > span:last-child, .button.is-icon .text-btn{ color:var(--bela-white) !important; padding:0 4px 0 0; }
/* remove estilos antigos conflitantes */
.btn-localizacao-container .button.is-icon{ justify-content:flex-start !important; width:100%; }

/* =====================================================================
   V17 — header refine · float por card · micro-interações · reveal
   ===================================================================== */
/* HEADER esquerda: hierarquia + respiro (SÓ desktop; mobile mantém as regras próprias) */
@media(min-width:768px){
  .bela-hero__title{ font-size:clamp(2.15rem,3.4vw,3.6rem) !important; line-height:1.04 !important; margin:0 0 24px !important; }
  .bela-hero__sub{ font-size:clamp(1rem,1.15vw,1.16rem) !important; max-width:44ch !important; margin:0 0 26px !important; color:rgba(255,253,250,.8) !important; }
  .bela-hero__meta{ gap:9px !important; margin:0 0 38px !important; padding-top:22px !important; }
  .bela-hero__meta span:first-child{ font-size:.98rem !important; color:rgba(255,253,250,.92) !important; }
  .bela-hero__meta span:first-child strong{ font-family:var(--fraunces) !important; font-weight:500; font-size:1.2rem; color:var(--bela-sand) !important; }
  .bela-hero__meta span:last-child{ font-size:.74rem !important; letter-spacing:.05em; color:rgba(255,253,250,.5) !important; text-transform:uppercase; }
}
/* GUARDA mobile: nada do header pode estourar a largura */
.bela-hero__inner{ box-sizing:border-box !important; }
@media(max-width:767px){
  .bela-hero__inner{ max-width:100% !important; width:100% !important; overflow:hidden; }
  .bela-hero__sub,.bela-hero__meta,.bela-hero__meta span,.bela-hero__credits{ max-width:100% !important; }
  .bela-hero__sub,.bela-hero__meta span{ overflow-wrap:anywhere; word-break:break-word; }
  .bela-hero__credits .cr{ white-space:normal; }
}

/* FLOAT por card (fade + parallax individual, sem transição no transform p/ não travar) */
.bela-float{ opacity:0; transform:translateY(var(--fy,0px)); transition:opacity .85s ease; will-change:transform,opacity; }
.bela-float.in{ opacity:1; }

/* REVEAL (blocos que não são float) */
.bela-rv{ opacity:0; transform:translateY(30px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.bela-rv.in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){ .bela-rv,.bela-float{ opacity:1 !important; transform:none !important; } }

/* MICRO-INTERAÇÕES */
.bela-gcard{ transition:box-shadow .35s ease !important; }
.bela-gcard:hover{ box-shadow:0 26px 54px -18px rgba(22,21,15,.55); }
.bela-tab{ transition:background .2s, color .2s, padding-left .2s ease !important; }
.bela-tab:not(.is-active):hover{ padding-left:24px !important; }
.bela-bento__right{ transition:box-shadow .35s ease; }
.localizacao-dark-green-container,.localizacao-green-light-container,.localizacao-white-smoke{ transition:transform .35s ease, box-shadow .35s ease; }
.bela-plan-arrow{ transition:all .18s ease, transform .18s ease; }

/* --- V17b: créditos íntegros + entrada escalonada do header --- */
.bela-hero__credits .cr{ white-space:nowrap; }
.bela-hero__credits strong{ color:var(--bela-sand) !important; font-weight:600; }
@media (prefers-reduced-motion:no-preference){
  .bela-hero__inner > *{ opacity:0; animation:belaHeroIn 1s cubic-bezier(.2,.72,.2,1) forwards; }
  .bela-hero__inner > .bela-kicker{ animation-delay:.08s; }
  .bela-hero__inner > .bela-hero__title{ animation-delay:.18s; }
  .bela-hero__inner > .bela-hero__sub{ animation-delay:.30s; }
  .bela-hero__inner > .bela-hero__meta{ animation-delay:.42s; }
  .bela-hero__inner > .bela-hero__cta{ animation-delay:.52s; }
}
@keyframes belaHeroIn{ from{ opacity:0; transform:translateY(20px);} to{ opacity:1; transform:none;} }

/* --- V17c: contraste garantido no painel Wellness (olive) --- */
.bela-wellness-section .heading-content-investimento h4{ color:var(--bela-white) !important; }
.bela-wellness-section .heading-content-investimento h4 em{ color:var(--bela-sand) !important; font-style:italic; }
.bela-wellness-section .heading-content-investimento .bela-kicker.on-dark{ color:var(--bela-sand) !important; opacity:.92; }
.bela-wellness-section .txt-content-investimento .text-color-alternate{ color:rgba(255,253,250,.86) !important; }

/* =====================================================================
   V18 — ajustes finos: CTA lado a lado · assinaturas uniformes ·
   sub galeria · botão wellness · mobile (ícone/texto + centralização)
   ===================================================================== */

/* #1 HERO: botões de conversão lado a lado (desktop) */
@media(min-width:768px){
  .bela-hero__cta{ flex-wrap:nowrap !important; max-width:none !important; }
}

/* #2 ASSINATURAS: fonte, tamanho, peso e cor únicos (padrão Paisagismo / Inter) */
.bela-hero__credits, .bela-hero__credits .cr, .bela-hero__credits strong{
  font-family:var(--inter) !important; font-weight:500 !important; font-size:.76rem !important;
  letter-spacing:.06em !important; text-transform:uppercase !important; color:rgba(255,253,250,.72) !important; }

/* #3 GALERIA: subtítulo alinhado à esquerda (desktop) */
.galeria-title-container .info-galeria-container,
.galeria-title-container .info-galeria-container .text-size-small{ text-align:left !important; }

/* #4 BOTÃO WELLNESS: ícone dentro da pílula (a template limitava a 255px) */
.bela-wellness-section .cta-container .button.is-icon{
  max-width:none !important; width:auto !important; justify-content:flex-start !important;
  padding:8px 32px 8px 8px !important; }
.bela-wellness-section .cta-container .button.is-icon .icon-btn-container{ margin:0 !important; }

/* #5 MOBILE: ícone à esquerda; texto ocupa o restante, centralizado */
@media(max-width:767px){
  .button.is-icon{ justify-content:flex-start !important; }
  .button.is-icon > div:last-child, .button.is-icon > span:last-child, .button.is-icon .text-btn{
    flex:1 1 auto !important; text-align:center !important; }
}

/* #6 MOBILE: centralizar tags (kickers), títulos e subtítulos de seção */
@media(max-width:767px){
  .title-about-container, .bela-plantas-head, .galeria-title-container,
  .localizacao-title-container, .heading-content-investimento{
    align-items:center !important; text-align:center !important; }
  .title-about-container .bela-kicker, .bela-plantas-head .bela-kicker,
  .galeria-title-container .bela-kicker, .localizacao-title-container .bela-kicker,
  .heading-content-investimento .bela-kicker{ align-self:center !important; justify-content:center; }
  .galeria-title-container h4,
  .galeria-title-container .info-galeria-container,
  .galeria-title-container .info-galeria-container .text-size-small{ text-align:center !important; }
  .bela-plantas-head h2, .bela-plantas-head h3, .bela-plantas-head p,
  .localizacao-title-container h2, .localizacao-title-container h3, .localizacao-title-container h4, .localizacao-title-container p,
  .heading-content-investimento h4, .title-about-container h2, .title-about-container h3{ text-align:center !important; }
}

/* =====================================================================
   V19 — ASSINATURAS do header 100% uniformes (mesma fonte/tamanho/cor)
   Corrige o vazamento das regras :first-child/:last-child do V17 sobre os
   sub-spans .cr (que deixava "Arquitetura" grande e "Aflalo" em serifa).
   Referência: tamanho e fonte de "Paisagismo SOMA".
   ===================================================================== */
.bela-hero__inner .bela-hero__meta .bela-hero__credits,
.bela-hero__inner .bela-hero__meta .bela-hero__credits .cr,
.bela-hero__inner .bela-hero__meta .bela-hero__credits strong{
  font-family:var(--inter) !important;
  font-size:.76rem !important;
  font-weight:500 !important;
  font-style:normal !important;
  letter-spacing:.05em !important;
  text-transform:uppercase !important;
  color:rgba(255,253,250,.72) !important;
}

/* =====================================================================
   V20 — FIX cor do texto dos inputs dos formulários.
   Bug: .form_input-3 e .form_input-4 não tinham `color` base — só definiam
   color:#fff no :focus. Sem foco, o texto herdava o escuro do body (#2a2a24)
   sobre o fundo escuro do input (#1d1c1a) e "sumia". Força branco sempre.
   ===================================================================== */
.form_input, .form_input-3, .form_input-4, .form_input-5,
.modal-form input.w-input, .modal-form textarea.w-input{
  color:var(--bela-white) !important;
  -webkit-text-fill-color:var(--bela-white) !important;
  caret-color:var(--bela-white) !important;
}
.form_input-3::placeholder, .form_input-4::placeholder, .form_input-5::placeholder,
.modal-form input.w-input::placeholder{ color:rgba(255,253,250,.5) !important; -webkit-text-fill-color:rgba(255,253,250,.5) !important; }
/* Autofill do Chrome: mantém texto branco e não pinta fundo claro */
.modal-form input:-webkit-autofill,
.modal-form input:-webkit-autofill:hover,
.modal-form input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--bela-white) !important;
  caret-color:var(--bela-white) !important;
  transition:background-color 99999s ease-in-out 0s !important;
}

/* ===== V21 — bloco de tipologias no hero (igual à print: nome + metragem + desc) ===== */
.bela-hero__tipos{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem 2.2rem; margin:0; width:100%; }
.bela-tipo{ display:flex; flex-direction:column; gap:.14rem; }
.bela-tipo__nome{ font-family:var(--fraunces); font-weight:500; font-size:1.06rem; letter-spacing:.03em; text-transform:uppercase; color:var(--bela-sand); line-height:1.1; }
.bela-tipo__area{ font-family:var(--inter); font-weight:500; font-size:.92rem; color:var(--bela-white); letter-spacing:.01em; }
.bela-tipo__desc{ font-family:var(--inter); font-weight:400; font-size:.78rem; color:rgba(255,253,250,.6); }
.bela-hero__tipos-nota{ grid-column:1 / -1; font-family:var(--inter); font-size:.66rem; letter-spacing:.03em; color:rgba(255,253,250,.5); margin-top:.05rem; }
@media(max-width:767px){ .bela-hero__tipos{ gap:.85rem 1.2rem; } .bela-tipo__nome{ font-size:1rem; } }

/* V21b — corrige vazamento do span:last-child (uppercase/size/cor) nas tipologias */
.bela-hero__inner .bela-hero__meta .bela-tipo__nome{ text-transform:uppercase !important; font-size:1.06rem !important; color:var(--bela-sand) !important; letter-spacing:.03em !important; }
.bela-hero__inner .bela-hero__meta .bela-tipo__area{ text-transform:none !important; font-size:.92rem !important; color:var(--bela-white) !important; letter-spacing:.01em !important; }
.bela-hero__inner .bela-hero__meta .bela-tipo__desc{ text-transform:none !important; font-size:.78rem !important; color:rgba(255,253,250,.6) !important; }
.bela-hero__inner .bela-hero__meta .bela-hero__tipos-nota{ text-transform:none !important; font-size:.66rem !important; color:rgba(255,253,250,.5) !important; letter-spacing:.02em !important; }

/* ===== V22 — diagramação do comando (tipologias) + divisória p/ assinaturas ===== */
.bela-hero__inner .bela-hero__tipos{ position:relative; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:3.2rem; row-gap:1.5rem; }
/* divisória vertical central entre as duas colunas */
.bela-hero__inner .bela-hero__tipos::before{ content:""; position:absolute; top:4%; bottom:4%; left:50%; width:1px; background:rgba(255,253,250,.15); transform:translateX(-.5px); }
/* hierarquia refinada dos itens */
.bela-hero__inner .bela-hero__meta .bela-tipo{ gap:.16rem; }
.bela-hero__inner .bela-hero__meta .bela-tipo__nome{ font-size:1.04rem !important; letter-spacing:.045em !important; margin-bottom:.16rem; }
.bela-hero__inner .bela-hero__meta .bela-tipo__area{ font-size:.98rem !important; font-weight:600 !important; }
.bela-hero__inner .bela-hero__meta .bela-tipo__desc{ font-size:.76rem !important; }
/* DIVISÓRIA entre o comando e as assinaturas (créditos) */
.bela-hero__inner .bela-hero__meta .bela-hero__credits{ display:block !important; width:100%; border-top:1px solid rgba(255,253,250,.18); padding-top:1rem; margin-top:1.2rem; }

/* ===== V23 — header com altura segura (não cortar em janelas baixas) ===== */
/* 'safe center': centraliza quando cabe; alinha ao topo quando o conteúdo é maior que a viewport */
.bela-hero{ align-items:safe center; }
/* Fallback robusto p/ telas baixas: cresce e alinha ao topo (página rola, nada é cortado) */
@media (max-height:820px){
  .bela-hero{ align-items:flex-start !important; }
  .bela-hero__inner{ padding-top:100px !important; padding-bottom:60px !important; }
}
@media (max-height:680px){
  .bela-hero__inner{ padding-top:92px !important; padding-bottom:48px !important; }
}

/* ===== V24 — selo HMP (chip branco) no header e no rodapé ===== */
.bela-hero__hmp{ position:absolute; right:16px; bottom:34px; z-index:6; background:#fffdfa;
  border-radius:6px; padding:5px 9px; box-shadow:0 8px 22px rgba(0,0,0,.4); line-height:0; }
.bela-hero__hmp img{ display:block; height:22px; width:auto; }
@media(max-width:767px){ .bela-hero__hmp{ right:12px; bottom:30px; padding:4px 7px; } .bela-hero__hmp img{ height:17px; } }

.bela-footer-hmp{ display:block; width:max-content; max-width:100%; background:#fffdfa;
  border-radius:6px; padding:8px 12px; margin-top:16px; line-height:0; }
.bela-footer-hmp img{ display:block; height:28px; width:auto; max-width:100%; }

/* V24b — legenda do header: selo HMP ao lado da perspectiva (substitui o ::after) */
.bela-hero::after{ content:none !important; }
.bela-hero__legenda{ position:absolute; right:16px; bottom:12px; z-index:6; display:flex; align-items:center; gap:11px; }
.bela-hero__selo{ background:#fffdfa; border-radius:5px; padding:4px 8px; line-height:0; box-shadow:0 8px 22px rgba(0,0,0,.4); }
.bela-hero__selo img{ display:block; height:20px; width:auto; }
.bela-hero__perspectiva{ font-family:var(--inter); font-size:.62rem; letter-spacing:.3px; color:rgba(255,253,250,.58); white-space:nowrap; }
@media(max-width:767px){
  .bela-hero__legenda{ right:12px; bottom:10px; gap:8px; }
  .bela-hero__selo img{ height:16px; }
  .bela-hero__perspectiva{ font-size:.56rem; }
}

/* ===== V25 — selo HMP maior (legível) + header sem encolher/cortar ===== */
/* #2 selo maior */
.bela-hero__selo{ padding:6px 11px !important; }
.bela-hero__selo img{ height:34px !important; }
.bela-footer-hmp img{ height:52px !important; }
.bela-footer-hmp{ padding:10px 16px !important; margin-top:22px !important; }
@media (max-width:767px){ .bela-hero__selo img{ height:24px !important; } .bela-footer-hmp img{ height:40px !important; } }

/* #4 header nunca corta: topo-alinhado (a página rola p/ ver os botões);
   só centraliza em telas realmente altas */
.bela-hero{ align-items:flex-start !important; }
@media (min-height:880px){ .bela-hero{ align-items:center !important; } }
.bela-hero__inner{ padding-top:clamp(96px,12vh,130px) !important; padding-bottom:clamp(64px,9vh,96px) !important; }

/* ===== V26 — ALTURA MÍNIMA no header: garante que o conteúdo (CTAs) sempre
   caiba dentro da div, pra o overflow:hidden NUNCA ocultar os botões.
   Em telas altas usa 100svh; em telas baixas trava em 880px (o header cresce
   e a página rola, revelando os botões). ===== */
.header-section.bela-hero{ min-height:max(100svh, 880px) !important; }

/* ============================================================
   V27 — Botão flutuante de WhatsApp (canto inferior direito) +
   novo modal .form-wpplead (mesmo visual do form de contato).
   ============================================================ */
/* O modal novo precisa ficar OCULTO por default (o template só esconde
   form-contato/chatonline/chatwpp; sem isto ele apareceria no load). */
.modal-form.form-wpplead{ margin-top:1.5rem; display:none; top:-1.5rem; }

/* Botão flutuante */
.bela-wpp-float{
  position:fixed; right:24px; bottom:24px; z-index:99998;
  width:60px; height:60px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px rgba(37,211,102,.45), 0 2px 8px rgba(0,0,0,.25);
  transition:transform .2s ease, box-shadow .2s ease;
  animation:bela-wpp-pop 480ms ease-out both;
}
.bela-wpp-float:hover{
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 16px 40px rgba(37,211,102,.6), 0 4px 12px rgba(0,0,0,.3);
}
.bela-wpp-float svg{ width:34px; height:34px; fill:#ffffff; }
@keyframes bela-wpp-pop{ from{ opacity:0; transform:scale(.6); } to{ opacity:1; transform:scale(1); } }
@media (max-width:767px){
  .bela-wpp-float{ right:16px; bottom:16px; width:54px; height:54px; }
  .bela-wpp-float svg{ width:30px; height:30px; }
}

/* ===== V28 — ajustes finais: assinaturas em linhas separadas + remover note das plantas ===== */
/* Task 4: cada assinatura (Arquitetura / Interiores / Paisagismo) em sua própria linha */
.bela-hero__inner .bela-hero__meta .bela-hero__credits .cr{ display:block !important; white-space:nowrap; }
.bela-hero__inner .bela-hero__meta .bela-hero__credits .cr + .cr{ margin-top:.4rem; }
/* Task 5: remover o subtítulo menor ("16 unidades…", "1, 2 e 3 dormitórios", etc.) da seção de plantas */
.bela-plan-note{ display:none !important; }

/* ===== V29/V30 — selo HMP oficial (hmp-neg.png: texto branco + brasão colorido sobre transparente),
   usado no HEADER e no RODAPÉ. Remove o chip branco do header e qualquer atenuação. ===== */
.bela-hero__selo{ background:transparent !important; box-shadow:none !important; padding:0 !important; border-radius:0 !important; }
.bela-footer-hmp{ background:transparent !important; border-radius:0 !important; padding:0 !important; }
.bela-footer-hmp img{ opacity:1; }