/* =====================================================================
   PILARYS JD. GUEDALA — Camada de ajustes de design
   Sobrescreve a template "Vila Parque Butantã" (Webflow).
   Paleta: Amarelo #FFCB3C  |  Grafite #2C2D34
   Carregar SEMPRE depois de cambur-vila-parque-butanta.webflow.css
   ===================================================================== */

/* -------- 1. PALETA (redefine variáveis da template) ---------------- */
:root{
  --olive:#2C2D34 !important;        /* era #806a40  -> grafite   */
  --yellow:#FFCB3C !important;       /* era #d8db00  -> amarelo   */
  --yellow-green:#FFCB3C !important; /* era #c3c600  -> amarelo   */
  --pilarys-graf:#2C2D34;
  --pilarys-amber:#FFCB3C;
  --pilarys-amber-dk:#e6b21f;
}

/* Botão amarelo -> texto grafite (contraste AA sobre amarelo) */
.button{ background-color:var(--pilarys-amber) !important; color:var(--pilarys-graf) !important; }
.button:hover{ background-color:var(--pilarys-amber-dk) !important; }
.button.is-secondary{ background-color:#fff !important; border-color:var(--pilarys-amber) !important; color:var(--pilarys-graf) !important; }
.button.is-form-submit{ border-color:var(--pilarys-amber-dk) !important; }
.button.is-form-submit:hover{ background-color:var(--pilarys-amber-dk) !important; }

/* Textos em marrom/oliva -> grafite */
.text-color-brown,
.text-size-medium.is-brown,
.text-weight-bold.is-brown,
.text-size-small.brown,
.nav-link,
.heading{ color:var(--pilarys-graf) !important; }

/* Subtítulos "is-yellow" ficam sobre fundo claro -> grafite legível */
.text-weight-semibold.is-yellow{ color:var(--pilarys-graf) !important; }

/* Botão flutuante "voltar ao topo" (estava #d8db00 no <style> inline) */
.progress-wrap:hover{ background-color:var(--pilarys-amber) !important; }
.progress-wrap::after{ color:var(--pilarys-amber) !important; }
.progress-wrap svg.progress-circle path{ stroke:var(--pilarys-amber) !important; }

/* -------- 2. HERO / HEADER ----------------------------------------- */
/* H1 elegante em 2 linhas com marcador âmbar */
.h1-header{ gap:.15rem !important; }
.heading-style-h1.pilarys-h1{
  display:flex; flex-direction:column; gap:.1rem;
  font-family:'Lato',sans-serif;
  font-size:clamp(2.6rem,5vw,4rem) !important;
  font-weight:800 !important; line-height:1.02 !important;
  color:var(--pilarys-graf) !important; margin:0;
}
.heading-style-h1.pilarys-h1 .h1-line{ display:block; }
.span-header{
  -webkit-text-stroke:0 !important; -webkit-text-fill-color:currentColor !important;
  color:var(--pilarys-graf) !important;
  font-family:'Lato',sans-serif; font-weight:900 !important;
  font-size:inherit !important; line-height:inherit !important;
  background:linear-gradient(transparent 62%, rgba(255,203,60,.9) 62%);
  padding:0 .06em; border-radius:2px; -webkit-box-decoration-break:clone; box-decoration-break:clone;
}

/* Badge "LANÇAMENTO" -> pílula âmbar preenchida */
.status-produto{
  background-color:var(--pilarys-amber) !important;
  border:none !important; border-radius:999px !important;
  padding:.4rem 1rem !important;
}
.status-produto .text-size-small{ color:var(--pilarys-graf) !important; letter-spacing:1.5px; }

/* Bloco tipologia + endereço */
.comando-produto{
  border-top:1px solid var(--pilarys-amber) !important;
  border-bottom:1px solid var(--pilarys-amber) !important;
  flex-wrap:wrap; gap:.75rem 1.25rem !important; padding:.85rem .5rem !important;
}
.dorms-wrapper,.adress-wrapper{ align-items:center; }
.comando-produto .is-brown{ color:var(--pilarys-graf) !important; line-height:1.35; }
.div-block-2{ border-right-color:var(--pilarys-amber) !important; }

/* Imagem da fachada — corrige overflow (causa raiz) */
.header-image{ max-width:100% !important; overflow:hidden; align-items:center; justify-content:center; }
.header-image .image-small-container{ display:none !important; } /* strip de thumbs redundante: galeria completa fica na seção Galeria */
.image-large-container{
  max-width:32rem !important; max-height:36rem !important; width:100% !important;
  aspect-ratio:4/5; border-radius:1rem !important; overflow:hidden !important;
  box-shadow:0 24px 55px rgba(0,0,0,.20);
}
.image-large{
  width:100% !important; height:100% !important;
  max-width:100% !important; max-height:100% !important;
  object-fit:cover !important; display:block !important;
}

/* Navbar sobre âmbar */
.navbar_component{ background-color:var(--pilarys-amber) !important; }
.nav-link a{ color:var(--pilarys-graf) !important; }

/* -------- 3. STATUS DA OBRA ---------------------------------------- */
.section-obra .stats-obras-container-small{ flex-wrap:wrap; gap:1rem !important; }
.section-obra .stats-obras-container-small > .stats-obras-container-large{
  flex:1 1 160px; min-width:150px;
  background:#fff; border:1px solid #ececec; border-radius:12px; padding:14px;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.section-obra .is-status{ color:var(--pilarys-graf) !important; }
/* Pílula "Em breve" (grafite + âmbar) */
.text-weight-bold.is-embreve{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--pilarys-graf) !important; color:var(--pilarys-amber) !important;
  font-size:.7rem !important; font-weight:800 !important;
  letter-spacing:.5px; text-transform:uppercase;
  padding:4px 11px; border-radius:999px; align-self:flex-start; width:auto;
}
.text-weight-bold.is-embreve::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--pilarys-amber);
}
/* Aviso de obra não iniciada */
.pil-obra-nota{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,203,60,.16); border:1px solid rgba(255,203,60,.55);
  color:var(--pilarys-graf); font-size:.8rem; font-weight:600;
  padding:6px 12px; border-radius:8px; margin:2px 0 4px;
}
.progress-bar-yellow{ background-color:var(--pilarys-amber) !important; }

