con un enlace a dhru.com). * Trae display y opacidad en línea con !important, que ninguna hoja puede pisar: se oculta con lo que el estilo en línea * no fija. Pedido de Eze (2026-10-11). mgsm2026.js además quita el nodo. Sin «body >»: el HTML de DHRU deja * etiquetas abiertas y el navegador la cuelga del último

abierto, no del . */ html.mgsm26 div.cn:has(> a[href*="dhru.com" i]) { visibility: hidden !important; height: 0 !important; min-height: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; pointer-events: none !important; margin: 0 !important; border: 0 !important; } /* ----------------------------------------------- piel de componentes (páginas verificadas) * Fondo, texto, enlaces, botones, tarjetas, formularios, tablas, menús y modales: SOLO en la portada y las listas de precios (body.page-index y * body.page-resellerpricing, las páginas que se revisaron con el rediseño puesto) y en el modal de ingreso (#login) y el cajón del menú, que están en * todas. Cuenta, pedidos, tickets, addfunds, API, el asistente de pedidos, calendarios y gráficos conservan el tema de DHRU hasta que alguien los revise * con una cuenta real (claro y oscuro, 1440 y 390 px) y sume su clase de a las listas de abajo. :where() deja la especificidad como era. */ html.mgsm26 body:where(.page-index, .page-resellerpricing), html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login) .page-title, html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login) .h1, html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login) .h2, html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login) .h3, html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login) .h4, html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login) .h5, html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login) .h6, html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login) h1, html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login) h2, html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login) h3, html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login) h4, html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login) h5, html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login) h6 { color: var(--m26-ink); } /* :where() deja la especificidad en la del selector «a»: una regla de una sola clase del tema (p. ej. enlaces .badge-*, .text-white) le gana */ :where(html.mgsm26) :where(body:is(.page-index, .page-resellerpricing), #login) a { color: var(--m26-ink); } :where(html.mgsm26) :where(body:is(.page-index, .page-resellerpricing), #login) a:hover { color: var(--m26-accent-t); text-decoration: none; } html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login) .text-muted { color: var(--m26-ink-2) !important; opacity: 1; } /* los títulos de las páginas interiores pesaban 300 frente al 780 del H1 de la portada */ html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login) .page-title { font-weight: 700; } html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login) .bg-white { background-color: var(--m26-surface) !important; color: var(--m26-ink); } html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login) .bg-light { background-color: var(--m26-surface-2) !important; } html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login) .border, html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login) .border-top, html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login) .border-bottom, html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login) .border-left, html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login) .border-right { border-color: var(--m26-line-2) !important; } html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login) hr { border-top-color: var(--m26-line-2); } html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login) .breadcrumb a, html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login) .breadcrumb { color: var(--m26-ink-3); } /* botones DHRU: base neutra SOLO para el .btn pelado (sin variante); .btn-primary pasa al acento con corte. * Las variantes (.btn-warning, .btn-info, .btn-secondary, .btn-dark, .btn-outline-*, .btn-link, .btn-sm, .btn-small…) conservan los colores del tema * de DHRU, que ya sigue el modo claro/oscuro: acá sólo se verificó la portada, la lista de precios, el header, el pie y los modales. */ html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login) .btn:not([class*="btn-"]) { border-radius: 10px; border: 1px solid var(--m26-line-2) !important; background: var(--m26-surface-2) !important; color: var(--m26-ink) !important; font-weight: 600; box-shadow: none; } html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login) .btn:not([class*="btn-"]):hover { background: var(--m26-surface-3) !important; color: var(--m26-ink) !important; } html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login) .btn.btn-primary, html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login) button.btn.btn-primary, html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login) .btn.bg-primary, html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login) .btn-addtocart.btn-primary { background: var(--m26-accent) !important; border-color: transparent !important; color: var(--m26-on-accent) !important; border-radius: 0; clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%); } html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login) .btn.btn-primary:hover, html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login) .btn.bg-primary:hover { background: var(--m26-accent-hover) !important; color: var(--m26-on-accent) !important; } html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login) .btn.btn-danger { background: var(--m26-bad) !important; border-color: transparent !important; color: #fff !important; } html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login) .btn.btn-success { background: var(--m26-ok) !important; border-color: transparent !important; color: #fff !important; } html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login) .btn:focus-visible { outline: 2px solid var(--m26-accent-t); outline-offset: 2px; } /* tarjetas */ html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login) .card, html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login) .card-product .product-info { background: var(--m26-surface) !important; border: 1px solid var(--m26-line) !important; border-radius: 14px; box-shadow: var(--m26-shadow-1); color: var(--m26-ink); } html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login) .card .card { box-shadow: none; } html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login) .card-body, html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login) .card-header, html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login) .card-footer { background: transparent !important; border-color: var(--m26-line) !important; color: inherit; } /* formularios */ html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login) .form-control, html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login) .input-group-text, html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login) .custom-select, html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login) .chosen-container-single .chosen-single, html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login) .chosen-container .chosen-drop { background: var(--m26-surface) !important; color: var(--m26-ink) !important; border: 1px solid var(--m26-line-2) !important; border-radius: 10px; box-shadow: none; } html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login) .form-control:not(.form-control-sm) { min-height: 44px; } html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login) .form-control::placeholder { color: var(--m26-ink-3); opacity: 1; } html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login) .form-control:focus { border-color: var(--m26-accent-t) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--m26-accent) 28%, transparent) !important; } html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login) .input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login) .input-group-prepend .input-group-text { border-top-right-radius: 0; border-bottom-right-radius: 0; } html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login) .chosen-container .chosen-results li { color: var(--m26-ink); border-bottom-color: var(--m26-line); } html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login) .chosen-container .chosen-results li.highlighted { background: var(--m26-surface-2) !important; color: var(--m26-ink) !important; } html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login) label, html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login) .custom-control-label { color: var(--m26-ink-2); } /* tablas (lista de precios): sin tocar anchos ni comportamiento */ html.mgsm26 :where(body:is(.page-index, .page-resellerpricing)) .table { color: var(--m26-ink); background: transparent !important; } html.mgsm26 :where(body:is(.page-index, .page-resellerpricing)) .table th, html.mgsm26 :where(body:is(.page-index, .page-resellerpricing)) .table td { border-color: var(--m26-line) !important; } html.mgsm26 :where(body:is(.page-index, .page-resellerpricing)) .table thead th { background: var(--m26-surface-2) !important; color: var(--m26-ink-2); font-weight: 600; letter-spacing: .01em; border-bottom: 1px solid var(--m26-line-2) !important; } html.mgsm26 :where(body:is(.page-index, .page-resellerpricing)) .table thead th h5, html.mgsm26 :where(body:is(.page-index, .page-resellerpricing)) .table thead th .h5 { color: var(--m26-ink); font-size: 16px; font-weight: 700; margin: 0; } html.mgsm26 :where(body:is(.page-index, .page-resellerpricing)) .table-striped tbody tr:nth-of-type(odd) { background: color-mix(in srgb, var(--m26-surface-2) 55%, transparent) !important; } html.mgsm26 :where(body:is(.page-index, .page-resellerpricing)) .table-striped tbody tr:nth-of-type(even) { background: transparent !important; } html.mgsm26 :where(body:is(.page-index, .page-resellerpricing)) .table-hover tbody tr:hover { background: color-mix(in srgb, var(--m26-accent) 9%, transparent) !important; color: var(--m26-ink); } /* DHRU deja .prefix/.suffix (el «$CRD» de cada precio) con opacity .6: sumado a ink-3 daba 2,5:1. Sin la opacidad y con ink-2 pasa 7:1 en los dos temas */ html.mgsm26 :where(body:is(.page-index, .page-resellerpricing)) .table .prefix, html.mgsm26 :where(body:is(.page-index, .page-resellerpricing)) .table .suffix { opacity: 1; color: var(--m26-ink-2); } html.mgsm26 :where(body:is(.page-index, .page-resellerpricing)) .table td .nowrap, html.mgsm26 :where(body:is(.page-index, .page-resellerpricing)) .table td.text-right { font-variant-numeric: tabular-nums; } html.mgsm26 :where(body:is(.page-index, .page-resellerpricing)) .reseller-pricing .group.card { overflow: hidden; } html.mgsm26 :where(body:is(.page-index, .page-resellerpricing)) .page-link { background: var(--m26-surface); border-color: var(--m26-line-2); color: var(--m26-ink); } html.mgsm26 :where(body:is(.page-index, .page-resellerpricing)) .nav-pills .nav-link.active, html.mgsm26 :where(body:is(.page-index, .page-resellerpricing)) ul.nav-pills.flex-nowrap .nav-link.active { background: var(--m26-accent) !important; color: var(--m26-on-accent) !important; } /* menús, modales */ html.mgsm26 :where(body:is(.page-index, .page-resellerpricing)) .dropdown-menu { background: var(--m26-surface) !important; border: 1px solid var(--m26-line-2); color: var(--m26-ink); } html.mgsm26 :where(body:is(.page-index, .page-resellerpricing)) .dropdown-item { color: var(--m26-ink); } html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login, .modal-menu) .modal-content { background: var(--m26-surface) !important; color: var(--m26-ink); border: 1px solid var(--m26-line-2); border-radius: 16px; } html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login, .modal-menu) .modal-header { background: var(--m26-surface-2) !important; color: var(--m26-ink); border-bottom: 1px solid var(--m26-line-2); } html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login, .modal-menu) .modal-body { background: var(--m26-surface) !important; color: var(--m26-ink); } html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login, .modal-menu) .modal-title, html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login, .modal-menu) .modal-header .close, html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login, .modal-menu) .modal-header .close span { color: var(--m26-ink) !important; opacity: 1; text-shadow: none; } html.mgsm26 :where(body:is(.page-index, .page-resellerpricing), #login, .modal-menu) .modal-footer { border-top-color: var(--m26-line-2); background: var(--m26-surface); } html.mgsm26 .modal-menu .modal-content, html.mgsm26 .modal-menu .modal-header, html.mgsm26 .modal-menu .modal-body { border-radius: 0; } html.mgsm26 .modal-menu .nav-link, html.mgsm26 .modal-menu .dropdown-item, html.mgsm26 .modal-menu a { color: var(--m26-ink) !important; } html.mgsm26 .modal-menu .dropdown-item { white-space: normal; } html.mgsm26 .modal-menu .nav-link.dropdown-toggle { background: var(--m26-surface-2) !important; border-bottom-color: var(--m26-line); } html.mgsm26 .modal-menu .modal-header .btn, html.mgsm26 .modal-menu .modal-header .btn.text-white { color: var(--m26-ink) !important; } html.mgsm26 .modal-menu .modal-header .btn.bg-primary { color: var(--m26-on-accent) !important; } /* botones del cajón con el mismo sistema que el header: «Registro» (Crear cuenta) destacado, «Iniciar sesión» en contorno, esquina cortada */ html.mgsm26 .modal-menu .modal-header .d-flex > .btn { min-height: 48px; border: 0 !important; border-radius: 0; font-weight: 640; letter-spacing: .04em; box-shadow: none; clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%); } /* el acento es del botón de REGISTRO, reconocido por lo que abre (register); un botón de cuenta («Panel», «Salir») del cajón con sesión no lo toma */ html.mgsm26 .modal-menu .modal-header .d-flex > .btn:is([onclick*="register" i], [href$="register" i]) { background: var(--m26-accent) !important; color: var(--m26-on-accent) !important; } html.mgsm26 .modal-menu .modal-header .d-flex > .btn[data-target="#login"] { background: transparent !important; color: var(--m26-ink) !important; box-shadow: inset 0 0 0 1.5px var(--m26-ink); } html.mgsm26 .modal-menu h3 a, html.mgsm26 .modal-menu .navbar-brand { color: var(--m26-ink) !important; } html.mgsm26 .modal-backdrop.show { opacity: .62; } /* pie * Pedido de Eze (2026-10-12): fuera la imagen de medios de pago (VISA, AmEx, PayPal, eBay, MasterCard:

del pie de DHRU) y el bloque de cuatro * columnas (MENDOZAGSM con el ícono RSS · Enlaces Útiles · Suscribirse · Contacto:

). Se ocultan bajo el gate, en todas las páginas, y NADA más: * quedan la línea de derechos de MendozaGSM (.footer-bottom) y la firma «Powered by GSM-Source.com» (la pone footer.tpl). Selectores del markup real del pie del tema default. */ html.mgsm26 footer .footer-top { display: none !important; } html.mgsm26 footer .footer-bottom img[src*="payment_logo"] { display: none !important; } html.mgsm26 .footer-bottom { background: var(--m26-bg) !important; border-top: 1px solid var(--m26-line); color: var(--m26-ink-3); } /* ------------------------------------------------- aviso de cookies de DHRU (#COOKIELAW) * El núcleo imprime el aviso después del pie con estilos EN LÍNEA (negro, 100 % de ancho, texto blanco, position:fixed): acá se pisan con !important, sólo con el gate. No se toca su lógica ni * sus cookies; mgsm2026.js (módulo «cookies») traduce la frase, marca el aviso con mgsm26-ck y sus nodos con mgsm26-ck__* y, al terminar, pone mgsm26-ck-on en . Todo el rediseño del aviso cuelga * de #COOKIELAW.mgsm26-ck: si el JS no llega o el marcado no es el conocido, el aviso queda como el de DHRU, sin tocar. Hasta que el JS lo marca está invisible (sin destello en inglés); * head-on.tpl lo muestra igual a los 4 s. * Forma: una franja compacta abajo a la IZQUIERDA, del ancho de su contenido (a lo sumo 880 px), con la esquina cortada arriba a la derecha (el corte SIM del sistema) y sin tocar la esquina inferior derecha: el * lanzador del chat de empleadovirtual.ai (cápsula fija, hasta ~100 px de ancho a 24 px del borde) queda libre aunque su z-index fuera bajo. Una línea en escritorio y tableta (desde ~700 px; * entre 601 y 699 una frase larga puede pasar a dos). En teléfono (≤ 600 px) pasa a ser una tarjeta a todo el ancho, dos líneas como máximo, POR ENCIMA del lanzador (los 88 px que la firma ya * le reserva abajo), no a su lado. * Para no tapar el pie: --m26-ck-h (el alto del aviso, lo mide el JS; 0 al cerrarlo) se suma como relleno al final de la página. Colores: los tokens del rediseño (claro y oscuro). */ html.mgsm26:not(.mgsm26-ck-on) #COOKIELAW { visibility: hidden !important; } html.mgsm26 #COOKIELAW.mgsm26-ck { --ck-clear: 144px; --ck-cut: 12px; position: fixed !important; top: auto !important; right: auto !important; bottom: 0 !important; left: 0 !important; z-index: 1000 !important; width: max-content !important; max-width: min(880px, calc(100% - var(--ck-clear))) !important; margin: 0 !important; padding: 0 !important; isolation: isolate; background: none !important; color: var(--m26-ink) !important; font: 500 13.5px/1.45 var(--m26-sans); letter-spacing: 0; text-align: start; } html.mgsm26 #COOKIELAW.mgsm26-ck::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; clip-path: polygon(0 0, calc(100% - var(--ck-cut)) 0, 100% var(--ck-cut), 100% 100%, 0 100%); background: linear-gradient(to top right, transparent calc(50% - .6px), var(--m26-line-2) calc(50% - .6px), var(--m26-line-2) calc(50% + .6px), transparent calc(50% + .6px)) no-repeat top right / var(--ck-cut) var(--ck-cut), var(--m26-surface); box-shadow: inset 0 1px 0 var(--m26-line-2), inset -1px 0 0 var(--m26-line-2); } html.mgsm26 #COOKIELAW.mgsm26-ck .mgsm26-ck__in { display: flex !important; align-items: center; justify-content: space-between; gap: 6px; min-height: 56px; margin: 0; padding: 6px 8px 6px 20px; } html.mgsm26 #COOKIELAW.mgsm26-ck[dir="rtl"] .mgsm26-ck__in { padding: 6px 20px 6px 8px; } html.mgsm26 #COOKIELAW.mgsm26-ck .mgsm26-ck__txt { flex: 1 1 auto; min-width: 0; margin: 0; padding: 4px 0; } html.mgsm26 #COOKIELAW.mgsm26-ck .mgsm26-ck__msg { color: var(--m26-ink); } html.mgsm26 #COOKIELAW.mgsm26-ck .mgsm26-ck__set { position: relative; display: inline; margin: 0; padding: 0; color: var(--m26-accent-t) !important; font-weight: 640; white-space: nowrap; cursor: pointer; text-decoration: underline !important; text-decoration-thickness: 1.5px; text-underline-offset: 3px; } html.mgsm26 #COOKIELAW.mgsm26-ck .mgsm26-ck__set::after { content: ""; position: absolute; inset: -14px -10px; } /* área de toque de 44 px sin agrandar la línea */ html.mgsm26 #COOKIELAW.mgsm26-ck .mgsm26-ck__set:focus-visible { outline: 2px solid var(--m26-accent-t); outline-offset: 3px; } html.mgsm26 #COOKIELAW.mgsm26-ck .mgsm26-ck__x { flex: none; width: 44px; margin: 0 !important; padding: 0 !important; } html.mgsm26.mgsm26-ck-on { padding-bottom: var(--m26-ck-h, 0px); } /* El panel de configuración que abre «Configurar» (#COOKIESETT, de DHRU: pantalla negra con z-index 1000, en inglés) NO se toca salvo por una capa: el header fijo del rediseño (1030) quedaba * encima de su primera línea y la tapaba. Sube por encima del header (1030) y de los modales de Bootstrap (1050); su contenido, su lógica y su botón «Save and Close» son los de DHRU. */ html.mgsm26 #COOKIESETT { z-index: 1060 !important; } @media (max-width: 600px) { html.mgsm26 #COOKIELAW.mgsm26-ck { right: 12px !important; left: 12px !important; width: auto !important; max-width: none !important; bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important; font-size: 12.5px; line-height: 1.4; } html.mgsm26 #COOKIELAW.mgsm26-ck .mgsm26-ck__in { min-height: 52px; padding: 4px 6px 4px 14px; } html.mgsm26 #COOKIELAW.mgsm26-ck[dir="rtl"] .mgsm26-ck__in { padding: 4px 14px 4px 6px; } } /* ------------------------------------------------------------------ responsive */ @media (min-width: 992px) and (max-width: 1099px) { html.mgsm26 .mgsm26-actions { gap: 6px; margin-inline-start: 6px; } html.mgsm26 .mgsm26-actions .mgsm26-btn--sm { padding: 0 12px; } } /* El menú de idioma mide 244 px y se ancla al botón: con el botón lejos del borde derecho (320–700 px) se salía por la izquierda. * Ahí se ancla al header (position-relative de DHRU), a 12 px del borde, con ancho que siempre entra. */ @media (max-width: 700px) { html.mgsm26 .mgsm26-lang { position: static; } html.mgsm26 .mgsm26-lang > .mgsm26-menu { top: 100%; inset-inline-end: 12px; margin-top: 2px; width: min(244px, calc(100vw - 24px)); } } @media (min-width: 576px) and (max-width: 991px) { /* tablet: el hero se ajusta a su contenido (sin vacíos arriba y abajo) y en claro el halo detrás del texto es más fuerte */ html.mgsm26 .mgsm26-hero { min-height: 0; padding: calc(var(--m26-hh) + 36px) var(--m26-gut) 60px; } html.mgsm26[data-mgsm26-theme="light"] .mgsm26-fondo::after { background: radial-gradient(ellipse 80% 56% at 50% 44%, var(--m26-halo), transparent 84%), radial-gradient(ellipse 80% 56% at 50% 44%, var(--m26-halo), transparent 84%), linear-gradient(to bottom, var(--m26-bg) 0, transparent 22%, transparent 78%, var(--m26-bg) 100%); } } @media (max-width: 991px) { html.mgsm26 { --m26-hh: 64px; } html.mgsm26 .mgsm26-actions { margin-inline-start: auto; gap: 6px; } html.mgsm26 header .navbar-brand { margin-right: 0 !important; } html.mgsm26 header .navbar-brand img { max-height: 40px; } html.mgsm26 .mgsm26-cur { display: none; } html.mgsm26 .mgsm26-banner { flex-basis: calc((100% - 16px) / 2); } html.mgsm26 .mgsm26-hero { padding-top: calc(var(--m26-hh) + 20px); } } /* Acciones del header en el ancho de teléfono y tablet: el logo manda, el texto de los botones se gana su lugar. * Sin JS: íconos de 44 px por debajo de 760 px y texto desde 760. Con JS, mgsm2026.js mide el header y deja en el nivel que entra SIN achicar * el logo ni desbordar (probado en los 10 idiomas, que miden distinto): t2 = «Iniciar sesión» y «Crear cuenta» con texto · t1 = sólo «Crear cuenta» * (la acción de captación) · t0 = los dos como ícono con su nombre accesible. */ @media (max-width: 759px) { html.mgsm26 .mgsm26-actions .mgsm26-btn--sm { padding: 0; width: 44px; } html.mgsm26 .mgsm26-actions .mgsm26-btn--sm .mgsm26-btn__t { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } } @media (max-width: 991px) { html.mgsm26.mgsm26-hd-t0 .mgsm26-actions .mgsm26-btn--sm { padding: 0; width: 44px; } html.mgsm26.mgsm26-hd-t0 .mgsm26-actions .mgsm26-btn--sm .mgsm26-btn__t { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } html.mgsm26.mgsm26-hd-t2 .mgsm26-actions .mgsm26-btn--sm, html.mgsm26.mgsm26-hd-t1 .mgsm26-actions [data-m26-register] { padding: 0 14px; width: auto; } html.mgsm26.mgsm26-hd-t2 .mgsm26-actions .mgsm26-btn--sm .mgsm26-btn__t, html.mgsm26.mgsm26-hd-t1 .mgsm26-actions [data-m26-register] .mgsm26-btn__t { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; } } @media (max-width: 575px) { html.mgsm26 header .navbar-xl { gap: 0; } html.mgsm26 header .navbar-toggler { margin-inline-end: 6px; } html.mgsm26 header .navbar-brand img { max-height: 34px; } /* en teléfono el tema vive en el cajón del menú (lo arma mgsm2026.js: clase mgsm26-drawer-on); sin ese selector queda en el header */ html.mgsm26 .mgsm26-actions { gap: 4px; } html.mgsm26.mgsm26-drawer-on .mgsm26-actions > .mgsm26-ico[data-m26-theme] { display: none; } html.mgsm26 .mgsm26-drawer-theme { display: inline-flex; width: 100%; margin-top: 8px; } html.mgsm26.mgsm26-hd-t2 .mgsm26-actions .mgsm26-btn--sm, html.mgsm26.mgsm26-hd-t1 .mgsm26-actions [data-m26-register] { padding: 0 12px; font-size: 11.5px; letter-spacing: .05em; gap: 6px; } html.mgsm26.mgsm26-hd-t2 .mgsm26-actions .mgsm26-btn--sm svg, html.mgsm26.mgsm26-hd-t1 .mgsm26-actions [data-m26-register] svg { display: none; } html.mgsm26 .mgsm26-lang > summary { padding-inline: 6px; gap: 3px; } html.mgsm26 .mgsm26-lang > summary .flag { display: none; } html.mgsm26 .mgsm26-menu { width: min(244px, calc(100vw - 24px)); max-height: calc(100svh - var(--m26-hh) - 24px); } html.mgsm26 .mgsm26-hero { min-height: 0; padding: calc(var(--m26-hh) + 16px) 16px 40px; } html.mgsm26 .mgsm26-h1 { font-size: clamp(34px, 11vw, 46px); line-height: 1; } html.mgsm26 .mgsm26-sub { margin-top: 16px; font-size: 16px; } html.mgsm26 .mgsm26-search { margin-top: 26px; } html.mgsm26 .mgsm26-search__box { height: 60px; padding: 0 7px 0 14px; gap: 4px; } html.mgsm26 .mgsm26-search__input { font-size: 16px; } html.mgsm26 .mgsm26-search__go { padding: 0; width: 46px; --h: 46px; } html.mgsm26 .mgsm26-search__go .mgsm26-btn__t { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } html.mgsm26 .mgsm26-kbd { display: none; } html.mgsm26 .mgsm26-cta { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 22px; } html.mgsm26 .mgsm26-cta .mgsm26-btn { width: 100%; } html.mgsm26 .mgsm26-pl { display: block; width: 100%; } html.mgsm26 .mgsm26-pl__menu { inset-inline: 0; width: auto; min-width: 0; max-width: none; max-height: none; } html.mgsm26 .mgsm26-opt { grid-template-columns: minmax(0, 1fr); row-gap: 4px; padding: 10px 14px 10px 18px; } html.mgsm26 .mgsm26-opt__price { justify-self: start; } html.mgsm26 .mgsm26-banner, html.mgsm26 .mgsm26-banners--n2 .mgsm26-banner { flex-basis: 86%; } html.mgsm26 .mgsm26-banners--n1 .mgsm26-banner { flex-basis: 100%; } /* sin flechas (se desliza) y con la esquina del chat libre: el lanzador mide 60 px a 24 px del borde */ html.mgsm26 .mgsm26-banners__arrow { display: none; } html.mgsm26 .mgsm26-banners__ctl { justify-content: flex-start; padding-inline-end: 84px; } } /* con las dos tarjetas lado a lado en menos de ~1100 px el botón no cabe a la derecha: pasa debajo del texto */ @media (max-width: 1099px) { html.mgsm26 .mgsm26-banner--fb .mgsm26-banner__body { grid-template-columns: auto minmax(0, 1fr); row-gap: 4px; } html.mgsm26 .mgsm26-banner--fb .mgsm26-btn { grid-column: 1 / -1; grid-row: auto; margin-top: 8px; justify-self: start; } } /* entre 1100 y ~1320 px la tarjeta de la derecha termina a menos de 84 px del borde: su botón quedaba bajo el lanzador del chat (60 px a 24 px del borde) */ @media (min-width: 1100px) and (max-width: 1320px) { html.mgsm26 .mgsm26-banner--fb:last-child .mgsm26-banner__body { padding-inline-end: 84px; } } /* laptops bajas (1280×720, 1366×768): el hero llenaba la pantalla y no asomaba nada de abajo. Texto y espacios se ajustan a la altura para que siempre se vea el borde de los banners (señal de que hay más) */ @media (min-width: 992px) and (max-height: 800px) { html.mgsm26 .mgsm26-hero { padding-top: calc(var(--m26-hh) + 12px); padding-bottom: 28px; } html.mgsm26 .mgsm26-h1 { font-size: clamp(38px, min(6vw, 8.2vh), 82px); } html.mgsm26 .mgsm26-hero:lang(ru) .mgsm26-h1, html.mgsm26 .mgsm26-hero:lang(tr) .mgsm26-h1 { font-size: clamp(36px, min(5.2vw, 7.4vh), 72px); } html.mgsm26 .mgsm26-sub { margin-top: 14px; } html.mgsm26 .mgsm26-search { margin-top: 22px; } html.mgsm26 .mgsm26-cta { margin-top: 14px; } } /* teléfono: el placeholder entero («Rechercher des produits ou services», «Produkte oder Services suchen») a 360 y 390 px, sin cortarse con «…». La lupa se va (el botón de la * derecha ya es la acción) y la letra del PLACEHOLDER acompaña el ancho; el campo sigue en 16 px, que es lo que evita el zoom de iOS al enfocar. */ @media (max-width: 480px) { html.mgsm26 .mgsm26-search__ico { display: none; } html.mgsm26 .mgsm26-search__input::placeholder { font-size: clamp(12.5px, 3.9vw, 16px); } } @media (hover: none) { html.mgsm26 .mgsm26-kbd { display: none; } } /* --------------------------------------------------------------- movimiento * Todo el movimiento vive acá. Con prefers-reduced-motion: reduce no se mueve nada: el fondo * queda estático (lo decide fondo.js) y los botones sólo cambian de color. */ @media (prefers-reduced-motion: no-preference) { /* cambio de tema: las superficies se funden en lugar de saltar (sólo mientras dura la clase mgsm26-theming) */ html.mgsm26.mgsm26-theming body, html.mgsm26.mgsm26-theming header, html.mgsm26.mgsm26-theming .mgsm26-bar, html.mgsm26.mgsm26-theming .card, html.mgsm26.mgsm26-theming .mgsm26-hero, html.mgsm26.mgsm26-theming .mgsm26-panel::before, html.mgsm26.mgsm26-theming .mgsm26-search__box::before { transition: background-color .3s ease, color .3s ease, border-color .3s ease; } html.mgsm26 .mgsm26-btn { transition: transform .12s var(--m26-ease); } html.mgsm26 .mgsm26-btn::before { transition: background-position 0s, background-color .18s var(--m26-ease); } html.mgsm26 .mgsm26-btn::after { transition: opacity .18s var(--m26-ease); transform: scale(1.06); } html.mgsm26 .mgsm26-btn:hover::after, html.mgsm26 .mgsm26-btn:focus-visible::after { transform: none; transition: opacity .18s var(--m26-ease), transform .24s var(--m26-ease); } /* un barrido de luz que cruza una sola vez */ html.mgsm26 .mgsm26-btn:hover::before { background-position: top right, 160% 0, 0 0; transition: background-position .55s var(--m26-ease); } /* desfase cromático de 1 px, 160 ms, una vez, sólo al entrar con el puntero */ html.mgsm26 .mgsm26-btn:hover .mgsm26-btn__t { animation: mgsm26-aberr .16s steps(2, end) 1; } html.mgsm26 .mgsm26-btn:active { transform: translateY(1px); transition-duration: .06s; } html.mgsm26 .mgsm26-btn svg { transition: transform .2s var(--m26-ease); } html.mgsm26 .mgsm26-btn:hover svg:last-child:not(:first-child) { transform: translateX(3px); } html.mgsm26 .mgsm26-btn.mgsm26-pl__btn:hover svg.mgsm26-pl__chev { transform: none; } html.mgsm26 .mgsm26-btn.mgsm26-pl__btn[aria-expanded="true"]:hover svg.mgsm26-pl__chev { transform: rotate(180deg); } html.mgsm26 .mgsm26-pl__menu:not([hidden]) { animation: mgsm26-panel .16s var(--m26-ease) backwards; } html.mgsm26 .mgsm26-ico { transition: transform .12s var(--m26-ease); } html.mgsm26 .mgsm26-ico:active { transform: scale(.95); } html.mgsm26 .mgsm26-ico svg { transition: transform .35s var(--m26-ease); } html.mgsm26 .mgsm26-search__box::after { transition: opacity .18s var(--m26-ease), transform .24s var(--m26-ease); transform: scale(1.04); } html.mgsm26 .mgsm26-search__box:focus-within::after { transform: none; } html.mgsm26 .mgsm26-opt::before { transition: transform .2s var(--m26-ease); } html.mgsm26 .mgsm26-panel:not([hidden]) { animation: mgsm26-panel .18s var(--m26-ease) backwards; } /* sólo con el menú abierto: sobre el

