/*
 * kinos.css — Estilos globales y utilidades de Kinos Real Estate
 *
 * Este archivo complementa los tokens CSS (tokens.css, reset.css, base.css, typography.css)
 * con utilidades específicas del proyecto y componentes globales.
 *
 * Principio: las variables CSS de tokens.css son la fuente de verdad.
 * Este archivo solo define clases de utilidad, no redeclara variables.
 */

/* =============================================
   VARIABLES LEGACY — Mapeo temporal para compatibilidad
   =============================================
   NOTA: Estas variables se mantienen durante la transición
   para no romper componentes existentes. En fase 3 se eliminarán
   y los componentes usarán directamente los tokens del sistema.
   ============================================= */
:root {
	--kinos-black:      var(--text-authority);
	--kinos-dark:       var(--surface-authority-deep);
	--kinos-gray-900:   var(--surface-authority);
	--kinos-gray-700:   var(--text-secondary);
	--kinos-gray-500:   var(--text-muted);
	--kinos-gray-300:   var(--border-default);
	--kinos-gray-100:   var(--surface-neutral);
	--kinos-white:      var(--color-kinos-white);
	--kinos-gold:       var(--color-gold);
	--kinos-gold-light: var(--color-gold-hover);
	--kinos-font-sans:  var(--font-body);
	--kinos-font-serif: var(--font-display);
	--kinos-section-py: clamp(4rem, 8vw, 7rem);
	--kinos-radius-sm:  var(--radius-base);
	--kinos-radius-md:  var(--radius-lg);
	--kinos-transition: var(--transition-base);
	--kinos-navbar-h:   var(--header-total);
}

/* =============================================
   UTILIDADES PROPIAS
   ============================================= */

/* Sección estándar */
.kinos-section {
	padding-block: var(--kinos-section-py);
}

/* Páginas interiores: padding superior para compensar el navbar fijo */
.page-interior {
	padding-top: var(--kinos-navbar-h);
}

/* Línea decorativa bajo títulos de sección */
.kinos-section-title {
	position: relative;
	padding-bottom: 1rem;
	margin-bottom: 2.5rem;
}

.kinos-section-title::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 2.5rem;
	height: 1px;
	background-color: var(--kinos-gold);
}

/* Centrado */
.kinos-section-title.centered {
	text-align: center;
}

.kinos-section-title.centered::after {
	left: 50%;
	transform: translateX(-50%);
}

/* Botón primario de Kinos */
.btn-kinos {
	display: inline-block;
	padding: 0.75rem 2rem;
	font-family: var(--kinos-font-sans);
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid var(--kinos-black);
	color: var(--kinos-black);
	background: transparent;
	border-radius: var(--kinos-radius-sm);
	cursor: pointer;
	transition: background var(--kinos-transition), color var(--kinos-transition);
}

.btn-kinos:hover {
	background: var(--kinos-black);
	color: var(--kinos-white);
}

.btn-kinos.btn-kinos-dark {
	border-color: var(--kinos-white);
	color: var(--kinos-white);
}

.btn-kinos.btn-kinos-dark:hover {
	background: var(--kinos-white);
	color: var(--kinos-black);
}

/* Variante dorada — sobre fondos oscuros cuando queremos más calidez */
.btn-kinos.btn-kinos-gold {
	border-color: var(--kinos-gold);
	color: var(--kinos-gold);
}

.btn-kinos.btn-kinos-gold:hover {
	background: var(--kinos-gold);
	color: var(--kinos-black);
}

/* ─── Eyebrow ─────────────────────────────────────────────────────────────
   Texto decorativo pequeño encima de títulos de sección.
   Patrón: dorado, mayúsculas, spaced — uso: <p class="page-eyebrow">
   ──────────────────────────────────────────────────────────────────────── */
.page-eyebrow {
	font-family: var(--kinos-font-sans);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--kinos-gold);
	margin-bottom: 1rem;
}

/* ─── Interior hero genérico ──────────────────────────────────────────────
   Bloque oscuro compacto para cabeceras de páginas interiores.
   Combinar con .page-interior para el padding del navbar.
   ──────────────────────────────────────────────────────────────────────── */
.interior-hero {
	background-color: var(--kinos-gray-900);
	padding-bottom: 3.5rem;
	color: var(--kinos-white);
}

.interior-hero__label {
	/* alias semántico de page-eyebrow para interior heroes */
	font-family: var(--kinos-font-sans);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--kinos-gold);
	margin-bottom: 1rem;
	margin-top: 3rem;
}