/* -------- 4. DIFERENCIAIS / LAZER ---------------------------------- */
.lazer-grid{ gap:12px !important; }
.lazer-card{
  border:1px solid rgba(255,255,255,.06);
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.lazer-card:hover{
  transform:translateY(-3px);
  background:#34353d !important;
  box-shadow:0 8px 20px rgba(0,0,0,.22);
}
/* rótulos dos cards (o .text-weight-semibold forçava grafite -> some no card grafite) */
.lazer-card .text-weight-semibold{ color:#fff !important; }

/* -------- 5. PLANTAS (corrige overflow dos cards) ------------------ */
/* Slider/planta-image antigos removidos (V23): as plantas agora só existem
   dentro do lightbox do card "Plantas" em #galeria (ver V23/V24). */
.section_gallery21,.galeria-planta-container,.galeria-component{ max-width:100%; overflow:hidden; }

/* -------- 6. FORMULÁRIO FINAL (.section_cta) ----------------------- */
.cta-componnent{ overflow:hidden; }
.cta-img-wrapper{
  overflow:hidden !important; align-self:stretch !important;
  max-width:48%; min-height:100%;
}
.image-3{
  width:100% !important; height:100% !important;
  object-fit:cover !important; display:block !important; flex:1 !important;
}
@media screen and (max-width:767px){
  .cta-componnent{ flex-direction:column; }
  .cta-img-wrapper{ max-width:100%; height:220px; min-height:220px; }
}

/* -------- 7. FOOTER (logos padronizados) --------------------------- */
.footer{ background-color:var(--pilarys-amber) !important; }
.footer-logo-wrapper{ border-right-color:rgba(44,45,52,.25) !important; }
.footer-content-wrapper{ border-top-color:rgba(44,45,52,.25) !important; }
.text-align-center.text-weight-semibold-footer{ color:var(--pilarys-graf) !important; }
/* Logos dos parceiros em "chips" brancos uniformes (padroniza tamanhos e
   resolve o T3 que é JPEG com fundo branco) */
.footer-logo-img{ display:flex; align-items:center; justify-content:center;
  background:#fff; border-radius:10px; padding:12px 18px; height:64px; min-width:150px; box-sizing:border-box; }
.footer-logo-img img{
  height:34px !important; width:auto !important; max-width:150px;
  object-fit:contain !important; display:block; mix-blend-mode:multiply;
}

/* -------- Títulos de seção "outline" (About / H2) ------------------ */
.heading.is-outline{ color:var(--pilarys-graf) !important; }
.span-h2{
  -webkit-text-stroke:0 !important; -webkit-text-fill-color:currentColor !important;
  color:var(--pilarys-graf) !important; font-weight:900 !important;
  background:linear-gradient(transparent 64%, rgba(255,203,60,.9) 64%);
  padding:0 .05em; -webkit-box-decoration-break:clone; box-decoration-break:clone;
}

/* -------- RESPONSIVO (mobile) -------------------------------------- */
html{ overflow-x:hidden; }  /* no <html>, não quebra o position:sticky do formulário */
@media screen and (max-width:767px){
  .heading-style-h1.pilarys-h1{
    font-size:clamp(1.9rem,8.5vw,3rem) !important;
    text-align:center; align-items:center;
  }
  .header-cta{ flex-direction:column; align-items:stretch; width:100%; }
  .header-cta .button.is-icon{ max-width:none !important; width:100%; }
  .comando-produto{ flex-direction:column; text-align:center; }
  .comando-produto .div-block-2{ display:none; }
  .dorms-wrapper,.adress-wrapper{ justify-content:center; text-align:center; flex-wrap:wrap; }
  .image-large-container{ max-width:100% !important; aspect-ratio:3/4; }
}

/* -------- LOCALIZAÇÃO: ícones Iconify + botão -------------------- */
.pilarys-loc .ploc-ic iconify-icon{ font-size:18px; line-height:1; }
.pilarys-loc .ploc-btn--emp{ background:var(--pilarys-amber); color:var(--pilarys-graf); border-color:var(--pilarys-amber); }
.pilarys-loc .ploc-btn--emp:hover{ filter:brightness(.95); }
/* hierarquia: só "Ver o empreendimento" é âmbar; Waze/Maps ficam contornados */
.pilarys-loc .ploc-btn--primary{ background:transparent; color:#fff; border-color:rgba(255,255,255,.35); }
.pilarys-loc .ploc-btn--primary:hover{ border-color:var(--pilarys-amber); }

/* =====================================================================
   V2 — IDENTIDADE ALTO PADRÃO: azul-marinho (do logo) + dourado gradiente
   (esta camada vem por último e prevalece)
   ===================================================================== */
:root{
  --olive:#0a2647 !important;
  --yellow:#d9b24e !important;
  --yellow-green:#d9b24e !important;
  --pilarys-navy:#0a2647;
  --pilarys-navy-2:#123a63;      /* navy mais claro p/ cards */
  --pilarys-graf:#0a2647;        /* "darks" agora são navy */
  --pilarys-amber:#bd9846;       /* dourado champanhe sólido (bordas/checks/textos) */
  --pilarys-amber-dk:#a07f2c;
  --gold-soft:#e6d09a;           /* dourado claro p/ texto sobre navy */
  --gold-grad:linear-gradient(135deg,#b68a34 0%,#e0c479 50%,#c6a24c 100%);
  --gold-grad-dk:linear-gradient(135deg,#9c7526 0%,#cdb162 50%,#b08c39 100%);
  --gold-underline:linear-gradient(transparent 62%, rgba(224,196,121,.55) 62%);
}

/* ---- BOTÕES: dourado em gradiente, texto navy ---- */
.button{ background-image:var(--gold-grad) !important; background-color:transparent !important;
  color:#0a2647 !important; border:none !important; box-shadow:0 6px 18px rgba(10,38,71,.18); }
.button:hover{ background-image:var(--gold-grad-dk) !important; }
.button.is-secondary{ background:#fff !important; background-image:none !important;
  border:1.5px solid var(--pilarys-amber) !important; color:#0a2647 !important; box-shadow:none; }
.button.is-form-submit{ background-image:var(--gold-grad) !important; }
.button.is-form-submit:hover{ background-image:var(--gold-grad-dk) !important; }

/* ---- TÍTULOS: cor navy + tamanhos menores (não quebrar em 2+ linhas) ---- */
.heading, .heading.is-outline{ color:var(--pilarys-navy) !important;
  font-size:clamp(1.5rem,2.3vw,2.1rem) !important; line-height:1.14 !important;
  letter-spacing:-.01em; text-wrap:balance; }
.heading-style-h1.pilarys-h1{ font-size:clamp(2.1rem,3.6vw,3.2rem) !important; }
.span-header{ background:var(--gold-underline) !important; color:var(--pilarys-navy) !important; }
.span-h2{ background:var(--gold-underline) !important; color:var(--pilarys-navy) !important; }
/* subtítulos/legendas mantêm cor de leitura */
.text-size-medium.is-brown, .text-weight-medium.is-brown{ color:#4a5568 !important; }

/* ---- BADGES / PÍLULAS: dourado gradiente ---- */
.status-produto{ background-image:var(--gold-grad) !important; background-color:transparent !important; }
.status-produto .text-size-small{ color:#0a2647 !important; }
.pilarys-loc .ploc-badge{ background-image:none !important; background-color:transparent !important; color:#e0c479 !important; }
.text-weight-bold.is-embreve{ background:var(--pilarys-navy) !important; color:#f4d67e !important; }
.text-weight-bold.is-embreve::before{ background:#f4d67e !important; }
.progress-bar-yellow{ background-image:var(--gold-grad) !important; }

/* ---- NAVBAR: navy + logo branco (introduz o azul no topo) ---- */
.navbar_component{ background-color:var(--pilarys-navy) !important; }
.nav-link a, .navbar_component .nav-link a{ color:#fff !important; }
.nav-link a:hover{ color:var(--pilarys-amber) !important; }

/* ---- SEÇÕES ESCURAS -> NAVY (lazer, localização) ---- */
.section-lazer{ background:var(--pilarys-navy) !important; }
.lazer-card{ background:var(--pilarys-navy-2) !important; border-color:rgba(255,255,255,.08) !important; }
.lazer-card:hover{ background:#17457a !important; }
.lazer-card .text-weight-semibold{ color:#fff !important; }
.pilarys-loc{ background:var(--pilarys-navy) !important; }
.pilarys-loc .ploc-pin{ background:#f4d67e !important; color:#0a2647 !important; }
.pilarys-loc .ploc-btn--emp{ background-image:var(--gold-grad) !important; background-color:transparent !important; color:#0a2647 !important; border:none !important; }
.pilarys-loc .ploc-item .ploc-ic{ background-image:var(--gold-grad) !important; background-color:transparent !important; color:#0a2647 !important; }

/* ---- FOOTER: navy + textos claros + logos em chip branco ---- */
.footer{ background-color:var(--pilarys-navy) !important; }
.footer, .footer div, .footer p, .footer a,
.footer .text-weight-semibold-footer, .footer .text-align-center{ color:#dfe6f0 !important; }
.footer a:hover{ color:var(--pilarys-amber) !important; }
.footer-logo-wrapper{ border-right-color:rgba(255,255,255,.18) !important; }
.footer-content-wrapper{ border-top-color:rgba(255,255,255,.18) !important; }
.footer .social-icon svg, .footer .footer-social-block svg, .footer a svg{ fill:#dfe6f0 !important; }

/* barra "voltar ao topo" flutuante em dourado */
.progress-wrap:hover{ background-color:#d9b24e !important; }
.progress-wrap::after{ color:#d9b24e !important; }
.progress-wrap svg.progress-circle path{ stroke:#d9b24e !important; }

/* =====================================================================
   V3 — HERO FULL-BLEED + POLIMENTO GERAL
   ===================================================================== */
/* Navbar transparente sobreposto ao hero */
.navbar_component{ position:absolute !important; top:0; left:0; right:0; z-index:20;
  background-color:transparent !important; box-shadow:none !important; }
.navbar_component::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(8,26,50,.55), rgba(8,26,50,0)); }
.navbar_component .nav-link a{ color:#fff !important; text-shadow:0 1px 8px rgba(0,0,0,.25); }
.navbar_component .nav-link a:hover{ color:#f4d67e !important; }

/* HERO */
.pil-hero{ position:relative; min-height:100svh; min-height:100vh; display:flex; align-items:flex-end;
  padding:0 !important; overflow:hidden; }
/* Seção de lazer é navy -> título e subtítulo claros */
.section-lazer .heading, .section-lazer .heading.text-color-brown{ color:#fff !important; }
.section-lazer > p, .section-lazer p.is-brown, .section-lazer p.text-size-medium{ color:rgba(255,255,255,.82) !important; }
.section-lazer .tittle-content-wrapper > img{ filter:brightness(0) invert(1) sepia(1) saturate(4) hue-rotate(5deg); opacity:.85; }

/* =====================================================================
   AMOSTRA — EDITORIAL DE LUXO (aplicada em HERO + SOBRE p/ aprovação)
   ===================================================================== */
/* Fonte editorial NEUTRA (Inter) para títulos/kickers/corpo da amostra */
.pil-hero__badge, .pil-hero__title, .pil-hero__sub, .pil-hero__meta,
.section-about .heading, .section-about .heading::before,
.section-about p.is-brown, .section-about p.text-size-medium{
  font-family:'Inter', -apple-system, 'Segoe UI', sans-serif !important; }

/* HERO editorial (neutro) */
.pil-hero__scrim{ background:linear-gradient(180deg, rgba(8,26,50,.34) 0%, rgba(8,26,50,.04) 30%, rgba(8,26,50,.42) 64%, rgba(6,20,40,.92) 100%) !important; }
.pil-hero__inner{ padding-bottom:clamp(64px,12vh,132px) !important; }
.pil-hero__badge{ background:none !important; background-image:none !important; color:#e6d09a !important;
  padding:0 !important; border-radius:0 !important;
  font-weight:600 !important; font-size:.7rem !important; letter-spacing:3.4px !important; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:14px; }
.pil-hero__badge::before{ content:""; width:38px; height:1px; background:#c6a24c; display:inline-block; }
.pil-hero__title{ font-weight:700 !important;
  font-size:clamp(2.7rem,6.4vw,5.4rem) !important; line-height:1.02 !important; letter-spacing:-.03em !important;
  margin:22px 0 18px !important; text-shadow:0 2px 40px rgba(0,0,0,.38); }
.pil-hero__title span{ color:#e2c885 !important; font-style:normal !important; font-weight:700 !important; }
.pil-hero__sub{ font-weight:300 !important;
  font-size:clamp(1.02rem,1.35vw,1.28rem) !important; line-height:1.6 !important;
  color:rgba(255,255,255,.88) !important; max-width:540px; letter-spacing:.005em; }
.pil-hero__meta{ font-weight:400 !important; letter-spacing:.02em; opacity:.9; }

/* SOBRE editorial (neutro) */
.section-about{ padding-top:clamp(64px,8vw,120px) !important; padding-bottom:clamp(64px,8vw,120px) !important; }
.section-about .tittle-container ._32px-icon, .section-about .tittle-content-wrapper > img, .section-about .tittle-container img{ display:none !important; }
.section-about .heading{ font-weight:700 !important;
  font-size:clamp(2rem,3.7vw,3.2rem) !important; line-height:1.08 !important; color:#0a2647 !important;
  letter-spacing:-.025em !important; max-width:20ch !important; position:relative; }
.section-about .heading .span-h2{ font-style:normal !important; font-weight:700 !important;
  color:#b8912e !important; -webkit-text-fill-color:#b8912e !important; background:none !important; }
.section-about .heading::before{ content:"O EMPREENDIMENTO"; display:block;
  font-weight:600 !important; font-size:.7rem !important; letter-spacing:3.4px !important;
  color:#b8912e; margin-bottom:20px; padding-left:52px; }
.section-about .heading::after{ content:""; position:absolute; top:6px; left:0; width:40px; height:1px; background:#c6a24c; }
.section-about p.is-brown, .section-about p.text-size-medium{ font-weight:300 !important;
  font-size:1.06rem !important; line-height:1.85 !important; color:#4a5260 !important; max-width:56ch !important; margin-top:22px !important; }
.section-about .container-diferencial, .section-about .diferencial-wrapper{ margin-top:26px !important; }
.pil-hero__media{ position:absolute; inset:0; z-index:0; }
.pil-hero__img{ width:100%; height:100%; object-fit:cover; object-position:50% 35%; display:block; }
.pil-hero__scrim{ position:absolute; inset:0; background:
  linear-gradient(180deg, rgba(10,38,71,.42) 0%, rgba(10,38,71,.08) 28%, rgba(10,38,71,.55) 60%, rgba(8,26,50,.95) 100%); }
.pil-hero__inner{ position:relative; z-index:2; width:100%; max-width:1160px; margin:0 auto;
  padding:0 24px clamp(48px,9vh,104px); color:#fff; }
.pil-hero__badge{ display:inline-block; background-image:var(--gold-grad); color:#0a2647;
  font-size:.72rem; font-weight:800; letter-spacing:2px; text-transform:uppercase; padding:8px 16px; border-radius:999px; }
.pil-hero__title{ font-family:'Lato',sans-serif; font-weight:800; color:#fff;
  font-size:clamp(2.6rem,6.2vw,5.1rem); line-height:1.0; letter-spacing:-.02em; margin:18px 0 14px;
  text-shadow:0 2px 34px rgba(0,0,0,.35); }
.pil-hero__title span{ color:#f4d67e; }
.pil-hero__sub{ font-size:clamp(1.02rem,1.5vw,1.26rem); line-height:1.5; max-width:640px;
  color:rgba(255,255,255,.92); margin:0 0 22px; }
.pil-hero__meta{ display:flex; align-items:center; gap:12px 18px; flex-wrap:wrap; margin:0 0 30px;
  font-size:.95rem; color:rgba(255,255,255,.9); }
.pil-hero__meta-item{ display:inline-flex; align-items:center; gap:8px; }
.pil-hero__meta-item iconify-icon{ color:#f4d67e; font-size:20px; }
.pil-hero__meta-sep{ width:1px; height:18px; background:rgba(255,255,255,.3); }
.pil-hero__cta{ display:flex; gap:14px; flex-wrap:wrap; }
.pil-hero__cta .button{ padding:16px 30px !important; font-size:.95rem; }
.pil-hero__scroll{ position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:3;
  color:#fff; font-size:32px; opacity:.85; animation:pil-bounce 1.8s infinite; }
@keyframes pil-bounce{ 0%,100%{ transform:translateX(-50%) translateY(0);} 50%{ transform:translateX(-50%) translateY(8px);} }
@media (max-width:767px){
  .pil-hero__title{ font-size:clamp(2.2rem,9vw,3.2rem); }
  .pil-hero__meta-sep{ display:none; }
  .pil-hero__cta{ flex-direction:column; align-items:stretch; }
  .pil-hero__cta .button{ width:100%; justify-content:center; }
}

/* ---- POLIMENTO: formulários ---- */
.form-block, .modal-form{ border-radius:16px !important; }
.text-field, .w-input, .w-select, .form-block input, .form-block textarea{
  border:1px solid #e3e7ec !important; border-radius:10px !important; padding:12px 14px !important;
  background:#fff !important; transition:border-color .15s, box-shadow .15s; }
.text-field:focus, .w-input:focus, .form-block input:focus{
  border-color:var(--pilarys-amber) !important; box-shadow:0 0 0 3px rgba(201,154,58,.18) !important; outline:none; }

/* ---- POLIMENTO: imagens da galeria (cantos + sombra) ---- */
.galeria-image, .image-galeria, .lightbox-galeria img, .galeria-component img{ border-radius:12px; }

/* ---- POLIMENTO: menu de âncoras abaixo do hero ---- */
.navigation_menu{ background:#fff; box-shadow:0 2px 14px rgba(10,38,71,.06); }
.navigation_menu .nav-item .text-block, .navigation_menu a{ color:var(--pilarys-navy) !important; }
/* Botão "Saiba Mais" no menu de âncoras: some em telas estreitas (falta espaço) */
@media (max-width:767px){
  .navigation_menu .padding-section-small.nav-menu > a.button{ display:none !important; }
}

/* =====================================================================
   V4 — POLIMENTO POR SEÇÃO (diagramação, não só cor)
   ===================================================================== */
/* Ritmo vertical + títulos de seção */
.section-about, .section-obra, .section-galeria, #galeria, .section_video{
  padding-top:clamp(44px,5.5vw,80px) !important; padding-bottom:clamp(44px,5.5vw,80px) !important; }
.tittle-content-wrapper, .tittle-container:not(.is-form){ display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.tittle-content-wrapper > img, .tittle-container:not(.is-form) ._32px-icon{ width:30px; height:30px; }

/* SOBRE — leitura */
.section-about .heading{ max-width:16ch; }
.section-about p.text-size-medium, .section-about p.is-brown{ max-width:56ch; line-height:1.62; }

/* PROGRESSO DA OBRA */
.section-obra .stats-obras-container-large{ border-radius:14px !important; }

/* GALERIA — imagens maiores, arredondadas, zoom no hover */
#galeria a.w-inline-block, #galeria .lightbox-galeria, #galeria .galeria-image-wrapper{ overflow:hidden; border-radius:16px; }
#galeria a.w-inline-block img.galeria_imagem, #galeria img.galeria_imagem{ border-radius:16px !important; transition:transform .55s ease; }
#galeria a.w-inline-block:hover img.galeria_imagem{ transform:scale(1.06); }

/* ÁREAS DE LAZER — bloco arredondado + cards com ícone */
.section-lazer{ border-radius:22px; padding:clamp(34px,4vw,58px) clamp(20px,3vw,46px) !important; }
.lazer-grid{ grid-template-columns:repeat(auto-fill,minmax(200px,1fr)) !important; gap:14px !important; }
.lazer-card{ padding:15px 18px !important; border-radius:13px !important; }
.lazer-card iconify-icon{ color:#e0c479; font-size:22px; flex:0 0 auto; }
.lazer-card .lz-check{ display:none !important; }   /* ✓ some quando há ícone */

/* VÍDEO — moldura */
.section_video .w-embed, .section_video iframe, .section_video .html-embed{ border-radius:16px; overflow:hidden; }

/* CTA FINAL — cartão */
.section_cta .cta-componnent{ border-radius:22px; overflow:hidden; box-shadow:0 22px 55px rgba(10,38,71,.13); }

/* FOOTER — respiro */
.footer{ padding-top:46px !important; }

/* =====================================================================
   V5 — REFINAMENTO ALTO PADRÃO (títulos, botões, form, interações)
   ===================================================================== */
/* TÍTULOS: sem largura travada; destaque em DOURADO (sem sublinhado que fragmenta) */
.heading, .section-about .heading, .section-about p.is-brown, .section-about p.text-size-medium{ max-width:none !important; }
.heading{ font-size:clamp(1.7rem,2.5vw,2.45rem) !important; line-height:1.12 !important;
  letter-spacing:-.015em; text-wrap:balance; font-weight:800 !important; }
.span-header, .span-h2{ background:none !important; padding:0 !important;
  -webkit-text-fill-color:#c6a24c !important; color:#c6a24c !important; }
.section-about p.is-brown, .section-about p.text-size-medium{ color:#5a6472 !important; max-width:54ch !important; line-height:1.65; }

/* BOTÕES SECUNDÁRIOS coerentes (outline navy em fundo claro / branco no hero e navbar) */
.button.is-secondary{ background:#fff !important; background-image:none !important;
  border:1.6px solid var(--pilarys-navy) !important; color:var(--pilarys-navy) !important; box-shadow:none !important; }
.button.is-secondary:hover{ background:var(--pilarys-navy) !important; color:#fff !important; }
.pil-hero .button.is-secondary, .navbar_component .button.is-secondary{
  background:transparent !important; border-color:rgba(255,255,255,.75) !important; color:#fff !important; }
.pil-hero .button.is-secondary:hover, .navbar_component .button.is-secondary:hover{
  background:#fff !important; color:var(--pilarys-navy) !important; }
/* garante dourado em TODOS os CTAs primários (inclui input submit) */
input.button.is-form-submit, .button.is-form-submit{ background-image:var(--gold-grad) !important;
  background-color:transparent !important; color:#0a2647 !important; border:none !important; }

/* FORM: cartão branco limpo, sombra única suave, sem clipe */
.section-about-galeria{ overflow:visible !important; }
.form-block{ background:#fff !important; border:1px solid #edf0f3 !important;
  border-radius:16px !important; box-shadow:0 24px 50px -22px rgba(10,38,71,.32) !important; padding:26px !important; }
.modal-form .form-block, .modal-form{ box-shadow:0 30px 70px -20px rgba(0,0,0,.4) !important; }

/* INTERAÇÕES: reveal no scroll + parallax do hero */
.pil-reveal{ opacity:0; transform:translateY(34px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.pil-reveal.pil-in{ opacity:1; transform:none; }
.pil-hero__img{ will-change:transform; }
@media (prefers-reduced-motion:reduce){ .pil-reveal{ opacity:1 !important; transform:none !important; } .pil-hero__img{ transform:none !important; } }


/* =====================================================================
   V6 — UNIFICAÇÃO DO DOURADO + ALINHAMENTO DE ÍCONES
   Um único sistema de dourado; elimina o amarelo vivo (#FFCB3C).
   Claro (#b8912e) p/ fundo claro · Suave (#e0c479) p/ fundo escuro navy.
   ===================================================================== */
:root{
  --gold:#b8912e; --gold-deep:#9c7a22; --gold-lite:#e0c479;
  --yellow:#b8912e !important; --yellow-green:#b8912e !important;
  --pilarys-amber:#b8912e !important; --pilarys-amber-dk:#9c7a22 !important;
}

/* Botões primários: SEMPRE gradiente dourado + texto navy (consistência total) */
.button:not(.is-secondary):not(.ploc-btn){
  background-image:var(--gold-grad) !important; background-color:transparent !important;
  color:#0a2647 !important; border:none !important; }
.button:not(.is-secondary):not(.ploc-btn):hover{ filter:brightness(1.06); }
.button:not(.is-secondary) .text-btn, .button:not(.is-secondary) div{ color:#0a2647 !important; }

/* Ícones de título de seção: alinhados ao topo da 1ª linha (não centro do bloco) */
.tittle-content-wrapper{ align-items:flex-start !important; gap:13px !important; }
.tittle-content-wrapper > img, .tittle-content-wrapper > ._32px-icon,
.tittle-container:not(.is-form) > img, .tittle-container:not(.is-form) ._32px-icon{
  width:26px !important; height:26px !important; margin-top:.16em !important; flex:0 0 auto; }

/* Acentos dourados em UM só tom (spans / kickers / hairlines) */
.span-header, .span-h2, .span-h2 *{ color:var(--gold) !important; -webkit-text-fill-color:var(--gold) !important; background:none !important; }
.section-about .heading::before{ color:var(--gold) !important; }
.section-about .heading::after, .pil-hero__badge::before{ background:var(--gold) !important; }

/* Fundos escuros (navy) → dourado suave para bom contraste */
.pil-hero__badge{ color:var(--gold-lite) !important; }
.pil-hero__title span{ color:var(--gold-lite) !important; -webkit-text-fill-color:var(--gold-lite) !important; }
.pil-hero__meta-item iconify-icon{ color:var(--gold-lite) !important; }
.text-weight-bold.is-embreve{ color:var(--gold-lite) !important; }
.text-weight-bold.is-embreve::before{ background:var(--gold-lite) !important; }
.lazer-card iconify-icon{ color:var(--gold-lite) !important; }
/* ícone SVG do título em seção navy (lazer) precisa clarear */
.section-lazer .tittle-content-wrapper > img{ filter:brightness(0) saturate(100%) invert(83%) sepia(21%) saturate(624%) hue-rotate(3deg) brightness(94%) contrast(88%) !important; }

/* Progresso da obra: acentos no dourado */
.progress-bar-yellow{ background:var(--gold) !important; }
.section-obra .w-tab-menu .w--current, .section-obra .tab-link.w--current{ border-color:var(--gold) !important; box-shadow:inset 0 -3px 0 var(--gold) !important; }

/* =====================================================================
   V7 — FORMULÁRIOS (card ÚNICO) + AJUSTES FINOS
   ===================================================================== */
/* (a) Remove o shape duplo: o wrapper externo (.form-block) vira passe-livre */
.form-block, .form-block.fixed-form,
.modal-form, .modal-form .form-block,
.cta-content-wrapper .form-block, .form-block.is-cta{
  background:transparent !important; background-color:transparent !important;
  border:none !important; box-shadow:none !important; padding:0 !important; border-radius:0 !important; }

/* O ÚNICO card visível = .form-wrapper (branco, borda leve, 1 sombra suave, padding simétrico) */
.form-wrapper.is-form, .form-wrapper.is-form.is-mobile,
.form-wrapper.is-form.is-mobile.form-chatonlinee, .form-wrapper.is-form.is-desktop{
  background:#fff !important; background-color:#fff !important;
  border:1px solid #e9edf2 !important; border-radius:18px !important;
  box-shadow:0 30px 60px -30px rgba(10,38,71,.28) !important;
  padding:clamp(28px,2.6vw,40px) !important; margin:0 !important; }

/* Form do CTA final: painel branco FLUSH (o card é o .cta-componnent, com a imagem ao lado) */
.form-wrapper.is-cta{
  background:#fff !important; background-color:#fff !important;
  border:none !important; box-shadow:none !important; border-radius:0 !important;
  padding:clamp(30px,3vw,54px) !important; }
.cta-content-wrapper{ background:transparent !important; }

/* Conteúdo interno alinhado e com respiro coerente */
.form-wrapper .tittle-container.is-form, .form-wrapper .tittle-container.form{
  text-align:center; margin-bottom:24px; padding:0 !important; }
.form-wrapper .input-container{ display:flex !important; flex-direction:column; gap:16px !important; }
.form-wrapper .form_field-wrapper{ margin:0 !important; }
.form-wrapper .form_checkbox{ margin-top:2px; }
.form-wrapper .button.is-form-submit{ width:100% !important; margin-top:22px !important; }

/* (b) HERO — linha dourada do kicker centralizada com o texto */
.pil-hero__badge{ display:inline-flex !important; align-items:center !important; line-height:1 !important; }
.pil-hero__badge::before{ align-self:center !important; position:relative; top:-1px; }

/* (c) SOBRE — ícone do diferencial alinhado verticalmente ao texto */
.section-about .container-diferencial{ display:flex !important; align-items:center !important; gap:12px !important; }
.section-about .container-diferencial > img{ width:24px !important; height:24px !important; margin:0 !important; flex:0 0 auto; align-self:center; }
.section-about .container-diferencial > p{ margin:0 !important; }

/* =====================================================================
   V8 — EDITORIAL EM TODA A PÁGINA (kicker + tipografia Inter + respiro)
   Replica a linguagem do HERO + SOBRE nas demais seções.
   ===================================================================== */
/* Respiro maior entre seções */
.section-about, .section-obra, .section_gallery21, .section-galeria, #galeria,
.section_video, .section_cta{
  padding-top:clamp(58px,6.5vw,104px) !important; padding-bottom:clamp(58px,6.5vw,104px) !important; }

/* --- Títulos de seção: kicker fino + hairline (esconde o ícone SVG antigo) --- */
.section-obra .tittle-content-wrapper,
.galeria-tab-wrapper .tittle-content-wrapper,
.section-lazer .tittle-content-wrapper,
.section_video .tittle-content-wrapper{
  display:block !important; position:relative; margin-bottom:clamp(24px,3.2vw,42px) !important; }
.section-obra .tittle-content-wrapper > img,
.galeria-tab-wrapper .tittle-content-wrapper > img,
.section-lazer .tittle-content-wrapper > img,
.section_video .tittle-content-wrapper > img,
.section_video .tittle-content-wrapper > ._32px-icon{ display:none !important; }

.section-obra .tittle-content-wrapper::before,
.galeria-tab-wrapper .tittle-content-wrapper::before,
.section-lazer .tittle-content-wrapper::before,
.section_video .tittle-content-wrapper::before{
  display:block; font-family:'Inter',sans-serif; font-weight:600; font-size:.7rem;
  letter-spacing:3.4px; text-transform:uppercase; color:var(--gold);
  padding-left:52px; margin-bottom:16px; }
.section-obra .tittle-content-wrapper::after,
.galeria-tab-wrapper .tittle-content-wrapper::after,
.section-lazer .tittle-content-wrapper::after,
.section_video .tittle-content-wrapper::after{
  content:""; position:absolute; left:0; top:6px; width:40px; height:1px; background:var(--gold); }

.section-obra .tittle-content-wrapper::before{ content:"ACOMPANHAMENTO DA OBRA"; }
.galeria-tab-wrapper .tittle-content-wrapper::before{ content:"GALERIA"; }
.section-lazer .tittle-content-wrapper::before{ content:"LAZER & CONVIVÊNCIA"; color:var(--gold-lite); }
.section_video .tittle-content-wrapper::before{ content:"TOUR VIRTUAL"; }
.section-lazer .tittle-content-wrapper::after{ background:var(--gold-lite); }

/* Headings editoriais (Inter, 700, tracking apertado) */
.section-obra .heading, .galeria-tab-wrapper .heading, .section-lazer .heading,
.section_video .heading, .section_cta .heading{
  font-family:'Inter',sans-serif !important; font-weight:700 !important;
  font-size:clamp(1.8rem,3vw,2.7rem) !important; line-height:1.1 !important;
  letter-spacing:-.02em !important; max-width:22ch; }

/* Subtítulos/descrições em Inter leve */
.section-obra .text-size-medium, .galeria-tab-wrapper .text-size-medium,
.section_video .text-size-medium,
.section-lazer > p, .section-lazer .text-size-medium, .section_cta .tittle-container .text-weight-semibold{
  font-family:'Inter',sans-serif !important; font-weight:300 !important; line-height:1.8 !important; }

/* --- Rodapé: navy, respiro e logos equalizados --- */
.footer .padding-section-medium{ padding-top:clamp(48px,6vw,82px) !important; padding-bottom:34px !important; }
.footer-logo-img{ display:flex !important; align-items:center; justify-content:center; height:60px; }
.footer-logo-img img{ max-height:38px !important; width:auto !important; max-width:150px !important; object-fit:contain !important; }
.footer .text-weight-semibold-footer{ font-family:'Inter',sans-serif !important; font-weight:500 !important;
  letter-spacing:2px; text-transform:uppercase; font-size:.64rem !important; opacity:.72; margin-bottom:10px; }
.footer .text-size-small.brown, .footer .link-footer{ font-family:'Inter',sans-serif !important; }

/* Rodapé — ícones sociais visíveis (branco -> dourado no hover) */
.footer .social-footer{ display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border:1px solid rgba(255,255,255,.22); border-radius:50%; transition:all .18s ease; }
.footer .social-footer:hover{ border-color:var(--gold-lite); background:rgba(224,196,121,.12); }
.footer .social-footer img{ filter:brightness(0) invert(1); opacity:.85; width:18px; height:18px; }
.footer .footer-social-wrapper{ display:flex; gap:12px; }

/* =====================================================================
   V9 — ESPAÇAMENTO MAIS COMPACTO + ÍCONE TELA CHEIA (galeria)
   ===================================================================== */
/* Menos distância entre seções */
.section-about, .section-obra, .section_gallery21, .section-galeria, #galeria,
.section_video, .section_cta{
  padding-top:clamp(40px,4.4vw,72px) !important; padding-bottom:clamp(40px,4.4vw,72px) !important; }

/* Título de seção mais perto do conteúdo */
.section-obra .tittle-content-wrapper, .galeria-tab-wrapper .tittle-content-wrapper,
.section-lazer .tittle-content-wrapper,
.section_video .tittle-content-wrapper{ margin-bottom:clamp(16px,1.8vw,26px) !important; }
.section-obra .tittle-content-wrapper::before, .galeria-tab-wrapper .tittle-content-wrapper::before,
.section-lazer .tittle-content-wrapper::before,
.section_video .tittle-content-wrapper::before{ margin-bottom:12px !important; }

/* Kicker -> título -> texto (Sobre e hero) mais próximos */
.section-about .heading::before{ margin-bottom:14px !important; }
.section-about p.is-brown, .section-about p.text-size-medium{ margin-top:14px !important; }
.pil-hero__title{ margin:16px 0 12px !important; }
.section-lazer > p, .section-lazer .text-size-medium{ margin-top:6px !important; }
.section_video .text-size-medium, .galeria-tab-wrapper .text-size-medium{ margin-top:8px !important; }
.tittle-content-wrapper .text-weight-semibold, .tittle-container .text-weight-semibold{ margin-top:6px !important; }

/* --- Galeria: ícone "tela cheia" não cortado --- */
.image-container .lightbox-torre{ position:relative; overflow:hidden; }
.image-container .icon_fullscren{ position:absolute !important; top:12px; left:12px; margin:0 !important;
  z-index:3; width:38px; height:38px; background-color:rgba(10,38,71,.55) !important; border-radius:10px; }
.image-container .icon_fullscren img{ width:18px !important; height:18px !important; }

/* =====================================================================
   V10 — (removido em V23: cortes de "vãos grandes" do antigo
   .planta-tab-wrapper/.section-planta — a galeria de plantas agora é
   parte da grade unificada #galeria, sem slider/painel próprio)
   ===================================================================== */

/* =====================================================================
   V11 — CORREÇÕES MOBILE (rodapé)
   ===================================================================== */
@media (max-width:767px){
  /* RODAPÉ: empilhar (3 logos lado a lado estouravam a largura) */
  .footer-wrapper{ flex-direction:column !important; align-items:center !important; gap:26px !important; }
  .footer-image-component{ flex-direction:column !important; align-items:center !important; gap:22px !important;
    border-right:none !important; max-width:100% !important; }
  .footer-logo-wrapper, .footer-logo-wrapper.is-last{ border-right:none !important; padding-right:0 !important; align-items:center !important; }
  .footer-social-wrapper{ justify-content:center !important; }
  .footer-content-wrapper{ max-width:100% !important; text-align:center; align-items:center !important; }
}

/* V13 — Centraliza as seções "Tour virtual" e "Localização" */
#video.section_video .padding-section-small:first-child{ display:flex; justify-content:center; }
#video.section_video .tittle-content-wrapper{
  display:flex !important; flex-direction:column !important; align-items:center !important;
  text-align:center !important; }
#video.section_video .tittle-content-wrapper::before{
  position:static !important; order:-1; padding-left:0 !important; margin:0 0 12px !important; }
#video.section_video .tittle-content-wrapper::after{
  position:static !important; order:-2; margin:0 auto 0 !important; }
#video.section_video .heading{ max-width:none !important; }

.pilarys-loc .ploc-head{ text-align:center; display:flex; flex-direction:column; align-items:center; }
.pilarys-loc .ploc-sub{ text-align:center; }
.pilarys-loc .ploc-cta{ justify-content:center; }
.pilarys-loc .ploc-chips-head{ text-align:center; }
.pilarys-loc .ploc-chips{ justify-content:center; }

/* V19 — Correção: no breakpoint em que os chips viram faixa horizontal com
   scroll (.ploc-chips com flex-wrap:nowrap + overflow-x:auto, definido no
   <style> embutido do index.html a partir de max-width:860px), o
   justify-content:center acima (V13) centraliza o conteúdo rolável e deixa
   os primeiros chips numa posição de scroll negativa inatingível (o 1º chip
   fica fora de alcance mesmo com scrollLeft:0). Alinha pelo início só nessa
   faixa; em telas largas os chips quebram linha (flex-wrap:wrap) e o
   centralizado do V13 continua valendo normalmente. */
@media (max-width:860px){
  .pilarys-loc .ploc-chips{ justify-content:flex-start !important; }
}

/* =====================================================================
   V17 — MOBILE: rediagramação em coluna única, sem cortes na tela
   ===================================================================== */
/* Rede de segurança geral: nenhuma mídia pode ser mais larga que o container
   (causa raiz mais comum de "conteúdo cortado" — imagem sem limite de largura) */
img, video, iframe, svg{ max-width:100%; height:auto; }
.pilarys-loc .ploc-map, .pilarys-loc svg{ height:unset; } /* mapa/ícones já têm altura própria */

@media (max-width:767px){
  /* Menu de âncoras: pilha em coluna única (em vez de quebrar linha com itens
     ocultos "fantasmas" que distorciam o space-between) */
  .navigation_menu .padding-section-small.nav-menu{
    flex-direction:column !important; align-items:stretch !important; gap:2px !important; }
  .navigation_menu .menu-link-container{ width:100% !important; }
  .navigation_menu .menu-link-container.nav-anchor-hide-mobile{ display:none !important; }
  .navigation_menu .menu-wrapper{ padding:.9rem .25rem !important; justify-content:flex-start !important; }
}

/* Bloco "O projeto" (diferencial) — ícone + texto não podem esticar além da tela */
@media (max-width:767px){
  .section-about .container-diferencial{ flex-wrap:wrap; }
  .section-about .container-diferencial > p{ min-width:0; }
  .comando-produto, .dorms-wrapper, .adress-wrapper{ max-width:100%; }
  .pil-hero__meta-item{ max-width:100%; }
  .pil-hero__sub, .pil-hero__title{ max-width:100% !important; }
}

/* Progresso da obra: 1 card por linha em telas muito estreitas (min-width:150px
   podia forçar 2 cards a espremer e cortar texto) */
@media (max-width:420px){
  .section-obra .stats-obras-container-small > .stats-obras-container-large{
    flex:1 1 100% !important; min-width:0 !important; }
}

/* Lazer: garante 1 card por linha em telas estreitas (evita texto cortado) */
@media (max-width:420px){
  .lazer-grid{ grid-template-columns:1fr !important; }
}

/* Localização: cabeçalho não pode ultrapassar a largura da tela (o mapa/chips
   já têm o próprio scroll/overflow controlado, por isso não são incluídos aqui) */
@media (max-width:767px){
  .pilarys-loc{ box-sizing:border-box; }
  .pilarys-loc .ploc-inner{ width:100%; box-sizing:border-box; }
  .pilarys-loc .ploc-head, .pilarys-loc .ploc-badge, .pilarys-loc .ploc-title, .pilarys-loc .ploc-sub{
    max-width:100% !important; box-sizing:border-box; }
}

/* Formulários (modais): nunca mais largos que a tela, com respiro nas bordas */
@media (max-width:479px){
  .container-modal-form{ padding:16px !important; box-sizing:border-box; }
  .form-wrapper.is-form.is-mobile{ width:100% !important; max-width:100% !important; }
}

/* =====================================================================
   V18 — Ajustes finos: menu de âncoras no mobile, navbar mobile, ordem
   da galeria no mobile, botões (cantos + ícone de seta)
   ===================================================================== */

/* Menu de âncoras: remove completamente no mobile (era redundante com o
   próprio scroll da página e distorcia o layout) */
@media (max-width:767px){
  .navigation_menu{ display:none !important; }
}

/* Navbar mobile: o menu aberto tem fundo BRANCO (padrão do template) —
   texto branco ficava invisível. Troca para dourado. */
@media (max-width:991px){
  .navbar1_menu .nav-link a, .navbar1_menu.is-page-height-tablet .nav-link a,
  .navbar_component .navbar1_menu .nav-link a{
    color:var(--pilarys-amber) !important; text-shadow:none !important; }
  .navbar1_menu .nav-link a:hover{ color:var(--pilarys-amber-dk) !important; }
  /* Botão "Entre em contato": herdava estilo branco/transparente pensado para o
     navbar transparente sobre o hero — invisível sobre o fundo branco do dropdown. */
  .navbar_component .navbar1_menu-buttons .button.is-secondary{
    color:var(--pilarys-navy) !important; border-color:var(--pilarys-navy) !important; background:transparent !important; }
  .navbar_component .navbar1_menu-buttons .button.is-secondary:hover{
    background:var(--pilarys-navy) !important; color:#fff !important; }
}

/* Botões dourados (Saiba Mais / Quero saber mais / etc.): garante cantos
   arredondados e ícone de seta num tamanho consistente e visível */
.button{ border-radius:.6rem !important; overflow:hidden; }
.button.is-icon img{ width:20px !important; height:20px !important; flex:0 0 20px !important; }

/* =====================================================================
   V20 — SOBRE: kicker "O EMPREENDIMENTO" alinhado à esquerda (mobile/tablet)
   ===================================================================== */
/* O template base centraliza .heading.is-outline em telas ≤991px
   (cambur-vila-parque-butanta.webflow.css); como esse é o único heading da
   página com essa classe, isso só afetava o About — título e o kicker
   "O EMPREENDIMENTO" (::before) ficavam centralizados, diferente do padrão
   à esquerda usado em Obra/Galeria/Planta. Reforça a esquerda até 991px. */
@media (max-width:991px){
  .section-about .heading{ text-align:left !important; }
}

/* =====================================================================
   V21 — HERO: badge (kicker) com linha na mesma cor do texto
   ===================================================================== */
/* O texto do .pil-hero__badge usa var(--gold-lite) (dourado claro, mais
   legível sobre o scrim navy do hero). A linha (::before) ainda herdava
   var(--gold) (dourado mais escuro) da regra compartilhada com
   .section-about .heading::after (ver V6, acima) — cores diferentes entre
   texto e linha. Sobrescreve só a linha do badge do hero para o MESMO tom
   do texto; não altera a regra compartilhada (o sublinhado do About
   continua em var(--gold), sem mudança). */
.pil-hero__badge::before{ background:var(--gold-lite) !important; }

/* =====================================================================
   V22 — LAYOUT: coluna única (remove 2 colunas about+form)
   A galeria/plantas deixou de morar num painel lateral fixo (.form-container
   > #divFixa) e agora é filha direta de .sections-container, entre #About e
   #obra (ver index.html). Isso torna o layout de 2 colunas do template base
   obsoleto: .padding-section-small.is-form-container vira bloco de coluna
   única em TODAS as larguras, e .sections-container (antes limitada a
   41rem para caber ao lado do painel) passa a ocupar 100% da largura.
   ===================================================================== */
.padding-section-small.is-form-container{
  display:block !important;
}
.sections-container{
  max-width:100% !important;
  width:100%;
  gap:clamp(48px,6vw,72px);
}

/* =====================================================================
   V23 — GALERIA UNIFICADA: 4 cards-capa, cada um abrindo o lightbox de
   uma categoria (Fachadas / Áreas comuns / Apartamentos / Plantas).
   Cada capa é a 1ª imagem do próprio lightbox que ela abre (pasta
   images/fachadas, images/areas comuns, images/apartamentos ou
   images/plantas), e o clique abre o lightbox com TODAS as imagens
   daquela pasta.
   ===================================================================== */

/* Título: uma palavra em itálico dourado (destaque editorial, sem span) */
.galeria-tab-wrapper .heading em{
  font-style:italic !important; font-weight:700 !important;
  color:var(--gold) !important; -webkit-text-fill-color:var(--gold) !important;
}

/* Grade horizontal de cards (substitui o painel estreito de 2 colunas) */
.pil-gallery-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px; width:100%;
}
@media (max-width:991px){
  .pil-gallery-grid{ grid-template-columns:repeat(2,1fr); gap:16px; }
}
@media (max-width:767px){
  .pil-gallery-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
}
@media (max-width:479px){
  .pil-gallery-grid{ grid-template-columns:1fr; }
}

/* Card: neutraliza as larguras/alturas fixas herdadas do template base
   (.image-container: min-width 280px/max-width 350px; .lightbox-torre:
   min-width 280px/max-width 600px/height 200px) que foram pensadas para
   a antiga faixa estreita de 2 imagens visíveis, não para uma grade. */
.pil-gallery-grid .pil-gallery-card{
  min-width:0; max-width:none; width:100%; height:auto; flex:none; display:block; position:relative;
}
.pil-gallery-grid .pil-gallery-card .lightbox-torre{
  min-width:0; max-width:none; width:100%; height:auto; max-height:none;
  aspect-ratio:3/4; border-radius:14px; display:block; position:relative; overflow:hidden;
  box-shadow:0 10px 26px rgba(10,38,71,.16);
  transition:transform .25s ease, box-shadow .25s ease;
}
.pil-gallery-grid .pil-gallery-card .lightbox-torre:hover{
  transform:translateY(-4px); box-shadow:0 16px 34px rgba(10,38,71,.22);
}
.pil-gallery-grid .pil-gallery-card .galeria_imagem,
.pil-gallery-grid .pil-gallery-card .galeria_imagem.shadow-two{
  position:absolute; inset:0; width:100%; height:100%;
  min-height:auto; max-height:none; max-width:none;
  object-fit:cover; border-radius:14px;
}

/* Legenda: faixa inferior com gradiente navy (substitui o texto cinza
   abaixo da imagem do layout antigo) */
.pil-gallery-card__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none; border-radius:14px;
  background:linear-gradient(180deg, transparent 42%, rgba(10,38,71,.85) 100%);
}
.pil-gallery-card__caption{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:14px 16px;
  font-family:'Inter',sans-serif; font-weight:700; font-size:.92rem; line-height:1.3;
  color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.35);
}

/* Ícone "tela cheia" (.image-container .icon_fullscren, ver V9) já cobre
   posição/tamanho — só garante que fique acima da legenda dos cards */
.pil-gallery-card .icon_fullscren{ z-index:3; }

/* =====================================================================
   V24 — HERO: badge (kicker) com contraste correto sobre a foto
   ===================================================================== */
/* O texto do .pil-hero__badge estava em var(--gold-lite) (dourado claro,
   ver V6/V21), pensado para contraste sobre o scrim navy do hero. Porém
   o badge cai sobre uma área clara/iluminada da foto, não sobre o scrim
   escuro — dourado claro sobre fundo claro fica quase ilegível (confirmado
   em screenshot). Sobrescreve só a cor do texto para um azul-marinho
   escuro (mesmo tom de --navy usado no gradiente dourado, ver V2), que
   garante contraste tanto sobre a foto clara quanto sobre o scrim.
   Não remove/altera as regras anteriores do badge (::before, display,
   etc.) — apenas a propriedade color, por ser a última em ordem no
   arquivo, vence a cascata. */
.pil-hero__badge{ color:#0A2647 !important; }

/* =====================================================================
   V25 — SOBRE (#About): botões do header-cta iguais aos do video-cta;
   parágrafo longo centralizado; correção do desalinhamento vertical do
   ícone do diferencial
   ===================================================================== */
/* (a) Os botões de #About/.header-cta usavam a classe "is-header" (HTML
   já ajustado para removê-la das duas <a> deste bloco), que no template
   base aplica flex:1/justify-content:center/max-width:none e, combinada
   com .header-cta{justify-content:space-between}, deixa os botões
   gigantes/esticados de ponta a ponta. .video-cta (seção #video) tem os
   MESMOS botões sem "is-header" e renderiza compacto/centralizado — aqui
   replicamos o layout do container para igualar o resultado visual.
   Escopado só a .section-about para não afetar o outro .header-cta
   (o .is-hiden dentro de #galeria, usado só no mobile). */
.section-about .header-cta{ justify-content:center !important; gap:1rem !important; }

/* (b) Centraliza só o parágrafo longo, filho direto de #About/.section-
   about (texto "Com toda a excelência da Cambur...") — o seletor de
   filho direto (>) garante que NÃO afeta o outro <p class="text-size-
   medium is-brown"> aninhado dentro de .container-diferencial (o texto
   curto "Lazer completo e mobilidade a 200m do metrô"). O max-width:54ch
   já existente (ver V5, linha ~436) não é alterado — continua
   controlando as quebras de linha; aqui só adicionamos centralização
   horizontal do bloco de texto dentro da seção. */
.section-about > p.is-brown{ text-align:center !important; margin-left:auto !important; margin-right:auto !important; }

/* (c) O <p> aninhado em .container-diferencial estava computando
   margin-top:14px/margin-bottom:0 (cascata da regra V8, linha ~634:
   ".section-about p.is-brown{ margin-top:14px !important; }", que tem a
   mesma especificidade da regra V6 "margin:0" da linha ~546 e, por vir
   depois no arquivo, vencia). Isso deixava a caixa do parágrafo com
   margem assimétrica: como .container-diferencial é
   display:flex;align-items:center, o flexbox centraliza a *margin-box*
   de cada filho — margem assimétrica desloca o texto visível para baixo
   em relação ao ícone de 24x24px (que não tem essa margem). Repetimos a
   regra margin:0 aqui, agora por último no arquivo, para que ela volte a
   vencer a cascata e o texto fique realmente centrado com o ícone. */
.section-about .container-diferencial > p{ margin:0 !important; }

/* =====================================================================
   V26 — QA 2026-08-21: alinhamentos, tamanhos e um botão sem função
   ===================================================================== */

/* (1) HERO: o traço do kicker "LANÇAMENTO · JD. GUEDALA" (::before)
   ainda usava o dourado claro (var(--gold-lite), ver V21) de quando o
   TEXTO do badge também era dourado claro. A V24 mudou só a COR DO
   TEXTO para navy (#0A2647) por contraste sobre a foto clara do hero,
   sem tocar no traço — ficaram dessincronizados. Iguala o traço ao
   mesmo navy do texto. */
.pil-hero__badge::before{ background:#0A2647 !important; }

/* (2a) SOBRE: "Jd. Guedala" (.span-h2) tinha font-size fixo em rem
   herdado do template base (3.125rem no desktop; 3.5rem/3.4rem/2.5rem
   nos breakpoints ≤991/≤767/≤479 — ver cambur-vila-parque-butanta.
   webflow.css), independente do clamp() do .heading pai — no caso do
   About, o clamp(2rem,3.7vw,3.2rem) da regra ".section-about .heading"
   (mais específica, ~linha 328); nas demais seções (ex. Lazer), o
   clamp(1.7rem,2.5vw,2.45rem) da regra genérica ".heading" (V5). No
   desktop a diferença já existia mas passava despercebida; no mobile,
   onde o heading encolhe bem mais que o span (que não é clamp()), o
   texto do span ficava nitidamente maior que o resto da frase. inherit
   faz o span sempre acompanhar o tamanho calculado do heading pai que
   estiver valendo, em qualquer largura de tela ou seção. */
.span-h2{ font-size:inherit !important; }

/* (2b) SOBRE: título "Arquitetura moderna no / coração do Jd. Guedala"
   (com a quebra de linha após "no", ver HTML) centralizado — junto com
   o kicker "O EMPREENDIMENTO" (::before) e o traço (::after) — em
   QUALQUER largura de tela (pedido explícito por captura de tela no
   tablet/desktop, onde a V20 abaixo ainda deixava à esquerda). Sem
   media query, então esta regra passa a valer sempre e substitui, na
   prática, a V20 (que fica só como registro histórico do motivo
   original de ter sido deixado à esquerda).

   Primeira tentativa de centralizar usava `::after{ left:50%;
   transform:translateX(-50%) }` mantendo `position:absolute` — como o
   traço ficava fixo em `top:6px` (calibrado para a época em que texto
   e traço eram lado a lado, não empilhados), ao centralizar os dois na
   MESMA posição horizontal o traço passou a cruzar por cima do texto
   do kicker (reportado por captura de tela — traço "cobrindo" a
   palavra "O EMPREENDIMENTO"). Segunda tentativa empilhou traço →
   kicker → título como itens de um flex column (::after em cima,
   ::before embaixo) — mas o pedido era o traço e "O EMPREENDIMENTO" na
   MESMA linha (lado a lado), igual ao ajuste feito para o kicker
   "TOUR VIRTUAL" do #video (ver item (8) abaixo): o traço é desenhado
   como `background` do próprio ::before (que já tem o texto via
   `content:"O EMPREENDIMENTO"`), não mais como um ::after separado —
   assim os dois sempre andam juntos, viram um bloco só (inline-block)
   e são centralizados como uma unidade única pelo `align-items:center`
   do heading. */
.section-about .heading{
  display:flex !important; flex-direction:column !important; align-items:center !important;
  text-align:center !important;
}
.section-about .heading::after{ content:none !important; }
.section-about .heading::before{
  order:-1; display:inline-block !important; position:static !important; text-align:left !important;
  padding-left:50px !important; margin:0 0 16px !important;
  background-image:linear-gradient(var(--gold), var(--gold));
  background-repeat:no-repeat; background-size:38px 1px; background-position:left center;
}

/* (3) SOBRE: parágrafo principal com linhas mais longas — de ~54ch
   (7 linhas no desktop, conforme relatado) para ~95ch (estimativa por
   contagem de caracteres do texto atual, ~415 caracteres ÷ 4 linhas ≈
   100 caracteres/linha; ch não é exato em fontes proporcionais, então
   vale conferir visualmente e recalibrar este valor se necessário). */
.section-about p.is-brown, .section-about p.text-size-medium{ max-width:95ch !important; }

/* (4) SOBRE: ícone + "Lazer completo e mobilidade a 200m do metrô"
   (.container-diferencial) só tinha justify-content:center vindo do
   template base dentro de @media (max-width:991px) — no desktop
   (>991px) nada centralizava a linha, que ficava colada à esquerda. */
.section-about .container-diferencial{ justify-content:center !important; }

/* (5) LAZER / OBRA: o título+kicker (.tittle-content-wrapper) deve
   ficar sempre alinhado à esquerda. Causa raiz: o template base tem
   uma regra genérica ".tittle-content-wrapper{ text-align:center }"
   dentro de @media (max-width:479px) que a V8 nunca neutralizava (a V8
   só troca display:block, sem mexer em text-align) — nesse breakpoint,
   a palavra do kicker (::before, ex.: "LAZER & CONVIVÊNCIA") herdava o
   center e ficava centralizada, enquanto o traço (::after,
   position:absolute; left:0) continuava fixo à esquerda, um
   desalinhamento visível entre os dois. #video/#localizacao ficam de
   fora de propósito — já são centralizados pela V13. A Galeria também
   estava nesse grupo originalmente, mas passou a ser centralizada por
   pedido explícito — ver bloco (10) mais abaixo, que a trata à parte. */
.section-lazer .tittle-content-wrapper,
.section-obra .tittle-content-wrapper{
  text-align:left !important;
}

/* (6) GALERIA: no mobile bem estreito (≤479px) o grid de cards (V23)
   caía para 1 coluna só, deixando cada card quase do tamanho da tela
   inteira. Volta para 2 colunas (mesma contagem do breakpoint ≤767px),
   com legenda e ícone de tela cheia (V9, 38px fixo) proporcionalmente
   menores para o card ~155-190px resultante. */
@media (max-width:479px){
  .pil-gallery-grid{ grid-template-columns:repeat(2,1fr) !important; gap:10px !important; }
  .pil-gallery-card__caption{ padding:10px 12px; font-size:.8rem; }
  .pil-gallery-card .icon_fullscren{ width:28px !important; height:28px !important; }
  .pil-gallery-card .icon_fullscren img{ width:14px !important; height:14px !important; }
}

/* (7) GALERIA: os botões de fallback "QUERO SABER MAIS"/"CHAT ONLINE"
   (.header-cta.is-hiden, ver HTML logo após .pil-gallery-grid) só
   aparecem porque o template base os exibe via
   ".header-cta.is-hiden{ display:flex }" dentro de
   @media (max-width:991px) — como é um "max-width", vale para toda a
   faixa ≤991px (tablet E mobile), sem respiro nenhum em relação à
   grade da galeria logo acima. Adiciona a margem que faltava. (Esses
   dois botões também estavam sem as classes index_form1/index_form2
   que o JS usa para abrir os modais de contato — corrigido no HTML;
   sem elas, cliques neles não faziam nada.) */
@media (max-width:991px){
  #galeria .header-cta.is-hiden{ margin-top:24px !important; }
}

/* (8) VÍDEO: o kicker "TOUR VIRTUAL" da V13 empilhava o traço (::after)
   ACIMA do texto (ambos centralizados na vertical, um em cima do
   outro) — mas o padrão usado nas demais seções (Galeria/Lazer/Obra)
   é traço e texto LADO A LADO, na mesma linha. Pedido: replicar esse
   padrão aqui também, mantendo o conjunto centralizado (diferente das
   outras seções, que ficam à esquerda).
   Não dá para simplesmente colocar os dois num `flex-direction:row`
   como as outras seções fazem, porque lá o traço é posicionado com
   `position:absolute;left:0` contando com o texto começar sempre no
   mesmo `left` fixo (alinhado à esquerda) — aqui o texto muda de
   posição ao centralizar (a palavra "TOUR VIRTUAL" não começa num x
   fixo), então um traço em posição absoluta fixa se descolaria dele.
   Solução: desenhar o traço como parte do PRÓPRIO ::before (que já
   contém o texto do kicker via `content:"TOUR VIRTUAL"`), usando
   `background` em vez de um ::after separado — como o traço passa a
   ser um pedaço do mesmo elemento que tem o texto, os dois sempre se
   movem juntos, e o bloco inteiro (traço+texto) é centralizado como
   uma unidade só pelo `align-items:center` do wrapper (V13). O ::after
   (que desenhava o traço separado) é desligado só nesta seção. */
#video.section_video .tittle-content-wrapper::after{ content:none !important; }
#video.section_video .tittle-content-wrapper::before{
  display:inline-block !important; position:static !important; order:-1;
  padding-left:50px !important; margin:0 0 16px !important;
  background-image:linear-gradient(var(--gold), var(--gold));
  background-repeat:no-repeat; background-size:38px 1px; background-position:left center;
}

/* (9) MENU DE ÂNCORAS ("Galeria / Lazer e conveniência / Vídeo /
   Localização / Status das obras" + botão "Saiba Mais"): a V18 já
   escondia esse menu no mobile (≤767px) porque ele virava coluna única
   e ficava redundante com o próprio scroll da página. Só que a linha
   de âncoras (`.padding-section-small.nav-menu`, flex + flex-wrap:wrap
   inline no HTML) quebra para 2 linhas BEM ANTES do breakpoint mobile
   — o texto mais longo ("Lazer e conveniência", "Status das obras")
   somado a 5 ícones + gaps + o botão "Saiba Mais" precisa de ~1080px
   de largura só de conteúdo; abaixo disso (ainda em telas de tablet e
   até small-desktop) ele quebra em duas linhas, com o botão "flutuando"
   sozinho embaixo — feio e sem estar coberto pela regra da V18.
   Pedido: esconder o menu inteiro a partir do momento em que ele
   quebraria, do mesmo jeito que já é escondido no mobile. Como não há
   como medir a quebra real sem abrir num navegador (indisponível neste
   ambiente), o valor abaixo (1150px) é uma ESTIMATIVA calculada a
   partir da largura de cada item (ícone 24px + gap 8px + texto + padding
   32px do template) + gaps de 16px entre eles + o botão — ajuste este
   número se, ao testar, o menu ainda quebrar em 2 linhas um pouco acima
   de 1150px, ou se sumir cedo demais enquanto ainda cabia numa linha só.
   ≤767px já fica coberto (V18 continua valendo, redundante de propósito). */
@media (max-width:1150px){
  .navigation_menu{ display:none !important; }
}

/* (10) GALERIA: por pedido explícito, o kicker "GALERIA" passa a ser
   centralizado (revertendo o alinhamento à esquerda do item (5) só
   para esta seção), com o mesmo tratamento já usado no About (item 2b)
   e no #video (item 8): o traço vira `background` do próprio ::before
   (que já tem o texto via `content:"GALERIA"`) em vez de um ::after
   separado, para o traço e a palavra ficarem sempre na mesma linha e
   se moverem juntos como uma unidade centralizada — sem o risco de um
   cobrir o outro que apareceu nas primeiras tentativas com ::after em
   posição absoluta/empilhada. Lazer e Obra continuam à esquerda (item 5,
   acima) — não foram mencionados neste pedido. */
.galeria-tab-wrapper .tittle-content-wrapper{
  display:flex !important; flex-direction:column !important; align-items:center !important;
  text-align:center !important;
}
.galeria-tab-wrapper .tittle-content-wrapper::after{ content:none !important; }
.galeria-tab-wrapper .tittle-content-wrapper::before{
  order:-1; display:inline-block !important; position:static !important; text-align:left !important;
  padding-left:50px !important; margin:0 0 16px !important;
  background-image:linear-gradient(var(--gold), var(--gold));
  background-repeat:no-repeat; background-size:38px 1px; background-position:left center;
}
.galeria-tab-wrapper .heading{ text-align:center !important; }
/* Texto pequeno abaixo do título ("Clique em cada card para
   explorar...") continua centralizado, como já era. */
.galeria-tab-wrapper > p.text-size-medium.is-brown{ text-align:center !important; }

/* (11) RITMO VERTICAL: padroniza os espaçamentos internos do bloco de
   título (traço+kicker → título → subtítulo → próximo conteúdo) do
   About e da Galeria pelo MESMO ritmo já usado em Localização
   (`.ploc-title{margin:16px 0 6px}` = 16px kicker→título e 6px
   título→subtítulo; `.ploc-sub{margin:0 0 18px}` = 18px subtítulo→CTA).
   O traço→kicker já tinha 16px nas duas seções (itens 2b/10, acima) —
   só faltava título→subtítulo (14px no About / 8px na Galeria, agora
   6px nas duas) e subtítulo→próximo bloco (26px no About / sem margem
   própria na Galeria, agora 18px nas duas, batendo com o ploc-sub). O
   #video não tem parágrafo de subtítulo, então não há o que padronizar
   além do traço→kicker (já feito no item 8). */
.section-about p.is-brown{ margin-top:6px !important; }
.section-about .container-diferencial{ margin-top:18px !important; }
.galeria-tab-wrapper > p.text-size-medium.is-brown{ margin-top:6px !important; margin-bottom:18px !important; }

/* (12) RITMO ENTRE SEÇÕES: About/Galeria/Obra/Vídeo/Localização usam
   todos o mesmo respiro vertical externo — `padding-top`/`padding-
   bottom: clamp(40px,4.4vw,72px)` (V9) ou equivalente (`.pilarys-loc`
   usa exatamente esse clamp também). O Lazer era o único fora do
   padrão: tinha `padding:clamp(34px,4vw,58px)` PRÓPRIO (mantido — é o
   "recheio" do cartão arredondado escuro, papel diferente do padding
   das outras seções) *e além disso* um `margin:40px 0` FIXO inline no
   HTML, que não acompanhava o clamp responsivo das demais — o respiro
   ficava ora maior, ora menor que o das seções vizinhas dependendo da
   largura da tela, quebrando o ritmo. Trocado para
   `margin:clamp(40px,4.4vw,72px) 0` (mesma fórmula das outras seções),
   direto no HTML — sem mudar o padding interno do cartão. */

/* (13) OBRA: card "Status total da obra" em 2 colunas no desktop, para
   a barra de progresso não ficar tão comprida. Hoje
   `.stats-obras-container-large` é `flex-direction:column` (label,
   barra e "0%" empilhados, cada um ocupando 100% da largura do card) —
   o mesmo componente também é reusado dentro de
   `.stats-obras-container-small` para os itens menores (Fundação,
   Estrutura etc.), então o seletor usa `.tab-obra > .stats-obras-
   container-large` (filho DIRETO de `.tab-obra`) para acertar só o
   card do topo, sem afetar os itens menores. Vira um grid de 2 colunas
   — coluna 1: label em cima + barra embaixo; coluna 2: "0%",
   centralizado verticalmente ao lado — só a partir de 992px (tablet
   ≤991px e mobile continuam empilhados como já era, sem mudança).

   1ª tentativa usava `grid-template-columns:1fr auto` — a coluna da
   barra (`1fr`) continuava esticando para ocupar quase toda a largura
   do card (~1200px do `.container-large`), descontando só a largura do
   "0%"; a barra mal encolhia, por isso pareceu que "não funcionou".
   Corrigido: coluna 1 com largura MÁXIMA travada (`minmax(0,360px)`,
   em vez de `1fr`) e `justify-content:start` no grid, para o conjunto
   barra+percentual ficar compacto e alinhado à esquerda, sem esticar
   para preencher o card inteiro. */
@media (min-width:992px){
  .tab-obra > .stats-obras-container-large{
    display:grid !important;
    grid-template-columns:minmax(0,360px) auto;
    justify-content:start;
    column-gap:20px;
    row-gap:.5rem;
    align-items:center;
  }
  .tab-obra > .stats-obras-container-large > .text-weight-semibold{ grid-column:1; grid-row:1; }
  .tab-obra > .stats-obras-container-large > .status-wrapper{ grid-column:1; grid-row:2; width:100%; }
  .tab-obra > .stats-obras-container-large > .text-weight-bold.is-brown{
    grid-column:2; grid-row:1 / span 2; align-self:center; white-space:nowrap;
  }
}

/* (14) OBRA: a nota "Obra ainda não iniciada — cronograma em breve"
   (`.pil-obra-nota`) e a data "Última atualização" ainda esticavam
   para a largura toda do card no desktop. Causa: `.tab-obra` é
   `display:flex; flex-direction:column` (template base) sem
   `align-items` definido — o padrão do flexbox é `stretch`, que força
   TODO filho direto (inclusive um `display:inline-flex` como o da
   nota) a ocupar 100% da largura do eixo cruzado (horizontal, já que a
   coluna é vertical). Como a nota tem fundo/borda visíveis, o
   esticamento aparecia como uma faixa inteira; a data (só texto, sem
   fundo) esticava do mesmo jeito mas não dava pra perceber visualmente.
   `align-self:flex-start` nesses dois filhos cancela o stretch só
   neles, sem mexer no `.tab-obra` inteiro — importante porque
   `.stats-obras-container-small` (a grade de cards menores: Fundação,
   Estrutura etc.) PRECISA continuar esticando a largura toda para o
   `flex-wrap` dela funcionar; mudar o `align-items` do `.tab-obra`
   quebraria essa grade. */
@media (min-width:992px){
  .tab-obra > .pil-obra-nota{ align-self:flex-start; }
  .tab-obra > .text-size-small.is-brown{ align-self:flex-start; }
}

/* (15) OBRA: a aba "Status" (única aba existente) também esticava para
   a largura toda — não tem relação com a nota/`.tab-obra`, é o próprio
   componente de abas do template: `.tab-link1{ flex:1; ... }` faz
   qualquer aba crescer para ocupar 100% do menu de abas
   (`.tabs-menu-galeria`), o que faz sentido com várias abas dividindo
   o espaço, mas com uma única aba vira um botão do tamanho do card
   inteiro — e o traço dourado embaixo (`.tab-link1.w--current{border-
   bottom:...}`) acompanha essa largura esticada. Trava a aba do
   tamanho do próprio texto/padding e encosta à esquerda do menu. */
.section-obra .tabs-menu-galeria{ justify-content:flex-start !important; }
.section-obra .tab-link1{ flex:0 0 auto !important; }

/* Correção: o traço dourado embaixo da aba tinha sido movido para o
   CONTÊINER do menu (`.tabs-menu-galeria`), o que fazia o traço ficar
   com a largura toda do menu enquanto a aba (fundo cinza) ficava
   compacta — os dois descasados. Pedido explícito: o traço pertence ao
   `.tab-link1.w--current` (a aba em si), não ao contêiner — assim ele
   acompanha exatamente a largura da aba compacta, igual ao fundo
   cinza. Desfaz a mudança anterior: remove o traço do contêiner e
   deixa o `border-bottom` nativo do `.tab-link1.w--current` (já
   definido no template base) valer, agora do tamanho certo por causa
   do `flex:0 0 auto` logo acima. Também centraliza o texto "Status"
   dentro da aba (o `justify-content:center` do template já existe,
   mas sem espaço sobrando numa caixa do tamanho do próprio conteúdo
   ele não tinha efeito visível — reforça com `text-align:center` no
   texto por clareza/segurança). */
.section-obra .tab-link1{ justify-content:center !important; }
.section-obra .tab-link1 .text-weight-semibold{ text-align:center; width:100%; }

/* (16) SOBRE: título fixo em exatamente 2 linhas ("Arquitetura moderna
   no" / "coração do Jd. Guedala"), pedido explícito. Antes dependia de
   um único `<br>` (garante a 1ª quebra) + `&nbsp;` entre "do" e "Jd.
   Guedala" (só reduz a CHANCE de quebrar ali, não garante — se o texto
   "coração do Jd. Guedala" não coubesse na largura disponível, o
   navegador quebraria antes de "do" em vez de manter tudo junto).
   Agora cada linha é um `<span>` próprio no HTML, e o `display:block`
   abaixo faz cada um SEMPRE ocupar sua própria linha, garantido — sem
   depender de a frase caber ou não numa largura específica. */
.section-about .heading .pil-about-line{ display:block; }

/* (17) OBRA: layout em 2 colunas de 50%/50% no desktop (largura igual
   nas duas — a 1ª versão usava `auto 1fr`, coluna da aba do tamanho do
   próprio texto e a outra pegando o resto, o que ficava "torto") — aba
   "Status" à esquerda, card "Status total da obra" + nota + data à
   direita, e a grade de cards menores (Fundação/Estrutura/Alvenaria...)
   voltando a ocupar a largura TOTAL logo abaixo (mockup enviado pelo
   usuário).
   Problema estrutural: no HTML, `.tabs-menu-galeria` (a aba) e
   `.tabs-content-galeria` (que contém TUDO do lado direito — card,
   nota, data E a grade de cards menores) são IRMÃOS dentro de
   `.tabs.w-tabs`. Um grid simples de 2 colunas nesse `.tabs.w-tabs`
   colocaria a aba numa coluna e o `.tabs-content-galeria` INTEIRO na
   outra — a grade de cards menores ficaria presa dentro da coluna da
   direita (estreita), em vez de esticar embaixo dos dois.
   Solução: `display:contents` nos 3 wrappers aninhados entre
   `.tabs.w-tabs` e o conteúdo real (`.tabs-content-galeria`,
   `.w-tab-pane`, `.tab-obra`) — isso "dissolve" a caixa desses
   wrappers (sem remover nada do HTML/JS, só da renderização) e promove
   os netos (card, nota, data, e os 3 `.stats-obras-container-small`)
   a itens DIRETOS do grid de `.tabs.w-tabs`, cada um podendo ser
   posicionado numa coluna/linha independente: card+nota+data na
   coluna 2 (linhas 1/2/3), e cada grade pequena com `grid-column:1/-1`
   (ocupa as 2 colunas, sempre numa linha nova e vazia, decidido pelo
   posicionamento automático do grid). Como não há troca real de aba
   (só existe "Status"), dissolver esses wrappers não quebra nenhuma
   função — só a estrutura visual, que é estática mesmo.
   `.pil-obra-nota` (que é `inline-flex`) precisa de `justify-self:
   start` — no grid (diferente do flex do ajuste 14, que usava `align-
   self`, eixo errado aqui) é essa propriedade que impede o item de
   esticar para preencher a largura da coluna. */
@media (min-width:992px){
  .section-obra .tabs.w-tabs{
    display:grid !important;
    grid-template-columns:1fr 1fr;
    column-gap:32px;
    row-gap:16px;
    align-items:start;
  }
  .section-obra .tabs-menu-galeria{ grid-column:1; grid-row:1; }
  .section-obra .tabs-content-galeria,
  .section-obra .w-tab-pane,
  .section-obra .tab-obra{
    display:contents;
  }
  /* Reorganização pedida: nota "Obra ainda não iniciada" junto da aba
     na coluna esquerda (embaixo dela); "Status total da obra" + barra
     na direita, com a data embaixo (mesma coluna) — em vez de nota+
     data as duas na direita como na 1ª versão. */
  .section-obra .tab-obra > .pil-obra-nota{ grid-column:1; grid-row:2; }
  .section-obra .tab-obra > .stats-obras-container-large{ grid-column:2; grid-row:1; }
  .section-obra .tab-obra > .text-size-small.is-brown{ grid-column:2; grid-row:2; }
  .section-obra .tab-obra > .pil-obra-nota,
  .section-obra .tab-obra > .text-size-small.is-brown{
    justify-self:start;
  }
  .section-obra .tab-obra > .stats-obras-container-small{
    grid-column:1 / -1;
  }
  /* a data tem `margin-bottom:16px` inline no HTML (pensado para o
     espaçamento do layout empilhado antigo) — sem isso, o `row-gap:
     16px` do grid já soma com ele e dobra o respiro antes da grade de
     cards menores. Zera só aqui, já que o row-gap do grid assume esse
     papel no layout novo. */
  .section-obra .tab-obra > .text-size-small.is-brown{ margin-bottom:0 !important; }
}

/* (18) Remove só o espaço SUPERIOR de `.galeria-tab-wrapper` e
   `.section_video` (a base inferior fica igual). Em nenhuma das duas
   classes esse espaço é `margin` — é `padding-top`: `.galeria-tab-
   wrapper` tem `padding-top:3rem` fixo (template base) e `.section_
   video` tem `padding-top:clamp(40px,4.4vw,72px) !important` (V9,
   compartilhado com About/Galeria/Obra) — zera só o `padding-top`
   dessas duas, sem tocar no `padding-bottom` de nenhuma nem no
   `padding-top` das outras seções que compartilham a regra da V9. */
.galeria-tab-wrapper{ padding-top:0 !important; }
.section_video{ padding-top:0 !important; }

/* (19) Tira o `display:flex` de `.tabs-menu-galeria.tabs-menu-obras`
   (template base: `.tabs-menu-galeria{ display:flex; }`), a pedido.
   Atenção: como a aba `.tab-link1` só ficava compacta (ajuste 15,
   `flex:0 0 auto`) POR SER item flex desse contêiner, sem o pai
   `display:flex` esse `flex:0 0 auto` deixa de valer (propriedades
   flex só têm efeito em itens de um contêiner flex/grid) — e
   `.tab-link1` (que continua `display:flex` nele mesmo) volta a se
   comportar como caixa de bloco comum, ocupando 100% da largura do
   contêiner de novo. Se isso não for o esperado, é só avisar. */
.section-obra .tabs-menu-galeria.tabs-menu-obras{ display:block !important; }

/* (20) Remove só o espaço SUPERIOR de `.section-galeria` (o mesmo
   elemento também tem id="galeria"). De novo não é `margin`, é
   `padding-top:clamp(40px,4.4vw,72px) !important` da V9, compartilhado
   com About/Obra/Vídeo — zera só aqui, mantendo o padding-bottom e sem
   afetar as outras seções da mesma regra. */
.section-galeria{ padding-top:0 !important; }

/* (21) `.section-obra` é um card com borda + fundo cinza claro +
   cantos arredondados (template base: `border:1px solid var(--white-
   smoke-stroke); background-color:var(--gainsboro-section); border-
   radius:1rem; padding:2.5rem`). A V9 sobrescreve só o padding-top/
   padding-bottom desse card (`clamp(40px,4.4vw,72px) !important`,
   regra compartilhada com About/Galeria/Vídeo) — o padding-left/right
   original de 2.5rem (40px) do template base continua valendo, mas
   volta a reforçar os 4 lados explicitamente em 2.5rem para garantir
   um respiro generoso e igual em torno de todo o conteúdo (título,
   abas, cards), a pedido — para a borda/canto arredondado do card
   ficar visível com folga, sem o conteúdo interno encostando nela. */
.section-obra{ padding:2.5rem !important; }

/* Pedido: remover completamente o traço/borda do card (não só deixar
   mais escuro — tirar de vez). Mantém padding, raio e fundo do card
   como estão, só zera a cor da borda do template base
   (`border:1px solid var(--white-smoke-stroke)`). */
.section-obra{ border-color:transparent !important; }