/* ============================================================================
FM HEADER 2026 — cabecera nueva del Theme Builder (global desde el 22-oct-2026)
Se encola en todo el frontal (ver FM HEADER 2026 en functions.php).
Todo va bajo body.fm-h-2026: si se vuelve a limitar el encolado, no toca nada más.
FONDO: --fm-fondo-cabecera #EFE9E4 (21-oct-2026) en barra sólida, mega menú,
desplegables, buscador y panel lateral: un solo tono. Es el crema de las columnas
de «Zona de exposición» de la portada (sección 4). ΔE2000 frente a Gunni &
Trentino (#D6D3CE) = 5,30 (el #D6D0C4 anterior estaba a 3,25).
--fm-greige y --fm-arena se quedan como parte de la paleta cálida del resto de la web.
Contraste AA (WCAG 2.1) sobre --fm-fondo-cabecera, calculado:
--fm-texto 11,80:1 (texto del menú y del panel)
--fm-tierra-texto 5,95:1 (acento en TEXTO: «Ver todos…», «Todas las marcas»)
--fm-tierra 3,89:1 → solo LÍNEAS (subrayado, borde CTA, foco): AA no textual 3:1
--fm-piedra 2,26:1 separadores decorativos (criterio ≥ 1,5:1: no hace falta oscurecer)
blanco 1,20:1 → los círculos de los logos de MARCAS llevan anillo de 1 px en piedra
hover CTA: --fm-greige (1,28:1 de fondo; con --fm-arena quedaba en 1,06 e invisible)
Modo transparente: texto blanco sobre el hero con un degradado oscuro
detrás (ver .fm-h::before) para no depender de la foto.
============================================================================ */
:root {
--fm-fondo-cabecera: #EFE9E4;
--fm-arena: #E9E3D8;
--fm-greige: #D6D0C4;
--fm-piedra: #A89B88;
--fm-tierra: #8A6F55;
--fm-tierra-texto: #6B533F;
--fm-texto: #2F2A25;
--fm-blanco: #FFFFFF;
--fm-h-fila1: 64px;
--fm-h-fila2: 48px;
--fm-h-alto: calc(var(--fm-h-fila1) + var(--fm-h-fila2));
--fm-h-top: var(--wp-admin--admin-bar--height, 0px);
--fm-h-t: 250ms;
--fm-oc-ancho: 380px;
}
@media (max-width: 980px) {
:root { --fm-h-alto: var(--fm-h-fila1); }
}
/* Por debajo de 601 px la barra de admin de WP deja de ser fija (se va con el scroll):
el JS ajusta --fm-h-top al trozo de barra que sigue visible (solo con sesión iniciada) */
@media (prefers-reduced-motion: reduce) {
:root { --fm-h-t: 0ms; }
}
/* ---------- Reserva de altura (sin CLS) y capa del Theme Builder ---------- */
body.fm-h-2026:not(.fm-h-transparente) #et-main-area { padding-top: var(--fm-h-alto); }
body.fm-h-2026 > .gtranslate_wrapper,
body.fm-h-2026 #page-container > .gtranslate_wrapper { display: none !important; } /* flotante de GTranslate: aquí va en la cabecera */
/* ---------- Restos de la cabecera vieja en el contenido (22-oct-2026, revisión B7) ----------
(1) 30 páginas (familia Departamentos y Stressless 8353) llevan en su contenido una copia de la
cabecera vieja: sección fija con logo + módulo de menú (menú 3). Queda tapada pero sus enlaces
siguen en el orden de tabulación → fuera.
(2) Muchas páginas y los cuerpos del TB 928/9850/10353/14936 empiezan con una sección VACÍA
(#080f18, ~156 px) que hacía de colchón bajo la cabecera vieja: con la nueva es una franja
negra de más → fuera la primera sección vacía (y la siguiente si también lo es, caso 89).
Las secciones vacías a mitad de página (bandas decorativas, p. ej. 8353) no se tocan. */
body.fm-h-2026 #et-main-area .et_pb_section:has(.et_pb_menu, .et_pb_fullwidth_menu),
body.fm-h-2026 #et-main-area .et_builder_inner_content > .et_pb_section:first-child:not(:has(*)),
body.fm-h-2026 #et-main-area .et_builder_inner_content > .et_pb_section:first-child:not(:has(*)) + .et_pb_section:not(:has(*)) { display: none !important; }
/* ---------- «Saltar al contenido» (22-oct-2026): primer enfocable, visible solo con foco ---------- */
body.fm-h-2026 .fm-saltar {
position: fixed;
top: calc(var(--fm-h-top) + 8px);
left: 8px;
z-index: 10000;
padding: 12px 18px;
background: var(--fm-texto);
color: var(--fm-blanco);
font-size: 15px;
line-height: 1.2;
text-decoration: none;
transform: translateY(-200%);
}
body.fm-h-2026 .fm-saltar:focus {
transform: none;
outline: 2px solid var(--fm-tierra);
outline-offset: 2px;
}
body.fm-h-2026 #et-main-area:focus { outline: none; } /* recibe el foco del enlace (tabindex -1, ver JS) */
/* ---------- Sección de cabecera ---------- */
body.fm-h-2026 .fm-h.et_pb_section {
position: fixed !important;
top: var(--fm-h-top);
left: 0; right: 0;
z-index: 9990;
padding: 0 !important;
margin: 0 !important;
background: var(--fm-fondo-cabecera) !important;
color: var(--fm-texto);
font-family: 'Inter', Helvetica, Arial, sans-serif;
transition: background-color var(--fm-h-t) ease, color var(--fm-h-t) ease, box-shadow var(--fm-h-t) ease;
box-shadow: 0 1px 0 var(--fm-piedra);
}
body.fm-h-2026 .fm-h .et_pb_row {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 32px !important;
}
body.fm-h-2026 .fm-h .et_pb_column { margin: 0 !important; width: auto !important; float: none !important; }
body.fm-h-2026 .fm-h .et_pb_module { margin: 0 !important; }
/* Fila 1: izquierda · logo centrado · derecha */
body.fm-h-2026 .fm-h__top {
display: grid !important;
grid-template-columns: 1fr auto 1fr;
grid-template-areas: "izq centro der";
align-items: center;
height: var(--fm-h-fila1);
}
body.fm-h-2026 .fm-h__izq { grid-area: izq; display: flex; align-items: center; gap: 20px; }
body.fm-h-2026 .fm-h__centro { grid-area: centro; }
body.fm-h-2026 .fm-h__der { grid-area: der; display: flex; justify-content: flex-end; }
/* El panel del buscador se coloca contra la sección fija */
body.fm-h-2026 .fm-h__top,
body.fm-h-2026 .fm-h__top .et_pb_column,
body.fm-h-2026 .fm-h__top .et_pb_module,
body.fm-h-2026 .fm-h__top .et_pb_code_inner { position: static !important; }
body.fm-h-2026 .fm-h__top::after,
body.fm-h-2026 .fm-h__top::before { display: none !important; }
/* Logo: alto 38 px, ancho reservado por width/height del ![]()
*/
body.fm-h-2026 .fm-h__logo { display: block; line-height: 0; }
body.fm-h-2026 .fm-h__logo img { height: 38px; width: auto; aspect-ratio: 860 / 366; transition: filter var(--fm-h-t) ease; }
/* Botones e iconos */
body.fm-h-2026 .fm-h button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
body.fm-h-2026 .fm-ico::before {
font-family: ETmodules !important;
font-weight: 400;
font-style: normal;
speak: never;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
body.fm-h-2026 .fm-ico--menu::before { content: "\61"; font-size: 28px; }
body.fm-h-2026 .fm-ico--cerrar::before { content: "\4d"; font-size: 30px; }
body.fm-h-2026 .fm-ico--tel::before { content: "\e00b"; }
body.fm-h-2026 .fm-ico--mail::before { content: "\e010"; }
body.fm-h-2026 .fm-ico--buscar::before { content: "\55"; }
body.fm-h-2026 .fm-ico--pin::before { content: "\e01d"; }
body.fm-h-2026 .fm-ico--reloj::before { content: "\7d"; }
body.fm-h-2026 .fm-h__iconos { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
body.fm-h-2026 .fm-h__iconos li { padding: 0; }
body.fm-h-2026 .fm-h__iconos a,
body.fm-h-2026 .fm-h__iconos button,
body.fm-h-2026 .fm-h__burger {
display: inline-flex; align-items: center; justify-content: center;
min-width: 44px; height: 44px; /* objetivo táctil */
color: inherit; font-size: 17px; text-decoration: none;
}
/* Hamburguesa y panel lateral SOLO por debajo de 981 px (el mismo corte en el que se oculta la
fila 2). En escritorio no se pintan: display:none los saca también del orden de tabulación y
del árbol de accesibilidad. La columna izquierda queda vacía y el logo sigue centrado (1fr auto 1fr). */
@media (min-width: 981px) {
body.fm-h-2026 .fm-h__burger,
body.fm-h-2026 .fm-oc.et_pb_section,
body.fm-h-2026 .fm-oc__fondo { display: none !important; }
}
/* Selector de idioma (GTranslate en la cabecera) */
body.fm-h-2026 .fm-h__idioma { display: inline-flex; align-items: center; min-height: 44px; padding-left: 6px; }
body.fm-h-2026 .fm-h__idioma .gtranslate_wrapper { display: flex; gap: 4px; }
body.fm-h-2026 .fm-h__idioma img { width: 18px !important; height: auto !important; opacity: .85; }
/* Panel del buscador */
body.fm-h-2026 .fm-h__buscador {
position: absolute; left: 0; right: 0; top: 100%;
background: var(--fm-fondo-cabecera); color: var(--fm-texto);
padding: 20px 32px; box-shadow: 0 1px 0 var(--fm-piedra);
}
body.fm-h-2026 .fm-h__buscador[hidden] { display: none; }
body.fm-h-2026 .fm-h__buscador .aws-container { max-width: 720px; margin: 0 auto; }
/* ---------- Fila 2: menú principal ---------- */
body.fm-h-2026 .fm-h__nav { height: var(--fm-h-fila2); display: flex !important; justify-content: center; align-items: stretch; }
/* El panel del mega menú se posiciona contra la sección fija, no contra el */
body.fm-h-2026 .fm-h__nav,
body.fm-h-2026 .fm-h__nav .et_pb_column,
body.fm-h-2026 .fm-h__nav .et_pb_menu,
body.fm-h-2026 .fm-h__nav .et_pb_menu_inner_container,
body.fm-h-2026 .fm-h__nav .et_pb_menu__wrap,
body.fm-h-2026 .fm-h__nav .et_pb_menu__menu,
body.fm-h-2026 .fm-h__nav .et-menu-nav,
body.fm-h-2026 .fm-h__nav .et-menu,
body.fm-h-2026 .fm-h__nav .et-menu > li.mega-menu { position: static !important; }
body.fm-h-2026 .fm-h__nav .et_pb_menu { background: transparent !important; height: 100%; }
body.fm-h-2026 .fm-h__nav .et_pb_menu_inner_container,
body.fm-h-2026 .fm-h__nav .et_pb_menu__wrap,
body.fm-h-2026 .fm-h__nav .et_pb_menu__menu,
body.fm-h-2026 .fm-h__nav .et-menu-nav,
body.fm-h-2026 .fm-h__nav .et-menu { height: 100%; display: flex !important; align-items: stretch; justify-content: center; }
body.fm-h-2026 .fm-h__nav .et_mobile_nav_menu { display: none !important; }
body.fm-h-2026 .fm-h__nav .et-menu { gap: 0 28px; margin: 0 !important; padding: 0 !important; }
body.fm-h-2026 .fm-h__nav .et-menu > li { padding: 0 !important; margin: 0 !important; display: flex; align-items: stretch; }
body.fm-h-2026 .fm-h__nav .et-menu > li > a {
display: flex !important; align-items: center;
padding: 0 !important;
font-family: 'Inter', Helvetica, Arial, sans-serif !important;
font-size: 11px !important; font-weight: 400 !important; letter-spacing: 2px; text-transform: uppercase;
color: inherit !important; opacity: 1 !important;
position: relative;
}
/* Sin la flecha de Divi en el primer nivel */
body.fm-h-2026 .fm-h__nav .et-menu > li.menu-item-has-children > a::after { display: none !important; }
/* Subrayado fino de 1 px en tierra: hover, foco, abierto y actual */
body.fm-h-2026 .fm-h__nav .et-menu > li > a::before {
content: ""; position: absolute; left: 0; right: 0; bottom: 12px; height: 1px;
background: var(--fm-tierra); transform: scaleX(0); transform-origin: left;
transition: transform var(--fm-h-t) ease;
}
body.fm-h-2026 .fm-h__nav .et-menu > li:hover > a::before,
body.fm-h-2026 .fm-h__nav .et-menu > li:focus-within > a::before,
body.fm-h-2026 .fm-h__nav .et-menu > li.current-menu-item > a::before,
body.fm-h-2026 .fm-h__nav .et-menu > li.current-menu-ancestor > a::before { transform: scaleX(1); }
body.fm-h-2026 .fm-h__nav .et-menu > li.current-menu-item > a,
body.fm-h-2026 .fm-h__nav .et-menu > li.current-menu-ancestor > a { font-weight: 500 !important; }
/* CITA PREVIA: mismo texto con borde de 1 px en tierra, sin fondo */
body.fm-h-2026 .fm-h__nav .et-menu > li.fm-cta > a { padding: 0 14px !important; border: 1px solid var(--fm-tierra); margin: 9px 0; }
body.fm-h-2026 .fm-h__nav .et-menu > li.fm-cta > a::before { display: none; }
body.fm-h-2026 .fm-h__nav .et-menu > li.fm-cta > a:hover { background: var(--fm-greige); }
/* ---------- Desplegables y mega menú ---------- */
body.fm-h-2026 .fm-h__nav .et-menu li ul.sub-menu {
visibility: hidden; opacity: 0; pointer-events: none;
transition: opacity var(--fm-h-t) ease, visibility 0s linear var(--fm-h-t);
background: var(--fm-fondo-cabecera) !important; border: 0 !important;
box-shadow: 0 1px 0 var(--fm-piedra), 0 12px 24px rgba(47, 42, 37, .08);
}
body.fm-h-2026 .fm-h__nav .et-menu > li:hover > ul.sub-menu,
body.fm-h-2026 .fm-h__nav .et-menu > li:focus-within > ul.sub-menu,
body.fm-h-2026 .fm-h__nav .et-menu > li.fm-abierto > ul.sub-menu {
visibility: visible; opacity: 1; pointer-events: auto; transition-delay: 0s;
}
/* Esc: cerrado aunque el foco siga dentro */
body.fm-h-2026 .fm-h__nav .et-menu > li.fm-cerrado > ul.sub-menu { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; }
/* Desplegable simple (PROFESIONALES) */
body.fm-h-2026 .fm-h__nav .et-menu > li:not(.mega-menu) { position: relative !important; }
body.fm-h-2026 .fm-h__nav .et-menu > li:not(.mega-menu) > ul.sub-menu {
position: absolute !important; top: 100% !important; left: -20px; width: 260px; padding: 12px 0 !important;
}
body.fm-h-2026 .fm-h__nav .et-menu > li:not(.mega-menu) > ul.sub-menu a {
width: auto !important; padding: 8px 20px !important; font-size: 13px !important; color: var(--fm-texto) !important;
text-transform: none; letter-spacing: 0;
}
/* Mega menú a todo el ancho */
body.fm-h-2026 .fm-h__nav .et-menu > li.mega-menu > ul.sub-menu {
position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important;
width: 100% !important; max-width: none !important; margin: 0 !important;
display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 48px;
padding: 36px max(32px, calc((100% - 1200px) / 2)) 40px !important;
}
body.fm-h-2026 .fm-h__nav .et-menu > li.mega-menu > ul.sub-menu > li {
width: auto !important; padding: 0 !important; margin: 0 !important; float: none !important; position: static !important;
}
/* Encabezados de columna (2.º nivel) */
body.fm-h-2026 .fm-h__nav .et-menu > li.mega-menu > ul.sub-menu > li > a {
display: block; width: auto !important; padding: 0 0 12px !important; margin-bottom: 12px;
border-bottom: 1px solid var(--fm-piedra);
font-size: 11px !important; font-weight: 500 !important; letter-spacing: 2px; text-transform: uppercase;
color: var(--fm-texto) !important; background: none !important;
}
body.fm-h-2026 .fm-h__nav .et-menu > li.mega-menu > ul.sub-menu > li > a::after { display: none !important; }
/* Enlaces (3.er nivel) */
body.fm-h-2026 .fm-h__nav .et-menu li.mega-menu li ul.sub-menu {
position: static !important; visibility: inherit; opacity: 1; pointer-events: inherit;
width: auto !important; padding: 0 !important; box-shadow: none; background: none !important; display: block !important;
/* sin el retardo de visibilidad del panel: si no, durante 250 ms el Tab se salta este nivel */
transition: none !important;
}
/* Divi pone display:inline-block a los li del menú: cada enlace en su línea */
body.fm-h-2026 .fm-h__nav .et-menu li li { display: block !important; float: none !important; }
body.fm-h-2026 .fm-h__nav .et-menu li.mega-menu li li { padding: 0 !important; width: auto !important; }
body.fm-h-2026 .fm-h__nav .et-menu li.mega-menu li li a {
display: inline-block; width: auto !important; padding: 5px 0 !important;
font-size: 13px !important; font-weight: 400 !important; text-transform: none; letter-spacing: 0;
color: var(--fm-texto) !important; background: none !important; border-bottom: 1px solid transparent;
}
body.fm-h-2026 .fm-h__nav .et-menu li.mega-menu li li a:hover,
body.fm-h-2026 .fm-h__nav .et-menu li.mega-menu li li a:focus-visible { border-bottom-color: var(--fm-tierra); }
/* Columna destacada: foto + "VER TODOS LOS DEPARTAMENTOS" */
body.fm-h-2026 .fm-h__nav li.fm-mega-destacado > a {
border-bottom: 0 !important; padding: 0 !important; margin: 0 !important;
color: var(--fm-tierra-texto) !important;
}
body.fm-h-2026 .fm-h__nav li.fm-mega-destacado > a::before {
content: ""; display: block; aspect-ratio: 480 / 303; margin-bottom: 14px;
background: var(--fm-piedra) url(/wp-content/uploads/2024/06/Mobiliario-Fernando-Moreno-CAT-480x303.webp) center / cover no-repeat;
}
body.fm-h-2026 .fm-h__nav li.fm-mega-destacado > a:hover { text-decoration: underline; text-decoration-color: var(--fm-tierra); text-underline-offset: 4px; }
/* Marcas: panel a todo el ancho con los logos en fila (círculos del style.css) */
body.fm-h-2026 .fm-h__nav .et-menu > li.brands-menu > ul.sub-menu {
display: flex !important; flex-wrap: wrap; justify-content: center; align-items: center; gap: 24px;
}
body.fm-h-2026 .fm-h__nav li.brands-menu li.mega-brand > a { border-bottom: 0 !important; margin: 0 !important; padding: 0 !important; }
body.fm-h-2026 .fm-h__nav li.brands-menu li.mega-brand { margin-right: 0 !important; }
body.fm-h-2026 .fm-h__nav li.brands-menu li.all-brands { width: auto !important; margin-left: 12px; }
body.fm-h-2026 .fm-h__nav li.brands-menu li.all-brands > a { color: var(--fm-tierra-texto) !important; }
/* Blanco sobre el crema = 1,20:1: anillo de 1 px en piedra para recortar los círculos (sin mover el layout) */
body.fm-h-2026 .fm-h__nav li.brands-menu li.mega-brand a img,
body.fm-h-2026 .fm-oc li.mega-brand a img { box-shadow: 0 0 0 1px var(--fm-piedra); }
/* ---------- Foco visible en todo ---------- */
body.fm-h-2026 .fm-h a:focus-visible,
body.fm-h-2026 .fm-h button:focus-visible,
body.fm-h-2026 .fm-oc a:focus-visible,
body.fm-h-2026 .fm-oc button:focus-visible {
outline: 2px solid var(--fm-texto) !important; outline-offset: 2px;
}
/* ---------- Modo transparente (solo body.fm-h-transparente) ---------- */
body.fm-h-transparente .fm-h.et_pb_section:not(.is-solida) {
background: transparent !important; color: var(--fm-blanco); box-shadow: none;
}
body.fm-h-transparente .fm-h.et_pb_section::before {
content: ""; position: absolute; inset: 0 0 -40px 0; pointer-events: none; z-index: -1;
/* medido sobre el hero real: con .55→0 el CTA bajaba a 2,0:1 sobre las cortinas */
background: linear-gradient(to bottom, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .5) 75%, rgba(0, 0, 0, 0) 100%);
opacity: 1; transition: opacity var(--fm-h-t) ease;
}
body.fm-h-transparente .fm-h.et_pb_section.is-solida::before { opacity: 0; }
body.fm-h-transparente .fm-h.et_pb_section:not(.is-solida) .fm-h__logo img { filter: brightness(0) invert(1); }
body.fm-h-transparente .fm-h.et_pb_section:not(.is-solida) .fm-h__nav .et-menu > li > a::before { background: var(--fm-blanco); }
body.fm-h-transparente .fm-h.et_pb_section:not(.is-solida) .fm-h__nav .et-menu > li.fm-cta > a { border-color: var(--fm-blanco); }
body.fm-h-transparente .fm-h.et_pb_section:not(.is-solida) a:focus-visible,
body.fm-h-transparente .fm-h.et_pb_section:not(.is-solida) button:focus-visible { outline-color: var(--fm-blanco) !important; }
/* Al pasar por encima o con el foco dentro, sólida aunque el JS no haya corrido */
body.fm-h-transparente .fm-h.et_pb_section:hover,
body.fm-h-transparente .fm-h.et_pb_section:focus-within {
background: var(--fm-fondo-cabecera) !important; color: var(--fm-texto); box-shadow: 0 1px 0 var(--fm-piedra);
}
body.fm-h-transparente .fm-h.et_pb_section:hover::before,
body.fm-h-transparente .fm-h.et_pb_section:focus-within::before { opacity: 0; }
body.fm-h-transparente .fm-h.et_pb_section:hover .fm-h__logo img,
body.fm-h-transparente .fm-h.et_pb_section:focus-within .fm-h__logo img { filter: none; }
body.fm-h-transparente .fm-h.et_pb_section:hover .fm-h__nav .et-menu > li > a::before,
body.fm-h-transparente .fm-h.et_pb_section:focus-within .fm-h__nav .et-menu > li > a::before { background: var(--fm-tierra); }
body.fm-h-transparente .fm-h.et_pb_section:hover .fm-h__nav .et-menu > li.fm-cta > a,
body.fm-h-transparente .fm-h.et_pb_section:focus-within .fm-h__nav .et-menu > li.fm-cta > a { border-color: var(--fm-tierra); }
/* ---------- Panel lateral (#fm-offcanvas) ---------- */
body.fm-h-2026 .fm-oc.et_pb_section {
position: fixed !important; top: var(--fm-h-top); bottom: 0; left: 0;
width: var(--fm-oc-ancho); max-width: 100%; z-index: 9995;
margin: 0 !important; padding: 80px 36px 40px !important;
background: var(--fm-fondo-cabecera) !important; color: var(--fm-texto);
font-family: 'Inter', Helvetica, Arial, sans-serif;
overflow-y: auto; overscroll-behavior: contain;
transform: translateX(-100%); visibility: hidden;
transition: transform var(--fm-h-t) ease, visibility 0s linear var(--fm-h-t);
}
body.fm-h-2026 .fm-oc.et_pb_section.is-open { transform: none; visibility: visible; transition-delay: 0s; }
body.fm-h-2026 .fm-oc .et_pb_row { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; }
body.fm-h-2026 .fm-oc .et_pb_column { margin: 0 !important; }
/* La X se coloca contra el panel, no contra la fila de Divi */
body.fm-h-2026 .fm-oc .et_pb_row,
body.fm-h-2026 .fm-oc .et_pb_column { position: static !important; }
body.fm-h-2026 .fm-oc .et_pb_module { margin-bottom: 28px !important; }
body.fm-h-2026 .fm-oc__cerrar { position: absolute; top: 14px; right: 14px; }
body.fm-h-2026 .fm-oc__cerrar button { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; color: var(--fm-texto); }
body.fm-h-2026 .fm-oc__fondo {
position: fixed; inset: var(--fm-h-top) 0 0 0; z-index: 9994; background: rgba(47, 42, 37, .45);
opacity: 0; visibility: hidden; transition: opacity var(--fm-h-t) ease, visibility 0s linear var(--fm-h-t);
}
body.fm-oc-abierto .fm-oc__fondo { opacity: 1; visibility: visible; transition-delay: 0s; }
html.fm-sin-scroll, html.fm-sin-scroll body { overflow: hidden !important; }
/* Menús verticales dentro del panel (módulos Menú de Divi) */
body.fm-h-2026 .fm-oc .et_pb_menu { background: transparent !important; }
body.fm-h-2026 .fm-oc .et_mobile_nav_menu { display: none !important; }
body.fm-h-2026 .fm-oc .et_pb_menu__menu { display: block !important; }
body.fm-h-2026 .fm-oc .et_pb_menu__wrap { justify-content: flex-start !important; }
body.fm-h-2026 .fm-oc .et_pb_menu,
body.fm-h-2026 .fm-oc .et_pb_menu_inner_container,
body.fm-h-2026 .fm-oc .et_pb_menu__wrap,
body.fm-h-2026 .fm-oc .et_pb_menu__menu,
body.fm-h-2026 .fm-oc .et-menu-nav,
body.fm-h-2026 .fm-oc .et-menu { width: 100% !important; max-width: none !important; }
body.fm-h-2026 .fm-oc .et-menu { display: block !important; margin: 0 !important; padding: 0 !important; }
body.fm-h-2026 .fm-oc .et-menu li { display: block !important; padding: 0 !important; margin: 0 !important; position: relative !important; }
body.fm-h-2026 .fm-oc .et-menu > li { border-bottom: 1px solid var(--fm-piedra); }
body.fm-h-2026 .fm-oc .et-menu li a {
display: block !important; padding: 13px 0 !important; width: auto !important;
font-family: 'Inter', Helvetica, Arial, sans-serif !important; font-size: 13px !important; font-weight: 400 !important;
letter-spacing: 2px; text-transform: uppercase; color: var(--fm-texto) !important; opacity: 1 !important;
}
body.fm-h-2026 .fm-oc .et-menu li a::after { display: none !important; }
body.fm-h-2026 .fm-oc .et-menu li a:hover { color: var(--fm-tierra-texto) !important; }
/* Acordeón del menú principal en móvil (anula también la rejilla .mega-menu del style.css del hijo) */
body.fm-h-2026 .fm-oc .et-menu-nav .et-menu ul.sub-menu {
position: static !important; display: none !important; visibility: visible !important; opacity: 1 !important;
width: auto !important; max-width: none !important; padding: 0 0 10px 14px !important; margin: 0 !important;
box-shadow: none !important; border: 0 !important; background: none !important; transform: none !important;
}
body.fm-h-2026 .fm-oc .et-menu-nav .et-menu li.fm-acordeon-abierto > ul.sub-menu { display: block !important; }
body.fm-h-2026 .fm-oc .et-menu-nav .et-menu li li { width: auto !important; margin: 0 !important; float: none !important; }
body.fm-h-2026 .fm-oc .et-menu-nav .et-menu li.brands-menu.fm-acordeon-abierto > ul.sub-menu { display: flex !important; flex-wrap: wrap; gap: 10px; }
body.fm-h-2026 .fm-oc .et-menu ul.sub-menu a { text-transform: none; letter-spacing: 0; padding: 9px 0 !important; }
body.fm-h-2026 .fm-oc .fm-acordeon-btn {
position: absolute; top: 2px; right: 0; width: 44px; height: 44px;
display: inline-flex; align-items: center; justify-content: center;
background: none; border: 0; color: var(--fm-texto); cursor: pointer; font-size: 18px;
}
body.fm-h-2026 .fm-oc .fm-acordeon-btn::before { content: "\33"; font-family: ETmodules; transition: transform var(--fm-h-t) ease; }
body.fm-h-2026 .fm-oc li.fm-acordeon-abierto > .fm-acordeon-btn::before { transform: rotate(180deg); }
body.fm-h-2026 .fm-oc li.mega-brand a img { width: 72px !important; height: 72px !important; margin: 0 !important; }
/* Bloque de contacto del panel */
body.fm-h-2026 .fm-oc__contacto { font-size: 13px; line-height: 1.6; color: var(--fm-texto); }
body.fm-h-2026 .fm-oc__contacto h2 { font-family: 'Inter', Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; margin: 22px 0 8px; padding: 0; color: var(--fm-texto); }
body.fm-h-2026 .fm-oc__contacto a { color: var(--fm-texto); text-decoration: underline; text-decoration-color: var(--fm-tierra); text-underline-offset: 3px; }
body.fm-h-2026 .fm-oc__contacto p { padding: 0; margin: 0 0 6px; }
body.fm-h-2026 .fm-oc__contacto dl { margin: 0; }
body.fm-h-2026 .fm-oc__contacto dt { font-weight: 500; margin-top: 8px; }
body.fm-h-2026 .fm-oc__contacto dd { margin: 0; }
body.fm-h-2026 .fm-oc__solo-movil { display: none; }
/* Banderas arriba del panel (móvil): a 360 px no caben en la fila con 44×44 de zona táctil
(logo ~80 + lupa 44 + 4×44 + hamburguesa 44 + 32 de márgenes = 376 px) */
body.fm-h-2026 .fm-oc__banderas .gtranslate_wrapper { display: flex; flex-wrap: wrap; gap: 4px; }
body.fm-h-2026 .fm-oc__banderas a { display: inline-flex !important; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
body.fm-h-2026 .fm-oc__banderas img { width: 24px !important; height: auto !important; }
/* ---------- Móvil y tablet (< 980 px) ---------- */
@media (max-width: 980px) {
body.fm-h-2026 .fm-h .et_pb_row { padding: 0 16px !important; }
body.fm-h-2026 .fm-h__top { grid-template-columns: 1fr auto auto; grid-template-areas: "centro der izq"; }
body.fm-h-2026 .fm-h__logo img { height: 34px; }
body.fm-h-2026 .fm-h__nav { display: none !important; }
body.fm-h-2026 .fm-h__iconos .fm-h__idioma { display: none; } /* en móvil las banderas van en el panel */
body.fm-h-2026 .fm-h__buscador { padding: 16px; }
body.fm-h-2026 .fm-oc.et_pb_section { width: 100%; padding: 80px 20px 40px !important; }
body.fm-h-2026 .fm-oc__solo-movil { display: block; }
}