/*
 * Marco de todas las pantallas · fch-child · E6 · 15/10/2026
 * Barra superior, cabecera, menú, panel del menú móvil, pie oscuro y aviso de cookies.
 * Mismo diseño que el marco del tema de referencia (cabecera fija con desenfoque, menú centrado con subrayado
 * dorado, pie en zona oscura). Sin cesta, cuenta, favoritos ni buscador: aquí no se vende todavía.
 *   < 75em (1200)  móvil y tableta: menú · logo · contacto.
 *   ≥ 75em         ordenador: logo · «Avísame» + contacto, y debajo el menú horizontal.
 */

/* ---------------------------------------------------------------------------
 * 0. Contenedor. En nuestras pantallas no se carga el CSS de WoodMart: .container lo pone el tema.
 * ------------------------------------------------------------------------ */
.fch-marco .container {
	width: 100%;
	max-width: var(--fch-ancho-max);
	margin-inline: auto;
	padding-inline: var(--fch-esp-pagina);
}

.fch-marco .container.fch-contenedor--lectura {
	max-width: calc(var(--fch-ancho-lectura) + var(--fch-esp-pagina) * 2);
}

.fch-main {
	display: block;
	min-height: var(--fch-alto-minimo-contenido);
}

.fch-main:focus {
	outline: none;
}

/* ---------------------------------------------------------------------------
 * 1. Barra superior: un mensaje quieto (no rota). Solo desde 64em.
 * ------------------------------------------------------------------------ */
.fch-barra-superior {
	border-bottom: var(--fch-borde-fino) solid var(--fch-color-borde);
	color: var(--fch-color-texto-suave);
	font-size: var(--fch-texto-xs);
	letter-spacing: var(--fch-tracking-boton);
}

.fch-barra-superior__dentro {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--fch-esp-6);
	min-height: var(--fch-alto-barra-superior);
	padding-block: var(--fch-esp-1);
}

.fch-barra-superior p {
	margin: 0;
	line-height: var(--fch-interlineado-compacto);
	text-align: center;
}

.fch-barra-superior a {
	display: inline-flex;
	align-items: center;
	min-height: var(--fch-tactil-min);
	color: var(--fch-color-texto-suave);
}

.fch-barra-superior a:hover {
	color: var(--fch-color-enlace-hover);
}

