/* Importando a fonte Dancing Script */
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');



/* Reset mínimo */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    background: #f7fafc; /* cor das laterais e fundo geral */
}

.projetos-section,
.imoveis-page {
    padding: 2rem 0;
    background: #fff; /* cor central, destaque para o conteúdo */
}

.split-container {
  display: flex;
  min-height: 100vh;
  width: 100%;
  font-family: Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Cada metade */
.split-pane {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 3rem;
  color: white;
  text-align: center;
}

/* Estilos específicos */
.left {
  background: linear-gradient(135deg, #2b6cb0 0%, #3182ce 100%); /* azul */
}

.right {
  background: linear-gradient(135deg, #2f855a 0%, #38a169 100%); /* verde */
}

.split-pane h2 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.person-name {
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
  opacity: 0.95;
}

.action-btn {
  display: inline-block;
  padding: 0.75rem 1.25rem;
  background: rgba(255,255,255,0.95);
  color: #111827;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  transition: transform .12s ease, box-shadow .12s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

.action-btn:hover,
.action-btn:focus {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.18);
  outline: none;
}

/* Responsivo: empilha em telas pequenas */
@media (max-width: 768px) {
  .split-container { flex-direction: column; }
  .split-pane { padding: 2rem; min-height: 50vh; }
}

/* =========================
   Estilos para página Imóveis
   ========================= */

.imoveis-page {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 2rem;
    background: rgba(255,255,255,0.92);/*radial-gradient(circle at top center, #f3f4f6 30%, #222 100%);*/
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.08);
}

.imoveis-page h1 {
  margin-bottom: 1rem;
  font-size: 1.75rem;
  text-align: left;
}

/* Filtros */
.imoveis-filters {
  background: white;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1.25rem;
  box-shadow: 0 6px 20px rgba(15,23,42,0.06);
}

.filter-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: end;
}

.filter-row label {
  display: flex;
  flex-direction: column;
  font-size: 0.9rem;
}

.filter-row input[type="number"],
.filter-row input[type="date"],
.filter-row select {
  padding: 0.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  min-width: 140px;
}

/* Ações do filtro */
.filter-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* Grid de imóveis */
.property-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}

.property-card {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(2,6,23,0.06);
  display: flex;
  flex-direction: column;
}

.property-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

.card-body {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.card-body h3 {
  font-size: 1rem;
  margin: 0;
}

.price {
  font-weight: 700;
  color: #0f172a;
}

.meta {
  font-size: 0.85rem;
  color: #475569;
}

/* Tarja laranja que indica "Aceita financiamento" */
.financing-badge {
  background: #c85a14; /* laranja queimado */
  color: #fff;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.85rem;
  margin-left: 0.5rem;
  display: inline-block;
}

/* Mensagem nenhum resultado */
.no-results {
  padding: 1.5rem;
  background: white;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(2,6,23,0.04);
}

/* Responsivo */
@media (max-width: 1024px) {
  .property-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .filter-row { gap: 0.5rem; }
  .property-grid { grid-template-columns: 1fr; }
  .property-card img { height: 220px; }
}

/* =========================
   Estilos para página Arquitetura
   ========================= */

:root {
  --bg-beige: #efe6dc;
  --card-white: #fbf8f6;
  --accent: #b85236;
  --container-width: 1100px;
}

.arch-header {
    background: rgba(255,255,255,0.92);
    padding: 18px 0;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}

.arch-header .container {
  max-width: var(--container-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

.brand {
  font-family: Georgia, "Times New Roman", serif;
  color: #3f342d;
  font-size: 1.05rem;
}

.arch-nav a {
    margin-left: 20px;
    color: #000000;
    text-decoration: none;
    font-size: 0.95rem;
}

.arch-page {
    background: rgba(255,255,255,0.92); /*radial-gradient(circle at top center, #f3f4f6 30%, #222 100%);*/
    min-height: 100vh;
    padding: 40px 0 80px;
}

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* Hero */
.hero {
  margin-bottom: 56px;
}

.hero-card {
  background: var(--card-white);
  padding: 56px;
  border-radius: 2px;
  box-shadow: 0 8px 30px rgba(2,6,23,0.06);
}

.hero-card h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 48px;
  color: #1e1a17;
  margin-bottom: 12px;
}

.hero-card .lead {
  color: #6b605a;
  margin-bottom: 24px;
  font-size: 1.05rem;
}

.lead p {
    color: #000000;
    line-height: 1.7;
    margin-bottom: 12px;
}

.hero-btn {
  display: inline-block;
  background: var(--accent);
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(184,82,54,0.18);
}

/* Portfolio */
.portfolio h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  color: #2c231f;
  margin-bottom: 18px;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.project-card {
  background: transparent;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(2,6,23,0.06);
}

.project-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  border-radius: 14px;
}

.project-card h3 {
  padding: 12px;
  font-size: 1rem;
  color: #3f352f;
}

/* =========================
   Estilos para página Sobre (perfil)
   ========================= */

.about-page {
    background: rgba(255,255,255,0.92); /*radial-gradient(circle at top center, #f3f4f6 30%, #222 100%);*/
    min-height: calc(100vh - 80px);
    padding: 48px 0 80px;
    color: #281f1c;
}

.profile-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 48px;
  align-items: start;
  max-width: var(--container-width, 1100px);
  margin: 0 auto;
  padding: 0 20px;
}

.profile-photo img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(2,6,23,0.08);
  display: block;
}

