/* =========================================================================
 * La Extremeña — hoja base
 *
 * Tokens y componentes tomados del Figma aBQihpwrw3Vao4Ar61TczJ. Todas las secciones del
 * diseño son oscuras: no hay modo claro, así que los colores se declaran una vez y no hay
 * bloque de `prefers-color-scheme`.
 * ========================================================================= */

:root {
	--lx-ink-900: #100c0a;   /* hero y pie */
	--lx-ink-800: #120e0b;   /* nav de páginas interiores */
	--lx-ink-700: #171310;   /* sección par */
	--lx-ink-600: #1c1613;   /* sección impar */
	--lx-card:    #211a16;
	--lx-card-alt:#1e1714;
	--lx-banda:   #241813;
	--lx-line:    #2a231d;
	--lx-line-2:  #332a23;
	--lx-accent:  #e8622a;
	--lx-accent-d:#c94e1c;
	--lx-paper:   #f5efe6;
	--lx-paper-2: #f2ece1;
	--lx-text:    #c4bbb0;
	--lx-text-2:  #d9d1c6;
	--lx-muted:   #8f857a;
	--lx-muted-2: #6f665c;

	--lx-shell: 1240px;
	--lx-gutter: 100px;
	/* Ancho total de banda: contenido + los dos márgenes. Los bloques se limitan a esto y no
	   al contenido, o el relleno lateral se resta del contenido y las filas se rompen. */
	--lx-band: calc(var(--lx-shell) + var(--lx-gutter) * 2);

	/* Firma de movimiento: salida rápida, entrada larga. */
	--lx-ease: cubic-bezier(.2, 0, 0, 1);
	--lx-fast: 180ms;
	--lx-mid: 320ms;
}

body {
	background: var(--lx-ink-700);
	color: var(--lx-text);
	-webkit-font-smoothing: antialiased;
}

/* Etiqueta de sección: filete corto + caja alta con tracking amplio. */
.lx-eyebrow,
.lx-eyebrow > * {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--lx-accent);
}

.lx-eyebrow > *::before {
	content: "";
	width: 28px;
	height: 1px;
	background: var(--lx-accent);
	flex: 0 0 auto;
}

/* Cuando el eyebrow va centrado, el filete se dobla a los dos lados. */
.lx-eyebrow--center > * {
	justify-content: center;
}

.lx-eyebrow--center > *::after {
	content: "";
	width: 28px;
	height: 1px;
	background: var(--lx-accent);
	flex: 0 0 auto;
}

/* =========================================================================
 * Cabecera
 * ========================================================================= */

.lx-header {
	position: sticky;
	top: 0;
	z-index: 9990;
	background: var(--lx-ink-900);
	border-bottom: 1px solid var(--lx-line);
}

