/* ==========================================================================
   Can Xiu-Xiu — cabecera y pie
   Traducción literal de CXHeader.jsx y CXFooter.jsx. El diseño gobierna la
   respuesta a móvil con variables que se redefinen en un único corte a 920px.
   ========================================================================== */

:root {
	--cx-burger: none;       /* hamburguesa: solo en móvil */
	--cx-nav-display: block; /* navegación horizontal de la cabecera */
	--cx-tagline: block;     /* «by María José Guerrero» bajo el logo */
	--cx-wm-fs: 19px;        /* cuerpo de CAN XIU-XIU */
	--cx-wm-mt: 0px;
	--cx-hdr-pad: 8px 0 5px;
}

@media (max-width: 920px) {
	:root {
		--cx-burger: block;
		--cx-nav-display: none;
		--cx-tagline: none;
		--cx-wm-fs: 17px;
		--cx-wm-mt: 0px;
		--cx-hdr-pad: 11px 0;
	}
	.cx-hide-sm { display: none; }
	.cx-sticky__nav { display: none; }
}

/* --- Barra de contacto ---------------------------------------------------- */

.cx-header {
	background: var(--cx-ivory);
	border-bottom: 1px solid var(--border-default);
	position: relative;
	z-index: 10;
}

.cx-topbar {
	background: var(--cx-ivory-deep);
	border-bottom: 1px solid var(--cx-hairline);
}
.cx-topbar__inner {
	max-width: var(--content-max);
	margin-inline: auto;
	padding: 4px var(--gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
}
.cx-topbar__group { display: flex; align-items: center; gap: var(--sp-4); }
.cx-topbar__group + .cx-topbar__group { gap: var(--sp-3); }

.cx-topbar__phone,
.cx-topbar__account {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--font-sans);
	font-size: var(--fs-caption);
	letter-spacing: 0.08em;
	color: var(--cx-brown-600);
}
.cx-topbar__account { gap: 6px; color: var(--cx-gold-dark); }

.cx-soc {
	display: inline-flex;
	color: var(--cx-brown-600);
	padding: 3px;
}
.cx-soc:hover { color: var(--cx-gold-dark); }

.cx-topbar__sep {
	width: 1px;
	height: 16px;
	background: var(--cx-hairline);
}

.cx-cart {
	position: relative;
	display: inline-flex;
	color: var(--cx-gold-dark);
	padding: 3px;
}

.cx-badge {
	position: absolute;
	top: -3px;
	right: -4px;
	min-width: 15px;
	height: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-inline: 3px;
	background: var(--cx-gold-dark);
	color: var(--cx-white);
	font-family: var(--font-sans);
	font-size: 9px;
	border-radius: 3px;
}
.cx-badge.is-empty { display: none; }

/* --- Bloque principal ----------------------------------------------------- */

.cx-header__main {
	max-width: var(--content-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.cx-header__bar {
	display: grid;
	grid-template-columns: 44px 1fr 44px;
	align-items: center;
	padding: var(--cx-hdr-pad);
}

.cx-burger {
	display: var(--cx-burger);
	justify-self: start;
	background: none;
	border: none;
	cursor: pointer;
	padding: 6px;
}
.cx-burger span {
	display: block;
	width: 20px;
	height: 1px;
	background: var(--cx-brown-900);
}
.cx-burger span + span { margin-top: 5px; }

/* --- Logotipo ------------------------------------------------------------- */

.cx-logo {
	grid-column: 2;
	justify-self: center;
	text-align: center;
	text-decoration: none;
}
.cx-logo__mono {
	display: none;              /* el monograma solo vive en el menú lateral */
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 34px;
	line-height: 1;
	color: var(--cx-gold);
	letter-spacing: -0.34em;
	padding-right: 0.34em;
}
.cx-logo__mono span { font-size: 0.82em; }

.cx-logo__name {
	display: block;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--cx-wm-fs);
	letter-spacing: 0.14em;
	color: var(--cx-gold-dark);
	margin-top: var(--cx-wm-mt);
}
.cx-logo__tagline {
	display: var(--cx-tagline);
	font-family: var(--font-display);
	font-style: italic;
	font-size: var(--fs-caption);
	color: var(--cx-gold);
	margin-top: 2px;
}

.cx-logo--small .cx-logo__mono { display: block; font-size: 30px; }
.cx-logo--small .cx-logo__name { font-size: 18px; margin-top: 4px; }
.cx-logo--small .cx-logo__tagline { display: block; font-size: 11px; }

/* --- Navegación ----------------------------------------------------------- */

.cx-nav { display: var(--cx-nav-display); }

.cx-nav__list {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	gap: 0 clamp(12px, 2vw, 30px);
	list-style: none;
	margin: 0;
	padding: 0 0 9px;
}
.cx-nav__list li { white-space: nowrap; }
.cx-nav__list a {
	font-family: var(--font-sans);
	font-weight: var(--fw-medium);
	font-size: clamp(10px, 0.85vw, 12px);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cx-brown-600);
	border-bottom: 1px solid transparent;
	padding-bottom: 5px;
	transition: color var(--dur-fast) var(--ease-brand);
}
.cx-nav__list a:hover { color: var(--cx-gold-dark); }
.cx-nav__list .current-menu-item a,
.cx-nav__list .current_page_item a {
	color: var(--cx-gold-dark);
	border-bottom-color: var(--cx-gold);
}

