/* ============================================================
   SPOT2 DESIGN SYSTEM — CSS VARIABLES
   Single source of truth for all design tokens
   Font: Montserrat (Google Fonts)
   ============================================================ */

/* cyrillic-ext */
/* cyrillic */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* cyrillic */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* cyrillic */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* cyrillic */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* cyrillic */
/* vietnamese */
/* latin-ext */
/* latin */
:root {
	/* ——————————————————————————————————————
     COLORS — Brand
  —————————————————————————————————————— */
	--color-primary: #424552; /* Slate gray — main text, dark bg */
	--color-primary-light: #535464; /* Muted slate */
	--color-primary-dark: #1c1f2a; /* Deep navy — footer, premium bg */

	--color-accent: #ffaa00; /* Amber — dominant CTA color */
	--color-accent-light: #ffc857; /* Warm honey — gradients, hover bg */
	--color-accent-dark: #e69900; /* Deep amber — hover/active state */

	--color-green: #25d366; /* WhatsApp green */
	--color-green-dark: #1da851; /* WhatsApp hover */

	/* ——————————————————————————————————————
     COLORS — Neutrals (12-step gray scale)
  —————————————————————————————————————— */
	--color-white: #ffffff;
	--color-gray-50: #f6f8fb;
	--color-gray-100: #f5f5f5; /* Most common page background */
	--color-gray-200: #e5e5e5; /* Borders, dividers */
	--color-gray-300: #cccdd1; /* Placeholder borders */
	--color-gray-400: #9898a2; /* Meta text, icons */
	--color-gray-500: #737373; /* Secondary text */
	--color-gray-600: #666666;
	--color-gray-700: #535464;
	--color-gray-800: #424552; /* Same as primary */
	--color-gray-900: #1c1f2a; /* Same as primary-dark */
	--color-black: #000000;

	/* ——————————————————————————————————————
     COLORS — Semantic
  —————————————————————————————————————— */
	--color-error: #dc2626;
	--color-warning: #f97316;
	--color-info: #0ea5e9;
	--color-success: #25d366;

	/* ——————————————————————————————————————
     COLORS — Sector accents
     (use as tertiary accents, not exclusively per sector)
  —————————————————————————————————————— */
	--color-industrial: #ed6c02; /* Orange — Industrial/Bodegas */
	--color-industrial-lt: #f2984d;
	--color-industrial-dk: #8e4001;
	--color-offices: #0288d1; /* Blue — Oficinas */
	--color-offices-lt: #80c3e8;
	--color-offices-dk: #015f92;
	--color-retail: #ffaa00; /* Same as accent — Locales */

	/* ——————————————————————————————————————
     COLORS — Semantic aliases (use these in components)
  —————————————————————————————————————— */
	--fg1: var(--color-primary); /* Primary text */
	--fg2: var(--color-gray-500); /* Secondary text */
	--fg3: var(--color-gray-400); /* Tertiary / meta */
	--bg1: var(--color-white); /* Card / form background */
	--bg2: var(--color-gray-100); /* Page background */
	--bg3: var(--color-primary); /* Dark section bg */
	--bg4: var(--color-primary-dark); /* Footer / premium bg */
	--border: var(--color-gray-200); /* Standard border */
	--cta: var(--color-accent); /* Primary CTA */
	--cta-hover: var(--color-accent-dark); /* CTA hover */

	/* ——————————————————————————————————————
     TYPOGRAPHY
  —————————————————————————————————————— */
	--font-brand: 'Montserrat', sans-serif; /* Only typeface — never mix */
	--font-mono: 'SF Mono', 'Fira Code', monospace;

	/* Type scale */
	--text-xs: 11px;
	--text-sm: 13px;
	--text-base: 14px;
	--text-md: 16px;
	--text-lg: 18px;
	--text-xl: 20px;
	--text-2xl: 24px;
	--text-3xl: 30px;
	--text-4xl: 36px;
	--text-5xl: 48px;
	--text-hero: 72px;

	/* Font weights */
	--weight-light: 300;
	--weight-regular: 400;
	--weight-medium: 500; /* Default body weight */
	--weight-semibold: 600;
	--weight-bold: 700;

	/* Line heights */
	--leading-tight: 1.25;
	--leading-snug: 1.375;
	--leading-normal: 1.5;
	--leading-relaxed: 1.625;

	/* Letter spacing */
	--tracking-tight: -0.025em;
	--tracking-normal: 0;
	--tracking-wide: 0.025em;
	--tracking-wider: 0.05em;
	--tracking-widest: 0.1em;

	/* ——————————————————————————————————————
     SEMANTIC TYPE ROLES
  —————————————————————————————————————— */
	/* h1 — use with font-weight: 300, letter-spacing: 0.04em */
	--h1-size: var(--text-4xl);
	--h1-weight: var(--weight-light);
	--h1-leading: var(--leading-tight);
	--h1-tracking: 0.04em;

	/* h2 — section titles */
	--h2-size: var(--text-2xl);
	--h2-weight: var(--weight-semibold);
	--h2-leading: var(--leading-snug);

	/* h3 — card titles, subsections */
	--h3-size: var(--text-xl);
	--h3-weight: var(--weight-semibold);
	--h3-leading: var(--leading-snug);

	/* body — default readable text */
	--body-size: var(--text-base);
	--body-weight: var(--weight-medium);
	--body-leading: var(--leading-relaxed);

	/* small / meta */
	--meta-size: var(--text-xs);
	--meta-weight: var(--weight-medium);

	/* ——————————————————————————————————————
     SPACING (base 4px)
  —————————————————————————————————————— */
	--space-0: 0px;
	--space-0_5: 2px;
	--space-1: 4px;
	--space-1_5: 6px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-8: 32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-15: 60px;
	--space-16: 64px;
	--space-20: 80px;

	/* ——————————————————————————————————————
     BORDER RADIUS
  —————————————————————————————————————— */
	--radius-sm: 4px; /* Badges, code blocks */
	--radius-md: 8px; /* Inputs, secondary buttons */
	--radius-lg: 12px; /* Cards — most common */
	--radius-xl: 24px; /* Large panels, modals */
	--radius-full: 9999px; /* ALL pill buttons, tags — signature look */

	/* ——————————————————————————————————————
     SHADOWS (5-level elevation system)
  —————————————————————————————————————— */
	--shadow-xs: 0px 1px 2px rgba(0, 0, 0, 0.05);
	--shadow-sm: 0px 1px 3px rgba(0, 0, 0, 0.1);
	--shadow-md: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Card default */
	--shadow-lg: 0px 10px 15px rgba(0, 0, 0, 0.1), 0px 4px 6px rgba(0, 0, 0, 0.05); /* Card hover */
	--shadow-xl: 0px 4px 35px rgba(0, 0, 0, 0.25), 0px 8px 10px -5px rgba(0, 0, 0, 0.07); /* Modals */

	/* ——————————————————————————————————————
     TRANSITIONS
  —————————————————————————————————————— */
	--ease-std: cubic-bezier(0.4, 0, 0.2, 1);
	--duration-sm: 0.15s;
	--duration-md: 0.2s;
	--transition: all var(--duration-sm) var(--ease-std);

	/* ——————————————————————————————————————
     CONTAINERS / LAYOUT
  —————————————————————————————————————— */
	--container-sm: 640px;
	--container-md: 768px;
	--container-lg: 1024px;
	--container-xl: 1280px;
	--container-2xl: 1440px;
}

