/* Cor da marca — âmbar, o mesmo dos sistemas MMH (dashboards). Trocar aqui muda o site todo. */
:root {
    --brand: #FBBF24;          /* destaque, botões, ícones */
    --brand-rgb: 251, 191, 36; /* para transparências: rgba(var(--brand-rgb), .1) */
    --brand-light: #FCD34D;    /* hover de botões */
    --brand-ink: #1a1a1a;      /* texto/ícone sobre o âmbar */
    --brand-text: #FBBF24;     /* texto em âmbar sobre fundo escuro */
    --brand-strong: #B45309;   /* texto em âmbar sobre fundo branco (contraste) */
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #050505;
    color: #f5f5f7;
    overflow-x: hidden;
}
h1, h2, h3, .font-display {
    font-family: 'Montserrat', sans-serif;
    letter-spacing: -0.02em;
}
.glass {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
/* Menu fixo após rolar: fundo escuro translúcido garante contraste também sobre seções brancas */
#navbar.nav-solid {
    background: rgba(8, 8, 10, 0.92);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}
.hero-gradient {
    background: linear-gradient(to bottom, rgba(5,5,5,0) 0%, rgba(5,5,5,0.8) 70%, rgba(5,5,5,1) 100%);
}
.text-gradient {
    background: linear-gradient(135deg, #fff 0%, #a1a1a1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.experience-card {
    transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);
    cursor: pointer;
}
.experience-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px -12px rgba(0,0,0,0.5), 0 18px 36px -18px rgba(var(--brand-rgb), 0.2);
}
.experience-card:hover .card-bg {
    transform: scale(1.1) rotate(1deg);
}
.experience-card .glow-layer {
    opacity: 0;
    transition: opacity 0.5s ease;
    background: radial-gradient(circle at center, rgba(var(--brand-rgb), 0.15) 0%, transparent 70%);
}
.experience-card:hover .glow-layer {
    opacity: 1;
}

.gold-accent { color: var(--brand-text); }
/* nas seções brancas, título grande em âmbar fica alaranjado: usa quase-preto */
#construtoras .gold-accent, #corporativo .gold-accent { color: #111; }
.btn-premium {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}
.btn-premium:hover {
    box-shadow: 0 0 20px rgba(var(--brand-rgb), 0.3);
    transform: translateY(-2px);
}

