/* ============================================================================
   FM DEPARTAMENTOS 2026 — páginas de departamento con el diseño de «Baños y Revestimientos»
   (27231, 21-oct-2026; Mobiliario y Cocinas añadidas el 22-oct-2026).
   Solo se encola en esas páginas (lista FM_DEP_2026_PAGINAS en functions.php) y todo
   va bajo body.fm-dep-2026: no afecta a ninguna otra página.
   Tokens: los mismos --fm-* de la cabecera 2026 (esta página no carga su CSS).
   ============================================================================ */
body.fm-dep-2026 {
	--fm-fondo-cabecera: #EFE9E4;
	--fm-arena: #E9E3D8;
	--fm-greige: #D6D0C4;
	--fm-piedra: #A89B88;
	--fm-tierra: #8A6F55;
	--fm-tierra-texto: #6B533F;
	--fm-texto: #2F2A25;
	--fm-t-lenta: 600ms;
}
@media (prefers-reduced-motion: reduce) {
	body.fm-dep-2026 { --fm-t-lenta: 0ms; }
}

/* ---------- Hero ---------- */
/* Con la cabecera 2026 en modo transparente: el hero empieza en el borde superior (la cabecera
   va encima) y el título queda centrado en la parte visible bajo ella (--fm-h-alto viene de
   fm-header-2026.css: 112 px en escritorio, 64 px en móvil). */
body.fm-dep-2026 .fm-hero.et_pb_section {
	display: flex !important; flex-direction: column; justify-content: center;
	min-height: 70vh !important;
	padding-top: calc(var(--fm-h-alto, 112px) + 32px) !important;
	padding-bottom: 48px !important;
}
@media (max-width: 767px) {
	body.fm-dep-2026 .fm-hero.et_pb_section { min-height: 62vh !important; padding-top: calc(var(--fm-h-alto, 64px) + 40px) !important; padding-bottom: 40px !important; }
}
/* Cabecera 2026 en esta página: las banderas de GTranslate llegan por JS tras la carga y
   desplazaban la lupa (CLS 0,0025). Se reserva su hueco: 4 enlaces de 44 px + 3 huecos de 4 px. */
@media (min-width: 981px) {
	body.fm-dep-2026 .fm-h__idioma .gtranslate_wrapper { min-width: 188px; min-height: 44px; }
}
/* «Baños y Revestimientos» en una línea en escritorio */
@media (min-width: 981px) {
	body.fm-dep-2026 .fm-hero .et_pb_row > .et_pb_column:first-child { width: 72% !important; }
	body.fm-dep-2026 .fm-hero h2 { font-size: clamp(40px, 3.6vw, 63px) !important; white-space: nowrap; }
}
/* El logo no se sale a 360 px */
body.fm-dep-2026 .fm-hero-logo { max-width: 100% !important; }
body.fm-dep-2026 .fm-hero-logo img { max-width: 100%; height: auto; }
@media (max-width: 767px) {
	/* el margin-top de -40px heredado de Baños montaba el logo sobre el «by» */
	body.fm-dep-2026 .fm-hero-logo { margin-left: 0 !important; margin-top: 4px !important; width: min(260px, 100%) !important; }
	/* «Revestimientos» entero en una línea hasta 360 px (sin partir la palabra) */
	body.fm-dep-2026 .fm-hero h2 { font-size: clamp(28px, 8.6vw, 36px) !important; overflow-wrap: normal; hyphens: none; }
}

/* ---------- Tipografía común ---------- */
body.fm-dep-2026 .fm-colecciones,
body.fm-dep-2026 .fm-destacados { font-family: 'Inter', Helvetica, Arial, sans-serif; color: var(--fm-texto); }
body.fm-dep-2026 .fm-colecciones h2,
body.fm-dep-2026 .fm-destacados h2 {
	font-family: 'Inter', Helvetica, Arial, sans-serif !important; font-weight: 400 !important;
	font-size: 36px !important; line-height: 1.2 !important; color: var(--fm-texto) !important; padding: 0;
}