/* ——————————————————————————————————————
   BASE STYLES
—————————————————————————————————————— */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	font-family: var(--font-brand);
	font-size: var(--body-size);
	font-weight: var(--body-weight);
	line-height: var(--body-leading);
	color: var(--fg1);
	background: var(--bg2);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ——————————————————————————————————————
   SEMANTIC ELEMENT STYLES
—————————————————————————————————————— */
h1 {
	font-family: var(--font-brand);
	font-size: var(--h1-size);
	font-weight: var(--h1-weight);
	line-height: var(--h1-leading);
	letter-spacing: var(--h1-tracking);
	color: var(--fg1);
}

h2 {
	font-family: var(--font-brand);
	font-size: var(--h2-size);
	font-weight: var(--h2-weight);
	line-height: var(--h2-leading);
	color: var(--fg1);
}

h3 {
	font-family: var(--font-brand);
	font-size: var(--h3-size);
	font-weight: var(--h3-weight);
	line-height: var(--h3-leading);
	color: var(--fg1);
}

p {
	font-size: var(--body-size);
	font-weight: var(--weight-regular);
	line-height: var(--body-leading);
	color: var(--fg2);
}

small {
	font-size: var(--meta-size);
	font-weight: var(--meta-weight);
	color: var(--fg3);
}

