/* ============================================================
   Invest In Properties Now — identidad visual
   Paleta: azul noche + gris pizarra. Motivo: retícula de plano
   arquitectónico (blueprint) como textura ambiental y esquinas
   tipo "marca de plano" en las tarjetas.
   ============================================================ */

:root{
  --navy-950:#070b14;
  --navy-900:#0b1120;
  --navy-800:#111a2e;
  --navy-700:#182541;
  --navy-600:#213256;
  --slate-300:#aeb8cc;
  --slate-400:#8994ab;
  --slate-500:#66718a;
  --accent-400:#6f93f6;
  --accent-500:#4c74ee;
  --accent-600:#3a5fd6;
  --glass-bg: rgba(255,255,255,0.045);
  --glass-bg-strong: rgba(255,255,255,0.08);
  --glass-border: rgba(255,255,255,0.10);
  --glass-border-strong: rgba(255,255,255,0.18);
}

*{ scrollbar-color: var(--navy-600) transparent; }
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:var(--navy-600); border-radius:8px; }
::-webkit-scrollbar-track{ background:transparent; }

html{ scroll-behavior:smooth; }

body{
  background-color: var(--navy-950);
  color: var(--slate-300);
  font-family:'Inter', sans-serif;
  min-height:100vh;
  position:relative;
}

.font-display{ font-family:'Space Grotesk', sans-serif; }
.font-mono{ font-family:'JetBrains Mono', monospace; }

/* Textura ambiental tipo plano arquitectónico */
.blueprint-bg{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(111,147,246,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111,147,246,0.07) 1px, transparent 1px),
    linear-gradient(rgba(111,147,246,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111,147,246,0.035) 1px, transparent 1px);
  background-size: 160px 160px, 160px 160px, 32px 32px, 32px 32px;
  background-position: -1px -1px;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, black 40%, transparent 85%);
}

.ambient-glow{
  position:fixed;
  z-index:0;
  pointer-events:none;
  filter: blur(90px);
  border-radius:9999px;
  opacity:0.35;
}

.glass{
  background: var(--glass-bg);
  border:1px solid var(--glass-border);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

.glass-strong{
  background: var(--glass-bg-strong);
  border:1px solid var(--glass-border-strong);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}

/* Esquinas tipo "marca de plano" — señal visual distintiva */
.blueprint-corners{ position:relative; }
.blueprint-corners::before,
.blueprint-corners::after,
.blueprint-corners .bc-tl,
.blueprint-corners .bc-br{
  content:"";
  position:absolute;
  width:16px; height:16px;
  border-color: var(--accent-400);
  opacity:0;
  transition: opacity .35s ease, transform .35s ease;
  pointer-events:none;
}
.blueprint-corners::before{
  top:8px; left:8px;
  border-top:2px solid var(--accent-400);
  border-left:2px solid var(--accent-400);
  transform: translate(4px,4px);
}
.blueprint-corners::after{
  bottom:8px; right:8px;
  border-bottom:2px solid var(--accent-400);
  border-right:2px solid var(--accent-400);
  transform: translate(-4px,-4px);
}
.blueprint-corners:hover::before,
.blueprint-corners:hover::after{
  opacity:1;
  transform: translate(0,0);
}

.card-hover{
  transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s ease, background-color .35s ease;
}
.card-hover:hover{
  transform: translateY(-4px);
  border-color: var(--glass-border-strong);
  background: var(--glass-bg-strong);
}

.img-zoom{ overflow:hidden; }
.img-zoom img{ transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.img-zoom:hover img{ transform: scale(1.07); }

.status-pill{
  font-family:'JetBrains Mono', monospace;
  letter-spacing:.03em;
}

.fade-in{ animation: fadeIn .5s ease both; }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:translateY(0);} }

.stagger > *{ animation: fadeIn .5s ease both; }
.stagger > *:nth-child(1){ animation-delay:.02s; }
.stagger > *:nth-child(2){ animation-delay:.06s; }
.stagger > *:nth-child(3){ animation-delay:.10s; }
.stagger > *:nth-child(4){ animation-delay:.14s; }
.stagger > *:nth-child(5){ animation-delay:.18s; }
.stagger > *:nth-child(6){ animation-delay:.22s; }
.stagger > *:nth-child(n+7){ animation-delay:.26s; }

input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible{
  outline: 2px solid var(--accent-400);
  outline-offset: 2px;
}

input, textarea, select{
  background: rgba(255,255,255,0.04);
  border:1px solid var(--glass-border);
  color: #e7ebf3;
}
input::placeholder, textarea::placeholder{ color: var(--slate-500); }

.leaflet-container{
  background: var(--navy-800) !important;
  border-radius: 0.75rem;
}
.leaflet-popup-content-wrapper, .leaflet-popup-tip{
  background: var(--navy-800);
  color: var(--slate-300);
}
.leaflet-control-attribution{
  background: rgba(7,11,20,0.7) !important;
  color: var(--slate-500) !important;
}
.leaflet-control-attribution a{ color: var(--slate-400) !important; }

.gallery-thumb{ cursor:pointer; opacity:.55; transition: opacity .25s ease, border-color .25s ease; }
.gallery-thumb.active, .gallery-thumb:hover{ opacity:1; }

.lightbox{ backdrop-filter: blur(6px); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  html{ scroll-behavior:auto; }
}