.about-content h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 36px;
  margin-bottom: 8px;
  color: #1e1a17;
}

.about-content .lead {
    color: #000000;
    margin-bottom: 18px;
    font-size: 1.03rem;
}

.about-content p {
  color: #4b433f;
  line-height: 1.7;
  margin-bottom: 12px;
}

.hero-btn {
  display: inline-block;
  background: var(--accent, #b85236);
  color: #fff;
  padding: 12px 20px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(184,82,54,0.14);
  margin-top: 12px;
}

/* footer simples */
.arch-footer {
    margin-top: 56px;
    color: #000000;
    font-size: 0.95rem;
}



/* ===== Página Contato ===== */

.contact-page {
    background: rgba(255,255,255,0.92); /*radial-gradient(circle at top center, #f3f4f6 25%, #222 100%);*/
    min-height: calc(100vh - 80px);
    padding: 48px 0 80px;
    color: #3f352f;
}

.contact-grid {
  max-width: var(--container-width, 1100px);
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 36px;
  align-items: start;
}

.contact-form-card {
  background: var(--card-white, #fbf8f6);
  padding: 28px;
  border-radius: 10px;
  box-shadow: 0 14px 40px rgba(2,6,23,0.06);
}

.contact-form-card h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
  margin-bottom: 12px;
  color: #1e1a17;
}

.contact-form-card label {
  display: block;
  margin-bottom: 12px;
  font-size: 0.95rem;
  color: #4b433f;
}

.contact-form-card input[type="text"],
.contact-form-card input[type="email"],
.contact-form-card input[type="tel"],
.contact-form-card textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e6e0da;
  border-radius: 8px;
  background: white;
  color: #111827;
  margin-top: 6px;
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.02);
}

.form-actions {
  margin-top: 14px;
  display: flex;
  gap: 12px;
  align-items: center;
}

.form-success {
  padding: 14px;
  background: #edf7ed;
  border: 1px solid #d4eed4;
  color: #0b6a27;
  border-radius: 8px;
  font-weight: 600;
}

/* WhatsApp button */
.whatsapp-btn {
  display: inline-block;
  background: #25D366;
  color: #fff;
  padding: 10px 16px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(37,211,102,0.16);
}

/* Contact info (aside) */
.contact-info {
  font-size: 0.95rem;
  color: #4b433f;
}

.contact-info h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  margin-bottom: 10px;
  color: #1e1a17;
}

.contact-info p a {
  color: #3f342d;
  text-decoration: none;
  font-weight: 600;
}

/* Validation summary */
.validation-summary {
  margin-bottom: 10px;
  color: #a73a2a;
}

/* ===== Estilos da Home (append this block to the end of split.css) ===== */

.home-split {
  display: flex;
  min-height: calc(100vh - 56px);
  width: 100%;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* cada metade */
.pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 64px 28px;
  color: #ffffff;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* gradientes -- removido o tom azul forte da tela principal (apenas para a Home) */
.pane.left {
  /* Antes: azul; agora neutro/quente para combinar com o restante do site */
  background: linear-gradient(180deg, #efe6dc 0%, #efe0d5 100%);
}

.pane.right {
  background: linear-gradient(180deg, #2fa36a 0%, #2c9b5f 50%, #23844f 100%);
}

/* ícone circular */
.icon-wrap {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.07);
  box-shadow: inset 0 -8px 20px rgba(0,0,0,0.06);
  backdrop-filter: blur(4px);
}

.icon {
  width: 120px;
  height: 120px;
  color: rgba(255,255,255,0.92);
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.12));
}

/* títulos */
.pane h1 {
  font-size: 40px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,0.98);
}

.person {
  font-size: 18px;
  margin: 0;
  opacity: 0.95;
  color: rgba(255,255,255,0.92);
}

/* botão CTA */
.cta {
  display: inline-block;
  margin-top: 8px;
  background: #ffffff;
  color: #0f1724;
  padding: 14px 26px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 14px 30px rgba(15,23,42,0.12);
  transition: transform .14s ease, box-shadow .14s ease;
}

.cta:hover,
.cta:focus {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(15,23,42,0.18);
  outline: none;
}

/* footer simples */
.home-footer {
  background: #fff7f2; /* removido azul claro */
  padding: 12px 0;
  border-top: none;
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #4b5563;
  font-size: 14px;
}

/* responsivo */
@media (max-width: 900px) {
  .home-split { flex-direction: column; min-height: auto; }
  .pane { padding: 48px 18px; }
  .icon-wrap { width: 160px; height: 160px; }
  .icon { width: 88px; height: 88px; }
  .pane h1 { font-size: 32px; }
}

/* ===== Home central (card) — adicione ao final do arquivo ===== */

/* Variáveis: substitua URLs por imagens locais em wwwroot/images se preferir */
:root {
  --home-card-bg: rgba(255,255,255,0.06);
  --home-split-bg: url("/images/home-split.png");
  --card-radius: 12px;
  --card-shadow: 0 18px 60px rgba(15,23,42,0.35);
}

/* Wrapper para centralizar a card */
.home-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 36px;
  /* removido o fundo azul; agora neutro claro */
  background: linear-gradient(180deg, #f8f5ef 0%, #fffaf7 100%);
  min-height: 100vh;
}