.interior-hero__title {
	font-family: var(--kinos-font-serif);
	font-size: clamp(2rem, 4vw, 3.2rem);
	font-weight: 300;
	color: var(--kinos-white);
	line-height: 1.15;
	max-width: 700px;
	margin-bottom: 1.25rem;
}

.interior-hero__subtitle {
	font-size: 1rem;
	color: rgba(255, 255, 255, 0.65);
	max-width: 580px;
	line-height: 1.75;
	margin: 0;
}

/* ─── CTA band genérica ───────────────────────────────────────────────────
   Banda oscura de cierre de página. Uso: <section class="cta-band">
   ──────────────────────────────────────────────────────────────────────── */
.cta-band {
	background-color: var(--kinos-gray-900);
	padding-block: var(--kinos-section-py);
	border-top: 1px solid rgba(200, 169, 110, 0.35);
	text-align: center;
}

.cta-band__title {
	font-family: var(--kinos-font-serif);
	font-size: clamp(1.8rem, 3.5vw, 2.6rem);
	font-weight: 300;
	color: var(--kinos-white);
	margin-bottom: 0.5rem;
}

.cta-band__body {
	font-size: 1rem;
	color: rgba(255, 255, 255, 0.6);
	max-width: 520px;
	margin-inline: auto;
	margin-bottom: 2rem;
	line-height: 1.7;
}

/* ─── Badge de estado ─────────────────────────────────────────────────────
   Uso: <span class="kinos-badge kinos-badge--new">Nuevo</span>
   ──────────────────────────────────────────────────────────────────────── */
.kinos-badge {
	display: inline-block;
	padding: 0.2em 0.65em;
	font-size: 0.65rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-radius: 2px;
}

.kinos-badge--gold {
	background: var(--kinos-gold);
	color: var(--kinos-black);
}

.kinos-badge--dark {
	background: var(--kinos-dark);
	color: var(--kinos-white);
}

.kinos-badge--outline {
	border: 1px solid var(--kinos-gray-300);
	color: var(--kinos-gray-700);
}

/* =============================================
   LAYOUT — Container & Grid System
   Reemplaza Bootstrap grid en componentes globales
   ============================================= */

.container {
	width: 100%;
	max-width: var(--container-max, 1400px);
	margin-inline: auto;
	padding-inline: var(--space-4, 1rem);
}

@media (min-width: 640px) {
	.container { padding-inline: var(--space-6, 1.5rem); }
}

@media (min-width: 1024px) {
	.container { padding-inline: var(--space-8, 2rem); }
}

/* Row / Grid system */
.row {
	display: flex;
	flex-wrap: wrap;
	margin-inline: calc(var(--space-3, 0.75rem) * -1);
}

.row > * {
	flex-shrink: 0;
	width: 100%;
	max-width: 100%;
	padding-inline: var(--space-3, 0.75rem);
}

/* Columnas */
.col-6  { flex: 0 0 auto; width: 50%; }
.col-12 { flex: 0 0 auto; width: 100%; }

@media (min-width: 1024px) {
	.col-lg-2 { flex: 0 0 auto; width: 16.666667%; }
	.col-lg-3 { flex: 0 0 auto; width: 25%; }
	.col-lg-4 { flex: 0 0 auto; width: 33.333333%; }
	.offset-lg-1 { margin-left: 8.333333%; }
}

/* Gap para row */
.gy-5 { row-gap: var(--space-12, 3rem); }

/* =============================================
   DISPLAY UTILITIES
   ============================================= */

