/* ===========================================================
   Localizate Group — Custom Styles
   Complementa Tailwind CDN. Tipografía editorial,
   transiciones sobrias y micro-interacciones discretas.
   =========================================================== */

/* ----------------------- Tokens base ----------------------- */
:root {
  --ink: #131313;          /* negro corporativo */
  --paper: #FAFAF7;
  --bone: #F4F2EC;
  --ash: #E5E5E0;
  --slate-70: #4A4A4A;
  --slate-50: #737373;

  /* Paleta corporativa Localizate Group */
  --brand:        #00508F; /* azul principal */
  --brand-deep:   #003B6B;
  --brand-soft:   #6D8AA6;
  --brand-light:  #CDD7DD;
  --brand-yellow: #F4EB06; /* amarillo acento */

  /* Alias retro-compatibles */
  --champagne:    #00508F;
  --forest:       #1F3D2B;

  --serif: 'Playfair Display', Georgia, serif;
  --sans:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --transition: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ----------------------- Reset suave ----------------------- */
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  font-feature-settings: "kern", "liga", "calt";
  text-rendering: optimizeLegibility;
}

/* Scrollbar limpio en navegadores webkit */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: var(--ash); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--slate-50); }

/* ----------------------- Tipografía ----------------------- */
.font-serif { font-family: var(--serif); font-weight: 500; }
.font-serif em { font-style: italic; font-weight: 400; }
h1, h2, h3 { font-family: var(--serif); }

/* Eyebrow: pequeño label sobrio que precede a cada sección */
.section-eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate-50);
  font-weight: 500;
}

/* ----------------------- Header ----------------------- */
#site-header {
  background: rgba(250, 250, 247, 0);
  backdrop-filter: blur(0);
  border-bottom: 1px solid transparent;
}
#site-header.is-scrolled {
  background: rgba(250, 250, 247, 0.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--ash);
}
/* Lógica de logos: se muestra el correcto según el fondo del header */
#site-header .logo-dark  { display: block; }
#site-header .logo-light { display: none; }
#site-header.over-dark:not(.is-scrolled) .logo-dark  { display: none; }
#site-header.over-dark:not(.is-scrolled) .logo-light { display: block; }

#site-header.over-dark:not(.is-scrolled) .nav-link,
#site-header.over-dark:not(.is-scrolled) .lang-btn { color: rgba(250,250,247,0.92); }
#site-header.over-dark:not(.is-scrolled) .nav-link::after { background: var(--paper); }
#site-header.over-dark:not(.is-scrolled) .lang-btn.is-active { color: var(--paper); }

/* Logo invert variant for footer (negro -> blanco) */
.logo-invert { filter: invert(1) brightness(1.05); }

.nav-link {
  position: relative;
  color: var(--ink);
  transition: color 0.25s var(--transition);
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -6px;
  height: 1px;
  background: var(--ink);
  transition: right 0.4s var(--transition);
}
.nav-link:hover::after { right: 0; }

/* Language buttons */
.lang-btn {
  color: var(--slate-50);
  transition: color 0.25s var(--transition);
}
.lang-btn.is-active { color: var(--ink); }

/* Mobile menu */
#mobile-menu.is-open {
  display: flex !important;
  animation: fadeIn 0.35s var(--transition);
}
.mobile-link { color: var(--ink); }

/* ----------------------- Hero ----------------------- */
.hero { isolation: isolate; }
.hero-bg img { will-change: transform; }

/* ----------------------- Reveal animations ----------------------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--transition), transform 0.9s var(--transition);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ----------------------- Filtros del portafolio ----------------------- */
.filter-select {
  appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
  border: 1px solid var(--ash);
  border-radius: 0;
  padding: 10px 36px 10px 14px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%230A0A0A' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  transition: border-color 0.25s var(--transition), color 0.25s var(--transition);
}
.filter-select:hover,
.filter-select:focus {
  border-color: var(--ink);
  outline: none;
}

