/* ========================================================================== Juanito — Menú tablet v2 (768–1024px) · WordPress puro, cero Elementor Arquitectura Onyx, piel de la casa: blanco pleno, entrada estilo Apple. Reglas del juego: - Hamburguesa (.jcmt-toggle) y panel (.jcmt-capa) son NUESTROS: viven colgados del body, no dentro de ningún widget. Elementor ni se toca — su toggle solo se OCULTA en la franja 768–1024 (la única regla que lo menciona). El día que Elementor se vaya, esto sigue andando. - Fuera de la franja, toggle y capa son display:none: el celular conserva su panel Apple y el PC su menú horizontal. - El color del toggle sigue al header real: blanco sobre la banda negra, tinta cuando el header se pone claro al scrollear (el JS marca body.jcmt-clara mirando .elementor-sticky--effects; si ese header ya no existe, se queda blanco y punto). ========================================================================== */ /* Fuera de la franja NO EXISTEN. El !important no es capricho: un bloque viejo del Customizer le pone `display:inline-flex !important` a TODO `button` en ≤767 (regla de toques del celular) y sin esto nuestra hamburguesa aparecía duplicada en el teléfono. */ .jcmt-toggle, .jcmt-capa, .jcmt-velo { display: none !important; } @media (min-width: 768px) and (max-width: 1024px) { /* --- el toggle de Elementor se guarda; el nuestro toma su lugar --- OJO con la aritmética de especificidad: el bloque viejo del Customizer lo posiciona con `body .678c9fa0 .8b3a646×4 {display:block!important}` (5 clases). Para ganarle de verdad hacen falta MÁS de 5 — acá van 6. */ body .elementor-element-678c9fa0 .elementor-element-8b3a646.elementor-element-8b3a646.elementor-element-8b3a646.elementor-element-8b3a646.elementor-element-8b3a646 { display: none !important; } /* --- el botón "+ CONTACT US" también se guarda en la franja --- Vive encima de la hamburguesa (rect 24,20 vs toggle 6,22): se comía los taps y las 3 líneas quedaban escondidas detrás del texto. En tablet el contacto vive DENTRO del panel (fila .jcmt-contacto). */ body .elementor-element-678c9fa0 .elementor-element-06c69b4.elementor-element-06c69b4.elementor-element-06c69b4.elementor-element-06c69b4.elementor-element-06c69b4 { display: none !important; } /* --- el logo, centrado DE VERDAD en la franja --- Al esconder CONTACT US el lado izquierdo del flex perdió peso y el logo quedaba 15px corrido a la izquierda (medido, igual en todas las páginas). Absoluto al centro de la banda: clavado en el eje, idéntico en home, login y secciones. Los iconos conservan su derecha. */ body .elementor-element-678c9fa0 .elementor-element-572cd30.elementor-element-572cd30.elementor-element-572cd30 { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; margin: 0 !important; } body .elementor-element-678c9fa0 .elementor-element-6fe9869.elementor-element-6fe9869.elementor-element-6fe9869 { margin-left: auto !important; } /* --- nuestra hamburguesa: mismo lugar (6,22), mismo trazo fino --- (doblada .jcmt-toggle.jcmt-toggle para ganarle al none!important base) */ .jcmt-toggle.jcmt-toggle { display: grid !important; place-items: center; position: fixed; left: 6px; top: 18px; /* eje 40: el mismo del logo y los iconos del header */ width: 44px; height: 44px; /* Por ENCIMA del header de Elementor (fixed): con menos, el fondo #111 de las internas tapaba las 3 líneas y el header se comía los taps. */ z-index: 2147483600; border: 0 !important; padding: 0 !important; background: transparent !important; /* el kit pinta fondo a todo button */ box-shadow: none !important; cursor: pointer; color: #fff; -webkit-tap-highlight-color: transparent; } /* !important: en la home un bloque viejo del Customizer pinta el header con important y el toggle quedaba blanco sobre el sticky blanco al scrollear */ body.jcmt-clara .jcmt-toggle.jcmt-toggle { color: #161513 !important; } .jcmt-toggle svg { width: 22px; height: 22px; display: block; stroke: currentColor; stroke-width: 2; stroke-linecap: round; fill: none; } .jcmt-toggle .jcmt-ico-x { display: none; } /* La X NO pisa el color: el toggle vive SOBRE el header (el panel arranca en 80px), así que sigue la misma lógica que la hamburguesa — blanca en header oscuro, tinta cuando body.jcmt-clara. (El override tinta fijo la dejaba invisible sobre la banda negra de las internas.) */ .jcmt-toggle.on .jcmt-ico-x { display: block; } .jcmt-toggle.on .jcmt-ico-m { display: none; } /* --- la capa: panel GRANDE que baja del header, estilo Onyx/Apple — no es pantalla completa: la página queda visible detrás, tras un velo (pedido de ella 2026-08-01: «grandes pero no de toda la pantalla») --- */ .jcmt-capa { position: fixed; top: 80px; left: 0; right: 0; height: min(620px, calc(100vh - 148px)); height: min(620px, calc(100dvh - 148px)); z-index: 2147483500; /* sobre el header; bajo el toggle (la X manda) */ background: #fff; color: #161513; font-family: Poppins, sans-serif; text-align: left; overflow: hidden; flex-direction: column; border-radius: 0 0 18px 18px; box-shadow: 0 30px 70px rgba(22, 21, 19, .22); } .jcmt-capa.jcmt-abierta { display: flex !important; } .jcmt-capa.jcmt-anim { animation: jcmtBaja .38s cubic-bezier(.2, .7, .2, 1); } /* el velo: atenúa la página de atrás; tocarlo cierra el panel */ .jcmt-velo.on { display: block !important; position: fixed; inset: 0; top: 80px; z-index: 2147483400; background: rgba(22, 21, 19, .38); animation: jcmtVelo .3s ease; } @keyframes jcmtBaja { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } } @keyframes jcmtVelo { from { opacity: 0; } to { opacity: 1; } } .jcmt-capa a { text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent; } /* mientras el panel está abierto, la página de atrás no se pasea. .jcmt-consb la pone el JS SOLO si había scrollbar clásica (>0px): conserva su espacio y el logo centrado no da el saltito al abrir (reporte de ella). En táctiles la barra es overlay (0px) y no se reserva nada — con gutter fijo el saltito aparecía al revés. */ html.jcmt-quieta, html.jcmt-quieta body { overflow: hidden !important; } html.jcmt-consb { scrollbar-gutter: stable !important; } .jcmt-inner { flex: 1; display: flex; min-height: 0; padding: 26px 34px 0; } /* riel izquierdo = el .groups de Onyx (260px, filas quietas de 32) — acá 236px y filas de 48: la tablet es dedo, no mouse */ .jcmt-riel { width: 236px; flex: none; display: flex; flex-direction: column; overflow: auto; padding-right: 10px; } /* Blindados con !important: el kit del tema (post-362) pinta TODO