/* Card arredondado grande */
.home-card {
  width: 100%;
  max-width: 1600px;
  border-radius: var(--card-radius);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--home-card-bg);
  box-shadow: var(--card-shadow);
  position: relative;
  border: none; /* remove a borda fina em volta do card */
}

/* cada metade */
.home-card .pane {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 36px;
  color: #fff;
  text-align: center;
}

/* fundos com imagem e leve escurecimento - mesma imagem, posições distintas */
.home-card .pane.left {
  background-image: linear-gradient(to bottom right, rgba(7,28,62,0.55), rgba(7,28,62,0.35)), var(--home-split-bg);
  background-size: cover;
  background-position: left center; /* mostra a porção esquerda da imagem */
  background-repeat: no-repeat;
}

.home-card .pane.right {
  background-image: linear-gradient(to bottom right, rgba(5,40,30,0.55), rgba(5,40,30,0.35)), var(--home-split-bg);
  background-size: cover;
  background-position: right center; /* mostra a porção direita da imagem */
  background-repeat: no-repeat;
}

/* extra overlay para suavizar e aplicar blur */
.home-card .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.18) 60%, rgba(0,0,0,0.32) 100%);
  pointer-events: none;
}

/* Home card — torna o card transparente e prepara camadas */
.home-card {
  position: relative;
  overflow: visible; /* permitir pseudo-elements com inset */
  background: transparent;
  box-shadow: var(--card-shadow);
}

/* Pseudo-camada com a imagem, insetada pela largura da borda */
.home-card::before {
  content: "";
  position: absolute;
  inset: var(--card-border-size);
  border-radius: calc(var(--card-radius) - var(--card-border-size));
  background-image: linear-gradient(to bottom right, rgba(0,0,0,0.18), rgba(0,0,0,0.06)), var(--home-split-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
}

/* Overlay para legibilidade (acima da imagem inset) */
.home-card .overlay {
  position: absolute;
  inset: var(--card-border-size);
  border-radius: calc(var(--card-radius) - var(--card-border-size));
  background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0.22) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Divisor central limitado ao mesmo inset (não atravessa a "borda") */
.home-card::after {
  content: "";
  position: absolute;
  top: var(--card-border-size);
  bottom: var(--card-border-size);
  left: 50%;
  transform: translateX(-50%);
  width: 3px; /* espessura do divisor */
  border-radius: 2px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.04) inset;
  z-index: 2;
  pointer-events: none;
}

/* garantir comportamento móvel */
@media (max-width: 900px) {
  :root { --card-border-size: 10px; }
  .home-card::after { width: 2px; }
  .home-card::before,
  .home-card .overlay { border-radius: calc(var(--card-radius) - var(--card-border-size)); }
}

/* OVERRIDE FINAL: imagem inset com mesma "borda" e divisor central */
:root {
  --home-split-bg: url("/images/home-split.png");
  --card-radius: 12px;
  --card-border-size: 12px; /* ajuste aqui para aumentar/reduzir a "borda" */
  --card-shadow: 0 18px 60px rgba(15,23,42,0.35);
}

/* garantir que o card fique transparente e seja o container das pseudo-camadas */
.home-card {
  position: relative !important;
  background: transparent !important;
  border: none !important;
  border-radius: var(--card-radius) !important;
  overflow: visible !important;
  box-shadow: var(--card-shadow) !important;
}

/* remover qualquer background direto das metades para evitar conflito */
.home-card .pane {
  background: transparent !important;
  position: relative;
  z-index: 3; /* conteúdo acima da imagem */
}

/* camada com a imagem insetada exatamente do tamanho da antiga borda */
.home-card::before {
  content: "" ;
  position: absolute;
  inset: var(--card-border-size); /* aqui a imagem fica insetada pela "borda" */
  border-radius: calc(var(--card-radius) - var(--card-border-size));
  background-image: linear-gradient(to bottom right, rgba(0,0,0,0.18), rgba(0,0,0,0.06)), var(--home-split-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
}

/* overlay acima da imagem (legibilidade) */
.home-card .overlay {
  position: absolute;
  inset: var(--card-border-size);
  border-radius: calc(var(--card-radius) - var(--card-border-size));
  background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0.22) 100%);
  z-index: 1;
  pointer-events: none;
}

/* divisor central limitado ao interior (não atravessa a "borda") */
.home-card::after {
  content: "";
  position: absolute;
  top: var(--card-border-size);
  bottom: var(--card-border-size);
  left: 50%;
  transform: translateX(-50%);
  width: 3px; /* espessura do divisor — altere se desejar */
  border-radius: 2px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.04) inset;
  z-index: 2;
  pointer-events: none;
}

/* garantir comportamento móvel */
@media (max-width: 900px) {
  :root { --card-border-size: 10px; }
  .home-card::after { width: 2px; }
  .home-card::before,
  .home-card .overlay { border-radius: calc(var(--card-radius) - var(--card-border-size)); }
}

/* Aumentar área da imagem reduzindo a "borda" inset */
:root {
  --card-border-size: 0px; /* diminuir -> imagem maior. Use 0px para full-bleed */
}

/* reforço/override para garantir aplicação */
.home-card::before {
  inset: var(--card-border-size) !important;
  border-radius: calc(var(--card-radius) - var(--card-border-size)) !important;
}

.home-card .overlay {
  inset: var(--card-border-size) !important;
  border-radius: calc(var(--card-radius) - var(--card-border-size)) !important;
}

.home-card::after {
  top: var(--card-border-size) !important;
  bottom: var(--card-border-size) !important;
}

