/* =================================================================== MOBILE (≤ 992px) — SOLO REGLAS PARA MOBILE. NO TOCA DESKTOP. Archivo: mobile_styles.css =================================================================== */ /* Por defecto (desktop) ocultamos la UI mobile */ .mlx-burger, .mlx-overlay, .mlx-panel { display: none; } /* ------------------------------------------------------------------- Reglas MOBILE ------------------------------------------------------------------- */ @media (max-width: 992px){ /* ===== Reset y helpers ===== */ html, body{ width: 100%; max-width: 100%; overflow-x: hidden; -webkit-text-size-adjust: 100%; } img, svg, video{ max-width: 100%; height: auto; } /* Ocultamos el menú de escritorio en mobile */ .ml-menu, .ml-item.ml-sys .nav-popup{ display: none !important; } /* El header entra en el flujo normal, NO es fixed */ .ml-topbar{ position: relative; /* EN FLUJO, scrollea con la página */ height: var(--hdr, 86px); z-index: 100; background: transparent; box-shadow: none; } /* Contenido interno del header */ .ml-topbar__inner{ height: 100%; display: flex; align-items: center; gap: 12px; padding: 0 56px 0 14px; /* espacio para el burger */ color: #fff; } /* Logo adaptado a mobile (por si hace falta) */ .ml-logo__img{ max-height: 40px; } /* ===== Botón hamburguesa dentro del header ===== */ .mlx-burger, .mlx-overlay, .mlx-panel{ display: block; } .mlx-burger{ position: absolute !important; /* relativo al header */ top: 18px; right: 14px; width: 38px; height: 30px; padding: 0; border: 0; background: transparent; display: grid; gap: 6px; z-index: 200 !important; cursor: pointer; } .mlx-burger span{ display: block; height: 3px; border-radius: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.12); } .mlx-overlay{ position: fixed; inset: 0; z-index: 120; pointer-events: none; opacity: 0; background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35) 35%, rgba(0,0,0,.20)); transition: opacity .18s ease; } .mlx-overlay__top{ display:flex; align-items:center; justify-content:space-between; padding: 16px 16px 0; } .mlx-close{ background: transparent; border: 0; color:#fff; font-size:22px; line-height:1; width:36px; height:36px; border-radius:999px; display:grid; place-items:center; cursor:pointer; } .mlx-panel{ position: fixed; left: 12px; right: 12px; top: 72px; bottom: 16px; background: #fff; border-radius: 12px; border: 1px solid #e5e7eb; box-shadow: 0 16px 40px rgba(0,0,0,.24); z-index: 140; transform: translateY(12px); opacity: 0; pointer-events: none; transition: transform .18s ease, opacity .18s ease; overflow: auto; } /* Estado abierto (lo maneja tu JS agregando .mlx-open al ) */ body.mlx-open{ overflow: hidden; } body.mlx-open .mlx-overlay{ opacity: 1; pointer-events: auto; } body.mlx-open .mlx-panel{ transform: translateY(0); opacity: 1; pointer-events: auto; } .mlx-list{ list-style: none; margin: 18px; padding: 12px; } .mlx-link, .mlx-acc__btn{ display:flex; align-items:center; justify-content:space-between; width:100%; background:transparent; border:0; padding: 16px 12px; text-decoration:none; color:#0f1b2a; font-size: 16px; font-weight: 700; letter-spacing:.02em; text-transform: uppercase; border-radius:10px; } .mlx-link:active, .mlx-acc__btn:active{ background:#f5f7fb; } .mlx-chevron{ position: relative; flex: 0 0 28px; width:28px; height:28px; border-radius:999px; background: var(--ml-celeste, #00A9D6); display:grid; place-items:center; } .mlx-chevron::before{ content:""; width: .55em; height: .55em; border-right:2px solid #fff; border-bottom:2px solid #fff; transform: rotate(45deg); display:block; } .mlx-acc.is-open .mlx-chevron::before{ transform: rotate(-135deg); } .mlx-acc__panel{ margin: 6px 0 14px 0; padding: 14px; border-radius: 10px; background: #f2f4f7; border: 1px solid #e6eaf0; transition: opacity .16s ease, height .18s ease, padding .18s ease, border-width .18s ease; display: grid; grid-template-columns: 1fr; gap: 10px; } .mlx-acc__panel .mlx-sublink{ display: block; /* <— clave para que apile */ width: 100%; padding: 12px 14px; border-radius: 10px; background: #eef2f7; color: #0f1b2a; text-decoration: none; } .mlx-acc__panel .mlx-sublink:active{ background: #e6ebf2; } .mlx-acc__panel[hidden]{ display:block; height:0; padding:0 14px; opacity:0; overflow:hidden; border-width:0; } .mlx-acc__panel.is-shown{ opacity:1; height:auto; border-width:1; } /* ===== Empuje del contenido bajo el header ===== */ .page-ml__content{ padding-top: var(--hdr, 86px); } .page-ml .ml-tips:first-of-type{ margin-top: calc(var(--hdr, 86px) + 12px); } /* ===== Sección TIPS (una columna) ===== */ .ml-tips{ padding: 22px 0; } .ml-tips__inner{ max-width: none; margin: 0; padding: 0 14px; display: grid; grid-template-columns: 1fr; gap: 16px; } .ml-tips__title{ font-size: clamp(18px, 5vw, 22px); margin-bottom: 8px; } .ml-tips__list li{ margin: 8px 0; } /* Galería en carrusel horizontal */ .ml-tips__gallery{ display: grid; grid-auto-flow: column; grid-auto-columns: minmax(120px, 42vw); gap: 10px; overflow-x: auto; padding: 6px 2px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; background: #fff; border-radius: 12px; } .ml-tips__card{ scroll-snap-align: start; height: 120px; } .ml-tips__card img{ object-fit: contain; height: 100%; width: 100%; } /* ===== Barra gris ===== */ .ml-specbar__inner, .ml-specbar__inner_3{ max-width: none; margin: 0; padding: 10px 12px; white-space: normal; text-align: center; font-size: clamp(14px, 3.8vw, 16px); } /* ===== Bloque de especificaciones ===== Imágenes arriba (fila desplazable) + tablas abajo (scroll vertical) */ .ml-specblock{ display: flex !important; flex-direction: column !important; gap: 12px !important; margin: 14px 0 !important; padding: 0 12px !important; max-width: none !important; } /* --- FOTOS ARRIBA (carrusel de piezas) --- */ .ml-specblock__media{ order: 1 !important; width: 100% !important; } .ml-specblock__media .ml-specgallery{ display: grid !important; grid-auto-flow: column !important; grid-auto-columns: minmax(96px, 30vw) !important; gap: 10px !important; margin: 0 !important; padding: 8px 2px !important; list-style: none !important; overflow-x: auto !important; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .ml-specblock__media .ml-specgallery li{ scroll-snap-align: start; height: 110px !important; display:flex; align-items:center; justify-content:center; background: #fff; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.06); } .ml-specblock__media .ml-specgallery img{ max-height: 100% !important; width: auto !important; object-fit: contain !important; } /* --- TABLAS ABAJO (contenedor con scroll vertical) --- */ .ml-splecbloc-table{ order: 2 !important; width: 100% !important; margin-top: 4px !important; } .ml-splecbloc-table .ml-table-wrap{ max-height: 62vh !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; margin: 0 !important; border-radius: 8px; } .ml-splecbloc-table .ml-table{ width: 100% !important; min-width: unset !important; table-layout: fixed !important; } .ml-table thead th{ padding: 10px !important; font-size: 14px !important; } .ml-table tbody td{ padding: 10px 10px !important; font-size: 14px !important; line-height: 1.35 !important; word-break: break-word !important; white-space: normal !important; } .ml-table thead .col-code{ width: 112px !important; } /* Separador entre tablas */ .ml-table-sep{ height: 14px !important; margin: 10px 0 !important; } /* ===== Contacto en una columna ===== */ .contacto{ display: grid !important; grid-template-columns: 1fr !important; gap: 18px !important; padding: 20px 12px !important; } .contacto__info, .contacto__formwrap{ max-width: 100% !important; width: 100% !important; } #contacto .contacto__form{ display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; } #contacto .campo input, #contacto .campo textarea{ width: 100% !important; font-size: 16px !important; } #contacto .btn-enviar{ justify-self: stretch !important; } /* ===== FAB WhatsApp ===== */ .whatsapp-fab{ position: fixed; left: 14px; bottom: 16px; z-index: 150; width: 54px; height: 54px; border-radius: 999px; display:grid; place-items:center; font-size: 28px; } } @media (max-width: 992px){ /* Aísla el bloque para que los z-index se respeten */ /* Aseguramos el stacking correcto arriba del table (ya lo tenías) */ .ml-specblock{ position: relative !important; isolation: isolate !important; } .ml-specbar + .ml-specblock{ padding-top: 4px !important; } /* Galería: una fila fija de 5 columnas */ .ml-specblock__media{ order: 1 !important; position: relative !important; z-index: 3 !important; margin: 6px 12px 0 !important; } .ml-specblock__media .ml-specgallery{ display: grid !important; grid-template-columns: repeat(5, 1fr) !important; /* <<< UNA FILA de 5 */ gap: 8px !important; padding: 8px 6px !important; margin: 0 !important; overflow: visible !important; /* sin scroll horizontal */ background: #fff; border-radius: 10px; min-height: 118px; } .ml-specblock__media .ml-specgallery li{ width: auto !important; height: 110px !important; /* ajustá a 100/110 si las querés más grandes */ display: flex !important; align-items: center !important; justify-content: center !important; background: #fff; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.06); } .ml-specblock__media .ml-specgallery img{ width: 100% !important; height: 100% !important; object-fit: contain !important; display: block !important; } /* El table queda debajo, sin solapar */ .ml-splecbloc-table{ order: 2 !important; position: relative !important; z-index: 1 !important; margin-top: 6px !important; } #contacto { scroll-margin-top: var(--hdr, 86px); } .page-ml__content{ padding-top: var(--hdr, 86px); } }