/* ==========================================================================
   Design tokens + the "glass" button/panel system.
   Source of truth: design/mocks/glass-buttons/styles.css (client-supplied),
   consolidated with the token set already used across barberia-interior.html
   and nosotros-barberos-servicios.html. Every other stylesheet in this theme
   builds on these — don't redeclare colors/blur values elsewhere.

   Sizing note: the mocks each hardcoded their own .glass height (66px on the
   home hero, 50px in the barbería nav, 46px on tienda.html cards) — here
   that's consolidated into one scale (--lg/--sm/--xs) instead of three
   one-off values, so new buttons pick a size instead of inventing one.
   ========================================================================== */

:root {
	--stone: #ded8cd;
	--ink: #35302a;
	--ink-muted: rgba(53, 48, 42, 0.64);
	--dorado: #C9A15B;
	--dorado-ink: #8a6a2f;
	--glass-blur: 14px;
	--glass-pill-h: 56px;
}

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

html,
body {
	margin: 0;
	background-color: var(--stone);
	color: var(--ink);
	font-family: 'Jost', system-ui, sans-serif;
}

a {
	color: inherit;
}

/* ---------- Fixed stone/concrete backdrop, shared by every page past the home ----------
   Relative to this file's own location (assets/css/tokens.css → assets/img/…), so no PHP
   needed here — CSS files are served as static assets and never get evaluated by PHP. */
body.lnco-textured-bg {
	background-image: url('../img/bg-texture.jpg');
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}

/* ---------- Glass surface (static panel — nav, cards, text blocks) ---------- */
.glass-surface {
	background: linear-gradient(
		150deg,
		rgba(255, 255, 255, 0.42) 0%,
		rgba(255, 255, 255, 0.18) 42%,
		rgba(255, 255, 255, 0.1) 62%,
		rgba(255, 255, 255, 0.26) 100%
	);
	backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
	-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
	border: 1px solid rgba(255, 255, 255, 0.5);
}

/* ---------- Glass button ---------- */
.glass {
	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	text-decoration: none;
	height: var(--glass-pill-h);
	padding: 0 24px;
	border-radius: 999px;
	font-family: inherit;
	font-size: 0.76rem;
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	border: 1px solid rgba(255, 255, 255, 0.5);
	color: var(--ink);
	background: linear-gradient(
		150deg,
		rgba(255, 255, 255, 0.42) 0%,
		rgba(255, 255, 255, 0.16) 42%,
		rgba(255, 255, 255, 0.08) 62%,
		rgba(255, 255, 255, 0.24) 100%
	);
	backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
	-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
	box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.7), inset -1px -1px 1px rgba(255, 255, 255, 0.28),
		0 18px 34px -14px rgba(72, 62, 48, 0.4);
	transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.glass::before {
	content: '';
	position: absolute;
	top: 0;
	left: 8%;
	right: 8%;
	height: 1px;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 45%, rgba(255, 255, 255, 0.35) 100%);
}

.glass:hover {
	transform: translateY(-1px);
}

.glass:active {
	transform: translateY(1px);
	box-shadow: inset 0 2px 6px rgba(90, 80, 62, 0.22), inset 1px 1px 1px rgba(255, 255, 255, 0.4),
		0 8px 16px -10px rgba(72, 62, 48, 0.35);
}

.glass:disabled,
.glass[aria-disabled='true'] {
	cursor: default;
	opacity: 0.6;
	pointer-events: none;
}

/* Size modifiers */
.glass--lg {
	--glass-pill-h: 66px;
	padding: 0 28px;
}
.glass--sm {
	--glass-pill-h: 46px;
	padding: 0 20px;
	font-size: 0.68rem;
}
.glass--xs {
	--glass-pill-h: 40px;
	padding: 0 16px;
	font-size: 0.62rem;
	gap: 8px;
}

/* Gold variant — the primary CTA look used everywhere in the site */
.glass--gold {
	border-color: rgba(255, 244, 214, 0.6);
	color: #4a3712;
	background: linear-gradient(
		150deg,
		rgba(255, 249, 227, 0.5) 0%,
		rgba(226, 191, 116, 0.26) 42%,
		rgba(186, 145, 62, 0.16) 62%,
		rgba(255, 236, 187, 0.3) 100%
	);
	box-shadow: inset 1px 1px 1px rgba(255, 252, 240, 0.78), inset -1px -1px 1px rgba(255, 238, 196, 0.32),
		inset 0 0 24px rgba(255, 233, 178, 0.3), 0 18px 34px -14px rgba(88, 68, 26, 0.42);
}
.glass--gold::before {
	background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 250, 232, 0.98) 45%, rgba(255, 236, 190, 0.4) 100%);
}
.glass--gold:hover {
	background: linear-gradient(
		150deg,
		rgba(255, 251, 236, 0.58) 0%,
		rgba(232, 199, 128, 0.32) 42%,
		rgba(192, 152, 68, 0.22) 62%,
		rgba(255, 240, 200, 0.36) 100%
	);
}

/* Ghost variant — for secondary actions on a glass-surface panel (e.g. "Cancelar") */
.glass--ghost {
	background: rgba(255, 255, 255, 0.16);
	box-shadow: none;
}

/* Reflected-light sweep, used on primary CTAs (home hero buttons, nav "Reservar Ahora") */
.sheen {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 30%;
	z-index: 1;
	pointer-events: none;
	filter: blur(6px);
	background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.38) 50%, rgba(255, 255, 255, 0) 100%);
	animation: lnco-sheen 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes lnco-sheen {
	0% {
		transform: translateX(-120%) skewX(-18deg);
	}
	55%,
	100% {
		transform: translateX(320%) skewX(-18deg);
	}
}

.label {
	position: relative;
	z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
	.sheen {
		animation: none;
	}
	.glass,
	.glass-surface {
		transition: none;
	}
}