/* mobile: mantém proporção visual */
@media (max-width: 900px) {
  :root { --card-border-size: 6px; } /* ligeiramente maior em telas pequenas */
}

/* Garantir que as laterais da página usem o mesmo fundo da home */
:root {
  --page-bg-gradient: linear-gradient(180deg, #f8f5ef 0%, #fffaf7 100%);
}

html, body {
  height: 100%;
  background: var (--page-bg-gradient) !important;
  background-attachment: fixed;
}

.home-wrapper {
  background: transparent !important; /* deixa a imagem/gradiente do body visível nas laterais */
}

/* Aumentar um pouco o tamanho (zoom) da imagem no card principal */
.home-card::before {
  background-size: 130% !important; /* aumenta a imagem — ajuste entre 100% e 150% conforme preferir */
  background-position: center center !important; /* mantém o foco central */
}

/* ajuste menor em telas pequenas para evitar corte excessivo */
@media (max-width: 900px) {
  .home-card::before {
    background-size: 115% !important;
    background-position: center top !important;
  }
}

/* Aumentar levemente largura e altura da imagem do card principal */
.home-card::before {
  /* formato: largura altura — aumente os percentuais conforme desejar */
  background-size: 140% 120% !important; 
  background-position: center center !important;
}

/* ajustes para dispositivos menores para evitar corte excessivo */
@media (max-width: 900px) {
  .home-card::before {
    background-size: 125% 110% !important;
    background-position: center top !important;
  }
}

/* Aumentar área e zoom da imagem do card principal */
:root {
  --home-card-zoom-x: 200%; /* largura */
  --home-card-zoom-y: 180%; /* altura */
}

.home-wrapper {
  padding: 12px !important; /* reduz espaço ao redor para o card ocupar mais largura */
}

.home-card {
  max-width: 1800px !important; /* permite ocupar mais largura em telas grandes */
}

.home-card .pane {
  min-height: 560px !important; /* aumenta altura das metades */
  padding: 80px 48px !important; /* aumenta espaçamento interno para balancear o layout */
}

/* aplica o zoom maior na pseudo-camada da imagem */
.home-card::before {
  background-size: var(--home-card-zoom-x) var(--home-card-zoom-y) !important;
  background-position: center center !important;
}

/* ajustes responsivos para evitar corte excessivo em telas menores */
@media (max-width: 1200px) {
  .home-card { max-width: 1200px !important; }
  .home-card .pane { min-height: 480px !important; padding: 64px 36px !important; }
  .home-card::before { background-size: 140% 120% !important; }
}

@media (max-width: 900px) {
  :root { --card-border-size: 6px; } /* mantém um pouco de inset no mobile */
  .home-wrapper { padding: 20px !important; }
  .home-card { max-width: 100% !important; }
  .home-card .pane { min-height: 420px !important; padding: 40px 22px !important; }
  .home-card::before { background-size: 120% 110% !important; background-position: center top !important; }
}

/* Hero: ocupar quase toda a tela (full-bleed visual) */
:root {
  --card-border-size: 0px !important; /* 0 = imagem ocupa tutta área interna */
  --home-card-zoom-x: 220%; /* largura (zoom) */
  --home-card-zoom-y: 200%; /* altura (zoom) */
}

/* reduzir espaços externos para o card ocupar mais largura */
.home-wrapper {
  padding: 8px !important;
  min-height: calc(100vh - 56px) !important;
}

/* tornar o card muito maior — largura e altura quase full viewport */
.home-card {
  width: 100% !important;
  max-width: calc(100% - 16px) !important;
  min-height: calc(100vh - 80px) !important; /* ajustar se tiver header maior */
  border-radius: 8px !important; /* mantém leve arredondamento */
  overflow: hidden !important;
}

/* aumentar altura das metades e espaçamento interno */
.home-card .pane {
  min-height: inherit !important;
  padding: 96px 48px !important;
}

/* aplicar maior zoom na pseudo-camada com a imagem */
.home-card::before {
  inset: var(--card-border-size) !important;
  border-radius: calc(var(--card-radius, 12px) - var(--card-border-size)) !important;
  background-size: var(--home-card-zoom-x) var(--home-card-zoom-y) !important;
  background-position: center center !important;
}

/* overlay continua para legibilidade — respeita inset */
.home-card .overlay {
  inset: var(--card-border-size) !important;
  border-radius: calc(var(--card-radius, 12px) - var(--card-border-size)) !important;
}

/* Responsivo: reduzir zoom/padding em telas menores */
@media (max-width: 1200px) {
  .home-card { max-width: 1200px !important; min-height: calc(100vh - 100px) !important; }
  .home-card .pane { padding: 64px 36px !important; }
  .home-card::before { background-size: 160% 140% !important; background-position: center top !important; }
}

@media (max-width: 900px) {
  :root { --card-border-size: 6px !important; } /* mantém pequeno inset no mobile */
  .home-wrapper { padding: 20px !important; }
  .home-card { max-width: 100% !important; min-height: 420px !important; border-radius: 10px !important; }
  .home-card .pane { padding: 40px 22px !important; }
  .home-card::before { background-size: 120% 110% !important; background-position: center top !important; }
}

/* =========================
   Projetos — estilos aplicados apenas à tela de Portfólio
   ========================= */

/* Container e tipografia */
.projects.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 56px 20px;
  color: #102027;
}