.lx-header__inner {
	max-width: var(--lx-band);
	margin-inline: auto;
	padding-block: 34px;
	padding-inline: var(--lx-gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 48px;
	transition: padding-block var(--lx-mid) var(--lx-ease);
}

/* La cabecera se comprime al hacer scroll: 112 → 72px de alto. El JS pone la clase con
   histéresis (comprime a 24px, expande al volver por debajo de 8) para que no parpadee. */
body.lx-scrolled .lx-header__inner {
	padding-block: 14px;
}

.lx-brand {
	display: flex;
	flex-direction: column;
	gap: 1px;
	text-decoration: none;
}

.lx-brand .lx-brand__name {
	font-family: "Playfair Display", Georgia, serif;
	font-weight: 900;
	letter-spacing: .5px;
	line-height: 1.15;
	color: var(--lx-paper);
	transition: font-size var(--lx-mid) var(--lx-ease);
}

body.lx-scrolled .lx-brand .lx-brand__name {
	font-size: 21px !important;
}

.lx-brand__tag {
	font-family: Inter, system-ui, sans-serif;
	font-weight: 500;
	font-size: 9.5px;
	letter-spacing: 2.2px;
	color: var(--lx-accent);
}

.lx-nav {
	display: flex;
	align-items: center;
	gap: 40px;
}

/* Carrito, CTA y hamburguesa: el bloque que sobrevive en móvil. */
.lx-header__acciones {
	display: flex;
	align-items: center;
	gap: 24px;
}

.lx-header .lx-nav__link {
	font-family: Inter, system-ui, sans-serif;
	font-weight: 500;
	font-size: 14px;
	color: var(--lx-text-2);
	text-decoration: none;
	transition: color var(--lx-fast) var(--lx-ease);
}

.lx-header .lx-nav__link:hover,
.lx-header .lx-nav__link.is-current {
	color: var(--lx-accent);
}

.lx-header .lx-nav__cta {
	font-family: Inter, system-ui, sans-serif;
	font-weight: 600;
	font-size: 14px;
	color: #160f0b;
	background: var(--lx-accent);
	border-radius: 2px;
	padding: 12px 22px;
	text-decoration: none;
	transition: background var(--lx-fast) var(--lx-ease);
}

.lx-header .lx-nav__cta:hover {
	background: var(--lx-paper);
	color: var(--lx-ink-900);
}

.lx-header .lx-nav__cart {
	position: relative;
	display: flex;
	color: var(--lx-text-2);
}

.lx-header .lx-nav__cart:hover {
	color: var(--lx-accent);
}

.lx-nav__count {
	position: absolute;
	top: -8px;
	right: -10px;
	min-width: 16px;
	height: 16px;
	padding-inline: 4px;
	border-radius: 8px;
	background: var(--lx-accent);
	color: #160f0b;
	font: 600 10px/16px Inter, system-ui, sans-serif;
	text-align: center;
}

/* --- Hamburguesa y panel móvil --- */

/* El kit de Elementor estiliza `button` con el naranja de los botones, y la hamburguesa salía
   como un rectángulo naranja. Hay que bajar desde `.lx-header` para ganarle. */
.lx-header .lx-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	padding: 0;
	background: none;
	border: 1px solid var(--lx-line-2);
	border-radius: 2px;
	cursor: pointer;
}

.lx-header .lx-burger span {
	display: block;
	width: 18px;
	height: 1.5px;
	margin-inline: auto;
	background: var(--lx-paper);
	transition: transform var(--lx-fast) var(--lx-ease);
}

.lx-header .lx-burger[aria-expanded="true"] span:first-child {
	transform: translateY(3px) rotate(45deg);
}

.lx-header .lx-burger[aria-expanded="true"] span:last-child {
	transform: translateY(-3px) rotate(-45deg);
}

.lx-panel {
	display: none;
	padding: 32px var(--lx-gutter) 48px;
	background: var(--lx-ink-900);
	border-top: 1px solid var(--lx-line);
}

.lx-panel[hidden] {
	display: none;
}

.lx-panel nav {
	display: flex;
	flex-direction: column;
}

.lx-panel nav a {
	font-family: "Playfair Display", Georgia, serif;
	font-size: 26px;
	color: var(--lx-paper);
	text-decoration: none;
	padding-block: 14px;
	border-bottom: 1px solid var(--lx-line);
}

.lx-panel__foot {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 28px;
	font-size: 15px;
}

.lx-panel__foot a {
	color: var(--lx-text);
	text-decoration: none;
}

@media (max-width: 1024px) {
	:root {
		--lx-gutter: 40px;
	}

	.lx-header__inner {
		padding-inline: var(--lx-gutter);
	}

	.lx-nav {
		display: none;
	}

	/* El CTA no se repite: ya está como último enlace del panel. */
	.lx-header .lx-nav__cta {
		display: none;
	}

	.lx-header__acciones {
		gap: 16px;
	}

	.lx-header .lx-burger {
		display: flex;
	}

	.lx-panel:not([hidden]) {
		display: block;
	}
}

@media (max-width: 767px) {
	:root {
		--lx-gutter: 20px;
	}
}

/* =========================================================================
 * Pie
 * ========================================================================= */

.lx-footer {
	background: var(--lx-ink-900);
	padding: 80px 0 40px;
}

.lx-footer__top {
	max-width: var(--lx-band);
	padding-inline: var(--lx-gutter);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 380px 141px 96px 1fr;
	gap: 90px;
}

.lx-fbrand p {
	margin: 16px 0 0;
	font-size: 14px;
	line-height: 22px;
	color: var(--lx-muted);
}

