/*
 * ============================================================================
 * URBIFY · Sistema de diseño · main.css
 * ============================================================================
 * Tokens globales del sistema de diseño + estilos base mínimos.
 * NO contiene estilos de componentes (esos viven en archivos por feature).
 * NO contiene !important salvo overrides explícitos a Divi (ninguno todavía).
 *
 * Estructura del archivo:
 *   §1. Custom properties (tokens)        — paleta, tipografía, espaciado, sombras
 *   §2. Reset y normalización mínima
 *   §3. Tipografía base
 *   §4. Utilidades de accesibilidad
 *
 * @package Divi_Child_Urbify
 * @since   1.0.0
 */

/* ============================================================================
   §1. TOKENS DEL SISTEMA DE DISEÑO
   ============================================================================ */
:root {

	/* ----- Paleta primaria (derivada del logo) ----- */
	--urb-navy-900: #0A1F44;     /* azul corporativo principal */
	--urb-navy-700: #15315E;     /* hover sobre navy */
	--urb-navy-500: #2A4A7F;     /* acento secundario */
	--urb-mint-500: #2ECC71;     /* verde menta del logo */
	--urb-mint-400: #4FD888;     /* hover verde */
	--urb-mint-100: #E8F8EF;     /* fondos suaves verdes */

	/* ----- Neutros ----- */
	--urb-cream:    #FAF8F5;
	--urb-white:    #FFFFFF;
	--urb-gray-50:  #F5F7FA;
	--urb-gray-200: #E5E9F0;
	--urb-gray-400: #9AA5B5;
	--urb-gray-600: #4B5563;
	--urb-gray-900: #111827;

	/* ----- Funcionales ----- */
	--urb-gold:     #C9A961;     /* badge "destacada" */
	--urb-success:  #10B981;
	--urb-warning:  #F59E0B;
	--urb-danger:   #EF4444;

	/* ----- Certificado energético (RD 390/2021) ----- */
	--energy-a: #00A651;
	--energy-b: #4CB847;
	--energy-c: #BFD630;
	--energy-d: #FFF200;
	--energy-e: #FBB040;
	--energy-f: #F15A29;
	--energy-g: #ED1C24;

	/* ----- Tipografía ----- */
	--font-display: 'Playfair Display', 'Georgia', 'Times New Roman', serif;
	--font-body:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;

	/* Escala fluida (clamp(min, fluid, max)) */
	--text-xs:   clamp(0.75rem,  0.70rem + 0.20vw, 0.80rem);
	--text-sm:   clamp(0.875rem, 0.82rem + 0.25vw, 0.95rem);
	--text-base: clamp(1rem,     0.95rem + 0.30vw, 1.0625rem);
	--text-lg:   clamp(1.125rem, 1.05rem + 0.40vw, 1.25rem);
	--text-xl:   clamp(1.375rem, 1.25rem + 0.60vw, 1.625rem);
	--text-2xl:  clamp(1.75rem,  1.50rem + 1.00vw, 2.25rem);
	--text-3xl:  clamp(2.25rem,  1.85rem + 1.80vw, 3.25rem);
	--text-4xl:  clamp(3rem,     2.40rem + 2.80vw, 4.50rem);

	/* Pesos */
	--fw-light:    300;
	--fw-regular:  400;
	--fw-medium:   500;
	--fw-semibold: 600;
	--fw-bold:     700;

	/* Letter-spacing */
	--tracking-tight:  -0.02em;
	--tracking-normal: 0;
	--tracking-wide:   0.05em;
	--tracking-wider:  0.12em;

	/* Line-height */
	--leading-tight:   1.15;
	--leading-snug:    1.35;
	--leading-normal:  1.55;
	--leading-relaxed: 1.75;

	/* ----- Espaciado ----- */
	--space-1:  0.25rem;
	--space-2:  0.50rem;
	--space-3:  0.75rem;
	--space-4:  1.00rem;
	--space-5:  1.25rem;
	--space-6:  1.50rem;
	--space-8:  2.00rem;
	--space-10: 2.50rem;
	--space-12: 3.00rem;
	--space-16: 4.00rem;
	--space-20: 5.00rem;
	--space-24: 6.00rem;
	--space-32: 8.00rem;

	/* ----- Layout ----- */
	--container-max:    1320px;
	--container-narrow: 920px;
	--gutter:           clamp(1rem, 4vw, 2rem);

	/* ----- Bordes y radios ----- */
	--radius-sm:   6px;
	--radius-md:   10px;
	--radius-lg:   16px;
	--radius-xl:   24px;
	--radius-full: 9999px;

	/* ----- Sombras (estilo navy con baja opacidad) ----- */
	--shadow-sm: 0 1px 2px rgba(10, 31, 68, 0.05);
	--shadow-md: 0 4px 12px rgba(10, 31, 68, 0.08);
	--shadow-lg: 0 12px 32px rgba(10, 31, 68, 0.12);
	--shadow-xl: 0 24px 64px rgba(10, 31, 68, 0.16);

	/* ----- Transiciones ----- */
	--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition-slow: 450ms cubic-bezier(0.4, 0, 0.2, 1);

	/* ----- Z-index ----- */
	--z-dropdown:   100;
	--z-sticky:     200;
	--z-modal:      900;
	--z-toast:      1000;
	--z-cookie:     1100;
}