/* ----------------------- Property card ----------------------- */
.property-card {
  background: var(--paper);
  border: 1px solid var(--ash);
  display: flex;
  flex-direction: column;
  transition: border-color 0.4s var(--transition), transform 0.4s var(--transition);
}
.property-card:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}
.property-card .img-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ink);
}
.property-card .img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--transition);
}
.property-card:hover .img-wrap img { transform: scale(1.04); }
.property-card .badge {
  position: absolute;
  top: 14px; left: 14px;
  background: rgba(10,10,10,0.85);
  color: var(--paper);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 10px;
  font-weight: 500;
  backdrop-filter: blur(8px);
}
.property-card .body {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
.property-card .meta {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate-50);
  font-weight: 500;
}
.property-card h3 {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 500;
  color: var(--ink);
}
.property-card .stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--ash);
  margin-top: auto;
}
.property-card .stats div { font-size: 12px; color: var(--slate-70); line-height: 1.4; }
.property-card .stats div span {
  display: block;
  color: var(--slate-50);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.property-card .cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
  align-self: flex-start;
  transition: color 0.25s, border-color 0.25s;
}
.property-card .cta:hover { color: var(--brand); border-color: var(--brand); }

/* ----------------------- Brand logos (placeholders) ----------------------- */
.brand-logo {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--slate-50);
  text-align: center;
  filter: grayscale(1);
  opacity: 0.55;
  transition: opacity 0.4s var(--transition), color 0.4s var(--transition);
}
.brand-logo.italic { font-family: var(--serif); font-weight: 500; letter-spacing: 0; font-size: 26px; }
.brand-logo:hover { opacity: 1; color: var(--ink); }

/* ----------------------- Mapa de Colombia ----------------------- */
#map-container svg { width: 100%; height: 100%; display: block; }
.region-path {
  fill: rgba(0, 80, 143, 0.10);     /* tinte azul de marca muy sutil */
  stroke: rgba(250, 250, 247, 0.18);
  stroke-width: 0.6;
  transition: fill 0.3s var(--transition);
  cursor: pointer;
}
.region-path:hover { fill: rgba(0, 80, 143, 0.22); }
.city-dot {
  cursor: pointer;
  transition: r 0.3s var(--transition);
}
.city-dot:hover { r: 7; }
.city-dot.is-active {
  fill: var(--brand-yellow);
  stroke: var(--brand-yellow);
}
.city-pulse {
  animation: pulse 2.4s ease-out infinite;
  transform-origin: center;
}
@keyframes pulse {
  0%   { opacity: 0.6; transform: scale(1); }
  100% { opacity: 0; transform: scale(3.5); }
}
.city-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  fill: rgba(250, 250, 247, 0.75);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  pointer-events: none;
}
.city-label.is-active { fill: var(--brand-yellow); }

/* ----------------------- Insights cards ----------------------- */
.article-card {
  background: var(--paper);
  border: 1px solid var(--ash);
  transition: border-color 0.4s var(--transition);
}
.article-card:hover { border-color: var(--ink); }

/* ----------------------- Formulario premium ----------------------- */
.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-group label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate-50);
  font-weight: 500;
}
.form-group input,
.form-group textarea,
.form-group select {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ash);
  padding: 10px 0;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  border-radius: 0;
  transition: border-color 0.3s var(--transition);
  appearance: none;
  -webkit-appearance: none;
}
.form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%230A0A0A' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-bottom-color: var(--ink);
}
.form-group input:invalid:not(:placeholder-shown):not(:focus),
.form-group textarea:invalid:not(:placeholder-shown):not(:focus) {
  border-bottom-color: #B45452;
}

/* ----------------------- Estado del formulario ----------------------- */
#form-status.is-success { display: block; color: var(--forest); }
#form-status.is-error   { display: block; color: #B45452; }

/* ----------------------- Accesibilidad ----------------------- */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}
button:focus-visible, a:focus-visible { outline-offset: 4px; }

/* ----------------------- Responsive ajustes ----------------------- */
@media (max-width: 640px) {
  .property-card .stats { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .filter-select { font-size: 12px; padding: 9px 30px 9px 12px; }
}