/**
 * Vivir Cancún — assets/css/tokens.css
 *
 * Sistema de diseño global (fase de diseño visual). Se carga en TODO
 * el frontend, no solo en Home, para que header/footer y las páginas
 * que aún no rediseñamos compartan la misma paleta y tipografía base.
 * No contiene reglas de layout específicas de ninguna plantilla.
 *
 * @package VivirCancun
 */

:root {
	/* ---------- Color: laguna, arena, atardecer — no genérico ---------- */
	--vc-ink: #14231f;         /* texto principal, casi negro con tinte manglar */
	--vc-ink-soft: #46564f;    /* texto secundario */
	--vc-bg: #faf8f3;          /* blanco concha */
	--vc-surface: #ffffff;     /* tarjetas / superficies elevadas */
	--vc-sand: #ede4d3;        /* fondos de sección alternos */
	--vc-sand-line: #ddd0b6;   /* líneas sobre arena */
	--vc-sea-deep: #0b4f4d;    /* color de marca — laguna profunda */
	--vc-sea: #1c8c82;         /* acento medio — links, hover, iconos */
	--vc-sea-pale: #e3efec;    /* fondo suave con tinte teal */
	--vc-coral: #e1583f;       /* único acento cálido — dosificado */
	--vc-coral-dark: #c04630;
	--vc-line: #e2dccd;        /* hairline cálido, no gris de UI */

	/* ---------- Tipografía ---------- */
	--vc-font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
	--vc-font-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--vc-font-mono: "Space Mono", "SFMono-Regular", Consolas, monospace;

	/* ---------- Escala / espaciado ---------- */
	--vc-radius: 0px;
	--vc-radius-lg: 0px;
	--vc-container-max: 1360px;
	--vc-section-space: clamp(64px, 9vw, 128px);
}

/* ---------- Reset y base tipográfica (reemplaza estilos mínimos previos) ---------- */
* , *::before, *::after { box-sizing: border-box; }

body {
	background: var(--vc-bg);
	color: var(--vc-ink);
	font-family: var(--vc-font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	margin: 0;
}

h1, h2, h3 {
	font-family: var(--vc-font-display);
	color: var(--vc-ink);
	line-height: 1.12;
	margin: 0 0 0.4em;
	font-weight: 600;
}

a { color: var(--vc-sea-deep); }
a:hover { color: var(--vc-sea); }

.vc-container {
	max-width: var(--vc-container-max);
	margin: 0 auto;
	padding: 0 24px;
}

:focus-visible {
	outline: 2px solid var(--vc-coral);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Header — editorial, sin blur, sin sticky pesado ---------- */
.vc-site-header {
	position: relative;
	background: var(--vc-bg);
	border-bottom: 1px solid var(--vc-line);
	padding: 26px 0;
}
.vc-site-header .vc-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
}
.vc-logo {
	font-family: var(--vc-font-display);
	font-weight: 500;
	font-size: 1.2rem;
	letter-spacing: 0.01em;
	text-decoration: none;
	color: var(--vc-ink);
}
.vc-nav-primary ul {
	list-style: none;
	display: flex;
	gap: 36px;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}
.vc-nav-primary a {
	text-decoration: none;
	font-size: 0.76rem;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--vc-ink);
}
.vc-nav-primary a:hover { color: var(--vc-sea-deep); }

/* ---------- Footer — editorial, plano ---------- */
.vc-site-footer {
	background: var(--vc-bg);
	color: var(--vc-ink);
	border-top: 1px solid var(--vc-line);
	padding: 48px 0 32px;
	margin-top: 0;
	font-size: 0.85rem;
}
.vc-nav-footer ul {
	list-style: none;
	display: flex;
	gap: 24px;
	margin: 0 0 20px;
	padding: 0;
	flex-wrap: wrap;
}
.vc-nav-footer a {
	color: var(--vc-ink);
	text-decoration: none;
	font-size: 0.76rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.vc-nav-footer a:hover { color: var(--vc-sea-deep); }
.vc-site-footer p { color: var(--vc-ink-soft); margin: 0; }