/* ============================================================================
   §2. RESET Y NORMALIZACIÓN MÍNIMA
   ============================================================================ */

/* No interferimos con el reset de Divi: solo añadimos lo imprescindible. */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/* Respetamos la preferencia de reducir movimiento del sistema. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ============================================================================
   §3. TIPOGRAFÍA BASE
   ============================================================================ */

body {
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: var(--fw-regular);
	line-height: var(--leading-normal);
	color: var(--urb-gray-900);
	background-color: var(--urb-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.urb-display {
	font-family: var(--font-display);
	font-weight: var(--fw-semibold);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
	color: var(--urb-navy-900);
}

code, pre, kbd, samp,
.urb-mono {
	font-family: var(--font-mono);
	font-size: 0.92em;
}

/* ============================================================================
   §4. UTILIDADES DE ACCESIBILIDAD
   ============================================================================ */

/* Skip link para usuarios de teclado. WCAG 2.4.1. */
.urb-skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	z-index: var(--z-toast);
	padding: var(--space-3) var(--space-4);
	background: var(--urb-navy-900);
	color: var(--urb-white);
	font-weight: var(--fw-semibold);
	text-decoration: none;
	transition: top var(--transition-fast);
}
.urb-skip-link:focus {
	top: 0;
}

/* Texto solo para lectores de pantalla. */
.urb-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Foco visible accesible (WCAG 2.4.7). Sustituye al outline por defecto del navegador. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--urb-mint-500);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

/* ============================================================================
   §5. COMPONENTES UNIVERSALES
   ============================================================================ */

/* ---- Container ---- */
.urb-container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.urb-container--narrow {
	max-width: var(--container-narrow);
}

/* ---- Iconos SVG inline ---- */
.urb-icon {
	display: inline-block;
	flex-shrink: 0;
	vertical-align: middle;
	width: 1em;
	height: 1em;
}

/* ---- Botones ---- */
.urb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-6);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--tracking-wide);
	line-height: 1;
	text-decoration: none;
	border: 1.5px solid transparent;
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: transform var(--transition-fast),
		box-shadow var(--transition-fast),
		background-color var(--transition-fast),
		border-color var(--transition-fast),
		color var(--transition-fast);
	white-space: nowrap;
}

.urb-btn:hover,
.urb-btn:focus-visible {
	transform: translateY( -1px );
	box-shadow: var(--shadow-md);
}

.urb-btn:active {
	transform: translateY( 0 );
	box-shadow: var(--shadow-sm);
}