.shimmer {
    background: linear-gradient(90deg, #111 0%, #222 50%, #111 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite linear;
}
@keyframes shimmer { to { background-position: -200% 0; } }

#chat-window {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: translateY(20px) scale(0.95);
    opacity: 0;
    pointer-events: none;
}
/* O contêiner do chat ocupa a área da janela mesmo fechada: não deve bloquear cliques no site */
.chat-dock { pointer-events: none; }
.chat-dock > *:not(#chat-window) { pointer-events: auto; }
#chat-window.active {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: all;
}
.message-bubble {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 6px;
}
.message-agent { background: #1a1a1a; color: #e5e5e5; align-self: flex-start; border-bottom-left-radius: 4px; }
.message-user { background: var(--brand); color: var(--brand-ink); align-self: flex-end; border-bottom-right-radius: 4px; }

#back-to-top {
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.project-modal {
    transition: opacity 0.5s ease, visibility 0.5s;
}
.album-grid img {
    transition: transform 0.5s ease;
}
.album-grid img:hover {
    transform: scale(1.02);
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #050505; }
::-webkit-scrollbar-thumb { background: #222; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand); }

.architect-card, .builder-card, .corporate-card {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.architect-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(var(--brand-rgb), 0.3);
    transform: translateY(-5px);
}
.builder-card:hover {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(var(--brand-rgb), 0.5);
    transform: translateY(-5px);
}
.corporate-card:hover {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(var(--brand-rgb), 0.5);
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.05);
}


/* ---------- Modal de captura de lead ---------- */
.lead-card { background: rgba(14,14,16,.92); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.lead-field { position: relative; }
.lead-field input { width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.12); padding: 22px 0 8px; color: #fff; font-size: 16px; font-weight: 300; outline: none; border-radius: 0; transition: border-color .2s; }
.lead-field input:focus { border-bottom-color: var(--brand); }
.lead-field label { position: absolute; left: 0; top: 22px; font-size: 15px; font-weight: 300; color: #71717a; pointer-events: none; transition: all .18s ease; }
.lead-field input:focus + label, .lead-field input:not(:placeholder-shown) + label { top: 2px; font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: rgb(110,150,190); }
/* o navegador pinta campos autopreenchidos de azul/branco: mantemos o visual escuro */
.lead-field input:-webkit-autofill, .lead-field input:-webkit-autofill:focus { -webkit-text-fill-color: #fff; caret-color: #fff; -webkit-box-shadow: 0 0 0 1000px #0e0e10 inset; transition: background-color 99999s ease-in-out 0s; }
.lead-check { appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 16px; height: 16px; border: 1px solid rgba(255,255,255,.25); border-radius: 4px; background: transparent; cursor: pointer; position: relative; }
.lead-check:checked { background: var(--brand); border-color: var(--brand); }
.lead-check:checked::after { content: ""; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px; border: solid var(--brand-ink); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
details summary::-webkit-details-marker { display: none; }

/* ===== Bloco do Instagram (Fase 3) ===== */
.ig-section{background:#050505;color:#fff}
.ig-title{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:300;letter-spacing:.02em}
.ig-sub{margin-top:.75rem;color:#a1a1aa;font-size:.95rem;font-weight:300}
.ig-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}
@media(min-width:768px){.ig-grid{grid-template-columns:repeat(3,1fr);gap:1rem}}
.ig-item{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;border-radius:.75rem;background:#111}
.ig-item img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.ig-item:hover img,.ig-item:focus-visible img{transform:scale(1.06)}
.ig-cap{position:absolute;inset:auto 0 0 0;padding:2.2rem .9rem .8rem;font-size:.75rem;line-height:1.35;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.78));opacity:0;transition:opacity .4s;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ig-item:hover .ig-cap,.ig-item:focus-visible .ig-cap{opacity:1}
@media(hover:none){.ig-cap{display:none}}
.ig-badge{position:absolute;top:.6rem;right:.6rem;width:1.7rem;height:1.7rem;border-radius:999px;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;font-size:.65rem;color:#fff}
.ig-follow{display:inline-block;padding:.9rem 2rem;border:1px solid rgba(255,255,255,.25);border-radius:999px;font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;font-weight:700;color:#fff;transition:all .4s}
.ig-follow:hover{background:#fff;color:#000}

/* ===== Aviso de cookies (Fase 4) ===== */
.cookie-banner{position:fixed;left:1rem;bottom:1rem;z-index:1050;max-width:26rem;padding:1.1rem 1.2rem;border-radius:1rem;background:rgba(14,14,16,.96);border:1px solid rgba(255,255,255,.1);box-shadow:0 20px 50px rgba(0,0,0,.5);color:#d4d4d8;font-size:.8rem;line-height:1.5}
.cookie-banner[hidden]{display:none}
.cookie-banner a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.cookie-actions{display:flex;gap:.6rem;margin-top:.9rem}
.cookie-actions button{flex:1;padding:.65rem 1rem;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:transparent;color:#fff;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;cursor:pointer;transition:all .3s}
.cookie-actions button:hover{background:rgba(255,255,255,.1)}
.cookie-actions .primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.cookie-actions .primary:hover{background:#fff;color:#000}
@media(max-width:520px){.cookie-banner{left:.6rem;right:.6rem;bottom:.6rem;max-width:none}}

/* Classes da cor da marca (no lugar das classes do Tailwind com cor fixa).
   Nas seções de fundo branco o texto usa o tom mais fechado, para manter o contraste. */
.text-brand { color: var(--brand-text); }
#construtoras .text-brand, #corporativo .text-brand { color: var(--brand-strong); }
.hover-text-brand:hover { color: var(--brand-text); }
.bg-brand { background-color: var(--brand); color: var(--brand-ink); }
.bg-brand-soft { background-color: rgba(var(--brand-rgb), 0.12); }
.bg-brand-faint { background-color: rgba(var(--brand-rgb), 0.06); }
.border-brand { border-color: var(--brand); }
.focus-border-brand:focus { border-color: var(--brand); }
.hover-bg-brand:hover { background-color: var(--brand); color: var(--brand-ink); }
.hover-bg-brand-light:hover { background-color: var(--brand-light); }
.shadow-brand-glow { box-shadow: 0 0 10px rgba(var(--brand-rgb), 0.5); }

/* Menu de navegação no celular (aberto pelo ☰) */
.mobile-nav {
    display: flex;
    flex-direction: column;
    margin-top: 1rem;
    padding: 0.5rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.mobile-nav[hidden] { display: none; }
.mobile-nav a {
    padding: 0.9rem 0.25rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #e4e4e7;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.mobile-nav a:hover { color: var(--brand-text); }
.mobile-nav .mobile-nav-cta {
    margin-top: 1rem;
    border: 0;
    border-radius: 999px;
    text-align: center;
    background: var(--brand);
    color: var(--brand-ink);
}
#navbar.menu-aberto { background: rgba(8, 8, 10, 0.97); z-index: 130; }

/* Rodapé: espaço extra no celular para os botões flutuantes não cobrirem os links */
@media (max-width: 767px) {
    .site-footer { padding-bottom: 7rem; }
}

/* Logo oficial (assets/brand): ícone + nome no menu, logo completo no rodapé */
.brand-lockup { display: flex; align-items: center; gap: 0.75rem; }
.brand-lockup-icone { height: 34px; width: auto; }
.brand-lockup-nome { height: 20px; width: auto; }
@media (min-width: 768px) {
    .brand-lockup-icone { height: 42px; }
    .brand-lockup-nome { height: 24px; }
}
.brand-footer-logo { width: 170px; height: auto; }

/* Animação do logo "se escrevendo" (traço branco sobre preto; o preto some sobre o fundo escuro) */
.logo-anim { display: block; width: 260px; max-width: 70%; height: auto; margin: 0 auto 2rem; mix-blend-mode: screen; }

/* =========================================================
   Formulário de contato (seção #contato)
   ========================================================= */
.cf-section { background: #0a0a0a; padding: 7rem 1.5rem; }
.cf-wrap { max-width: 1180px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 4rem; align-items: flex-start; }
.cf-intro { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 1.75rem; }
.cf-eyebrow { font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--brand-text); }
.cf-title { margin: 0; font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: clamp(2.4rem, 4.5vw, 3.4rem); line-height: 1.08; color: #fff; }
.cf-lead { margin: 0; font-size: 17px; line-height: 1.6; font-weight: 300; color: #a1a1aa; max-width: 440px; }
.cf-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.cf-steps li { display: flex; gap: 1rem; align-items: flex-start; }
.cf-steps div { display: flex; flex-direction: column; gap: 4px; }
.cf-steps strong { font-weight: 500; font-size: 15px; color: #f4f4f5; }
.cf-steps div span { font-size: 14px; line-height: 1.5; color: #a1a1aa; }
.cf-step-n { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(var(--brand-rgb), .45); color: var(--brand-text); display: flex; align-items: center; justify-content: center; font: 600 13px 'Montserrat', sans-serif; }
.cf-wa { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 14px; border: 1px solid #27272a; background: #111113; color: #f4f4f5; max-width: 400px; transition: border-color .2s; }
.cf-wa svg { color: var(--brand-text); flex: none; }
.cf-wa span { display: flex; flex-direction: column; gap: 2px; font-size: 15px; font-weight: 500; }
.cf-wa small { font-size: 13px; font-weight: 400; color: #a1a1aa; }
.cf-wa:hover { border-color: rgba(var(--brand-rgb), .6); }

.cf-card { flex: 999 1 560px; min-width: 0; background: #111113; border: 1px solid #222226; border-radius: 24px; padding: 2.5rem; box-shadow: 0 40px 80px -40px rgba(0,0,0,.8); }
.cf-form { display: flex; flex-direction: column; gap: 1.75rem; margin: 0; }
.cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; }
.cf-field { position: relative; display: flex; flex-direction: column; gap: 8px; }
.cf-field > label:not(.cf-drop), .cf-label, .cf-group legend { font-size: 14px; font-weight: 500; color: #e4e4e7; padding: 0; }
.cf-group { position: relative; border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cf-group legend { margin-bottom: 12px; }
.cf-opt { font-weight: 400; color: #a1a1aa; }
.cf-input { width: 100%; box-sizing: border-box; background: #18181b; border: 1px solid #2e2e33; border-radius: 12px; color: #f4f4f5; font: 400 16px 'Inter', system-ui, sans-serif; padding: 14px 16px; min-height: 52px; outline: none; transition: border-color .2s, box-shadow .2s; }
textarea.cf-input { resize: vertical; min-height: 96px; line-height: 1.5; }
.cf-input::placeholder { color: #71717a; }
.cf-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .18); }
.cf-input[aria-invalid="true"] { border-color: #f87171; }
.cf-err { font-size: 13px; color: #f87171; }
.cf-err:empty { display: none; }
.cf-summary { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; background: rgba(248,113,113,.08); border: 1px solid rgba(248,113,113,.35); color: #fecaca; font-size: 14px; line-height: 1.5; }
.cf-summary[hidden] { display: none; }

/* opções: rádio/checkbox nativos escondidos visualmente, rótulo é o botão (teclado e leitores de tela funcionam) */
.cf-radio, .cf-check, .cf-file { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.cf-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; }
.cf-type { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 96px; padding: 14px 10px; border-radius: 14px; border: 1px solid #2e2e33; background: #18181b; color: #d4d4d8; font-size: 14px; font-weight: 500; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.cf-type svg { color: #a1a1aa; transition: color .2s; }
.cf-type:hover { border-color: #52525b; }
.cf-radio:checked + .cf-type { border-color: var(--brand); background: rgba(var(--brand-rgb), .10); color: #fff; }
.cf-radio:checked + .cf-type svg { color: var(--brand); }
.cf-seg { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px; border-radius: 14px; background: #18181b; border: 1px solid #27272a; }
.cf-seg label { flex: 1 1 150px; min-height: 46px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px 14px; border-radius: 10px; font-size: 14px; font-weight: 500; color: #d4d4d8; cursor: pointer; transition: background .2s, color .2s; }
.cf-seg label:hover { color: #fff; }
.cf-radio:checked + label { background: var(--brand); color: var(--brand-ink); }
.cf-group.invalid .cf-type, .cf-group.invalid .cf-seg { border-color: rgba(248,113,113,.6); }
.cf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cf-chips label { min-height: 40px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; border: 1px solid #3f3f46; color: #d4d4d8; font-size: 14px; font-weight: 500; cursor: pointer; transition: all .2s; }
.cf-chips label:hover { border-color: #71717a; }
.cf-check:checked + label { border-color: var(--brand); background: rgba(var(--brand-rgb), .12); color: #FDE68A; }
.cf-check:checked + label::before { content: "✓"; }
.cf-radio:focus-visible + label, .cf-check:focus-visible + label, .cf-file:focus-visible + .cf-drop { outline: 2px solid var(--brand); outline-offset: 2px; }

/* planta do imóvel */
.cf-drop { display: flex; align-items: center; gap: 16px; padding: 18px; border-radius: 14px; border: 1.5px dashed #3f3f46; background: #141416; cursor: pointer; transition: border-color .2s, background .2s; }
.cf-drop:hover, .cf-drop.arrastando { border-color: var(--brand); }
.cf-drop.arrastando { background: rgba(var(--brand-rgb), .08); }
.cf-drop > span:last-child { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cf-drop strong { font-size: 15px; font-weight: 500; color: #f4f4f5; }
.cf-drop small { font-size: 13px; color: #a1a1aa; }
.cf-drop-ico { width: 48px; height: 48px; flex: none; border-radius: 12px; background: rgba(var(--brand-rgb), .10); color: var(--brand); display: flex; align-items: center; justify-content: center; }
.cf-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cf-files:empty { display: none; }
.cf-files li { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 14px; border-radius: 12px; background: #18181b; border: 1px solid #2e2e33; }
.cf-files .nome { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cf-files .nome b { font-size: 14px; font-weight: 400; color: #f4f4f5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-files .nome small { font-size: 12px; color: #a1a1aa; }
.cf-files button { flex: none; width: 40px; height: 40px; border-radius: 10px; border: 0; background: transparent; color: #a1a1aa; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cf-files button:hover { color: #fff; background: #27272a; }
.cf-note { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #a1a1aa; }

.cf-submit { display: flex; flex-direction: column; gap: 14px; }
.cf-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 58px; border: 0; border-radius: 14px; background: var(--brand); color: var(--brand-ink); font: 600 15px 'Inter', sans-serif; letter-spacing: .02em; cursor: pointer; transition: background .2s, transform .2s, opacity .2s; }
.cf-btn:hover { background: var(--brand-light); }
.cf-btn:active { transform: scale(.99); }
.cf-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cf-btn[disabled] { opacity: .7; cursor: wait; }
.cf-privacy { margin: 0; display: flex; gap: 8px; align-items: center; justify-content: center; text-align: center; font-size: 13px; color: #a1a1aa; }
.cf-privacy a { color: var(--brand-text); }
.cf-privacy a:hover { text-decoration: underline; }
.cf-success { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 3rem 0.5rem; outline: none; }
.cf-success[hidden] { display: none; }
.cf-success h3 { margin: 0; font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: 2rem; color: #fff; }
.cf-success p { margin: 0; font-size: 16px; line-height: 1.6; color: #a1a1aa; max-width: 420px; }

@media (max-width: 640px) {
    .cf-section { padding: 5rem 1rem; }
    .cf-wrap { gap: 2.5rem; }
    .cf-card { padding: 1.5rem 1.25rem; border-radius: 20px; }
    .cf-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}