/* ============================================================ Menú MÓVIL v3 (<=1000px) — fabricantecomplementosalimenticios.com ============================================================ Sustituye al "móvil plano" (menu-flat-v2.css), que ocultaba los submenús y dejaba el panel con 4 enlaces y ~430 px de blanco muerto: en móvil no había forma de llegar a las 11 landings que sí ve el escritorio. Qué hace este fichero: - Panel en 3 zonas: cabecera (logo + X, la del tema), lista SCROLLABLE y pie de acción FIJO. Nada de `min-height:100vh` en el

sigue navegando a la página pilar; quien abre/cierra es un botón redondo de 44 px a la derecha de la fila (afordancia visible, no un chevron ambiguo). fca-menu-mobile.js pone el botón y la clase .is-open. - Pie fijo con el CTA real del menú (li.nav-quote, ya localizado), un enlace de email y los idiomas en pastillas — lo pinta fca-menu-mobile.php. - Arregla dos restos: el `padding-bottom:76px` del (de la barra CTA retirada en 2026-08-05) y el solape de la pastilla flotante de idioma (.fca-lang) encima del CTA del panel. Se encola DESPUÉS de menu.css, menu-flat-v2.css y menu-mega-v2.css, así que gana por orden de carga sin tocarlos. NOMBRE NUEVO (v3) porque Cloudflare cachea los estáticos 7 días y sirve HIT stale aunque cambie el ?ver. Reversible: quitar el enqueue de fca-nav.php y se vuelve al plano. */ /* El pie de acción vive dentro de .inside-navigation, que en escritorio SÍ se ve: fuera del móvil no debe existir. */ .fca-mobfoot { display: none; } @media (max-width: 1000px) { /* --- Restos de la barra CTA fija retirada en 2026-08-05 --------------- */ body { padding-bottom: 0; } /* La pastilla flotante de idioma se montaba encima del CTA del panel. */ body:has(#site-navigation.toggled) .fca-lang { display: none; } /* En páginas con hero crema la cabecera es crema y dejaba una franja de color sobre el panel blanco. Mientras el panel está abierto, blanca. */ body:has(#site-navigation.toggled) .site-header { background: #ffffff; } /* ========================================================== 1. Panel: cabecera fantasma + lista scrollable + pie fijo ========================================================== */ /* .toggled repetido a propósito: GeneratePress trae .has-inline-mobile-toggle #site-navigation.toggled { margin-top: 1.5em } en main.min.css, que empata en especificidad con menu.css y se imprime DESPUÉS, así que ganaba: el panel fijo bajaba 24 px y se comía el pie. La clase duplicada suma un peso más y zanja el empate. */ #site-navigation.main-navigation.toggled.toggled { /* menu.css ya lo pone fixed/inset:0/100svh; aquí solo el scroll: manda la zona de la lista, no el panel entero (si no, el pie se va abajo). */ margin: 0; overflow: hidden; } /* flex-wrap:nowrap es obligatorio: GeneratePress deja .inside-navigation en `wrap` y, en columna, un menú alto (los mega de /en/, /de/…) empujaba el pie de acción a una SEGUNDA COLUMNA fuera de pantalla. En español no se veía porque la lista cabe de sobra. */ #site-navigation.toggled .inside-navigation { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; width: 100%; max-width: none; height: 100vh; height: 100svh; padding: 0; } /* GeneratePress le pone `order:3` a .main-nav para colocarlo a la derecha en escritorio. Sin reordenar, el pie de acción (order 0) salía ARRIBA. */ #site-navigation.toggled .main-nav { order: 1; flex: 1 1 auto; min-height: 0; width: 100%; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; /* padding-top ≈ alto de la barra del logo (10 + 44 + 10) + aire */ padding: 70px 20px 10px; } /* La lista deja de ser la columna a pantalla completa de menu.css. */ #site-navigation.toggled .main-nav > ul { display: block; width: 100%; min-height: 0; margin: 0; padding: 0; } /* ========================================================== 2. Filas de primer nivel ========================================================== */ #site-navigation.toggled .main-nav > ul > li { position: relative; width: 100%; border-bottom: 1px solid rgba(17, 24, 20, 0.07); animation: fcaMobRow 0.3s cubic-bezier(0.22, 1, 0.36, 1) both; } #site-navigation.toggled .main-nav > ul > li:nth-child(1) { animation-delay: 0.03s; } #site-navigation.toggled .main-nav > ul > li:nth-child(2) { animation-delay: 0.06s; } #site-navigation.toggled .main-nav > ul > li:nth-child(3) { animation-delay: 0.09s; } #site-navigation.toggled .main-nav > ul > li:nth-child(4) { animation-delay: 0.12s; } #site-navigation.toggled .main-nav > ul > li:nth-child(5) { animation-delay: 0.15s; } #site-navigation.toggled .main-nav > ul > li:nth-child(6) { animation-delay: 0.18s; } #site-navigation.toggled .main-nav > ul > li > a { display: flex; align-items: center; gap: 10px; padding: 15px 2px; font-family: 'Figtree', var(--mr-font, 'Inter'), sans-serif; font-size: 18px; font-weight: 600; line-height: 1.25; color: #111816; background: transparent; /* El tema mete un min-height heredado del nav de escritorio. */ min-height: 0; } /* Hueco para el botón del acordeón (44 px + aire). */ #site-navigation.toggled .main-nav > ul > li.menu-item-has-children > a { padding-right: 60px; } #site-navigation.toggled .main-nav > ul > li[class*="current-menu-"] > a { color: #007c68; } /* El CTA (li.nav-quote / último ítem) sale del listado: ya está en el pie de acción, con más presencia y sin depender del scroll. */ #site-navigation.toggled .main-nav > ul > li.nav-quote { display: none; } /* menu.css convertía el ÚLTIMO ítem en píldora verde dentro de la lista. Al sacar el CTA al pie, el último de la lista es un enlace normal. */ #site-navigation.toggled .main-nav > ul > li:last-child { margin-top: 0; padding-top: 0; border-bottom: 0; } #site-navigation.toggled .main-nav > ul > li:last-child > a { justify-content: flex-start; padding: 15px 2px; border-radius: 0; background: transparent; color: #111816; font-weight: 600; box-shadow: none; } #site-navigation.toggled .main-nav > ul > li:last-child.menu-item-has-children > a { padding-right: 60px; } #site-navigation.toggled .main-nav > ul > li:last-child[class*="current-menu-"] > a { color: #007c68; } /* ========================================================== 3. Botón del acordeón (lo inyecta fca-menu-mobile.js) ========================================================== */ /* Se anula el chevron ::after de menu.css / menu-mega-v2.css: el indicador pasa a estar DENTRO del botón, que es lo que de verdad se toca. */ #site-navigation.toggled .main-nav > ul > li.menu-item-has-children > a::after { content: none; } #site-navigation.toggled .main-nav > ul > li > button.fca-acc { position: absolute; top: 4px; right: 0; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: #f1f5f4; color: #47534f; cursor: pointer; -webkit-appearance: none; appearance: none; transition: background-color 0.2s ease, color 0.2s ease; } /* El chevron: cuadrado rotado, mismo dibujo que el resto del sitio. */ #site-navigation.toggled .main-nav > ul > li > button.fca-acc > span { display: block; width: 9px; height: 9px; margin-top: -3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.25s ease; } #site-navigation.toggled .main-nav > ul > li.is-open > button.fca-acc { background: #dff2ed; color: #007c68; } #site-navigation.toggled .main-nav > ul > li.is-open > button.fca-acc > span { margin-top: 3px; transform: rotate(-135deg); } #site-navigation.toggled .main-nav > ul > li > button.fca-acc:hover, #site-navigation.toggled .main-nav > ul > li > button.fca-acc:focus { background: #dff2ed; color: #007c68; } #site-navigation.toggled .main-nav > ul > li > button.fca-acc:focus-visible { outline: 2px solid #007c68; outline-offset: 2px; } /* ========================================================== 4. Submenús: acordeón desplegable ========================================================== */ /* menu-flat-v2.css los ocultaba en duro (display:none) — se recuperan. OJO con GeneratePress: sus `ul ul` van con `float:left` y sacados de pantalla con `left:-99999px`. Con el float puesto, el submenú abierto medía 10 px de alto (solo su padding) y el ítem siguiente se colocaba A SU LADO, no debajo: hay que anular float, left y height. */ #site-navigation.toggled .main-nav ul ul, #site-navigation.toggled .main-nav > ul > li.fca-lang-pillar > ul.sub-menu { display: block; position: static; float: none; left: auto; top: auto; width: auto; height: auto; max-height: 0; margin: 0 0 0 3px; padding: 0 0 0 15px; border: 0; border-left: 2px solid #e4eae8; border-radius: 0; background: transparent; box-shadow: none; opacity: 0; overflow: hidden; transform: none; visibility: visible; transition: max-height 0.34s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease, padding-bottom 0.24s ease; } #site-navigation.toggled .main-nav > ul > li.is-open > ul.sub-menu { max-height: 1400px; padding-bottom: 10px; opacity: 1; } /* Submenús anidados (columnas del mega en /en/, /de/…): dentro de un pilar abierto van siempre desplegados, sin acordeón de segundo nivel. */ #site-navigation.toggled .main-nav > ul > li.is-open ul ul { max-height: 1400px; opacity: 1; margin-left: 0; padding-left: 10px; border-left: 0; } #site-navigation.toggled .main-nav ul ul li { width: 100%; border-bottom: 0; } #site-navigation.toggled .main-nav ul ul li a { display: block; padding: 10px 8px; border-radius: 10px; font-family: 'Figtree', var(--mr-font, 'Inter'), sans-serif; font-size: 15.5px; font-weight: 500; line-height: 1.35; color: #4a5553; background: transparent; } #site-navigation.toggled .main-nav ul ul li a:hover, #site-navigation.toggled .main-nav ul ul li a:focus { color: #007c68; background: #f2faf8; } #site-navigation.toggled .main-nav ul ul li[class*="current-menu-"] > a { color: #007c68; font-weight: 600; background: #eafaf6; } /* Rótulos de columna del mega (idiomas != es): siguen siendo títulos. */ #site-navigation.toggled .main-nav ul ul li.fca-mega-group > a, #site-navigation.toggled .main-nav ul ul li.fca-mega-group > a:hover, #site-navigation.toggled .main-nav ul ul li.fca-mega-group > a:focus { padding: 14px 8px 4px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #96a09d; background: transparent; pointer-events: none; cursor: default; } /* ========================================================== 4-bis. Pilares del mega (idiomas != es) ========================================================== menu-mega-v2.css trae para .fca-lang-pillar las MISMAS reglas que este fichero pero con una clase más (1 id + 4 clases), así que ganaba: el botón del acordeón volvía a ser la banda invisible de 56 px x 100% —que con el submenú abierto se estiraba media pantalla— y el chevron ::after del enlace se sumaba al del botón (doble indicador). Se repiten aquí sus selectores exactos, que al imprimirse después deshacen el empate. */ #site-navigation.toggled .main-nav > ul > li.fca-lang-pillar.menu-item-has-children > a::after, #site-navigation.toggled .main-nav > ul > li.fca-lang-pillar.menu-item-has-children.is-open > a::after { content: none; } #site-navigation.toggled .main-nav > ul > li.fca-lang-pillar > button.fca-acc { top: 4px; right: 0; width: 44px; height: 44px; border-radius: 50%; background: #f1f5f4; color: #47534f; } #site-navigation.toggled .main-nav > ul > li.fca-lang-pillar.is-open > button.fca-acc, #site-navigation.toggled .main-nav > ul > li.fca-lang-pillar > button.fca-acc:hover, #site-navigation.toggled .main-nav > ul > li.fca-lang-pillar > button.fca-acc:focus { background: #dff2ed; color: #007c68; } /* ========================================================== 5. Pie de acción fijo ========================================================== */ /* GeneratePress esconde por CSS inline (<=768px) TODO hijo de .inside-navigation que no sea el buscador o el menú: .has-inline-mobile-toggle #site-navigation .inside-navigation > :not(.navigation-search):not(.main-nav) Son 1 id + 4 clases (los :not() cuentan), así que hay que superarlo. La clase repetida .fca-mobfoot.fca-mobfoot suma especificidad sin depender de .grid-container (que va y viene según ajustes del tema). */ #site-navigation.main-navigation.toggled .inside-navigation > .fca-mobfoot.fca-mobfoot { display: block; order: 2; flex: 0 0 auto; width: 100%; box-sizing: border-box; padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(17, 24, 20, 0.09); background: #ffffff; box-shadow: 0 -10px 24px rgba(15, 23, 42, 0.05); } #site-navigation.toggled .fca-mobfoot__cta { display: flex; align-items: center; justify-content: center; width: 100%; box-sizing: border-box; padding: 16px 20px; border-radius: 999px; background: #007c68; color: #ffffff; font-family: 'Figtree', var(--mr-font, 'Inter'), sans-serif; font-size: 16.5px; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; box-shadow: 0 8px 20px rgba(0, 124, 104, 0.26); } #site-navigation.toggled .fca-mobfoot__cta:hover, #site-navigation.toggled .fca-mobfoot__cta:focus, #site-navigation.toggled .fca-mobfoot__cta:visited { background: #0b5c4b; color: #ffffff; } /* Idiomas en pastillas: sustituye a la pastilla flotante, que se solapaba. */ #site-navigation.toggled .fca-mobfoot__langs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(17, 24, 20, 0.07); } #site-navigation.toggled .fca-mobfoot__globe { flex-shrink: 0; margin-right: 2px; color: #96a09d; } #site-navigation.toggled .fca-mobfoot__lang { padding: 6px 11px; border-radius: 999px; background: #f1f5f4; color: #5c6663; font-family: 'Figtree', var(--mr-font, 'Inter'), sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; line-height: 1; text-decoration: none; } #site-navigation.toggled .fca-mobfoot__lang:hover, #site-navigation.toggled .fca-mobfoot__lang:focus { background: #dff2ed; color: #007c68; } #site-navigation.toggled .fca-mobfoot__lang.is-current, #site-navigation.toggled .fca-mobfoot__lang.is-current:visited { background: #007c68; color: #ffffff; } } @keyframes fcaMobRow { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { #site-navigation.toggled .main-nav > ul > li, #site-navigation.toggled .main-nav ul ul, #site-navigation.toggled .main-nav > ul > li > button.fca-acc, #site-navigation.toggled .main-nav > ul > li > button.fca-acc > span { animation: none; transition: none; } }