.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-block { display: block !important; }
.d-inline-block { display: inline-block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-none { display: none !important; }
.d-grid { display: grid !important; }

@media (min-width: 1024px) {
	.d-lg-flex { display: flex !important; }
	.d-lg-none { display: none !important; }
	.d-lg-block { display: block !important; }
	.d-lg-inline-block { display: inline-block !important; }
}

/* =============================================
   FLEXBOX UTILITIES
   ============================================= */

.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.block { display: block; }
.inline-block { display: inline-block; }
.hidden { display: none; }

.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.grow { flex-grow: 1; }
.shrink-0 { flex-shrink: 0; }

/* =============================================
   SPACING UTILITIES — Padding
   ============================================= */

.p-0  { padding: 0 !important; }
.p-1  { padding: var(--space-1, 0.25rem) !important; }
.p-2  { padding: var(--space-2, 0.5rem) !important; }
.p-3  { padding: var(--space-3, 0.75rem) !important; }
.p-4  { padding: var(--space-4, 1rem) !important; }
.p-5  { padding: var(--space-5, 1.25rem) !important; }

.px-2 { padding-inline: var(--space-2, 0.5rem) !important; }
.px-3 { padding-inline: var(--space-3, 0.75rem) !important; }
.px-4 { padding-inline: var(--space-4, 1rem) !important; }
.px-5 { padding-inline: var(--space-5, 1.25rem) !important; }

.py-2 { padding-block: var(--space-2, 0.5rem) !important; }
.py-3 { padding-block: var(--space-3, 0.75rem) !important; }
.py-4 { padding-block: var(--space-4, 1rem) !important; }
.py-5 { padding-block: var(--space-5, 1.25rem) !important; }

.pt-2 { padding-top: var(--space-2, 0.5rem) !important; }
.pt-3 { padding-top: var(--space-3, 0.75rem) !important; }
.pt-4 { padding-top: var(--space-4, 1rem) !important; }

.pb-2 { padding-bottom: var(--space-2, 0.5rem) !important; }
.pb-3 { padding-bottom: var(--space-3, 0.75rem) !important; }
.pb-4 { padding-bottom: var(--space-4, 1rem) !important; }

/* =============================================
   SPACING UTILITIES — Margin
   ============================================= */

.m-0  { margin: 0 !important; }
.m-1  { margin: var(--space-1, 0.25rem) !important; }
.m-2  { margin: var(--space-2, 0.5rem) !important; }
.m-3  { margin: var(--space-3, 0.75rem) !important; }
.m-4  { margin: var(--space-4, 1rem) !important; }

.mx-2 { margin-inline: var(--space-2, 0.5rem) !important; }
.mx-3 { margin-inline: var(--space-3, 0.75rem) !important; }
.mx-4 { margin-inline: var(--space-4, 1rem) !important; }
.mx-auto { margin-inline: auto !important; }

.my-2 { margin-block: var(--space-2, 0.5rem) !important; }
.my-3 { margin-block: var(--space-3, 0.75rem) !important; }
.my-4 { margin-block: var(--space-4, 1rem) !important; }

.mt-2 { margin-top: var(--space-2, 0.5rem) !important; }
.mt-3 { margin-top: var(--space-3, 0.75rem) !important; }
.mt-4 { margin-top: var(--space-4, 1rem) !important; }
.mt-5 { margin-top: var(--space-5, 1.25rem) !important; }
.mt-6 { margin-top: var(--space-6, 1.5rem) !important; }
.mt-8 { margin-top: var(--space-8, 2rem) !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: var(--space-2, 0.5rem) !important; }
.mb-3 { margin-bottom: var(--space-3, 0.75rem) !important; }
.mb-4 { margin-bottom: var(--space-4, 1rem) !important; }
.mb-6 { margin-bottom: var(--space-6, 1.5rem) !important; }
.mb-8 { margin-bottom: var(--space-8, 2rem) !important; }

/* =============================================
   TEXT UTILITIES
   ============================================= */

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-white { color: #ffffff !important; }
.text-decoration-none { text-decoration: none !important; }

.fw-medium { font-weight: 500 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-bold { font-weight: 700 !important; }

/* =============================================
   BORDER & BACKGROUND UTILITIES
   ============================================= */

.border-0 { border: 0 !important; }
.border-top { border-top: 1px solid currentColor !important; }
.border-bottom { border-bottom: 1px solid currentColor !important; }

.bg-transparent { background-color: transparent !important; }

/* =============================================
   OPACITY UTILITIES
   ============================================= */

.opacity-25 { opacity: 0.25 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-75 { opacity: 0.75 !important; }

/* =============================================
   LAYOUT UTILITIES
   ============================================= */

.w-full { width: 100%; }
.w-100 { width: 100% !important; }
.h-full { height: 100%; }
.min-vh-100 { min-height: 100vh; }

.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }

.vr {
	display: inline-block;
	align-self: stretch;
	width: 1px;
	min-height: 1em;
	background-color: currentColor;
	opacity: 0.25;
}

.list-unstyled {
	list-style: none;
	padding-left: 0;
}

/* =============================================
   Responsive helpers
   ============================================= */
@media (min-width: 768px) {
	.md\\:flex { display: flex; }
	.md\\:grid { display: grid; }
	.md\\:hidden { display: none; }
	.md\\:flex-row { flex-direction: row; }
	.md\\:items-center { align-items: center; }
}

@media (min-width: 1024px) {
	.lg\\:flex { display: flex; }
	.lg\\:grid { display: grid; }
	.lg\\:hidden { display: none; }
	.lg\\:flex-row { flex-direction: row; }
}