/* =========================================
   VARIÁVEIS E BASE
========================================= */
:root {
  --primary-h:158;
  --primary-s:64%;
  --primary-l:40%;
  --primary: hsl(var(--primary-h) var(--primary-s) var(--primary-l));
  --primary-contrast:#fff;
  --orange:#ff6b35;
  --orange-light:#ff8c5a;
  --bg:#fff;
  --fg:#111;
  --muted:#444;
  --border:#e5e7eb;
  --card:#fff;
  --radius:18px;
  --shadow:0 10px 25px rgba(0,0,0,.08);
  --focus:0 0 0 3px hsla(var(--primary-h),var(--primary-s),var(--primary-l),.35);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.6;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
header { position: sticky; top: 0; background: #fff; border-bottom: 1px solid #eee; z-index: 50; }

/* =========================================
   HEADER / NAV - DESKTOP
========================================= */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  min-width: 300px;
}
.brand img { height: 100px; width: auto; flex-shrink: 0; }
.brand > div { display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.brand .name { font-weight: 700; color: #1c1c1c; font-size: 17px; line-height: 1.2; margin: 0; padding: 0; }
.brand .role { font-size: 14.5px; color: #555; line-height: 1.3; margin: 0; padding: 0; white-space: nowrap; }

.nav nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 12px;
  max-width: 720px;
}
.nav a {
  margin: 0;
  padding: 11px 15px;
  color: #222;
  font-weight: 600;
  white-space: nowrap;
  font-size: 16px;
}

.nav .cta {
  padding: 11px 22px;
  background: var(--primary);
  color: #fff;
  border-radius: 999px;
  box-shadow: var(--shadow);
  margin-left: 10px;
  font-size: 16px;
}
.nav .cta-orange {
  padding: 11px 20px;
  background: var(--orange);
  color: #fff;
  border-radius: 999px;
  box-shadow: var(--shadow);
  font-weight: 700;
  font-size: 16px;
}
.nav .cta-orange:hover { background: var(--orange-light); text-decoration: none; }

/* =========================================
   HERO - DESKTOP
========================================= */
.hero {
  padding: 64px 0 24px;
  background: linear-gradient(180deg, hsl(158 64% 36%), hsl(158 64% 46%));
  color: #fff;
}
.hero .grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 28px;
  align-items: center;
}

/* =========================================
   TIPOGRAFIA
========================================= */
h1 { font-size: clamp(28px, 4vw, 44px); line-height: 1.15; margin: 0 0 10px; }
h2 { font-size: clamp(22px, 3vw, 28px); margin: 24px 0 10px; }
p.lead { font-size: 18px; color: #333; opacity: 1; }

.badge {
  display: inline-block;
  background: #ffffff26;
  border: 1px solid #ffffff40;
  color: #fff;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 14px;
  margin: 6px 0;
}

/* =========================================
   BOTÕES
========================================= */
.cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin: 16px 0;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  font-weight: 700;
  white-space: nowrap;
  transition: transform .06s ease;
  min-width: 140px;
}
.btn:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.btn-primary { background: var(--primary); color: #fff; border-color: transparent; }
.btn-ghost { background: transparent; color: #fff; border-color: #ffffff66; }
.btn-block { width: 100%; }

.bar { display: flex; gap: 12px; margin-top: 14px; }
.bar .btn { flex: 1; justify-content: flex-start; }
.bar .btn span { margin-left: auto; font-weight: 600; }

/* Botão laranja - FORA do header */
.btn-orange-light,
a.btn-orange-light {
  background: var(--orange) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3) !important;
  font-weight: 700 !important;
}
.btn-orange-light:hover,
a.btn-orange-light:hover {
  background: var(--orange-light) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4) !important;
  text-decoration: none !important;
}

/* Botões verdes - MAS excluindo os laranjas */
.card .btn:not(.btn-orange-light),
a.btn[href*="proprietarios"]:not(.btn-orange-light),
a.btn[href*="interessados"]:not(.btn-orange-light),
button:not([type="submit"]):not(.close):not(.segment button):not(.btn-orange-light) {
  background: var(--primary);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 15px rgba(45, 134, 89, 0.3);
  font-weight: 700;
}
.card .btn:not(.btn-orange-light):hover,
a.btn[href*="proprietarios"]:not(.btn-orange-light):hover,
a.btn[href*="interessados"]:not(.btn-orange-light):hover {
  background: hsl(var(--primary-h) var(--primary-s) 35%);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(45, 134, 89, 0.4);
  text-decoration: none;
}

/* Botão dropdown proprietário */
.btn[data-prop-dropdown] {
  font-size: 16px !important;
  font-weight: 700 !important;
  background: var(--orange) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3) !important;
}
.btn[data-prop-dropdown]:hover {
  background: var(--orange-light) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4) !important;
  text-decoration: none !important;
}