/* ---------- Nuestras colecciones: mosaico editorial ---------- */
body.fm-dep-2026 .fm-colecciones.et_pb_section { background-color: var(--fm-fondo-cabecera) !important; }
body.fm-dep-2026 .fm-colecciones .et_pb_row { padding: 0 !important; }
body.fm-dep-2026 .fm-colecciones__cab { margin-bottom: 8px !important; }
body.fm-dep-2026 .fm-eyebrow {
	font-size: 11px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase;
	color: var(--fm-tierra-texto); margin: 0 0 12px; padding: 0 !important;
}
body.fm-dep-2026 .fm-bloque { margin: 40px 0 16px !important; }
body.fm-dep-2026 .fm-bloque h3 {
	font-family: 'Inter', Helvetica, Arial, sans-serif !important; font-size: 11px !important; font-weight: 500 !important;
	letter-spacing: 2px; text-transform: uppercase; color: var(--fm-texto) !important;
	padding: 0 0 10px !important; border-bottom: 1px solid var(--fm-piedra);
}

body.fm-dep-2026 .fm-mosaico.et_pb_column { display: grid !important; gap: 12px; float: none; width: 100% !important; margin: 0 !important; }
body.fm-dep-2026 .fm-mosaico::after { display: none !important; }
/* 3 columnas con la primera pieza en 2×2. Mobiliario (6): grande + 2 a su lado + fila de 3.
   Cocinas (5): grande + 2 a su lado y, debajo, la ancha (2×1) con la quinta a su lado: 3 filas llenas, sin huecos. */
body.fm-dep-2026 .fm-mosaico--bano,
body.fm-dep-2026 .fm-mosaico--mobiliario,
body.fm-dep-2026 .fm-mosaico--cocinas { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 300px; }
body.fm-dep-2026 .fm-mosaico--bano .fm-pieza--grande,
body.fm-dep-2026 .fm-mosaico--mobiliario .fm-pieza--grande,
body.fm-dep-2026 .fm-mosaico--cocinas .fm-pieza--grande { grid-column: span 2; grid-row: span 2; }
body.fm-dep-2026 .fm-mosaico--superficies { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 320px; }
body.fm-dep-2026 .fm-mosaico--superficies .fm-pieza--ancha,
body.fm-dep-2026 .fm-mosaico--cocinas .fm-pieza--ancha { grid-column: span 2; }

body.fm-dep-2026 .fm-pieza { position: relative; overflow: hidden; margin: 0 !important; min-height: 0; background: var(--fm-arena); }
body.fm-dep-2026 .fm-pieza .et_pb_text_inner,
body.fm-dep-2026 .fm-pieza__enlace { display: block; height: 100%; }
body.fm-dep-2026 .fm-pieza__enlace { position: relative; color: #fff; text-decoration: none; }
body.fm-dep-2026 .fm-pieza__img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	transform: scale(1); transition: transform var(--fm-t-lenta) ease;
}
/* Degradado inferior para que el nombre se lea siempre (contraste medido en la zona del texto) */
body.fm-dep-2026 .fm-pieza__enlace::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(to top, rgba(20, 17, 14, .72) 0%, rgba(20, 17, 14, .38) 32%, rgba(20, 17, 14, 0) 62%);
}
body.fm-dep-2026 .fm-pieza__pie {
	position: absolute; left: 24px; right: 24px; bottom: 22px; z-index: 1;
	display: flex; gap: 14px; align-items: baseline;
	font-size: 12.5px; font-weight: 500; line-height: 1.4; letter-spacing: 2px; text-transform: uppercase; color: #fff;
}
body.fm-dep-2026 .fm-pieza__n { flex: none; }
body.fm-dep-2026 .fm-pieza__t { position: relative; padding-bottom: 7px; }
body.fm-dep-2026 .fm-pieza__t::after {
	content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 24px; background: #fff;
	transition: width var(--fm-t-lenta) ease;
}
body.fm-dep-2026 .fm-pieza__enlace:hover .fm-pieza__img,
body.fm-dep-2026 .fm-pieza__enlace:focus-visible .fm-pieza__img { transform: scale(1.04); }
body.fm-dep-2026 .fm-pieza__enlace:hover .fm-pieza__t::after,
body.fm-dep-2026 .fm-pieza__enlace:focus-visible .fm-pieza__t::after { width: 100%; }
body.fm-dep-2026 .fm-pieza__enlace:focus-visible { outline: 2px solid var(--fm-texto); outline-offset: 3px; }

