/* ============================================================================ * mm-components.css * Componentes reutilizables del design system departamental. * Depende de mm-tokens.css + mm-base.css. * ============================================================================ */ /* ── Barra informativa superior ─────────────────────────────────────────── */ .mm-topbar { background: var(--mm-ink); color: var(--mm-cream); font-size: var(--mm-fs-eyebrow); letter-spacing: var(--mm-track-wide); text-transform: uppercase; padding: 8px var(--mm-gutter); text-align: center; overflow: hidden; position: relative; } .mm-topbar__slide { display: flex; justify-content: center; align-items: center; gap: var(--mm-space-6); } .mm-topbar a { color: var(--mm-gold); } .mm-topbar a:hover { color: var(--mm-cream); } @media (max-width: 780px) { .mm-topbar { font-size: 9px; letter-spacing: .12em; } .mm-topbar__slide { gap: var(--mm-space-4); } } /* ── Header principal ──────────────────────────────────────────────────── */ .mm-header { position: sticky; top: 0; z-index: 60; background: #CD6914; border-bottom: 1px solid var(--mm-border); transition: box-shadow var(--mm-t-base) var(--mm-ease), padding var(--mm-t-base) var(--mm-ease); } .mm-header[data-scrolled] { box-shadow: var(--mm-shadow-1); } /* Header compacto al bajar. La marca va en (la pone el script de la home) y no en el propio
: el runtime de DC reconcilia los nodos que renderiza y le borra atributos y estilos en línea. Se encoge por padding, no por alto fijo: con height:64px el buscador, que necesita 68 con su padding, quedaba recortado y parpadeaba. */ html.mm-scrolleado .mm-header { /* Fondo sólido, sin backdrop-filter. El blur vuelve a muestrear lo que pasa por detrás en cada cuadro, y en una barra sticky eso tiembla mientras el contenido se mueve. */ background: #CD6914; box-shadow: 0 18px 40px -38px rgba(30,27,22,.9); } html.mm-scrolleado .mm-header__inner { padding-top: 8px; padding-bottom: 8px; } /* !important porque la regla base del logo también lo usa; sin esto no gana. */ html.mm-scrolleado .mm-header__logo-image { max-height: 72px !important; } /* Sin transición a propósito. El alto del logo manda sobre el alto del header, y el header es sticky pero está en el flujo: animarlo 300ms significa empujar todo el contenido de abajo durante 300ms. Si eso pasa mientras la persona scrollea, se ve como si el buscador vibrara. Cambia de golpe, una sola vez, y no se nota. */ @media (max-width: 780px) { html.mm-scrolleado .mm-header__inner { padding-top: 6px; padding-bottom: 6px; } html.mm-scrolleado .mm-header__logo-image { max-height: 54px !important; } } .mm-header__inner { max-width: var(--mm-container); margin: 0 auto; padding: 14px var(--mm-gutter); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--mm-space-6); } @media (max-width: 780px) { .mm-header__inner { padding: 10px var(--mm-gutter); gap: var(--mm-space-3); } } .mm-header__logo { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1; } .mm-header__logo-name { font-family: var(--mm-font-serif); font-weight: 500; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: .02em; color: var(--mm-ink); } .mm-header__logo-sub { font-size: 8px; letter-spacing: .48em; text-transform: uppercase; color: var(--mm-gold-dark); margin-top: 3px; } .mm-header__actions { display: inline-flex; align-items: center; gap: var(--mm-space-4); font-size: var(--mm-fs-eyebrow); letter-spacing: var(--mm-track-wide); text-transform: uppercase; } .mm-header__actions button, .mm-header__actions a { background: none; border: 0; padding: 0; color: #ffffff; cursor: pointer; font: 500 var(--mm-fs-eyebrow)/1 var(--mm-font-sans); letter-spacing: var(--mm-track-wide); text-transform: uppercase; transition: color var(--mm-t-fast) var(--mm-ease); } .mm-header__actions button:hover, .mm-header__actions a:hover { color: #EBC66B; } .mm-header__actions .mm-count { color: #EBC66B; } .mm-header__search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--mm-border-strong); border-radius: var(--mm-radius-pill); padding: 9px 16px; background: var(--mm-white); transition: border-color var(--mm-t-fast) var(--mm-ease), box-shadow var(--mm-t-fast) var(--mm-ease); min-width: 0; } .mm-header__search:focus-within { border-color: var(--mm-gold-dark); box-shadow: 0 0 0 3px rgba(212,175,55,.18); } .mm-header__search svg { flex: 0 0 auto; color: var(--mm-fg-muted); } .mm-header__search input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; outline: none; font-size: var(--mm-fs-body); letter-spacing: .02em; color: var(--mm-ink); } @media (max-width: 780px) { .mm-header__search { display: none; } /* Objetivos táctiles: "Favoritos" y "Bolsa" medían 20px de alto. La referencia de accesibilidad es 44px; el texto no cambia de tamaño, se agranda el área que responde al dedo. */ .mm-header__actions a, .mm-header__actions button { min-height: 44px; } } .mm-header__mobile-toggle { display: none; background: none; border: 0; padding: 6px 8px; cursor: pointer; color: var(--mm-ink); } @media (max-width: 780px) { .mm-header__mobile-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; } } /* ── Navegacion departamental (mega-menu en desktop, drawer en movil) ─── */ .mm-nav { background: #CD6914; border-bottom: 1px solid var(--mm-border); } .mm-nav__inner { max-width: var(--mm-container); margin: 0 auto; padding: 0 var(--mm-gutter); display: flex; align-items: center; gap: 0; overflow-x: auto; scrollbar-width: none; } .mm-nav__inner::-webkit-scrollbar { display: none; } .mm-nav__item { position: relative; padding: 14px 20px; font: 500 11px/1 var(--mm-font-sans); letter-spacing: var(--mm-track-wide); text-transform: uppercase; color: #ffffff; white-space: nowrap; transition: color var(--mm-t-fast) var(--mm-ease); } .mm-nav__item::after { content: ''; position: absolute; left: 20px; right: 20px; bottom: 0; height: 2px; background: #EBC66B; transform: scaleX(0); transform-origin: center; transition: transform var(--mm-t-base) var(--mm-ease); } .mm-nav__item:hover, .mm-nav__item[aria-current="page"] { color: #EBC66B; } .mm-nav__item:hover::after, .mm-nav__item[aria-current="page"]::after { transform: scaleX(1); background: #EBC66B; } .mm-nav__item[data-highlight] { color: #ffffff; font-weight: 600; } @media (max-width: 780px) { .mm-nav { display: none; } } /* Megamenu panel */ .mm-nav__panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--mm-bg-alt); border-top: 1px solid var(--mm-border); box-shadow: var(--mm-shadow-2); z-index: 55; padding: var(--mm-space-6) var(--mm-gutter); opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity var(--mm-t-fast) var(--mm-ease), transform var(--mm-t-fast) var(--mm-ease); } .mm-nav__item:hover + .mm-nav__panel, .mm-nav__panel:hover { opacity: 1; pointer-events: auto; transform: translateY(0); } .mm-nav__panel-inner { max-width: var(--mm-container); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--mm-space-6); } .mm-nav__col-title { font: 500 10px/1 var(--mm-font-sans); letter-spacing: var(--mm-track-widest); text-transform: uppercase; color: var(--mm-gold-dark); margin-bottom: var(--mm-space-4); } .mm-nav__col a { display: block; padding: 6px 0; font-size: var(--mm-fs-body); color: var(--mm-fg); } /* ── Botones ──────────────────────────────────────────────────────────── */ .mm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 22px; border: 1px solid transparent; border-radius: var(--mm-radius-sm); font: 500 11px/1 var(--mm-font-sans); letter-spacing: var(--mm-track-wide); text-transform: uppercase; cursor: pointer; transition: background var(--mm-t-fast) var(--mm-ease), color var(--mm-t-fast) var(--mm-ease), border-color var(--mm-t-fast) var(--mm-ease), transform var(--mm-t-fast) var(--mm-ease); min-height: 44px; /* accesibilidad tactil */ } .mm-btn:hover { transform: translateY(-1px); } .mm-btn:active { transform: translateY(0); } .mm-btn--primary { background: #CD6914; color: #F7F3E6; border-color: #CD6914; } .mm-btn--primary:hover { background: #A85410; border-color: #A85410; color: #F7F3E6; } .mm-btn--ghost { background: transparent; color: var(--mm-ink); border-color: var(--mm-ink); } .mm-btn--ghost:hover { background: var(--mm-ink); color: var(--mm-cream); } .mm-btn--link { background: transparent; color: var(--mm-ink); padding: 8px 0; min-height: 0; border: 0; border-bottom: 1px solid currentColor; border-radius: 0; } .mm-btn--link:hover { color: var(--mm-accent); transform: none; } /* En móvil recupera los 44px de área táctil (la regla base lo pone en 0). */ @media (max-width: 780px) { .mm-btn.mm-btn--link { min-height: 44px; } } /* ── Chips / etiquetas ────────────────────────────────────────────────── */ .mm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--mm-border-strong); border-radius: var(--mm-radius-pill); font: 500 11px/1 var(--mm-font-sans); letter-spacing: .06em; color: var(--mm-fg); background: var(--mm-bg-alt); cursor: pointer; transition: all var(--mm-t-fast) var(--mm-ease); } .mm-chip:hover { border-color: var(--mm-ink); } .mm-chip[data-on] { background: var(--mm-ink); color: var(--mm-cream); border-color: var(--mm-ink); } .mm-chip__remove { background: none; border: 0; padding: 0; color: inherit; font-size: 14px; line-height: 1; cursor: pointer; } /* Badges de estado sobre tarjeta */ .mm-badge { display: inline-block; padding: 4px 8px; font: 600 9.5px/1 var(--mm-font-sans); letter-spacing: .14em; text-transform: uppercase; border-radius: var(--mm-radius-sm); } .mm-badge--sale { background: var(--mm-accent); color: var(--mm-cream); } .mm-badge--new { background: var(--mm-ink); color: var(--mm-cream); } .mm-badge--soft { background: var(--mm-cream-2); color: var(--mm-fg); } /* ── Tarjeta de producto (grilla departamental) ────────────────────────── */ .mm-product { position: relative; display: flex; flex-direction: column; background: var(--mm-bg-alt); } .mm-product__frame { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--mm-cream-2); } .mm-product__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .6s var(--mm-ease); } .mm-product:hover .mm-product__frame img { transform: scale(1.03); } .mm-product__badges { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 6px; } .mm-product__fav { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; background: rgba(247,243,230,.9); border: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--mm-ink); cursor: pointer; transition: color var(--mm-t-fast) var(--mm-ease), background var(--mm-t-fast) var(--mm-ease); } .mm-product__fav:hover { background: var(--mm-cream); color: var(--mm-accent); } .mm-product__fav[data-on] { color: var(--mm-accent); } .mm-product__meta { padding: 14px 4px 6px; display: flex; flex-direction: column; gap: 4px; } .mm-product__cat { font-size: 10px; letter-spacing: var(--mm-track-widest); text-transform: uppercase; color: var(--mm-fg-muted); } .mm-product__name { font: 500 15px/1.3 var(--mm-font-sans); color: var(--mm-ink); margin: 2px 0; } .mm-product__price { display: flex; align-items: baseline; gap: 8px; font: 500 14px/1 var(--mm-font-sans); color: var(--mm-ink); } .mm-product__price del { font-size: 12px; color: var(--mm-fg-muted); font-weight: 400; } .mm-product__price .mm-off { font-size: 11px; color: var(--mm-accent); font-weight: 600; letter-spacing: .04em; } /* Grilla de productos base */ .mm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 28px) clamp(12px, 1.4vw, 20px); } @media (max-width: 1080px) { .mm-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 780px) { .mm-grid { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; } } /* ── Encabezado de seccion ────────────────────────────────────────────── */ .mm-section { padding: clamp(48px, 6vw, 96px) var(--mm-gutter); } .mm-section--soft { background: var(--mm-bg-soft); } .mm-section--dark { background: var(--mm-ink); color: var(--mm-cream); } .mm-section--dark .mm-section__title { color: var(--mm-cream); } .mm-section--dark .mm-section__sub { color: rgba(247,243,230,.7); } .mm-section--olive { background: var(--mm-olive); color: var(--mm-cream); } .mm-section__head { max-width: var(--mm-container); margin: 0 auto var(--mm-space-7); display: flex; flex-direction: column; gap: var(--mm-space-2); align-items: flex-start; } .mm-section__head--center { align-items: center; text-align: center; } .mm-section__head--between { flex-direction: row; align-items: end; justify-content: space-between; gap: var(--mm-space-4); flex-wrap: wrap; } .mm-section__eyebrow { font-size: var(--mm-fs-eyebrow); letter-spacing: var(--mm-track-widest); text-transform: uppercase; color: var(--mm-gold-dark); font-weight: 500; } .mm-section__title { font: 500 var(--mm-fs-h2)/1.05 var(--mm-font-sans); letter-spacing: var(--mm-track-tight); color: var(--mm-ink); } .mm-section__sub { font-size: var(--mm-fs-lead); color: var(--mm-fg-muted); max-width: 60ch; } /* ── Beneficios ────────────────────────────────────────────────────────── */ .mm-benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--mm-space-5); max-width: var(--mm-container); margin: 0 auto; } @media (max-width: 900px) { .mm-benefits { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .mm-benefits { grid-template-columns: 1fr; } } .mm-benefit { display: flex; gap: 14px; align-items: flex-start; padding: 20px; border: 1px solid var(--mm-border); background: var(--mm-bg-alt); border-radius: var(--mm-radius-md); } .mm-benefit__icon { flex: 0 0 auto; width: 32px; height: 32px; color: var(--mm-accent); } .mm-benefit__title { font: 600 13px/1.2 var(--mm-font-sans); color: var(--mm-ink); margin: 0 0 4px; letter-spacing: .04em; text-transform: uppercase; } .mm-benefit__body { font-size: 13px; color: var(--mm-fg-muted); margin: 0; line-height: 1.55; } /* ── Newsletter ────────────────────────────────────────────────────────── */ .mm-newsletter { max-width: 620px; margin: 0 auto; text-align: center; } .mm-newsletter__form { display: flex; gap: 8px; border: 1px solid var(--mm-border-strong); border-radius: var(--mm-radius-pill); padding: 6px 6px 6px 20px; background: var(--mm-bg-alt); margin-top: var(--mm-space-5); } .mm-newsletter__form input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; outline: none; font-size: var(--mm-fs-body); } .mm-newsletter__form .mm-btn { min-height: 40px; padding: 10px 18px; border-radius: var(--mm-radius-pill); } .mm-newsletter__consent { font-size: 11px; color: var(--mm-fg-muted); margin-top: 10px; } /* ── Footer ───────────────────────────────────────────────────────────── */ .mm-footer { background: #7D8A5A; color: var(--mm-cream); padding: clamp(18px, 2vw, 26px) var(--mm-gutter) clamp(12px, 1.4vw, 18px); } .mm-footer__grid { max-width: var(--mm-container); margin: 0 auto; display: grid; /* 5 columnas: marca + Departamentos + Ayuda + Legal + Contacto. */ grid-template-columns: 1.4fr repeat(4, 1fr); gap: clamp(14px, 1.6vw, 26px); align-items: start; } @media (max-width: 1200px) { .mm-footer__grid { grid-template-columns: repeat(4, 1fr); } .mm-footer__grid > :first-child { grid-column: 1 / -1; } } @media (max-width: 780px) { .mm-footer__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .mm-footer__grid { grid-template-columns: 1fr; } } /* El pie usa el mismo PNG que la cabecera. Es dorado con fondo transparente, así que se lee bien sobre el fondo oscuro del pie sin necesidad de una variante aparte. width/height van en el para que el navegador reserve el espacio y el pie no salte al cargar. */ .mm-footer__logo { display: inline-block; margin: -10px 0 6px -20px; } .mm-footer__logo img { display: block; width: auto; height: auto; max-width: 220px; max-height: 74px; object-fit: contain; } @media (max-width: 780px) { .mm-footer__logo { margin: -8px 0 6px -14px; } .mm-footer__logo img { max-width: 180px; max-height: 60px; } } .mm-footer__brand-copy { font-size: 11.5px; line-height: 1.55; opacity: .78; max-width: 30ch; margin: 0; } .mm-footer__address { font-size: 11.5px; line-height: 1.55; opacity: .78; max-width: 30ch; margin: 0 0 10px; font-style: normal; } .mm-footer__contact { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } .mm-footer__contact a { display: inline-flex; align-items: center; gap: 8px; color: rgba(247,243,230,.86); font-size: 12px; transition: color var(--mm-t-fast) var(--mm-ease); } .mm-footer__contact a:hover { color: var(--mm-gold); } .mm-footer__contact svg { flex: 0 0 auto; } /* Los iconos de redes miden 20x20: se les da un área táctil de 44px sin agrandar el dibujo. El margen negativo evita que ese área infle el pie. */ .mm-footer__redes { display: flex; gap: 18px; margin-top: 10px; } .mm-footer__redes a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -12px; } .mm-footer__redes a + a { margin-left: 6px; } .mm-footer__col h4 { font: 600 10px/1 var(--mm-font-sans); letter-spacing: var(--mm-track-widest); text-transform: uppercase; color: var(--mm-gold); margin: 0 0 8px; } .mm-footer__col ul { list-style: none; padding: 0; margin: 0; } .mm-footer__col li { margin-bottom: 3px; } .mm-footer__col a { color: rgba(247,243,230,.78); font-size: 11.5px; transition: color var(--mm-t-fast) var(--mm-ease); } /* En móvil los enlaces del pie median 16px de alto. Se les da padding y se compensa el margen del
  • , así crece el área táctil sin estirar el pie. */ @media (max-width: 780px) { .mm-footer__col li { margin-bottom: 0; } .mm-footer__col a { display: inline-block; padding: 8px 0; } } .mm-footer__col a:hover { color: var(--mm-gold); } .mm-footer__bottom { max-width: var(--mm-container); margin: 12px auto 0; padding-top: 8px; border-top: 1px solid rgba(247,243,230,.14); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 10px; letter-spacing: var(--mm-track-wide); text-transform: uppercase; color: rgba(247,243,230,.6); } .mm-footer__bottom a { color: var(--mm-gold); display: inline-block; padding: 8px 4px; margin: -8px -4px; } /* ── Selector de idioma ──────────────────────────────────────────────── * Vive dentro de la barra de departamentos, al lado de "Ver todo". Antes * era un chip fixed abajo a la izquierda que tapaba el texto del pie. * En móvil la barra se oculta, así que también se inyecta dentro del * menú (ver [data-lang-slot] en mm-menu.js y en el menú de la home). * ──────────────────────────────────────────────────────────────────────── */ .mm-langtoggle { display: inline-flex; align-items: center; gap: 3px; padding: 3px; background: var(--mm-cream-2); border: 1px solid var(--mm-border); border-radius: var(--mm-radius-pill); flex: 0 0 auto; } .mm-langtoggle button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 0; cursor: pointer; background: transparent; color: var(--mm-fg-muted); border-radius: var(--mm-radius-pill); font: 600 10.5px/1 var(--mm-font-sans); letter-spacing: .16em; transition: background var(--mm-t-fast) var(--mm-ease), color var(--mm-t-fast) var(--mm-ease); } .mm-langtoggle button:hover { color: var(--mm-ink); } .mm-langtoggle button[aria-pressed="true"] { background: #CD6914; color: var(--mm-cream); } /* Dentro de la barra de departamentos: separado del último ítem */ .mm-nav__inner .mm-langtoggle { margin: 0 0 0 18px; align-self: center; } /* Dentro del menú móvil: ocupa su propia línea */ [data-lang-slot] .mm-langtoggle { margin-top: 4px; } /* ── Respaldo del catálogo ───────────────────────────────────────────── * Las 26 tarjetas `data-fallback` del HTML son la maqueta de respaldo. * Se ocultan desde el primer pintado para que no se vea el catálogo viejo * mientras llega el ERP, y solo vuelven si el ERP no contesta (la clase la * pone Catalogo.dc.html en , que el runtime DC no reconcilia). * * Va en CSS y no en JS a propósito: cualquier atributo o estilo que le * agreguemos a estos nodos lo borra el runtime al re-renderizar (probado * con data-esperando-erp, data-hidden y style inline). * ──────────────────────────────────────────────────────────────────────── */ .mm-cg-card[data-fallback] { display: none; } /* Las tarjetas de maqueta nunca deben aparecer como productos reales. Si el ERP no responde, el catálogo queda vacío en lugar de mostrar fotos ficticias. */ /* ── Menú móvil (páginas que no son la home; ver mm-menu.js) ──────────── */ .mm-menu { position: fixed; inset: 0; z-index: 95; background: var(--mm-bg); display: none; flex-direction: column; padding: 18px 22px 24px; overflow-y: auto; overscroll-behavior: contain; } .mm-menu[data-open] { display: flex; } .mm-menu__top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid var(--mm-border); } .mm-menu__brand { font-family: var(--mm-font-serif); font-weight: 500; font-size: 22px; line-height: 1; color: var(--mm-ink); } .mm-menu__brand span { font-family: var(--mm-font-sans); font-size: 8px; letter-spacing: .4em; text-transform: uppercase; color: var(--mm-gold-dark); margin-left: 6px; vertical-align: middle; } .mm-menu__close { background: none; border: 0; cursor: pointer; padding: 10px 4px; font: 500 10px/1 var(--mm-font-sans); letter-spacing: .26em; text-transform: uppercase; color: var(--mm-ink); } .mm-menu__search { display: flex; align-items: center; gap: 10px; margin: 18px 0 6px; padding: 12px 16px; border: 1px solid var(--mm-border-strong); border-radius: var(--mm-radius-pill); background: var(--mm-white); } .mm-menu__search svg { color: var(--mm-fg-muted); flex: 0 0 auto; } .mm-menu__search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: var(--mm-fs-body); color: var(--mm-ink); } .mm-menu__nav { display: flex; flex-direction: column; margin-top: 10px; } .mm-menu__label { padding: 20px 0 8px; font: 600 10px/1 var(--mm-font-sans); letter-spacing: .28em; text-transform: uppercase; color: var(--mm-gold-dark); } .mm-menu__link { padding: 13px 0; border-bottom: 1px solid var(--mm-border); font: 400 15px/1 var(--mm-font-sans); color: var(--mm-fg); min-height: 44px; display: flex; align-items: center; } .mm-menu__link--lg { font: 500 18px/1 var(--mm-font-sans); color: var(--mm-ink); } .mm-menu__link--accent { color: var(--mm-accent); font-weight: 500; } .mm-menu__idioma { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--mm-border); } .mm-menu__foot { display: flex; gap: 20px; align-items: center; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--mm-border); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--mm-fg-muted); } .mm-menu__wa { margin-left: auto; color: var(--mm-accent); } /* ── WhatsApp flotante ────────────────────────────────────────────────── */ .mm-whatsapp { position: fixed; right: 20px; bottom: 20px; z-index: 80; width: 52px; height: 52px; border-radius: 50%; background: #25D366; color: var(--mm-white); display: flex; align-items: center; justify-content: center; box-shadow: var(--mm-shadow-2); transition: transform var(--mm-t-fast) var(--mm-ease), opacity 220ms var(--mm-ease), visibility 220ms; } .mm-whatsapp:hover { transform: scale(1.06); color: var(--mm-white); } /* Al llegar al pie el botón estorba: tapaba "Desarrollado por Neura" y los enlaces de la última fila. mm-ui.js marca cuando el pie entra en pantalla (o, en las páginas sin pie, al tocar el final). La marca va en y no en el propio botón porque el runtime de DC reconcilia los atributos de los nodos que renderiza y los borra. visibility, no display: así la transición se ve y el botón deja de ser clicable mientras está oculto. */ html.mm-en-pie .mm-whatsapp { opacity: 0; visibility: hidden; transform: translateY(12px) scale(.92); pointer-events: none; } @media (prefers-reduced-motion: reduce) { .mm-whatsapp { transition: opacity 1ms linear, visibility 1ms; } html.mm-en-pie .mm-whatsapp { transform: none; } } @media (max-width: 780px) { .mm-whatsapp { right: 14px; bottom: 76px; width: 46px; height: 46px; } } .mm-header__logo { width: 240px; height: 92px; display: flex; align-items: center; overflow: hidden; flex-shrink: 0; } .mm-header__logo-image { display: block !important; width: 100% !important; height: 100% !important; max-width: 240px !important; max-height: 92px !important; object-fit: contain !important; object-position: left center; } @media (max-width: 780px) { .mm-header__logo { width: 150px; height: 62px; } .mm-header__logo-image { max-width: 150px !important; max-height: 62px !important; } } /* ── Portada del catálogo ─────────────────────────────────────────────── */ .catalogo-portada { background: linear-gradient(135deg, #C46A4A 0%, #A94F35 100%); } .catalogo-portada h1 { color: #F7F3E6 !important; } .catalogo-portada p, .catalogo-portada a, .catalogo-portada [data-crumb-cat] { color: rgba(247, 243, 230, 0.84) !important; } .catalogo-portada nav span:not([data-crumb-cat]) { color: rgba(247, 243, 230, 0.55) !important; }