code {
	font-family: var(--font-mono);
	font-size: 13px;
	background: var(--color-gray-50);
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-sm);
	padding: 2px 6px;
}

/* ——————————————————————————————————————
   UTILITY CLASSES
—————————————————————————————————————— */

/* Text color utilities */
.text-primary {
	color: var(--fg1);
}
.text-secondary {
	color: var(--fg2);
}
.text-meta {
	color: var(--fg3);
}
.text-accent {
	color: var(--color-accent);
}
.text-white {
	color: var(--color-white);
}

/* Button — Pill CTA (Amber) — signature style */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-radius: var(--radius-full);
	font-family: var(--font-brand);
	font-weight: var(--weight-semibold);
	font-size: var(--text-sm);
	cursor: pointer;
	border: none;
	transition: var(--transition);
	text-decoration: none;
}
.btn-accent {
	background: var(--color-accent);
	color: var(--color-white);
	padding: 10px 24px;
	box-shadow: var(--shadow-sm);
}
.btn-accent:hover {
	background: var(--cta-hover);
	box-shadow: var(--shadow-md);
}

.btn-whatsapp {
	background: var(--color-green);
	color: var(--color-white);
	padding: 10px 24px;
}
.btn-whatsapp:hover {
	background: var(--color-green-dark);
}

.btn-outline {
	background: transparent;
	border: 2px solid var(--color-primary);
	color: var(--color-primary);
	padding: 8px 24px;
}
.btn-outline:hover {
	background: var(--color-primary);
	color: var(--color-white);
}

.btn-dark {
	background: var(--color-primary);
	color: var(--color-white);
	padding: 10px 24px;
}
.btn-dark:hover {
	background: var(--color-primary-dark);
}

/* Card */
.card {
	background: var(--bg1);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	transition: box-shadow var(--duration-md) var(--ease-std);
}
.card:hover {
	box-shadow: var(--shadow-lg);
}

/* Input */
.input {
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: 10px 12px;
	font-size: var(--text-base);
	font-family: var(--font-brand);
	font-weight: var(--weight-medium);
	color: var(--fg1);
	background: var(--bg1);
	outline: none;
	transition: var(--transition);
	width: 100%;
}
.input:focus {
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px rgba(255, 170, 0, 0.12);
}

/* Tag / Pill label */
.tag {
	display: inline-flex;
	align-items: center;
	border-radius: var(--radius-full);
	padding: 3px 12px;
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	background: var(--color-accent);
	color: var(--color-white);
}
.tag-dark {
	background: var(--color-primary);
	color: var(--color-white);
}
.tag-outline {
	background: transparent;
	border: 1px solid var(--border);
	color: var(--fg1);
}

/* Selection */
::selection {
	background: var(--color-accent);
	color: var(--color-white);
}

/* Scrollbar */
::-webkit-scrollbar {
	width: 6px;
}
::-webkit-scrollbar-track {
	background: transparent;
}
::-webkit-scrollbar-thumb {
	background: var(--color-gray-300);
	border-radius: 3px;
}

html,
body {
	margin: 0;
	padding: 0;
}
body {
	font-family: 'Montserrat', sans-serif;
	background: var(--bg2);
	color: var(--fg1);
	-webkit-font-smoothing: antialiased;
}
a {
	color: inherit;
}
button {
	font-family: inherit;
}
img {
	max-width: 100%;
}
@keyframes pulse {
	0%,
	100% {
		opacity: 1;
		transform: scale(1);
	}
	50% {
		opacity: 0.55;
		transform: scale(0.85);
	}
}
[data-lucide] {
	display: inline-block;
	vertical-align: middle;
}

