/* ========================================================================= MatzApp — AJUSTES POR PUNTO DE QUIEBRE (tablet y teléfono en horizontal) ------------------------------------------------------------------------- El tema conmuta el layout en el SERVIDOR según el User-Agent (onemall/lib/mobile-layout.php:109 -> isMobile() && !isTablet()): · TELÉFONO -> HTML móvil, · TABLET/PC -> HTML de escritorio, sin esa clase Por eso redimensionar la ventana NO reproduce nada de lo que corrige este archivo: hay que emular el User-Agent del dispositivo. Corrige tres cosas medidas contra producción: 1) Teléfono EN HORIZONTAL: el tema encajona toda la página en 480px centrados, con márgenes blancos a los lados. 2) Tablet (768–991): la cabecera se apila y mide más que en un PC, dejando una hamburguesa suelta como única navegación. 3) Tablet: la fila de garantías queda como carrusel horizontal recortado. El hero gigante de esa misma banda se corrige en matz-mobile-hero.css. ESPECIFICIDAD, NO ORDEN: app-responsive.css y una segunda copia de style.css del child cargan DESPUÉS de este archivo. Cargar de últimas no garantiza ganar, así que cada regla de abajo se escribe con un selector MÁS ESPECÍFICO que la del tema a la que sustituye (por eso los `body` y los `.header-style2` iniciales, que no son decorativos). Update-safe: solo child theme. No se toca el tema padre ni la BD. ========================================================================= */ /* ========================================================================= 1) TELÉFONO EN HORIZONTAL — soltar la caja de 480px ------------------------------------------------------------------------- El tema padre hace: app-orange.css @media (min-width:481px){ .mobile-layout .body-wrapper{ max-width:480px } } (0,2,0) app-orange.css .mobile-layout .header-page.sticky-mobile .header-shop .container{ max-width:480px } (0,4,0) Se escribió para que un emulador ancho no estirara la maqueta de teléfono; en un teléfono real girado produce el encajonamiento. Alcance real: solo afecta a `.mobile-layout` (teléfonos) por encima de 480px. Ningún teléfono actual supera 480 CSS px en VERTICAL (iPhone Pro Max = 430, S24 Ultra = 384), así que esto solo se nota AL GIRAR. La vista vertical, que hoy está bien, no cambia. ========================================================================= */ @media (min-width: 481px) { body.mobile-layout .body-wrapper { /* (0,2,1) gana a (0,2,0) */ max-width: none; } } body.mobile-layout .header-page.sticky-mobile .header-shop .container { max-width: none; /* (0,4,1) gana a (0,4,0) */ } /* ========================================================================= 2) TABLET 768–991 — cabecera de tienda en vez de cabecera de teléfono ------------------------------------------------------------------------- Antes: 248px de alto (MÁS que en un PC, que son 183), logo centrado sobre el buscador en su propia fila, y una hamburguesa suelta. Causa del apilado: el logo vive en una columna `col-lg-3 col-md-3 col-sm-12`. Bootstrap aplica `col-md-3` (25%) desde 992px, pero entre 768 y 991 manda `col-sm-12` = 100% -> fila propia. No es un media query del tema: es una clase del marcado. Después: logo, buscador y carrito en UNA fila, y debajo la barra oscura con «TODAS LAS CATEGORÍAS» + los 5 ítems del menú. Medido: 183px, igual que en escritorio. ========================================================================= */ @media (min-width: 768px) and (max-width: 991px) { /* --- Fila 1: logo + buscador + carrito ------------------------------ */ /* Devolver a la columna del logo el ancho por contenido en vez del 100% de col-sm-12, para que buscador y carrito suban a su misma línea. */ body .header-style2 .header-mid .top-header.col-sm-12 { width: auto; float: none; } /* Los tres bloques flotan y tienen alturas distintas (logo 70, buscador 54, carrito 45), asi que quedaban desalineados 16px entre si. Flex los centra; con flex los float dejan de aplicarse, de ahi el float:none de arriba y el margin-left:auto que empuja el carrito a la derecha. */ body .header-style2 .header-mid .row { display: flex; align-items: center; } /* El clearfix de Bootstrap se volveria un item flex vacio. */ body .header-style2 .header-mid .row::before, body .header-style2 .header-mid .row::after { display: none; } body .header-style2 .header-mid .search-cate, body .header-style2 .header-mid .header-right { float: none; } body .header-style2 .header-mid .header-right { margin-left: auto; } /* El tema centra el logo en esta banda concreta (app-orange.css @media (min-width:768px) and (max-width:991px)). Con el logo ya en línea, centrarlo lo separaría del buscador. */ body .header-style2 .header-mid .onemall-logo { text-align: left; padding-top: 0; } /* 92px de logo obligan a una fila alta. A 70px el conjunto respira y la grúa sigue legible (es la «T» de MATZ, no un adorno separable). */ body .header-style2 .header-mid .onemall-logo img { max-height: 70px; width: auto; } body .header-style2 .header-mid .search-cate { margin-left: 20px; } /* --- Fila 2: barra de navegación ------------------------------------ */ /* La columna de categorías es col-sm-6 (50% = 375px). Al ancho por contenido caben al lado los 5 ítems del menú: 286 + 409 < 750. */ body .header-style2 .vertical_megamenu-header.col-sm-6 { width: auto; float: left; } /* FANTASMA: el tema deja este botón en `opacity:0` en vez de ocultarlo, así que seguía ocupando 51px y empujaba el menú a una segunda fila. (app-orange.css @media (max-width:991px), especificidad (1,4,0); el `body` inicial la sube a (1,4,1) y gana sin depender del orden.) */ body .header-style2 #main-menu .primary-menu .resmenu-container .navbar-toggle { display: none; } /* Recuperar el menú horizontal. Son 5 ítems cortos (Inicio, Productos, Blog, Nosotros, Contacto) y caben de sobra: ocupan 409px de los 750. El tema lo esconde con `@media (max-width:991px){ #main-menu .primary-menu .nav-pills{display:none} }` — una herencia de cuando este menú tenía 160 ítems, no 5. */ body .header-style2 #main-menu .primary-menu ul.nav-pills { display: inline-block; } /* Suprimir el ítem de desbordamiento «Más…» que el tema añade: aquí no hace falta porque los 5 ítems entran, y si se muestra desborda. */ body .header-style2 #main-menu .primary-menu ul.nav-pills > li.more-menu, body .header-style2 #main-menu .primary-menu ul.nav-pills > li.menu-more { display: none; } /* --- La hamburguesa pasa a ser «☰ TODAS LAS CATEGORÍAS» ------------- */ /* Se conserva la hamburguesa (y no el desplegable de escritorio) porque abre el cajón lateral, que es táctil y no se superpone al contenido. El desplegable de escritorio arranca ABIERTO en esta banda y taparía el hero. El rótulo `.mega-left-title` sigue oculto: la etiqueta la pinta el propio botón, así todo el bloque es una sola zona pulsable. */ body .header-style2 .vertical_megamenu-header .wrapper_vertical_menu .resmenu-container .navbar-toggle { position: relative; display: block; float: left; width: auto; min-width: 238px; height: 46px; /* (46 - 14 de las tres barras) / 2 = 16 -> barras centradas */ padding: 16px 14px 0 12px; margin: 0; border: 0; border-radius: 4px; background: transparent; text-align: left; } body .header-style2 .vertical_megamenu-header .wrapper_vertical_menu .resmenu-container .navbar-toggle .icon-bar { display: block; width: 20px; height: 2px; margin: 0 0 4px; border-radius: 1px; background: #fff; } body .header-style2 .vertical_megamenu-header .wrapper_vertical_menu .resmenu-container .navbar-toggle .icon-bar:last-child { margin-bottom: 0; } body .header-style2 .vertical_megamenu-header .wrapper_vertical_menu .resmenu-container .navbar-toggle::after { content: "TODAS LAS CATEGORÍAS"; position: absolute; left: 44px; top: 0; line-height: 46px; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .6px; white-space: nowrap; } body .header-style2 .vertical_megamenu-header .wrapper_vertical_menu .resmenu-container .navbar-toggle:hover::after, body .header-style2 .vertical_megamenu-header .wrapper_vertical_menu .resmenu-container .navbar-toggle:focus::after { color: #8fb3e8; } body .header-style2 .vertical_megamenu-header .wrapper_vertical_menu .resmenu-container .navbar-toggle:hover .icon-bar, body .header-style2 .vertical_megamenu-header .wrapper_vertical_menu .resmenu-container .navbar-toggle:focus .icon-bar { background: #8fb3e8; } /* --- 3) Fila de garantías: rejilla 2x2 en vez de carrusel ----------- */ /* Por debajo de 992 el tema la convierte en un carrusel horizontal (`overflow-x:scroll; white-space:nowrap`) con 4 ítems de 300px = 1200px en 750 de ancho, así que se ve cortada por la derecha. En una tablet caben dos por fila sin desplazamiento. */ body .block-service-home2 ul { overflow-x: visible; white-space: normal; display: flex; flex-wrap: wrap; margin: 0; padding: 0; } /* La imagen del logo es inline y se apoya en la linea base: el hueco de descendente que queda debajo subia su centro optico 10px. */ body .header-style2 .header-mid .onemall-logo, body .header-style2 .header-mid .onemall-logo a { display: block; margin: 0; padding: 0; line-height: 0; } body .header-style2 .header-mid .onemall-logo img { display: block; } /* Que el ultimo item del menu no quede pegado al borde derecho. */ body .header-style2 #main-menu { padding-right: 12px; } body .block-service-home2 ul > li.item { flex: 0 0 50%; width: 50%; max-width: 50%; white-space: normal; display: flex; align-items: center; } body .block-service-home2 ul > li.item .item-content { width: 100%; } } /* ========================================================================= 4) BANDA 992–1199 — iPad EN HORIZONTAL ------------------------------------------------------------------------- Aquí el tema ya usa la cabecera de escritorio y el RevSlider funciona, así que no hay nada roto. Pero el iPad en horizontal cae justo en esta banda y arrastraba dos cosas heredadas: el bloque del carrito quedaba 51px por debajo del logo y del buscador, y la cabecera medía 231px frente a los 183 de un PC. Al rotar el iPad se notaba el salto. Mismo tratamiento que en la banda de tablet, y por el mismo motivo: los tres bloques flotan con alturas distintas. Medido: desalineación 51 -> 0. De 1200px en adelante NO se toca nada (allí ya vale 3px). ========================================================================= */ @media (min-width: 992px) and (max-width: 1199px) { body .header-style2 .header-mid .row { display: flex; align-items: center; } body .header-style2 .header-mid .row::before, body .header-style2 .header-mid .row::after { display: none; } body .header-style2 .header-mid .top-header, body .header-style2 .header-mid .search-cate, body .header-style2 .header-mid .header-right { float: none; } body .header-style2 .header-mid .header-right { margin-left: auto; } /* Mismo hueco de línea base bajo la imagen que en la banda de tablet. */ body .header-style2 .header-mid .onemall-logo, body .header-style2 .header-mid .onemall-logo a { display: block; margin: 0; padding: 0; line-height: 0; } body .header-style2 .header-mid .onemall-logo img { display: block; max-height: 78px; width: auto; } }