@media (max-width: 980px) {
	body.fm-dep-2026 .fm-mosaico--bano,
	body.fm-dep-2026 .fm-mosaico--mobiliario,
	body.fm-dep-2026 .fm-mosaico--cocinas,
	body.fm-dep-2026 .fm-mosaico--superficies { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 260px; }
	body.fm-dep-2026 .fm-mosaico--bano .fm-pieza--grande,
	body.fm-dep-2026 .fm-mosaico--mobiliario .fm-pieza--grande,
	body.fm-dep-2026 .fm-mosaico--cocinas .fm-pieza--grande { grid-column: span 2; grid-row: span 1; }
	/* tablet: grande / 2+2 / última a lo ancho (Cocinas: grande / 2 / ancha / última a lo ancho) */
	body.fm-dep-2026 .fm-mosaico--bano .fm-pieza:last-child,
	body.fm-dep-2026 .fm-mosaico--mobiliario .fm-pieza:last-child,
	body.fm-dep-2026 .fm-mosaico--cocinas .fm-pieza:last-child { grid-column: span 2; }
}
@media (max-width: 767px) {
	body.fm-dep-2026 .fm-mosaico--bano,
	body.fm-dep-2026 .fm-mosaico--mobiliario,
	body.fm-dep-2026 .fm-mosaico--cocinas,
	body.fm-dep-2026 .fm-mosaico--superficies { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
	body.fm-dep-2026 .fm-mosaico .fm-pieza { grid-column: auto !important; grid-row: auto !important; aspect-ratio: 4 / 3; }
	body.fm-dep-2026 .fm-colecciones h2,
	body.fm-dep-2026 .fm-destacados h2 { font-size: 28px !important; }
}

/* ---------- Productos destacados: carrusel con scroll-snap ---------- */
body.fm-dep-2026 .fm-destacados .et_pb_row { padding: 0 !important; }
body.fm-dep-2026 .fm-destacados__cab { text-align: left; margin-bottom: 0 !important; }
body.fm-dep-2026 .fm-carrusel-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 28px; }
body.fm-dep-2026 .fm-carrusel-nav { display: flex; gap: 8px; }
body.fm-dep-2026 .fm-carrusel-nav button {
	width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--fm-piedra); border-radius: 50%; background: transparent; color: var(--fm-texto);
	cursor: pointer; font-size: 18px; line-height: 1; padding: 0;
}
body.fm-dep-2026 .fm-carrusel-nav button:hover { background: var(--fm-fondo-cabecera); border-color: var(--fm-tierra); }
body.fm-dep-2026 .fm-carrusel-nav button:disabled { opacity: .35; cursor: default; }
body.fm-dep-2026 .fm-carrusel-nav button:focus-visible { outline: 2px solid var(--fm-tierra); outline-offset: 2px; }

