/* ========================================================================== Personalizaciones globales del sitio — Campeonato Millonario -------------------------------------------------------------------------- Helix Ultimate carga este archivo en TODAS las páginas desde templates/stratos/index.php ($theme->add_css('custom.css')), y los updates del template no lo pisan. Es el lugar para CSS que debe vivir fuera de una página concreta (millonario-home.css solo se carga en el home). ESTRUCTURA DE ESTE ARCHIVO 1. Reglas comunes — valen para cualquier variante del header, no se tocan. 2. ACTIVO: 3a′ (pastilla en la fila, un solo estado) — en producción. 3. ROLLBACK: 3b (banda dorada) — comentado, listo para reactivar. ⚠️ REGLA DE ORO DE LOS BLOQUES INTERCAMBIABLES Los bloques 2 y 3 se activan y desactivan comentándolos enteros, así que NO PUEDEN LLEVAR COMENTARIOS DENTRO. CSS no anida comentarios: el primer cierre de comentario interno cerraría antes de tiempo y dejaría suelto medio bloque, con las dos variantes pisándose a la vez. Y eso se descubriría justo en el momento del rollback, que es cuando menos falta hace un problema nuevo. Toda explicación va en las cabeceras, fuera del `@media`. Comprobación rápida antes de intercambiar: contar las aperturas de comentario que hay entre cada marcador y el siguiente: debe dar 1 en el bloque comentado (su propio cierre) y 0 en el activo. Cualquier otro número significa que hay un comentario interno. ========================================================================== */ /* ========================================================================== 1. REGLAS COMUNES — necesarias tanto en 3a′ como en 3b. No comentar. ========================================================================== */ /* -------------------------------------------------------------------------- Retirada del botón flotante del hero -------------------------------------------------------------------------- millonario-home.css ya lo oculta, pero ese archivo se sirve con `?v=17` fijo y sin Cache-Control: a quien lo tenga cacheado le seguiría apareciendo el flotante. Esta regla lo tapa desde un archivo sin caché previa; va con selector de más peso porque el link del hero se carga después en el . -------------------------------------------------------------------------- */ .mll-root a.mll-hero-login-mobile { display: none !important; } /* -------------------------------------------------------------------------- Icono del botón de acceso: neutralizar la "pastilla" del template -------------------------------------------------------------------------- template.css convierte cualquier icono **solid** dentro de un `.gradient-button` en un disco de 32 × 32 posicionado en absoluto, que se encima al texto: body .sppb-btn.gradient-button .fas { width:32px; height:32px; border-radius:32px; background:linear-gradient(…); position:absolute; margin-left:32px; z-index:5; … } No se veía cuando el icono era `far fa-user`. El de sign-in solo existe en solid en FA6 Free, así que no hay forma de esquivarla cambiando de estilo. Fuera del @media: el módulo es el mismo en móvil y escritorio. -------------------------------------------------------------------------- */ #sp-menu .sp-module:has([data-module_id="123"]) .sppb-btn .fas, #sp-menu .sp-module:has([data-module_id="123"]) .btn .fas { position: static; width: auto; height: auto; border-radius: 0; background: none; padding: 0; margin-left: 0; display: inline-block; color: inherit; z-index: auto; } /* ========================================================================== ===== ACTIVO: 3a′ — pastilla en la fila, un solo estado ===== Para pasar a la banda: comentar ESTE bloque y descomentar el de abajo. Estuvo desplegada del 17 ago 2026 (16:04) al 17 ago 2026 (17:0x). Header de 60px con logo + pastilla "Iniciar Sesión" + hamburguesa en un solo renglón. Medido a 393px: logo 192.8 × 32, botón 118 × 30, ocupado 363 de 363. ========================================================================== */ @media (max-width: 575.98px), (max-height: 500px) and (orientation: landscape) { #sp-header:has(#sp-menu .sp-module [data-module_id="123"]) { height: 60px; } #sp-header:has(#sp-menu .sp-module [data-module_id="123"]) .container-inner > .row { padding-top: 0; min-height: 60px; flex-wrap: nowrap; align-items: center; gap: 0; } #sp-header:has(#sp-menu .sp-module [data-module_id="123"]) #sp-logo { flex: 0 1 auto; width: auto; max-width: none; min-width: 0; } #sp-header:has(#sp-menu .sp-module [data-module_id="123"]) #sp-logo .logo { display: flex; align-items: center; width: auto; } #sp-header:has(#sp-menu .sp-module [data-module_id="123"]) #sp-logo .logo-image-phone { width: auto !important; height: auto !important; max-width: calc(100vw - 232px); max-height: 32px; } #sp-header:has(#sp-menu .sp-module [data-module_id="123"]) #sp-menu { flex: 1 1 auto; width: auto; display: flex !important; align-items: center; justify-content: flex-end; padding-left: 2px; padding-right: 15px; } #sp-header:has(#sp-menu .sp-module [data-module_id="123"]) #sp-menu .sp-column { gap: 10px; padding-right: 0; height: auto; } #sp-menu .sp-module:has([data-module_id="123"]) { display: flex !important; position: static; height: auto; margin: 0 !important; padding: 0; background: none; border: 0; order: -1; } #sp-header:has(#sp-menu .sp-module [data-module_id="123"]) .offcanvas-toggler-right, #sp-header:has(#sp-menu .sp-module [data-module_id="123"]) #offcanvas-toggler { position: relative; margin: 0; height: auto; flex: 0 0 auto; } #sp-menu .sp-module:has([data-module_id="123"]) .sp-module-content, #sp-menu .sp-module:has([data-module_id="123"]) .mod-sppagebuilder, #sp-menu .sp-module:has([data-module_id="123"]) .page-content, #sp-menu .sp-module:has([data-module_id="123"]) .sppb-section, #sp-menu .sp-module:has([data-module_id="123"]) .sppb-container-inner, #sp-menu .sp-module:has([data-module_id="123"]) .sppb-row, #sp-menu .sp-module:has([data-module_id="123"]) .sppb-button-wrapper { text-align: right !important; margin: 0 !important; padding: 0 !important; } #sp-header .burger-icon::before { display: none !important; } #sp-header #offcanvas-toggler::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; } #sp-menu .sp-module:has([data-module_id="123"]) .sppb-btn { display: inline-flex !important; align-items: center; justify-content: center; height: 36px; padding: 0 14px !important; font-size: 11.5px !important; letter-spacing: 0.06em !important; line-height: 1; border-radius: 100px; white-space: nowrap; } #sp-menu .sp-module:has([data-module_id="123"]) .sppb-btn i { margin-right: 7px !important; font-size: 12.5px; } #sp-menu .sp-module:has([data-module_id="123"]) .sppb-btn::after { content: none; } #sp-menu .sp-module:has([data-module_id="123"]) .sppb-btn .inner-text { position: static; top: auto; height: auto; line-height: 1; display: inline-flex; align-items: center; } } /* ========================================================================== ===== ROLLBACK: 3b — banda al llegar, menú al scrollear (estuvo en producción) ===== Al cargar: banda dorada de 40px sobre el header con "¿Ya compraste?" + el enlace del módulo, y debajo la fila con el logo grande (277 × 46). Al pasar de 100px de scroll (Helix añade .header-sticky): la banda se retrae, el header vuelve a 60px y el logo a 192 × 32 — el estado de 3a′. La hamburguesa lleva un punto dorado que señala dónde se entra. TRES COSAS QUE NO ESTABAN EN LA PROPUESTA ORIGINAL Y HUBO QUE AÑADIR: a) El bloque hereda de 3a′ la base de layout (flex del logo y del menú) y, sobre todo el `height: auto`, sin el cual la altura fija de Helix aplasta la imagen. El asset recortado ya no se fuerza desde aquí: desde el 17 ago 2026 el logo móvil apunta directo a millomov-trim.png en el admin del template, que es más robusto (si faltara el archivo se rompe con el alt, no desaparece el logo entero). b) El punto dorado va en `::before` del toggler, NO en `::after`: el `::after` lo ocupa el área táctil de 44 × 44, y solo hay un pseudo de cada tipo por elemento. Ponerlo en `::after` habría borrado en silencio el objetivo táctil que se arregló en la ronda anterior. c) El punto y el tamaño del logo van acotados con `:has()`. En la propuesta iban sueltos, así que un usuario con sesión —que no tiene el módulo 123— habría visto igualmente el punto dorado y el logo agrandado. ========================================================================== */ /* @media (max-width: 575.98px), (max-height: 500px) and (orientation: landscape) { #sp-header:has(#sp-menu .sp-module [data-module_id="123"]) #sp-logo { flex: 0 1 auto; width: auto; max-width: none; min-width: 0; } #sp-header:has(#sp-menu .sp-module [data-module_id="123"]) #sp-logo .logo { display: flex; align-items: center; width: auto; } #sp-header:has(#sp-menu .sp-module [data-module_id="123"]) #sp-menu { flex: 1 1 auto; width: auto; display: flex !important; align-items: center; justify-content: flex-end; padding-left: 2px; padding-right: 15px; } #sp-header:has(#sp-menu .sp-module [data-module_id="123"]) #sp-menu .sp-column { gap: 10px; padding-right: 0; height: auto; } #sp-header:has(#sp-menu .sp-module [data-module_id="123"]) .offcanvas-toggler-right, #sp-header:has(#sp-menu .sp-module [data-module_id="123"]) #offcanvas-toggler { position: relative; margin: 0; height: auto; flex: 0 0 auto; } #sp-header .burger-icon::before { display: none !important; } #sp-header #offcanvas-toggler::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; } #sp-menu .sp-module:has([data-module_id="123"]) .sp-module-content, #sp-menu .sp-module:has([data-module_id="123"]) .mod-sppagebuilder, #sp-menu .sp-module:has([data-module_id="123"]) .page-content, #sp-menu .sp-module:has([data-module_id="123"]) .sppb-section, #sp-menu .sp-module:has([data-module_id="123"]) .sppb-container-inner, #sp-menu .sp-module:has([data-module_id="123"]) .sppb-row, #sp-menu .sp-module:has([data-module_id="123"]) .sppb-button-wrapper { text-align: center !important; margin: 0 !important; padding: 0 !important; } #sp-header:has(#sp-menu .sp-module [data-module_id="123"]) { height: auto; } #sp-header:has(#sp-menu .sp-module [data-module_id="123"]) .container-inner > .row { padding-top: 40px; min-height: 72px; height: 72px; flex-wrap: nowrap; align-items: center; gap: 0; box-sizing: content-box; transition: padding-top .28s ease, min-height .28s ease, height .28s ease; } #sp-header:has(#sp-menu .sp-module [data-module_id="123"]) #sp-logo .logo-image-phone { width: auto !important; height: auto !important; max-width: calc(100vw - 90px); max-height: 46px; transition: max-height .28s ease; } #sp-menu .sp-module:has([data-module_id="123"]) { position: absolute; top: 0; left: 0; right: 0; height: 40px; z-index: 6; display: flex !important; align-items: center; justify-content: center; gap: 12px; margin: 0 !important; padding: 0 14px; border: 0; background: linear-gradient(to right, #736148 0%, #bc9e73 50%, #736148 100%); transition: opacity .25s ease, transform .25s ease; } #sp-menu .sp-module:has([data-module_id="123"])::before { content: '¿Ya compraste?'; font: 500 11px/1 'Inter', sans-serif; color: rgba(26, 20, 9, .72); } #sp-menu .sp-module:has([data-module_id="123"]) .sppb-btn, #sp-menu .sp-module:has([data-module_id="123"]) .sppb-btn .inner-text { background: none !important; border: 0 !important; color: #1a1409 !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: .09em !important; padding: 0 !important; text-decoration: underline !important; text-underline-offset: 3px; } #sp-menu .sp-module:has([data-module_id="123"]) .sppb-btn::after { content: none; } #sp-menu .sp-module:has([data-module_id="123"]) .sppb-btn .fas { display: inline-block !important; margin-right: 6px; } #sp-header.header-sticky:has(#sp-menu .sp-module [data-module_id="123"]) #sp-menu .sp-module:has([data-module_id="123"]) { opacity: 0; transform: translateY(-100%); visibility: hidden; pointer-events: none; } #sp-header.header-sticky:has(#sp-menu .sp-module [data-module_id="123"]) { height: 60px; } #sp-header.header-sticky:has(#sp-menu .sp-module [data-module_id="123"]) .container-inner > .row { padding-top: 0; min-height: 60px; height: 60px; } #sp-header.header-sticky:has(#sp-menu .sp-module [data-module_id="123"]) #sp-logo .logo-image-phone { max-height: 32px; } #sp-header:has(#sp-menu .sp-module [data-module_id="123"]) #offcanvas-toggler::before { content: ''; position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; border-radius: 50%; background: #bc9e73; box-shadow: 0 0 0 2px rgba(10, 8, 5, .95); z-index: 2; } } */ /* ========================================================================== 4. HEADER DE ESCRITORIO — el menú saltaba a una segunda fila -------------------------------------------------------------------------- Síntoma (reportado el 21 ago 2026, laptop con escalado de Windows al 150 %, es decir ~1280 px CSS): con sesión iniciada el menú entero se iba a un renglón bajo el header y quedaba flotando sobre el hero, con "Home" tapado por el logo grande del hero. Causa: `#sp-logo` y `#sp-menu` son `.col-auto` dentro de un `.row`, que en Bootstrap trae `flex-wrap: wrap`. El `.container` de Helix se escalona por breakpoint (1320 → 1140 → 960), pero el contenido del header no: el logo pide 408 px y el menú con sesión pide ~723 px de min-content. En cuanto el container baja a 1140 la suma ya no cabe y la columna del menú salta de fila; el header conserva sus 80 px de alto, así que el renglón nuevo cae fuera de él, encima del hero. Arreglo: prohibir el salto (`nowrap`) y dejar que las columnas se compriman (`min-width: 0` anula el mínimo automático del flex). El menú se ajusta recortando el padding de los enlaces; el logo NO se toca en el rango de una laptop típica (1200-1399). Solo por debajo de 1200 px, donde ni comprimido alcanza, el logo baja a 210 × 50. Por debajo de 992 px no aplica nada de esto: ahí el `ul.sp-megamenu-parent` ya es `d-none d-lg-block` y manda la hamburguesa. Medido en el DOM real con el menú de un usuario con sesión (Home, Comprar Evento, Ver Evento, Programa, TV, Repeticiones + botón). Una sola fila en 1920, 1440, 1366, 1280, 1200, 1100, 1024 y 992. ========================================================================== */ @media (min-width: 992px) and (max-width: 1399.98px) { #sp-header .row { flex-wrap: nowrap; } #sp-header #sp-logo, #sp-header #sp-menu { min-width: 0; } #sp-menu .sp-megamenu-parent > li > a { padding-left: 10px; padding-right: 10px; } } @media (min-width: 992px) and (max-width: 1199.98px) { #sp-header .logo-image { height: 50px !important; width: auto !important; } #sp-menu .sp-megamenu-parent > li > a { padding-left: 7px; padding-right: 7px; font-size: 14px; } #sp-menu .sp-module { margin-left: 8px; } } /* ========================================================================== 5. AVISO "ES TRANSMISIÓN EN LÍNEA" EN EL FLUJO DE COMPRA -------------------------------------------------------------------------- Por qué: varios clientes compraron creyendo que el paquete incluía entrada física al lienzo. El 21 ago 2026 uno pidió reembolso de $3,000 citando que la página decía "acceso completo a todo el evento", y ese mismo día ocho personas más preguntaron por el precio de la entrada presencial. Se pone por CSS y no en el contenido porque las páginas son de SP Page Builder (viven en la base de datos) y no había sesión de administrador disponible. Es reversible borrando este bloque. Cuando alguien pueda entrar al admin, conviene moverlo al contenido real: el texto quedaría en el HTML, que es lo que sirve para respaldar la postura ante un reclamo. Anclado a los Itemid de las tres páginas del embudo: 405 = /all-access · 406 = /final · 401 = /comprar-evento No se toca ningún elemento existente: solo se agrega un bloque nuevo con su propio margen, para no descuadrar el layout. ========================================================================== */ .itemid-405 .osm-container::before, .itemid-406 .osm-container::before { content: "Estás comprando el acceso a la TRANSMISIÓN EN LÍNEA del campeonato. No incluye entrada ni boleto para asistir presencialmente al lienzo charro."; display: block; margin: 0 0 22px; padding: 14px 18px; border: 1px solid rgba(212, 175, 55, .55); border-left: 4px solid #d4af37; border-radius: 6px; background: rgba(212, 175, 55, .10); color: #f2e6c9; font-size: 15px; line-height: 1.5; text-align: left; } /* NOTA: en /comprar-evento (itemid-401) NO se agrego nada. El titulo "Adquiere tu Plan" no se alcanza a ver en esa pagina, y las tarjetas de los planes ya dicen "TRANSMISION EN VIVO" y "VIDEO BAJO DEMANDA", que ya sugieren que es streaming. El punto critico es el formulario de pago, que si quedo cubierto. */ /* ========================================================================== 6) Celular en HORIZONTAL (landscape, alto <= 500px) — 22 ago 2026. Reporte real: en horizontal el sitio se veia como escritorio a medias (captura de Ana Marina y del propio Andres): logo enorme, hamburguesa y "Cerrar Sesion" flotando sobre el contenido, y el widget de WhatsApp (DelightChat, inyectado en after_body del template con zIndex 999999) tapando el engrane y la pantalla completa del reproductor (caso Alex Flores: "no me aparece esa opcion"). Los bloques 3a'/3b de arriba ya comparten esta media query, asi que el header compacto de 60px aplica igual en horizontal. Aqui va solo lo que el movil no cubria: - el logo de ESCRITORIO (en horizontal el ancho pasa de 576px y Helix muestra .logo-image, no .logo-image-phone); - el widget de WhatsApp: chico, pegado a la esquina y con z-index normal (el suyo viene inline, por eso los !important); - la sala: menos padding vertical para que el video aproveche el alto. ========================================================================== */ @media (max-height: 500px) and (orientation: landscape) { /* Logo de escritorio a la altura de la franja del header */ #sp-header #sp-logo .logo { display: flex; align-items: center; height: auto; } #sp-header #sp-logo .logo img { width: auto !important; height: auto !important; max-height: 40px; } #sp-header .container-inner > .row { padding-top: 0; min-height: 60px; flex-wrap: nowrap; align-items: center; } /* Widget de WhatsApp: solo la burbuja, chica y sin tapar el player */ #wa-btn-wrapper, #wa-widget-wrapper { z-index: 3 !important; transform: scale(0.72); transform-origin: bottom right; bottom: 6px !important; right: 6px !important; margin: 0 !important; } /* Sala de transmision: el video manda, lo demas se compacta */ body .mll-player-section { padding: 10px 12px; min-height: 0; } body .mll-player-header { margin: 0 0 10px; font-size: 1rem; } body .mll-player-message { display: none; } }