/* --- Barra fija al bajar -------------------------------------------------- */

.cx-sticky {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 80;
	background: var(--cx-ivory);
	border-bottom: 1px solid var(--cx-hairline);
	box-shadow: 0 4px 20px rgba(74, 58, 42, 0.08);
	/* El logo se alinea por baseline y sobresale del alto de 52px: sin recorte
	   asoma por encima aunque la barra esté desplazada fuera. */
	overflow: hidden;
	transform: translateY(-105%);
	/* El -105% deja la barra a 3px del borde, y su sombra difumina 20px: sin
	   visibility se cuela una banda gris sobre la cabecera. Se oculta del todo
	   y la visibilidad se retrasa hasta que termina la transición de salida. */
	visibility: hidden;
	transition: transform 280ms var(--ease-brand), visibility 0s 280ms;
}
.cx-sticky.is-stuck {
	transform: translateY(0);
	visibility: visible;
	transition: transform 280ms var(--ease-brand), visibility 0s;
}

.cx-sticky__inner {
	max-width: var(--content-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	height: 52px;
}
.cx-sticky__left { display: flex; align-items: center; gap: var(--sp-2); }
.cx-sticky__left .cx-burger { padding: 6px 6px 6px 0; }
.cx-sticky__left .cx-burger span { width: 18px; }
.cx-sticky__left .cx-burger span + span { margin-top: 4px; }

.cx-sticky__logo { display: flex; align-items: baseline; gap: var(--sp-2); }
.cx-sticky__logo .cx-logo__mono { display: inline; font-size: 20px; }
.cx-sticky__logo .cx-logo__name { font-size: 16px; letter-spacing: 0.12em; margin: 0; }

.cx-sticky__nav { display: flex; }
.cx-sticky__list {
	display: flex;
	flex-wrap: nowrap;
	gap: 0 clamp(9px, 1.3vw, 20px);
	list-style: none;
	margin: 0;
	padding: 0;
}
.cx-sticky__list li { white-space: nowrap; }
.cx-sticky__list a {
	font-family: var(--font-sans);
	font-weight: var(--fw-medium);
	font-size: clamp(9px, 0.75vw, 11px);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cx-brown-600);
	border-bottom: 1px solid transparent;
	padding-bottom: 3px;
}
.cx-sticky__list .current-menu-item a,
.cx-sticky__list .current_page_item a {
	color: var(--cx-gold-dark);
	border-bottom-color: var(--cx-gold);
}
.cx-sticky__right { display: flex; align-items: center; gap: 14px; }
.cx-sticky__right a { color: var(--cx-gold-dark); padding: 2px; display: inline-flex; }

/* --- Menú lateral --------------------------------------------------------- */

.cx-overlay {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgba(74, 58, 42, 0.45);
	opacity: 0;
	pointer-events: none;
	transition: opacity 300ms var(--ease-brand);
}
body.cx-menu-open .cx-overlay { opacity: 1; pointer-events: auto; }

.cx-drawer {
	position: fixed;
	inset: 0 auto 0 0;
	width: min(320px, 82vw);
	z-index: 95;
	background: var(--cx-ivory);
	transform: translateX(-102%);
	transition: transform 320ms var(--ease-brand);
	display: flex;
	flex-direction: column;
	padding: 22px 28px 24px;
	overflow-y: auto;
}
body.cx-menu-open .cx-drawer {
	transform: translateX(0);
	box-shadow: 12px 0 40px rgba(74, 58, 42, 0.18);
}

.cx-drawer__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding-bottom: var(--sp-4);
	border-bottom: 1px solid var(--border-default);
	margin-bottom: var(--sp-2);
}
.cx-drawer__close {
	background: none;
	border: none;
	cursor: pointer;
	font-family: var(--font-sans);
	font-size: 22px;
	font-weight: 300;
	color: var(--cx-brown-600);
	padding: 2px 6px;
	line-height: 1;
}