.urb-btn--primary {
	background: var(--urb-navy-900);
	color: var(--urb-white);
}
.urb-btn--primary:hover,
.urb-btn--primary:focus-visible {
	background: var(--urb-navy-700);
	color: var(--urb-white);
}

.urb-btn--secondary {
	background: transparent;
	color: var(--urb-navy-900);
	border-color: var(--urb-navy-900);
}
.urb-btn--secondary:hover,
.urb-btn--secondary:focus-visible {
	background: var(--urb-navy-900);
	color: var(--urb-white);
}

.urb-btn--mint {
	background: var(--urb-mint-500);
	color: var(--urb-white);
}
.urb-btn--mint:hover,
.urb-btn--mint:focus-visible {
	background: var(--urb-mint-400);
	color: var(--urb-white);
}

.urb-btn--ghost {
	background: transparent;
	color: var(--urb-navy-900);
	border-color: transparent;
}
.urb-btn--ghost:hover,
.urb-btn--ghost:focus-visible {
	background: var(--urb-gray-50);
}

.urb-btn--block {
	width: 100%;
}

.urb-btn--sm {
	padding: var(--space-2) var(--space-4);
	font-size: var(--text-xs);
}

/* ---- Badges (estado, operación, destacada, descuento) ---- */
.urb-badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: var(--fw-bold);
	letter-spacing: var(--tracking-wider);
	line-height: 1.4;
	text-transform: uppercase;
	border-radius: var(--radius-sm);
	white-space: nowrap;
}

.urb-badge--reservada {
	background: var(--urb-warning);
	color: var(--urb-white);
}

.urb-badge--vendida {
	background: var(--urb-danger);
	color: var(--urb-white);
}

.urb-badge--alquilada {
	background: var(--urb-gray-600);
	color: var(--urb-white);
}

.urb-badge--featured {
	background: var(--urb-gold);
	color: var(--urb-navy-900);
}

.urb-badge--discount {
	background: var(--urb-mint-500);
	color: var(--urb-white);
}

/* ---- Prose (descripción de propiedad y contenido editor) ---- */
.urb-prose {
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
	color: var(--urb-gray-900);
}

.urb-prose > * + * {
	margin-top: var(--space-4);
}

.urb-prose p {
	margin: 0;
}

.urb-prose h2,
.urb-prose h3,
.urb-prose h4 {
	margin-top: var(--space-8);
	margin-bottom: var(--space-3);
	color: var(--urb-navy-900);
}

.urb-prose ul,
.urb-prose ol {
	margin-left: var(--space-6);
}

.urb-prose li {
	margin-bottom: var(--space-2);
}

.urb-prose a {
	color: var(--urb-navy-700);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.urb-prose a:hover,
.urb-prose a:focus-visible {
	color: var(--urb-mint-500);
}

/* ---- Aviso admin (visible solo a editores) ---- */
.urb-admin-notice {
	margin: var(--space-4) 0;
	padding: var(--space-3) var(--space-4);
	background: #fff7ed;
	border-left: 4px solid var(--urb-warning);
	border-radius: var(--radius-sm);
	font-size: var(--text-sm);
	color: #78350f;
}

/* ============================================================================
   §5. OVERRIDES GLOBALES DEL PLUGIN URBIFY-REAL-ESTATE
   ============================================================================
   El plugin inyecta por JS un botón flotante de comparador (.urb-floating-compare).
   El cliente ha solicitado retirar el comparador del frontal.
   Se oculta con !important porque el JS del plugin lo construye dinámicamente. */
.urb-floating-compare,
[class*="urb-floating-compare"],
.urb-floating-actions__btn--compare {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/* Acción "Comparar" en cards y single (botón inline) — el cliente quiere quitarlo. */
.urb-card__action--compare,
.urb-card__compare-btn,
.urb-action-btn--compare {
	display: none !important;
}