.lx-footer .lx-fcol__t {
	margin: 0 0 16px;
	font-family: Inter, system-ui, sans-serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--lx-muted-2);
}

.lx-fcol ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.lx-footer .lx-fcol a {
	font-size: 15px;
	color: var(--lx-text);
	text-decoration: none;
}

.lx-footer .lx-fcol a:hover {
	color: var(--lx-accent);
}

.lx-frow {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 15px;
	color: var(--lx-text);
}

.lx-frow svg {
	margin-top: 2px;
	color: var(--lx-accent);
}

.lx-footer__bottom {
	max-width: var(--lx-band);
	margin: 48px auto 0;
	padding: 28px var(--lx-gutter) 0;
	border-top: 1px solid #241d18;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	font-size: 13px;
	color: var(--lx-muted-2);
}

.lx-footer__bottom a {
	color: inherit;
	text-decoration: none;
}

.lx-footer__bottom a:hover {
	color: var(--lx-accent);
}

@media (max-width: 1024px) {
	.lx-footer__top {
		grid-template-columns: 1fr 1fr;
		gap: 48px;
	}
}

@media (max-width: 767px) {
	.lx-footer__top {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.lx-footer__bottom {
		flex-direction: column;
	}
}

/* =========================================================================
 * Tarjetas de catálogo (home y archivo de producto)
 * ========================================================================= */

.lx-card {
	display: flex;
	flex-direction: column;
	background: #221b17;
	border: 1px solid var(--lx-line);
	border-radius: 4px;
	overflow: hidden;
	text-decoration: none;
	transition: border-color var(--lx-mid) var(--lx-ease), transform var(--lx-mid) var(--lx-ease);
}

.lx-card:hover {
	border-color: var(--lx-accent);
	transform: translateY(-2px);
}

.lx-card__media {
	position: relative;
	/* 397 × 300 en el Figma: no es 4/3 exacto y se nota al lado del texto. */
	aspect-ratio: 397 / 300;
	overflow: hidden;
	background: var(--lx-ink-900);
}

.lx-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 560ms var(--lx-ease);
}

.lx-card:hover .lx-card__media img {
	transform: scale(1.03);
}

.lx-card__tag {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 5px 10px;
	background: rgba(16, 12, 10, .82);
	border-radius: 2px;
	font: 600 10.5px/1 Inter, system-ui, sans-serif;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--lx-paper);
}

.lx-card__body {
	padding: 22px 24px 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1;
}

/* Categoría de la pieza: caja alta pequeña, apagada, sin filete (el filete es de sección). */
.lx-card__cat {
	font: 600 11px/1.2 Inter, system-ui, sans-serif;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--lx-muted);
}

.lx-card .lx-card__title {
	margin: 0;
	font-family: "Playfair Display", Georgia, serif;
	font-weight: 500;
	font-size: 21px;
	line-height: 26px;
	color: var(--lx-paper-2);
}

.lx-card__desc {
	margin: 0;
	font-size: 13px;
	line-height: 20px;
	color: var(--lx-muted);
}

.lx-card__foot {
	margin-top: auto;
	padding-top: 4px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

/* El precio de la tarjeta va en Inter Semi Bold 15, no en Playfair: el serif de 22 solo
   aparece en la ficha. */
.lx-card .lx-price,
.lx-card__price {
	font: 600 15px/1.2 Inter, system-ui, sans-serif;
	color: var(--lx-accent);
}

.lx-card .lx-price--quote,
.lx-card__price--quote {
	color: var(--lx-paper-2);
	font-weight: 600;
}

.lx-card__more {
	display: flex;
	align-items: center;
	gap: 6px;
	font: 500 14px/1.2 Inter, system-ui, sans-serif;
	color: var(--lx-text);
}

.lx-card__more svg {
	width: 15px;
	height: 15px;
}

.lx-card:hover .lx-card__more {
	color: var(--lx-accent);
}

/* Rejilla de tres columnas, la del Figma (1240 con separación de 24). */
.lx-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

@media (max-width: 1024px) {
	.lx-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.lx-grid {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition-duration: 1ms !important;
		animation-duration: 1ms !important;
	}
}