.cta-row .btn {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  font-weight: 700;
  transition: all 0.15s ease;
}
.cta-row .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

a[href*="interessados.html#comprar"] {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 15px rgba(45, 134, 89, 0.3) !important;
  font-weight: 700 !important;
}
a[href*="interessados.html#comprar"]:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(45, 134, 89, 0.4) !important;
  text-decoration: none !important;
}

/* =========================================
   CARDS E LAYOUT
========================================= */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  color: #111;
}
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.section { padding: 32px 0; }

/* =========================================
   FORMS
========================================= */
.form { display: grid; gap: 12px; }
label { font-weight: 600; }
label.req::after { display: none !important; }

input, select, textarea {
  width: 100%;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  font-size: 16px;
  transition: box-shadow .15s, border-color .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  box-shadow: var(--focus);
  border-color: #b2e8cf;
}
.small { font-size: 14px; color: #555; opacity: 1; }
.success {
  color: #0f5132;
  background: #d1e7dd;
  border: 1px solid #badbcc;
  padding: 8px 10px;
  border-radius: 10px;
  margin-bottom: 8px;
  opacity: 1;
}

.segment { display: flex; gap: 8px; margin-bottom: 14px; }
.segment button {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  font-weight: 700;
}
.segment button.active { background: var(--primary); color: #fff; border-color: transparent; }

/* =========================================
   MODAL
========================================= */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 6vh;
  z-index: 80;
}
.modal { width: min(720px, 90vw); background: #fff; border-radius: 20px; box-shadow: var(--shadow); }
.modal header { padding: 14px 16px; border-bottom: 1px solid var(--border); }
.modal .content { padding: 16px; max-height: 72vh; overflow: auto; }
.modal .close { background: #eee; border: none; border-radius: 10px; padding: 6px 10px; font-weight: 700; }

#prop-panel {
  position: relative !important;
  z-index: 10 !important;
  margin-top: 8px !important;
  animation: slideDown .3s ease-out;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* =========================================
   FOOTER
========================================= */
footer { margin-top: 36px; border-top: 1px solid #eee; background: #fafafa; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; padding: 24px 0; }
.brand-foot img { height: 70px; }
.whatsapp-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  background: var(--primary);
  color: #fff;
  border-radius: 999px;
  padding: 14px 16px;
  box-shadow: var(--shadow);
  z-index: 60;
}
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #111;
  color: #fff;
  opacity: .94;
  padding: 8px 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  z-index: 70;
  font-size: 14px;
}
.cookie-banner button {
  background: var(--primary);
  border: none;
  color: #fff;
  padding: 6px 10px;
  border-radius: 8px;
  font-weight: 700;
}

/* =========================================
   TABLETS
========================================= */
@media (min-width: 881px) and (max-width: 1100px) {
  .brand { min-width: 260px; }
  .brand img { height: 85px; }
  .brand .name { font-size: 16px; }
  .brand .role { font-size: 14px; }
  .nav a { font-size: 15px; padding: 10px 12px; }
}

/* =========================================
   MOBILE - TUDO CONSOLIDADO AQUI
========================================= */
@media (max-width: 768px) {
  .container { padding: 0 16px; }
  
  /* HEADER MOBILE */
  .brand { min-width: auto; gap: 10px; }
  .brand img { height: 65px; }
  .brand .name { font-size: 14.5px; }
  .brand .role { font-size: 12.5px; }
  
  .nav {
    flex-direction: column;
    gap: 6px;
    padding: 8px 0;
    align-items: stretch;
  }
  .nav nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3px;
    max-width: 100%;
  }
  
  /* Botões do header ampliados */
  .nav a {
    font-size: 15px;
    padding: 10px 12px;
    margin: 0;
    flex: 0 1 auto;
  }
  
  /* Regularização: destaque intermediário */
  .nav a[href="/regularizacao.html"] {
    font-weight: 700;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    padding: 10px 13px;
  }
  
  /* Avaliação Profissional: destaque SUAVE */
  .nav .cta-orange {
    font-size: 15px;
    padding: 10px 14px;
    margin: 0;
    background: #ff8c5a !important;
    opacity: 0.88;
    box-shadow: 0 1px 4px rgba(255, 107, 53, 0.2) !important;
  }
  
  /* Ligar */
  .nav .cta {
    font-size: 15px;
    padding: 10px 12px;
    margin: 0;
  }
  
  /* HERO MOBILE */
  .hero {
    padding: 20px 0 16px !important;
    background: linear-gradient(180deg, hsl(158 54% 50%), hsl(158 54% 58%));
  }
  .hero .grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .hero .card {
    width: 100%;
    max-width: 100%;
    padding: 12px !important;
  }
  
  /* Badge CREA/CRECI legível */
  .hero .badge {
    display: inline-block !important;
    font-size: 12.5px !important;
    line-height: 1.3 !important;
    padding: 5px 10px !important;
    margin: 4px 0 !important;
    background: rgba(255, 255, 255, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 999px !important;
    font-weight: 600 !important;
    color: #fff !important;
  }
  
  .hero h1 {
    font-size: 22px !important;
    line-height: 1.15 !important;
    margin: 6px 0 8px !important;
  }
  .hero p.lead {
    font-size: 14px !important;
    margin: 0 0 10px 0 !important;
  }
  
  .hero .cta-row {
    gap: 6px !important;
    margin: 10px 0 8px 0 !important;
  }
  .hero .cta-row .btn {
    font-size: 14.5px !important;
    padding: 11px 15px !important;
    min-height: 44px !important;
    height: 44px !important;
    font-weight: 700 !important;
  }
  
  .hero .bar {
    gap: 6px !important;
    margin-top: 8px !important;
  }
  .hero .bar .btn {
    font-size: 14.5px !important;
    padding: 11px 14px !important;
    height: 44px !important;
    font-weight: 700 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  
  .hero #prop-panel { margin-top: 8px !important; }
  .hero .card h2 {
    font-size: 18px !important;
    margin: 0 0 8px 0 !important;
  }
  .hero .card ul {
    margin: 0 !important;
    padding-left: 18px !important;
    font-size: 13px !important;
  }
  .hero .card ul li { margin-bottom: 4px !important; }
  
  /* MODAL MOBILE */
  .modal {
    width: 94vw !important;
    margin: 8px auto !important;
    max-height: 88vh !important;
    border-radius: 16px !important;
  }
  .modal header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    gap: 12px;
  }
  .modal header strong { flex: 1; font-size: 16px; }
  .modal .close { flex-shrink: 0; padding: 8px 12px; font-size: 13px; }
  .modal .content {
    max-height: 72vh !important;
    padding: 14px !important;
  }
  
  #prop-panel {
    margin-top: 6px !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
  }
  #prop-panel .btn {
    padding: 12px 14px !important;
    font-size: 14px !important;
    min-height: 48px !important;
  }
  
  .cta-row { gap: 8px; margin: 16px 0; }
  .cta-row .btn {
    font-size: 14px !important;
    padding: 12px 16px !important;
    min-height: 48px !important;
  }
  
  .grid-2, .grid-3 { grid-template-columns: 1fr; gap: 12px; }
  .section { padding: 20px 0; }
  .card { padding: 14px; }
  h2 { font-size: 22px; margin: 18px 0 8px; }
  
  .hero .grid { grid-template-columns: 1fr; gap: 18px; }
  .footer-grid { grid-template-columns: 1fr; padding: 24px 20px; }
  .footer-grid > div { margin-bottom: 20px; }
}