.projects .section-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 32px;
  color: #1e1a17;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.projects .lead {
  color: #58626b;
  margin-bottom: 28px;
  font-size: 1.05rem;
}

/* Grid responsivo apenas dentro de .projects */
.projects .grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

/* Card */
.projects .card {
  background: #EFE8DD;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(15,23,42,0.06);
  border: 1px solid rgba(15,23,42,0.04);
  transition: transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s;
  display: flex;
  flex-direction: column;
}

.projects .card:hover {
  transform: translateY(-10px);
  box-shadow: 0 30px 80px rgba(15,23,42,0.12);
}

/* Imagem com aspecto consistente e efeito */
.projects .card-media {
  width: 100%;
  aspect-ratio: 16/11;
  overflow: hidden;
  background: #f3f5f7;
  display: block;
}

/* Details Modal */
.details-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.7);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.details-modal[style*="display: flex"] {
    display: flex !important;
}
.details-modal .modal-content {
    background: #fff;
    border-radius: 8px;
    padding: 2rem;
    max-width: 500px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    text-align: center;
    position: relative;
}
.details-modal img {
    max-width: 100%;
    height: auto;
    margin-bottom: 1rem;
    border-radius: 6px;
}
.details-modal .close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 2rem;
    cursor: pointer;
    color: #333;
    background: none;
    border: none;
}
.details-modal .modal-details p {
    margin: 0.5rem 0;
}

/* =========================
   Estilos globais para a seção Projetos
   ========================= */

.projetos-section {
    padding: 2rem 0;
    background: #EFE8DD;
}
.projetos-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 2rem;
    color: #2b6cb0;
    font-weight: 700;
}
.projetos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    justify-items: center;
}
@media (max-width: 900px) {
    .projetos-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media only screen and (max-width: 1024px) and (max-height: 768px) {
} 

(max-width: 600px) 
    .projetos-grid {
        grid-template-columns: 1fr;
    }
    
}
    
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.12);
    overflow: hidden;
    max-width: 340px;
    transition: transform .15s, box-shadow .15s;
    display: flex;
    flex-direction: column;
}
.projeto-card:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 12px 32px rgba(0,0,0,0.18);
}
.projeto-img {
    width: 100%; /* ajuste conforme o layout desejado */
    height: 220px; /* ajuste conforme o layout desejado */
    object-fit: cover; /* mantém proporção e corta o excesso */
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    display: block;
    margin: 0 auto 16px auto;
}
.projeto-info {
    padding: 1.2rem;
}
    .projeto-info h2 {
        font-size: 1.3rem;
        color: #f08c2e;
        margin-bottom: 0.5rem;
    }
    .projeto-info p {
        color: #000000;
        font-size: 1rem;
    }

.assinatura-titulo {
    font-size: 3.2rem;
    font-weight: 500;
    color: #DA7A34; /* laranja queimado */
    text-align: center;
    letter-spacing: 0.05em;
    font-family: 'Dancing Script', cursive; /* estilo assinatura */
}


.home-bg {
    min-height: 100vh;
    background: rgba(255,255,255,0.92); /*Cor de Fundo da pagina Home Gradiente */
    /* background:#000000;*/
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 48px;
}

.assinatura {
    font-size: 2.6rem;
    font-weight: 600;
    color: #222;
    margin-bottom: 48px;
    text-align: center;
    letter-spacing: 0.02em;
    background: rgba(255,255,255,0.85);
    border-radius: 12px;
    padding: 1rem 2rem;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}

.assinatura span {
    font-size: 3rem;
    font-weight: 700;
    color: #222;
}

.painel-card-unique {
    position: relative;
    width: 980px;
    max-width: 95vw;
    height: 420px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    background: #222;
    display: flex;
    align-items: stretch;
    margin-bottom: 32px;
    margin-top: 60px;
}

.painel-img-unique {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(0.85);
}

.painel-overlay-unique {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    z-index: 2;
    padding: 32px;
    pointer-events: none;
}

.painel-col {
    background: rgba(0,0,0,0.32);
    border-radius: 16px;
    padding: 32px 24px 24px 24px;
    min-width: 320px;
    max-width: 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: auto;
}

.painel-col h2 {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: #fff;
}

.painel-col p {
    font-size: 1.2rem;
    margin-bottom: 24px;
    color: #fff;
}

.painel-btn {
    font-size: 1.1rem;
    font-weight: 600;
    background: #fff;
    color: #222;
    border: none;
    border-radius: 8px;
    padding: 0.8rem 2.2rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    text-decoration: none;
    transition: background 0.2s;
    margin-top: 8px;
}

.painel-btn:hover {
    background: #f3f4f6;
}

.arquiteto-nome {
    font-family: 'Montserrat', 'Segoe UI', 'Arial', sans-serif;
    font-size: 1.3rem;
    font-weight: 500;
    color: rgba(255,255,255,0.92); /* cor clara para fundo escuro */
    display: block; /* mantém o layout */
    margin-bottom: 8px;
    letter-spacing: 0.04em;
}

.arquiteto-titulo {
    font-size: 1.2rem;
    font-weight: 500;
    color: rgba(255,255,255,0.92); /* cor mais clara */
    margin-bottom: 12px;
    letter-spacing: 0.08em;
}

.arquiteto-registro {
    font-size: 1rem;
    color: rgba(255,255,255,0.92); /* cor clara */
    margin-bottom: 24px;
    font-family: 'Segoe UI', 'Arial', sans-serif;
}