details {
	border-top: 1px solid #e5e5e5;
}
details:last-child {
	border-bottom: 1px solid #e5e5e5;
}
details summary {
	padding: 18px 0;
	font-size: 15px;
	font-weight: 600;
	color: #424552;
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
details summary::-webkit-details-marker {
	display: none;
}
details summary::after {
	content: '+';
	font-size: 18px;
	font-weight: 400;
	color: #424552;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	background: #f5f5f5;
	display: flex;
	align-items: center;
	justify-content: center;
}
details[open] summary::after {
	content: '×';
}
details p {
	font-size: 14px;
	color: #535464;
	line-height: 1.7;
	padding-bottom: 20px;
	margin: 0;
}
html {
	scroll-padding-top: 120px;
}
/* Anchor nav: allow horizontal scroll only on mobile (prevents scroll trap on desktop) */
@media (max-width: 768px) {
	[style*='scrollbar-width: none'] {
		overflow-x: auto;
	}
}
*::-webkit-scrollbar {
	height: 4px;
}

/* Mobile-specific overrides */
@media (max-width: 768px) {
	html {
		scroll-padding-top: 110px;
	}
	nav[aria-label]::-webkit-scrollbar {
		display: none;
	}
	/* Force single-column on mobile for multi-column grids */
	[style*='grid-template-columns: 1fr 1.6fr'],
	[style*='grid-template-columns: 1.4fr 1fr'],
	[style*='grid-template-columns: 1.4fr 1.5fr'],
	[style*='grid-template-columns: 1fr 1fr'],
	[style*='grid-template-columns: 1.5fr 1fr'],
	[style*='grid-template-columns: 1.5fr 1fr 1fr 1fr'] {
		grid-template-columns: 1fr !important;
	}
	/* Keep amenity/data grids as 2-col or responsive */
	[style*='grid-template-columns: repeat(4'] {
		grid-template-columns: repeat(1, 1fr) !important;
	}
	[style*='grid-template-columns: repeat(5'] {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	/* Fix tall stat cards — remove min-height */
	[style*='min-height: 460px'],
	[style*='min-height: 400px'],
	[style*='min-height: 100vh'] {
		min-height: auto !important;
	}
	/* Hero image card: hide SPOT2 ID and metadata text on mobile */
	[style*='background-image: linear-gradient'][style*='background-size: cover'] {
		min-height: 280px !important;
		padding: 20px !important;
	}
	[style*='background-image: linear-gradient'][style*='background-size: cover'] [style*='text-align: right'] {
		display: none !important;
	}
	[style*='background-image: linear-gradient'][style*='background-size: cover']
		[style*='letter-spacing: 0.18em'][style*='opacity'] {
		display: none !important;
	}
	/* Fit SVG chart within container on mobile */
	svg[viewBox] {
		width: 100% !important;
		height: auto !important;
	}
	/* Stack horizontal stat cards on mobile */
	[style*='flex-direction: row'][style*='border-left: 3px solid'] {
		flex-direction: column !important;
		gap: 12px !important;
		align-items: flex-start !important;
	}
	[style*='flex-direction: row'][style*='border-left: 3px solid'] [style*='width: 1px; height: 42px'] {
		width: 100% !important;
		height: 1px !important;
	}
	[style*='display: grid'][style*='gap: 48px'] {
		gap: 24px !important;
	}
	[style*='display: grid'][style*='gap: 20px'] {
		gap: 16px !important;
	}
	/* Full-width content on mobile */
	[style*='max-width: 1280px'] {
		padding-left: 16px !important;
		padding-right: 16px !important;
		max-width: 100% !important;
	}
	[style*='padding: 0px 32px'],
	[style*='padding: 0 32px'] {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
	[style*='max-width: 680px'],
	[style*='max-width: 720px'],
	[style*='max-width: 800px'],
	[style*='max-width: 900px'] {
		max-width: 100% !important;
	}
	/* Disable sticky sidebar cards on mobile */
	[style*='position: sticky'][style*='top: 130px'],
	[style*='position: sticky'][style*='top: 130'] {
		position: static !important;
	}
	/* Sub-market table: make rows stack */
	[style*='grid-template-columns: 1.4fr 1.5fr 1.2fr'] {
		grid-template-columns: 1fr 1fr !important;
		gap: 8px !important;
	}
	/* Fix nav overflow on mobile */
	header [style*='gap: 24px'] {
		gap: 8px !important;
	}
	header nav {
		display: none !important;
	}
	/* Show only logo + CTA on mobile header */
	header [style*='gap: 26px'] {
		display: none !important;
	}
	/* Font size reductions */
	h1,
	[style*='font-size: 48px'],
	[style*='font-size: 52px'],
	[style*='font-size: 56px'] {
		font-size: 28px !important;
		line-height: 1.2 !important;
	}
	h2,
	[style*='font-size: 28px'],
	[style*='font-size: 32px'],
	[style*='font-size: 36px'] {
		font-size: 22px !important;
		line-height: 1.3 !important;
	}
}