.cx-drawer__nav { flex: 1; }
.cx-drawer__list { list-style: none; margin: 0; padding: 0; }
.cx-drawer__list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 2px;
	font-family: var(--font-sans);
	font-size: 13px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--cx-brown-900);
	border-bottom: 1px solid var(--cx-hairline);
}
.cx-drawer__list a::after { content: '›'; color: var(--cx-gold); font-size: 14px; }
.cx-drawer__list .current-menu-item a,
.cx-drawer__list .current_page_item a { color: var(--cx-gold-dark); }
.cx-drawer__list .current-menu-item a::after,
.cx-drawer__list .current_page_item a::after { content: '·'; }

.cx-drawer__foot { margin-top: var(--sp-5); }
.cx-drawer__foot > a {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	font-family: var(--font-sans);
	font-size: 13px;
	letter-spacing: 0.08em;
	color: var(--cx-brown-600);
	padding: var(--sp-2) 0;
}
.cx-drawer__foot > a:first-child { color: var(--cx-gold-dark); }
.cx-drawer__social { display: flex; gap: 14px; margin-top: var(--sp-3); }

/* --- Pie ------------------------------------------------------------------ */

.cx-footer {
	background: var(--cx-ivory-deep);
	border-top: 1px solid var(--cx-hairline);
	margin-top: var(--section-y);
	position: relative;
	overflow: hidden;
}

.cx-footer__mono {
	position: absolute;
	right: -40px;
	bottom: -70px;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 340px;
	line-height: 1;
	color: var(--cx-gold);
	opacity: 0.055;
	letter-spacing: -0.34em;
	pointer-events: none;
	user-select: none;
}
.cx-footer__mono span { font-size: 0.82em; }

.cx-footer__paws {
	position: absolute;
	left: 6%;
	top: 52px;
	display: flex;
	gap: 26px;
	color: var(--cx-gold);
	opacity: 0.10;
	pointer-events: none;
}
.cx-footer__paws svg:nth-child(1) { transform: rotate(-18deg); }
.cx-footer__paws svg:nth-child(2) { transform: rotate(10deg) translateY(10px); }
.cx-footer__paws svg:nth-child(3) { transform: rotate(-6deg); }

.cx-footer__inner {
	max-width: var(--content-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
	position: relative;
}

.cx-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 56px 0 40px;
}
.cx-footer__brand-mono {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 30px;
	line-height: 1;
	color: var(--cx-gold);
	letter-spacing: -0.34em;
	padding-left: 0.34em;
}
.cx-footer__brand-mono span { font-size: 0.82em; }
.cx-footer__brand-name {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 21px;
	letter-spacing: 0.16em;
	color: var(--cx-brown-900);
	margin-top: var(--sp-3);
}
.cx-footer__brand-tagline {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 13px;
	color: var(--cx-gold);
	margin-top: 4px;
}
.cx-footer__rule {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 22px;
	color: var(--cx-gold);
}
.cx-footer__rule i { width: 44px; border-top: 1px solid var(--cx-gold-soft); }
.cx-footer__claim {
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: var(--fw-body);
	line-height: 1.8;
	color: var(--cx-brown-600);
	max-width: 420px;
	margin: 20px 0 0;
}

.cx-footer__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 36px 32px;
	padding: 44px 0 52px;
	border-top: 1px solid var(--cx-hairline);
}

.cx-footer__h {
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: var(--fw-medium);
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--cx-gold);
	margin: 0 0 var(--sp-4);
}

.cx-footer__col a,
.cx-footer__addr {
	display: block;
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: var(--fw-body);
	color: var(--cx-brown-600);
	line-height: 2.15;
	margin: 0;
}
.cx-footer__col a:hover { color: var(--cx-gold-dark); }
.cx-footer__wa { color: var(--cx-gold-dark) !important; margin-top: 6px !important; }

.cx-footer__social { display: flex; gap: var(--sp-2); margin-top: 14px; }
.cx-footer__soc {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--cx-gold-soft);
	border-radius: var(--radius-button);
	color: var(--cx-gold-dark);
	transition: background var(--dur-fast) var(--ease-brand), color var(--dur-fast) var(--ease-brand);
}
.cx-footer__soc:hover { background: var(--cx-gold-dark); color: var(--cx-white); }

.cx-footer__legal {
	border-top: 1px solid var(--cx-hairline);
	padding: 20px 0 26px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sp-3);
	font-family: var(--font-sans);
	font-size: 11px;
	letter-spacing: 0.08em;
	color: var(--cx-brown-600);
}
.cx-footer__legal a { color: var(--cx-brown-600); }
.cx-footer__legal a:hover { color: var(--cx-gold-dark); }