cerrado la animación mantenía el hilo principal activo en TODAS las páginas (medido 2,8 % → 0,2 %) */ html.mgsm26 .mgsm26-lang[open] > .mgsm26-menu, html.mgsm26 .mgsm26-cur.is-open > .mgsm26-menu { animation: mgsm26-panel .16s var(--m26-ease) backwards; } html.mgsm26 .mgsm26-banners__vp { scroll-behavior: smooth; } html.mgsm26 .mgsm26-hero__in > * { animation: mgsm26-in .5s var(--m26-ease) backwards; } html.mgsm26 .mgsm26-hero__in > .mgsm26-sub { animation-delay: .06s; } html.mgsm26 .mgsm26-hero__in > .mgsm26-search { animation-delay: .12s; } html.mgsm26 .mgsm26-hero__in > .mgsm26-cta { animation-delay: .22s; } html.mgsm26.mgsm26-ck-on #COOKIELAW.mgsm26-ck { animation: mgsm26-ck-in .24s var(--m26-ease) backwards; } } @keyframes mgsm26-aberr { 0% { text-shadow: 1px 0 rgba(255, 64, 96, .75), -1px 0 rgba(64, 144, 255, .75); } 100% { text-shadow: none; } } @keyframes mgsm26-panel { from { opacity: 0; transform: translateY(-4px); } } @keyframes mgsm26-in { from { opacity: 0; transform: translateY(10px); } } @keyframes mgsm26-ck-in { from { opacity: 0; transform: translateY(8px); } } /* ------------------------------------------------------- alto contraste * Va al final a propósito: estas reglas tienen la misma especificidad que las de los puntos del carrusel y la barrita de la opción activa * (más arriba) y tienen que ganarles por orden. */ @media (forced-colors: active) { html.mgsm26 .mgsm26-btn { border: 1px solid ButtonText; } /* los bordes hechos con box-shadow inset y las pastillas de fondo desaparecen en alto contraste */ html.mgsm26 .mgsm26-ico, html.mgsm26 .mgsm26-search__box { border: 1px solid ButtonText; } html.mgsm26 .mgsm26-opt[aria-selected="true"] { outline: 2px solid Highlight; outline-offset: -2px; } html.mgsm26 .mgsm26-opt::before { forced-color-adjust: none; background: Highlight; } html.mgsm26 .mgsm26-dot::before { forced-color-adjust: none; background: GrayText; } html.mgsm26 .mgsm26-dot[aria-current="true"]::before { background: Highlight; } /* el aviso de cookies dibuja su fondo y su contorno en ::before: en alto contraste se queda con un fondo y un borde de verdad */ html.mgsm26 #COOKIELAW.mgsm26-ck { background: Canvas !important; border-top: 1px solid CanvasText; border-right: 1px solid CanvasText; } html.mgsm26 #COOKIELAW.mgsm26-ck .mgsm26-ck__set { color: LinkText !important; } }