.corretor-nome {
    font-family: 'Montserrat', 'Segoe UI', 'Arial', sans-serif;
    font-size: 1.3rem;
    font-weight: 500;
    color: rgba(255,255,255,0.92); /* cor clara */
    display: block;
    margin-bottom: 8px;
    letter-spacing: 0.04em;
}

.corretor-titulo {
    font-size: 1.2rem;
    font-weight: 500;
    color: rgba(255,255,255,0.92); /* cor mais clara */
    margin-bottom: 12px;
    letter-spacing: 0.08em;
}

.corretor-registros {
    font-size: 1rem;
    color: rgba(255,255,255,0.92); /* cor clara */
    margin-bottom: 24px;
    font-family: 'Segoe UI', 'Arial', sans-serif;
}

.assinatura-titulo, .assinatura {
    /* ...outros estilos... */
    margin-bottom: -10px; /* diminua esse valor para reduzir o espaço */
}

.cl-sigla {
    font-family: 'Dancing Script', cursive; /* estilo assinatura */
    font-weight: bold;
    margin-right: 8px;
    font-size: 1.2rem;
    color: #DA7A34; /* laranja queimado */
}

.painel-cards {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 32px;
}

.painel-col.arquiteto {
    order: 1;
}

.painel-col.corretor {
    order: 2;
}
/*.assinatura-titulo {
    text-align: center;
    background-color: #2b2b2b;*/ /* Cinza escuro */
    /*border-radius: 12px;*/ /* Arredondamento nos cantos */
    /*max-width: 900px;*/ /* Controla a largura total da tarja */
    /*width: 100%;*/ /* Ocupa 90% da tela */
/*}*/

.assinatura-nome {
    font-family: 'Inter', sans-serif;
    font-size: 52px; /* Levemente maior para dar mais peso */
    font-weight: 400; /* Mantém elegante sem ficar pesado */
    color: #000000;
    letter-spacing: 2px; /* Espaçamento entre letras para sofisticação */
    margin-bottom: 8px;
    border-bottom: 2px solid white; /* linha branca */
    display: inline-block
}

.assinatura-slogan {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 23px; /* um pouco maior para destacar */
    color: #f08c2e; /* mantém o tom dourado/laranja */
    opacity: 0.95; /* leve aumento para mais contraste */
}

/* Responsividade: empilha projetos e torna imagens fluidas em telas pequenas */
@media (max-width: 768px) {
    .projects-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* garante que cada card ocupe toda a largura disponível */
    .projeto-card {
        max-width: 100%;
    }

    /* imagem responsiva: ocupa 100% da largura do card e ajusta altura */
    .projeto-img {
        width: 100%;
        height: auto;
        max-width: 100%;
        object-fit: cover;
        border-radius: 12px;
        display: block;
    }

    /* evita rolagem horizontal inesperada */
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    html, body {
        overflow-x: hidden;
    }
}

/* Responsividade: empilha foto e conteúdo na página Sobre (Arquitetura) */
@media (max-width: 768px) {
    .profile-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
        align-items: start;
    }

    .profile-photo {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }

        .profile-photo img {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 12px;
            object-fit: cover;
        }

    .about-content {
        width: 100%;
        padding-top: 0.5rem;
    }

    /* evita qualquer overflow horizontal acidental */
    html, body {
        overflow-x: hidden;
    }

    @media (max-width: 768px) {
        /* garante que o container ocupe 100% e não permita overflow horizontal */
        .painel-card-unique {
            width: 100%;
            max-width: 100vw;
            box-sizing: border-box;
            padding-left: 12px;
            padding-right: 12px;
            margin-left: auto;
            margin-right: auto;
            overflow: hidden;
            height: auto; /* altura fluida no mobile */
        }

        /* overlay continua em uma linha, sem forçar quebra */
        .painel-overlay-unique {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            padding: 12px;
            box-sizing: border-box;
            flex-direction: column; /* mantém as duas colunas lado a lado */
        }

        /* cada card ocupa metade da largura, sem min-width que quebre o layout */
        .painel-col {
            min-width: 0 !important; /* remove restrição que causava overflow */
            box-sizing: border-box;
            flex: 1 1 50%;
            width: 50%;
            max-width: 50%;
            padding: 12px;
            margin: 0;
        }

        /* botões podem reduzir um pouco para caber lado a lado */
        .painel-btn {
            padding: 8px 12px;
            font-size: 0.95rem;
            white-space: nowrap;
        }

        /* imagem responsiva dentro do cartão */
        .painel-img-unique {
            width: 100%;
            height: auto;
            min-height: 220px;
            object-fit: cover;
            display: block;
        }

        /* evita rolagem horizontal acidental */
        html, body {
            overflow-x: hidden;
        }
    }

    @media (max-width: 768px) {
        /* container e grid */
        .contact-page .container {
            padding-left: 12px;
            padding-right: 12px;
            box-sizing: border-box;
        }

        .contact-grid {
            display: grid;
            grid-template-columns: 1fr; /* empilha form + info no mobile */
            gap: 16px;
            align-items: start;
            width: 100%;
            box-sizing: border-box;
        }

        /* cards/áreas */
        .contact-form-card,
        .contact-info {
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
            padding: 14px;
            margin: 0;
        }

            /* rótulos e campos: ocupam toda a largura e quebram texto */
            .contact-form-card label {
                display: block;
                margin-bottom: 10px;
                word-break: break-word;
                white-space: normal;
            }

            .contact-form-card input,
            .contact-form-card textarea,
            .contact-form-card select {
                width: 100%;
                max-width: 100%;
                box-sizing: border-box;
                padding: 10px 12px;
                border-radius: 8px;
            }

            .contact-form-card textarea {
                min-height: 120px;
                resize: vertical;
            }

        /* ações: botões cabem lado a lado ou empilham sem overflow */
        .form-actions {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            justify-content: flex-start;
        }

            .form-actions .action-btn,
            .form-actions .whatsapp-btn {
                flex: 1 1 auto;
                min-width: 0; /* importante para evitar overflow em flex items */
                box-sizing: border-box;
                padding: 10px 12px;
            }

        .contact-info p,
        .contact-info .office {
            word-break: break-word;
            white-space: normal;
        }

        /* garantir que não haja scroll horizontal */
        html, body {
            overflow-x: hidden;
        }
    }


    
}