body.fm-dep-2026 .fm-carrusel.et_pb_column {
	display: flex !important; gap: 20px; width: 100% !important; float: none; margin: 0 !important;
	overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth;
	padding-bottom: 14px; scrollbar-width: thin; scrollbar-color: var(--fm-piedra) transparent;
}
@media (prefers-reduced-motion: reduce) { body.fm-dep-2026 .fm-carrusel.et_pb_column { scroll-behavior: auto; } }
body.fm-dep-2026 .fm-carrusel::after { display: none !important; }
body.fm-dep-2026 .fm-carrusel > .fm-tarjeta { flex: 0 0 calc((100% - 3 * 20px) / 4.25); scroll-snap-align: start; margin: 0 !important; }
/* Un solo enlace por tarjeta (en el H3), estirado con ::after para que toda la tarjeta sea clicable */
body.fm-dep-2026 .fm-tarjeta__in { position: relative; }
body.fm-dep-2026 .fm-tarjeta__enlace { color: inherit !important; text-decoration: none; }
body.fm-dep-2026 .fm-tarjeta__enlace::after { content: ""; position: absolute; inset: 0; z-index: 1; }
body.fm-dep-2026 .fm-tarjeta__img { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--fm-arena); }
body.fm-dep-2026 .fm-tarjeta__img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--fm-t-lenta) ease; }
body.fm-dep-2026 .fm-tarjeta__in:hover .fm-tarjeta__img img,
body.fm-dep-2026 .fm-tarjeta__in:focus-within .fm-tarjeta__img img { transform: scale(1.04); }
body.fm-dep-2026 .fm-tarjeta__t {
	font-family: 'Inter', Helvetica, Arial, sans-serif !important; font-size: 13px !important; font-weight: 600 !important;
	line-height: 1.4 !important; letter-spacing: 1px; text-transform: uppercase; color: var(--fm-texto) !important;
	margin: 16px 0 4px; padding: 0 !important;
}
body.fm-dep-2026 .fm-tarjeta__m { display: block; font-size: 12px; color: var(--fm-tierra-texto); }
body.fm-dep-2026 .fm-tarjeta__v {
	display: inline-block; margin-top: 10px; font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
	color: var(--fm-texto); border-bottom: 1px solid var(--fm-tierra); padding-bottom: 2px;
}
/* El foco se dibuja alrededor de toda la tarjeta (el ::after del enlace la cubre) */
body.fm-dep-2026 .fm-tarjeta__enlace:focus-visible { outline: none; }
/* hacia dentro: el overflow del carrusel recortaría un contorno exterior en la primera tarjeta */
body.fm-dep-2026 .fm-tarjeta__enlace:focus-visible::after { outline: 2px solid var(--fm-tierra); outline-offset: -2px; }
@media (max-width: 980px) { body.fm-dep-2026 .fm-carrusel > .fm-tarjeta { flex-basis: calc((100% - 2 * 20px) / 2.3); } }
@media (max-width: 767px) { body.fm-dep-2026 .fm-carrusel > .fm-tarjeta { flex-basis: calc((100% - 20px) / 1.3); } }

/* CTA del catálogo: borde de 1 px en tierra, sin fondo; hover en greige */
body.fm-dep-2026 .fm-cta-catalogo { margin-top: 36px; }
body.fm-dep-2026 .fm-destacados .et_pb_button.fm-cta-catalogo,
body.fm-dep-2026 .fm-destacados .fm-cta-catalogo .et_pb_button,
body.fm-dep-2026 #page-container .fm-destacados .et_pb_button.fm-cta-catalogo {
	background: transparent !important; color: var(--fm-texto) !important; border: 1px solid var(--fm-tierra) !important; border-radius: 0 !important;
	font-family: 'Inter', Helvetica, Arial, sans-serif !important; font-size: 12px !important; font-weight: 500 !important;
	letter-spacing: 2px !important; text-transform: uppercase; padding: 14px 28px !important; line-height: 1.4 !important;
}
body.fm-dep-2026 #page-container .fm-destacados .et_pb_button.fm-cta-catalogo:hover { background: var(--fm-greige) !important; }
body.fm-dep-2026 #page-container .fm-destacados .et_pb_button.fm-cta-catalogo::after { display: none !important; }
body.fm-dep-2026 #page-container .fm-destacados .et_pb_button.fm-cta-catalogo:focus-visible { outline: 2px solid var(--fm-tierra); outline-offset: 3px; }