/* ================================================
   MENU INDIQUE & GANHE - DESTAQUE
   Adicionar NO FINAL do arquivo mask.css
   ================================================ */

.nav-link.indique-ganhe-menu {
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%) !important;
    color: #000 !important;
    font-weight: 700 !important;
    padding: 10px 20px !important;
    border-radius: 25px !important;
    box-shadow: 0 2px 8px rgba(255,193,7,0.3) !important;
    transition: all 0.3s !important;
}

.nav-link.indique-ganhe-menu:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(255,193,7,0.5) !important;
}

@media (max-width: 768px) {
    .nav-link.indique-ganhe-menu {
        display: block !important;
        text-align: center !important;
        margin: 10px 0 !important;
    }
    
  /* ================================================
   MOBILE - REDUZIR ESPAÇO ENTRE LINHAS DO MENU
   ================================================ */
@media (max-width: 768px) {
    /* Menu - gap MÍNIMO entre linhas */
    header nav {
        gap: 2px !important;              /* era 4px, agora 2px */
        row-gap: 2px !important;          /* força espaço vertical mínimo */
        margin-top: 0 !important;
        padding: 0 !important;
    }
    
    /* Botões - altura mínima para "colar" as linhas */
    header nav a,
    header nav .nav-link,
    header nav .cta,
    header nav .cta-orange {
        padding: 5px 12px !important;     /* reduz de 6px para 5px */
        margin: 0 !important;
        line-height: 1.15 !important;
    }
    
    .nav-link.indique-ganhe-menu {
        padding: 5px 14px !important;
    }
    
    /* Topo - manter como está (você gostou) */
    header,
    header .container.nav {
        padding-top: 0 !important;
    }
    
    /* Fim do header - manter */
    header {
        padding-bottom: 2px !important;
        margin-bottom: 2px !important;
    }
    
    .hero {
        padding-top: 4px !important;
    }
}