@media (max-width: 63.99em) {
	.fch-barra-superior {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
 * 2. Cabecera (fija al bajar, compacta en móvil)
 * ------------------------------------------------------------------------ */
.fch-cabecera {
	position: sticky;
	top: 0;
	z-index: var(--fch-z-cabecera);
	border-bottom: var(--fch-borde-fino) solid var(--fch-color-borde);
	background-color: var(--fch-color-fondo);
}

@supports (backdrop-filter: blur(1px)) {
	.fch-cabecera {
		background-color: color-mix(in srgb, var(--fch-color-fondo) 92%, transparent);
		backdrop-filter: saturate(1.2) blur(var(--fch-desenfoque));
	}
}

.fch-cabecera__fila {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-areas: "menu logo herramientas";
	align-items: center;
	gap: var(--fch-esp-2);
	min-height: var(--fch-alto-cabecera-movil);
}

.fch-cabecera__menu {
	grid-area: menu;
}

.fch-cabecera .fch-logo {
	grid-area: logo;
	justify-self: center;
}

.fch-cabecera__herramientas {
	display: flex;
	grid-area: herramientas;
	align-items: center;
	justify-content: flex-end;
	gap: var(--fch-esp-2);
}

.fch-herramienta {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--fch-esp-2);
	min-width: var(--fch-tactil-min);
	min-height: var(--fch-tactil-min);
	padding: 0 var(--fch-esp-1);
	border: 0;
	border-radius: var(--fch-radio-sm);
	background: none;
	color: var(--fch-color-texto);
	font-family: var(--fch-fuente-texto);
	font-size: var(--fch-texto-sm);
	text-decoration: none;
	cursor: pointer;
}

.fch-herramienta:hover {
	color: var(--fch-color-enlace-hover);
}

/* El texto de la herramienta se ve desde 1200 px; por debajo, solo para lectores de pantalla. */
.fch-herramienta__texto {
	position: absolute;
	width: var(--fch-esp-px);
	height: var(--fch-esp-px);
	margin: calc(var(--fch-esp-px) * -1);
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

.fch-cabecera__avisame {
	display: none;
}

/* Logo: MJÑOZ BEAUTY trazado (sin letra), del color del texto; debajo, «Flame Care» en versales espaciadas. */
.fch-logo {
	display: inline-grid;
	justify-items: center;
	gap: var(--fch-esp-1);
	min-height: var(--fch-tactil-min);
	align-content: center;
	color: var(--fch-color-texto);
	text-decoration: none;
}

.fch-logo:hover {
	color: var(--fch-color-texto);
}

.fch-logo__dibujo {
	display: block;
	width: auto;
	height: var(--fch-logo-alto);
	fill: currentcolor;
	stroke: none;
}

.fch-logo__linea {
	color: var(--fch-color-texto-suave);
	font-family: var(--fch-fuente-texto);
	font-size: var(--fch-texto-xs);
	letter-spacing: var(--fch-tracking-marca);
	line-height: 1;
	margin-right: calc(var(--fch-tracking-marca) * -1);
	text-transform: uppercase;
}

@media (max-width: 29.99em) {
	.fch-logo__linea {
		display: none;
	}
}

@media (min-width: 75em) {
	html {
		scroll-padding-top: calc(var(--fch-alto-cabecera) + var(--fch-esp-12));
	}

	.fch-cabecera__fila {
		grid-template-areas: "logo hueco herramientas";
		gap: var(--fch-esp-8);
		min-height: var(--fch-alto-cabecera);
	}

	.fch-cabecera .fch-logo {
		justify-self: start;
		justify-items: start;
	}

	.fch-logo__dibujo {
		height: var(--fch-logo-alto-lg);
	}

	.fch-cabecera__menu {
		display: none;
	}

	.fch-cabecera__avisame {
		display: inline-flex;
	}

	.fch-herramienta__texto {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
		clip-path: none;
		white-space: nowrap;
	}

	.fch-cabecera__herramientas {
		gap: var(--fch-esp-5);
	}
}

/* ---------------------------------------------------------------------------
 * 3. Menú principal (solo ordenador): subrayado dorado que crece desde el centro.
 * ------------------------------------------------------------------------ */
.fch-nav {
	display: none;
}

@media (min-width: 75em) {
	.fch-nav {
		display: block;
		border-top: var(--fch-borde-fino) solid var(--fch-color-borde);
	}

	.fch-nav__lista {
		display: flex;
		justify-content: center;
		gap: var(--fch-esp-2);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.fch-nav__enlace {
		position: relative;
		display: inline-flex;
		align-items: center;
		min-height: var(--fch-control-alto);
		padding: 0 var(--fch-esp-3);
		color: var(--fch-color-texto);
		font-size: var(--fch-texto-sm);
		font-weight: var(--fch-peso-medio);
		letter-spacing: var(--fch-tracking-boton);
		text-decoration: none;
		white-space: nowrap;
	}

	.fch-nav__enlace::after {
		content: "";
		position: absolute;
		right: var(--fch-esp-3);
		bottom: var(--fch-esp-2);
		left: var(--fch-esp-3);
		height: var(--fch-borde-medio);
		background-color: var(--fch-color-acento-decor);
		transform: scaleX(0);
		transition: transform var(--fch-dur-media) var(--fch-curva-salida);
	}

	.fch-nav__enlace:hover,
	.fch-nav__enlace[aria-current="page"] {
		color: var(--fch-color-texto);
	}

	.fch-nav__enlace:hover::after,
	.fch-nav__enlace[aria-current="page"]::after {
		transform: scaleX(1);
	}
}

/* ---------------------------------------------------------------------------
 * 4. Panel lateral del menú (móvil y tableta) y su velo. Sin JavaScript se abre con #fch-menu-movil.
 * ------------------------------------------------------------------------ */
.fch-panel {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: var(--fch-z-panel);
	display: flex;
	flex-direction: column;
	width: var(--fch-ancho-panel);
	visibility: hidden;
	background-color: var(--fch-color-fondo);
	box-shadow: var(--fch-sombra-3);
	transform: translateX(-100%);
	transition:
		transform var(--fch-dur-lenta) var(--fch-curva-salida),
		visibility 0s linear var(--fch-dur-lenta);
}

.fch-panel[data-abierto="true"],
.fch-panel:target {
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

.fch-panel__cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--fch-esp-3);
	min-height: var(--fch-alto-cabecera-movil);
	padding: var(--fch-esp-2) var(--fch-esp-2) var(--fch-esp-2) var(--fch-esp-5);
	border-bottom: var(--fch-borde-fino) solid var(--fch-color-borde);
}

.fch-panel__titulo {
	margin: 0;
	font-family: var(--fch-fuente-titulos);
	font-size: var(--fch-texto-xl);
	font-weight: var(--fch-peso-medio);
}

.fch-panel__cuerpo {
	flex: 1;
	padding: var(--fch-esp-4) var(--fch-esp-5);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.fch-velo {
	position: fixed;
	inset: 0;
	z-index: var(--fch-z-velo);
	visibility: hidden;
	background-color: var(--fch-color-velo);
	opacity: 0;
	transition: opacity var(--fch-dur-media) var(--fch-curva-salida), visibility 0s linear var(--fch-dur-media);
}

.fch-velo[data-abierto="true"] {
	visibility: visible;
	opacity: 1;
	transition-delay: 0s;
}

.fch-menu-movil {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fch-menu-movil li {
	border-bottom: var(--fch-borde-fino) solid var(--fch-color-borde);
}

.fch-menu-movil a {
	display: flex;
	align-items: center;
	min-height: var(--fch-control-alto-lg);
	color: var(--fch-color-texto);
	font-family: var(--fch-fuente-titulos);
	font-size: var(--fch-texto-lg);
	text-decoration: none;
}

.fch-menu-movil a[aria-current="page"] {
	color: var(--fch-color-acento);
}

.fch-menu-movil__secundario {
	display: grid;
	gap: var(--fch-esp-1);
	margin: var(--fch-esp-4) 0 0;
	padding: 0;
	list-style: none;
}

.fch-menu-movil__secundario a {
	display: flex;
	align-items: center;
	gap: var(--fch-esp-3);
	min-height: var(--fch-tactil-min);
	color: var(--fch-color-texto);
	text-decoration: none;
}

body.fch-panel-abierto {
	overflow: hidden;
}

/* ---------------------------------------------------------------------------
 * 5. Pie (zona oscura). Los títulos de columna son texto, no encabezados.
 * ------------------------------------------------------------------------ */
.fch-pie {
	padding-top: var(--fch-esp-seccion);
	font-size: var(--fch-texto-sm);
}

.fch-marco .fch-pie.fch-zona-oscura {
	background-color: var(--fch-color-fondo);
	color: var(--fch-color-texto);
}

.fch-pie__marca {
	display: grid;
	grid-column: 1 / -1;
	gap: var(--fch-esp-4);
	align-content: start;
	justify-items: start;
}

.fch-pie__marca p {
	max-width: var(--fch-medida-pie-marca);
	margin: 0;
	color: var(--fch-color-texto-suave);
}

.fch-pie__logo {
	display: inline-flex;
	min-height: var(--fch-tactil-min);
	color: var(--fch-color-texto);
}

.fch-pie__logo .fch-logo__dibujo {
	width: var(--fch-logo-pie);
	height: auto;
}

.fch-pie__columnas {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--fch-esp-8) var(--fch-esp-6);
	padding-block: var(--fch-esp-bloque);
}

.fch-pie__titulo {
	margin: 0 0 var(--fch-esp-2);
	color: var(--fch-color-acento);
	font-size: var(--fch-texto-xs);
	font-weight: var(--fch-peso-medio);
	letter-spacing: var(--fch-tracking-versal);
	text-transform: uppercase;
}

.fch-pie ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fch-pie li a,
.fch-pie li button {
	overflow-wrap: anywhere;
	min-width: var(--fch-tactil-min);
	display: inline-flex;
	align-items: center;
	gap: var(--fch-esp-2);
	min-height: var(--fch-tactil-min);
	padding: 0;
	border: 0;
	background: none;
	color: var(--fch-color-texto);
	font: inherit;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.fch-pie li a:hover,
.fch-pie li button:hover {
	color: var(--fch-color-enlace-hover);
	text-decoration: underline;
}

.fch-pie__legal {
	display: grid;
	gap: var(--fch-esp-4);
	padding-block: var(--fch-esp-6);
	border-top: var(--fch-borde-fino) solid var(--fch-color-borde);
	color: var(--fch-color-texto-suave);
	font-size: var(--fch-texto-xs);
}

.fch-pie__legal ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--fch-esp-5);
}

.fch-pie__legal a,
.fch-pie__legal button {
	color: var(--fch-color-texto-suave);
}

.fch-pie__legal p {
	margin: 0;
}

@media (min-width: 48em) {
	.fch-pie__columnas {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.fch-pie__legal {
		grid-template-columns: auto auto;
		align-items: center;
		justify-content: space-between;
	}
}

@media (min-width: 64em) {
	.fch-pie__columnas {
		grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
	}

	.fch-pie__marca {
		grid-column: auto;
	}
}

/* ---------------------------------------------------------------------------
 * 6. Aviso de cookies: abajo, sin tapar el menú; las dos respuestas con el mismo peso.
 * ------------------------------------------------------------------------ */
.fch-cookies {
	position: fixed;
	right: var(--fch-esp-3);
	bottom: var(--fch-esp-3);
	left: var(--fch-esp-3);
	z-index: var(--fch-z-aviso);
	display: grid;
	gap: var(--fch-esp-3);
	max-width: var(--fch-ancho-estrecho);
	max-height: calc(100vh - var(--fch-esp-6));
	padding: var(--fch-esp-5);
	overflow-y: auto;
	border: var(--fch-borde-fino) solid var(--fch-color-borde-fuerte);
	border-radius: var(--fch-radio-md);
	background-color: var(--fch-color-superficie);
	box-shadow: var(--fch-sombra-3);
	font-size: var(--fch-texto-sm);
}

.fch-cookies[hidden] {
	display: none;
}

.fch-cookies__titulo {
	margin: 0;
	font-family: var(--fch-fuente-titulos);
	font-size: var(--fch-texto-xl);
	font-weight: var(--fch-peso-normal);
	line-height: var(--fch-interlineado-titulo);
}

.fch-cookies p {
	margin: 0;
	color: var(--fch-color-texto-suave);
	line-height: var(--fch-interlineado-compacto);
}

.fch-cookies__grupos {
	display: grid;
	gap: var(--fch-esp-1);
	margin: 0;
	padding: 0;
	border: 0;
}

.fch-cookies__botones {
	display: grid;
	gap: var(--fch-esp-2);
}

@media (min-width: 30em) {
	.fch-cookies {
		right: auto;
	}

	.fch-cookies__botones {
		grid-template-columns: repeat(auto-fit, minmax(var(--fch-boton-min), 1fr));
	}

	.fch-cookies__botones--una {
		grid-template-columns: auto;
		justify-content: start;
	}
}

@media (min-width: 48em) {
	.fch-cookies {
		bottom: var(--fch-esp-6);
		left: var(--fch-esp-6);
	}
}

/* ---------------------------------------------------------------------------
 * 1.8.0 · Menú por categorías.
 * Ordenador (≥ 75em): cada sección con flecha abre un submenú (tarjeta clara con sombra cálida, título + detalle).
 *   Se abre con el ratón (:hover) o con la flecha (marco.js: [data-abierto]); sin JavaScript, también con el foco.
 * Móvil y tableta (panel): acordeón; cada fila tiene el enlace a la sección y la flecha (44 × 44 px) que la despliega.
 *   Sin JavaScript (sin .fch-js), todo desplegado y sin flechas.
 * ------------------------------------------------------------------------ */
@media (min-width: 75em) {
	.fch-nav__lista {
		gap: 0;
	}

	.fch-nav__item {
		position: relative;
		display: flex;
		align-items: center;
	}

	.fch-nav__item--sub .fch-nav__enlace {
		padding-right: var(--fch-esp-1);
	}

	.fch-nav__item--dentro > .fch-nav__enlace::after {
		transform: scaleX(1);
	}

	.fch-nav__abrir {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: var(--fch-tactil-min);
		min-width: var(--fch-tactil-min);
		height: var(--fch-tactil-min);
		margin-left: calc(var(--fch-esp-2) * -1);
		padding: 0;
		border: 0;
		border-radius: var(--fch-radio-pildora);
		background: none;
		color: var(--fch-color-texto-suave);
		cursor: pointer;
	}

	.fch-nav__abrir:hover {
		color: var(--fch-color-texto);
	}

	.fch-nav__flecha {
		transition: transform var(--fch-dur-media) var(--fch-curva-salida);
	}

	.fch-nav__item[data-abierto] .fch-nav__flecha,
	.fch-nav__item--sub:hover .fch-nav__flecha {
		transform: rotate(180deg);
	}

	.fch-nav__sub {
		position: absolute;
		top: 100%;
		left: 50%;
		z-index: var(--fch-z-cabecera);
		width: max-content;
		min-width: 17rem;
		max-width: 26rem;
		padding: var(--fch-esp-3);
		visibility: hidden;
		border: var(--fch-borde-fino) solid var(--fch-color-borde);
		border-radius: var(--fch-radio-md);
		background-color: var(--fch-color-superficie);
		box-shadow: var(--fch-sombra-3);
		opacity: 0;
		transform: translate(-50%, var(--fch-desplazamiento-entrada));
		transition:
			opacity var(--fch-dur-media) var(--fch-curva-salida),
			transform var(--fch-dur-media) var(--fch-curva-salida),
			visibility 0s linear var(--fch-dur-media);
	}

	/* Puente invisible: el ratón pasa del enlace a la tarjeta sin que se cierre. */
	.fch-nav__sub::before {
		content: "";
		position: absolute;
		right: 0;
		bottom: 100%;
		left: 0;
		height: var(--fch-esp-3);
	}

	/* 1.10.4 · Con JavaScript, el foco ya no abre el submenú (solo el botón de la flecha, el ratón o el toque): así un
	   submenú cerrado no recibe el foco (visibility: hidden lo saca del tabulador) y Escape lo cierra de verdad. Sin
	   JavaScript, el foco lo sigue abriendo. */
	.fch-nav__item--sub:hover > .fch-nav__sub,
	html:not(.fch-js) .fch-nav__item--sub:focus-within > .fch-nav__sub,
	.fch-nav__item[data-abierto] > .fch-nav__sub {
		visibility: visible;
		opacity: 1;
		transform: translate(-50%, 0);
		transition-delay: 0s;
	}

	/* 1.10.4 · Escape con el ratón encima: se cierra hasta que el ratón sale de la sección. */
	.fch-nav__item--sub[data-sin-raton]:not([data-abierto]):hover > .fch-nav__sub {
		visibility: hidden;
		opacity: 0;
		transform: translate(-50%, var(--fch-desplazamiento-entrada));
	}

	.fch-nav__item--sub[data-sin-raton]:not([data-abierto]):hover .fch-nav__flecha {
		transform: none;
	}

	.fch-nav__sub-lista {
		display: grid;
		gap: var(--fch-esp-0-5);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.fch-nav__sub-enlace {
		display: grid;
		gap: var(--fch-esp-0-5);
		min-height: var(--fch-tactil-min);
		padding: var(--fch-esp-2) var(--fch-esp-3);
		border-radius: var(--fch-radio-sm);
		color: var(--fch-color-texto);
		text-decoration: none;
	}

	.fch-nav__sub-enlace:hover,
	.fch-nav__sub-enlace:focus-visible {
		background-color: var(--fch-color-superficie-alt);
	}

	.fch-nav__sub-titulo {
		font-family: var(--fch-fuente-titulos);
		font-size: var(--fch-texto-base);
		line-height: var(--fch-interlineado-compacto);
	}

	.fch-nav__sub-detalle {
		color: var(--fch-color-texto-suave);
		font-size: var(--fch-texto-xs);
		line-height: var(--fch-interlineado-compacto);
	}

	.fch-nav__sub-todo {
		display: flex;
		align-items: center;
		gap: var(--fch-esp-2);
		min-height: var(--fch-tactil-min);
		margin-top: var(--fch-esp-2);
		padding: var(--fch-esp-2) var(--fch-esp-3) 0;
		border-top: var(--fch-borde-fino) solid var(--fch-color-borde);
		color: var(--fch-color-acento);
		font-weight: var(--fch-peso-medio);
		text-decoration: none;
	}

	.fch-nav__sub-todo:hover {
		text-decoration: underline;
	}
}

.fch-menu-movil__fila {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--fch-esp-2);
}

.fch-menu-movil__fila > a {
	flex: 1;
}

.fch-menu-movil__item--dentro > .fch-menu-movil__fila > a {
	color: var(--fch-color-acento);
}

.fch-menu-movil__abrir {
	display: none;
	flex: none;
	align-items: center;
	justify-content: center;
	width: var(--fch-control-alto);
	height: var(--fch-control-alto);
	padding: 0;
	border: var(--fch-borde-fino) solid var(--fch-color-borde);
	border-radius: var(--fch-radio-pildora);
	background-color: var(--fch-color-superficie);
	color: var(--fch-color-texto);
	cursor: pointer;
}

.fch-menu-movil__abrir svg {
	transition: transform var(--fch-dur-media) var(--fch-curva-salida);
}

.fch-menu-movil__abrir[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.fch-js .fch-menu-movil__abrir {
	display: inline-flex;
}

.fch-menu-movil__sub {
	margin: 0 0 var(--fch-esp-3);
	padding: 0 0 0 var(--fch-esp-4);
	border-left: var(--fch-borde-medio) solid var(--fch-color-acento-decor);
	list-style: none;
}

.fch-js .fch-menu-movil__sub:not([data-abierto]) {
	display: none;
}

.fch-menu-movil .fch-menu-movil__sub li {
	border-bottom: 0;
}

.fch-menu-movil .fch-menu-movil__sub a {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: var(--fch-esp-2);
	min-height: var(--fch-tactil-min);
	padding-block: var(--fch-esp-2);
	font-family: var(--fch-fuente-texto);
	font-size: var(--fch-texto-base);
}

.fch-menu-movil__detalle {
	color: var(--fch-color-texto-suave);
	font-size: var(--fch-texto-xs);
}

.fch-menu-movil__atajos {
	margin-top: var(--fch-esp-5);
}

@media (prefers-reduced-motion: reduce) {
	.fch-nav__sub,
	.fch-nav__flecha,
	.fch-menu-movil__abrir svg {
		transition: none;
	}
}

/* 1.8.0 · Pie con una columna más («Velas y regalo»). */
@media (min-width: 64em) {
	.fch-pie__columnas {
		grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
	}
}