/* == Home: aplicar imagens separadas por coluna (substitui imagem única) == */
/* Mantém overlay escuro via linear-gradient + imagem, background-size: cover e posicionamento central. */
.painel-col {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  color: #fff; /* garante texto legível sobre a imagem */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: auto; /* mantém botões clicáveis */
}

/* imagem do lado esquerdo (Arquitetura) */
.painel-col.arquiteto {
  background-image:
    linear-gradient(rgba(0,0,0,0.32), rgba(0,0,0,0.32)),
    url('/images/LadoEsquerdo_fundo.png');
}

/* imagem do lado direito (Imóveis) */
.painel-col.corretor {
  background-image:
    linear-gradient(rgba(0,0,0,0.32), rgba(0,0,0,0.32)),
    url('/images/LadoDireito_fundo.png');
}

/* Ajustes de altura mínima para manter proporção visual */
.painel-card-unique .painel-col {
  min-height: 320px; /* mantém o visual atual em desktop */
  padding: 32px;
  box-sizing: border-box;
}

/* ================================
   Ajustes visuais finos — Home panel
   Escopo: apenas .painel-card-unique / .painel-overlay-unique / .painel-col
   Objetivo: painel único dividido ao meio, sem parecer dois cards separados.
   ================================ */

.painel-card-unique {
  position: relative;
  overflow: hidden;                 /* garante que os cantos sejam do painel inteiro */
  border-radius: 24px;              /* bordas somente no painel pai */
  box-shadow: 0 12px 48px rgba(0,0,0,0.32);
  max-width: 980px;
  margin: 60px auto 32px;
  background: transparent;
  display: block;
}

/* overlay flex que contém as duas colunas */
.painel-overlay-unique {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: stretch;
  gap: 0;                            /* remove corredor entre colunas */
  width: 110%;
  min-height: 560px;                 /* altura mais imponente em desktop */
  box-sizing: border-box;
  position: relative;
  z-index: 3;                        /* conteúdo acima da pseudo-camada de imagem */
}

/* cada coluna ocupa metade do painel, sem arredondar seus cantos */
.painel-card-unique .painel-col {
  flex: 1 1 50%;
  min-width: 0;                      /* evita overflow de flex items */
  padding: 48px 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  border-radius: 0;                  /* garantir que cantos venham só do pai */
  box-shadow: none;                  /* remover sombras internas que fazem parecer cards */
  color: #fff;
  text-align: center;
}

/* divisor central sutil (não cria espaço) */
.painel-card-unique::after {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;                         /* linha fina e elegante */
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  z-index: 2;
  pointer-events: none;
  border-radius: 2px;
}

/* quando a imagem das colunas usa um overlay, garantir blend leve (se aplicável) */
.painel-col.arquiteto,
.painel-col.corretor {
  /* caso já tenha background-image com gradiente, estas regras garantem cobertura */
  background-blend-mode: overlay;
}

/* Mobile: empilhamento sem gaps grandes; mantém alinhamento visual */
@media (max-width: 768px) {
  .painel-overlay-unique {
    flex-direction: column;
    align-items: stretch;
    gap: 0;                           /* nenhum espaço entre os blocos empilhados */
    min-height: auto;
  }

  .painel-card-unique {
    margin: 28px 12px;
    border-radius: 14px;
  }

  .painel-card-unique .painel-col {
    width: 100%;
    padding: 28px 20px;
    min-height: 320px;
    justify-content: space-between; /* botão na base também no mobile */
  }

  /* removemos o divisor vertical pois o layout é empilhado */
  .painel-card-unique::after {
    display: none;
  }

  /* divisória horizontal sutil entre as metades empilhadas (apenas visual, sem bordas arredondadas nos filhos) */
  .painel-overlay-unique > .painel-col + .painel-col::before {
    content: "";
    display: block;
    height: 1px;
    width: 100%;
    background: rgba(255,255,255,0.04);
    margin: -1px 0 16px 0; /* aproxima visualmente as áreas sem criar espaço grande */
    pointer-events: none;
  }
}

/* Pequeno ajuste para garantir que botões e textos continuem legíveis no topo do overlay */
.painel-card-unique .painel-col .painel-btn {
  z-index: 4;
  pointer-events: auto;
}

/* ===== Mobile improvements (<=768px) — escopo restrito à Home panel =====
   Objetivo: width:100%, tipografia menor, menos espaçamento, botões maiores,
   imagens bem enquadradas (object-fit:cover). Não altera nada fora desta seção.
*/
@media (max-width: 768px) {

    /* Painel: ocupar 100% da largura disponível, sem largura fixa */
    .painel-card-unique {
        width: 100% !important;
        max-width: 100vw !important;
        margin: 20px 8px !important;
        height: 100% !important;
        min-height: auto !important;
        border-radius: 12px !important; /* mantém borda do painel, menor no mobile */
        padding: 0 !important;
        box-sizing: border-box;
        overflow: hidden;
    }

    /* Overlay: remover padding que causava respiro e empilhar colunas */
    .painel-overlay-unique {
        position: static !important;
        inset: auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        padding: 0 !important;
        align-items: stretch !important;
        width: 100% !important;
        height: auto !important;
        box-sizing: border-box;
        pointer-events: auto !important;
    }

    /* Cada coluna ocupa 100% (empilhadas), sem "respiro" nas bordas internas */
    .painel-card-unique .painel-col {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 20px 16px !important; /* reduz padding vertical/horizontal */
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important; /* garante botão na mesma linha visual */
    }

}


/* ===== Carrossel leve para .projeto-card (apêndice) ===== */
.proj-carousel {
    position: relative;
    width: 100%;
    height: 220px; /* mantém a altura que você já usa para .projeto-img */
    overflow: hidden;
    border-radius: 12px;
    box-sizing: border-box;
    background: transparent;
}

.proj-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .32s ease;
    display: grid;
    place-items: center;
    pointer-events: none;
}

    .proj-slide.active {
        opacity: 1;
        z-index: 2;
        pointer-events: auto;
    }

    .proj-slide img.projeto-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        border-radius: 12px;
    }

/* Setas */
.proj-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.44);
    color: #fff;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 4;
    backdrop-filter: blur(2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}

    .proj-arrow.prev {
        left: 12px;
    }

    .proj-arrow.next {
        right: 12px;
    }

    .proj-arrow:focus {
        outline: 2px solid rgba(255,255,255,0.9);
    }

/* Mobile: mantém comportamento responsivo do site (não altera layout) */
@media (max-width: 768px) {
    .proj-carousel {
        height: auto;
    }

    .proj-slide {
        position: relative;
        opacity: 1;
    }

        .proj-slide:not(.active) {
            display: none;
        }

        .proj-slide img.projeto-img {
            height: auto;
            border-radius: 12px;
        }

    .proj-arrow {
        width: 36px;
        height: 36px;
    }
}

/* ===== Correções de layout do carrossel — escopo restrito a .proj-carousel ===== */
.proj-carousel {
  display: block;
  width: 100%;
  height: 220px; /* mesma altura padrão das .projeto-img */
  margin: 0 auto 16px auto; /* mantém o espaçamento original entre imagem e texto */
  position: relative !important;
  overflow: hidden !important;
  border-radius: 12px;
  box-sizing: border-box;
  background: transparent;
}

/* cada slide ocupa todo o espaço e fica escondido quando não ativo */
.proj-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
  display: block;
}

/* slide visível */
.proj-slide.active {
  opacity: 1;
  z-index: 2;
  pointer-events: auto;
}

/* imagem dentro do slide — cobre totalmente e mantém cantos arredondados */
.proj-slide img.projeto-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

/* setas posicionadas SOBRE a imagem — uma à esquerda e outra à direita */
.proj-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.44);
  color: #fff;
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 3;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  margin: 0;
  line-height: 1;
}
.proj-arrow.prev { left: 12px; }
.proj-arrow.next { right: 12px; }
.proj-arrow:focus { outline: 2px solid rgba(255,255,255,0.9); }

/* Garante que o card mantenha box-sizing e não expanda a grid */
.projeto-card { box-sizing: border-box; }

/* Fallback: se o JS não criar o carrossel, mantém o comportamento atual */
.projeto-card > img.projeto-img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 12px;
  margin: 0 0 16px 0;
}

/* Mobile: altura automática, slides empilhados e setas menores */
@media (max-width: 768px) {
  .proj-carousel { height: auto; }
  .proj-slide { position: relative; opacity: 1; }
  .proj-slide:not(.active) { display: none; }
  .proj-slide img.projeto-img { height: auto; border-radius: 12px; }
  .proj-arrow { width: 36px; height: 36px; }
}

/* ===== Carrossel simples para imóveis (aplicação restrita) ===== */
.carousel {
    width: 100%;
    height: 220px; /* mantém padrão atual das imagens do card */
    margin: 0 0 16px 0;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-sizing: border-box;
    background: transparent;
}

.carousel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

/* Botões sobre a imagem */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0,0,0,0.44);
    color: #fff;
    border: none;
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 5;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}

    .carousel-btn.prev {
        left: 12px;
    }

    .carousel-btn.next {
        right: 12px;
    }

    .carousel-btn:focus {
        outline: 2px solid rgba(255,255,255,0.9);
    }

/* Garante que o card não expanda a grid */
.property-card, .projeto-card {
    box-sizing: border-box;
}

    /* Fallback: se JS não rodar, mantém a imagem única visível */
    .property-card > .carousel > img.carousel-image {
        display: block;
    }

/* Mobile: altura adaptativa e setas menores */
@media (max-width: 768px) {
    .carousel {
        height: auto;
    }

    .carousel-image {
        height: auto;
        object-fit: cover;
    }

    .carousel-btn {
        width: 36px;
        height: 36px;
    }
}