/* ========================================================================== TEMPORARY MOBILE FIXES (Aislamiento Estricto) ========================================================================== Todo el código aquí debe estar dentro de Media Queries para asegurar que el diseño de escritorio quede 100% intacto. */ /* Dispositivos Móviles y Tablets (hasta 991px) */ @media (max-width: 991px) { /* 1. La barra superior en sí misma: le quitamos el z-index global para permitir que sus hijos (logo y hamburguesa) se peleen en capas distintas con el fondo oscuro y el menú lateral. */ .wsmobileheader { background-color: rgba(255, 255, 255, 0.98) !important; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important; display: flex !important; align-items: center !important; width: 100% !important; padding: 2px 15px !important; height: auto !important; position: relative !important; z-index: auto !important; /* MÁGICO: Permite intercalar capas */ } /* 2. Capa 1 (Al fondo): El Logo */ .wsmobileheader .smllogo { display: inline-block !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; /* Se queda abajo de todo para ser oscurecido y cubierto */ } .wsmobileheader .smllogo img { max-height: 60px !important; margin-top: -8px !important; } /* 3. Capa 2 (Medio-bajo): Fondo oscuro */ .overlapblackbg { z-index: 9990 !important; /* Oscurece la pantalla y oscurece al logo (Capa 1) */ } /* 4. Capa 3 (Medio-alto): El menú lateral blanco */ .wsmenu { top: 0 !important; /* Regresa a ocupar toda la altura */ height: 100vh !important; z-index: 99990 !important; /* Cubre el fondo oscuro y cubre al logo, ocupando toda la pantalla */ } /* Empujar los links hacia abajo para dejarle un hueco limpio a la X en la parte superior */ .wsmenu-list { padding-top: 45px !important; /* Reducido para que 'Inicio' suba y se acerque a la X */ } /* 5. Capa 4 (La cima): El botón de hamburguesa nativo */ #wsnavtoggle { margin-left: auto !important; position: relative !important; top: -8px !important; /* Posición de la hamburguesa cerrada (movido más arriba) */ display: block !important; z-index: 100000 !important; /* Pasa por encima del menú lateral blanco para convertirse en la X */ } /* Eliminar el espacio muerto arriba de la X cuando el menú está abierto */ body.wsactive #wsnavtoggle { top: -22px !important; /* Subimos más agresivamente la X para eliminar el espacio blanco */ } /* ========================================== TABLA COMPARATIVA EN MÓVILES ========================================== */ .comp-table .table tbody th, .comp-table .table tbody td { padding: 12px 6px !important; /* Reducimos drásticamente los rellenos horizontales */ } .comp-table .table tbody th { font-size: 0.85rem !important; /* Texto descriptivo más pequeño para que no se asfixie */ line-height: 1.2 !important; } /* Restaurar el comportamiento de tabla y preparar el espacio */ .comp-table .table thead th { display: table-cell !important; /* CRÍTICO: Evita que la tabla se deforme */ position: relative !important; padding-top: 40px !important; /* Espacio reservado arriba para el icono flotante */ padding-bottom: 10px !important; font-size: 0.9rem !important; vertical-align: bottom !important; /* Mantiene los textos "Facturopolis" y "Otros" alineados abajo */ } /* Posicionar los íconos encima del texto de forma absoluta (Ignora el orden del HTML) */ .comp-table .table thead th img { position: absolute !important; top: 5px !important; left: 0 !important; right: 0 !important; margin: 0 auto !important; /* Centrado horizontal perfecto */ width: 25px !important; height: 25px !important; display: block !important; } /* Reducir los íconos de Check y Tacha */ .comp-table .table tbody td img { width: 16px !important; } /* ========================================== SECCIÓN: PERSONALIZA LA EXPERIENCIA ========================================== */ /* Anular el alto forzado de 500px en móviles para que la imagen quepa completa y se autoajuste */ #lnk-2 .img-block img { height: auto !important; width: 100% !important; max-width: 100% !important; max-height: 400px !important; /* Limite de altura por si la imagen es muy cuadrada */ object-fit: contain !important; } /* ========================================== SECCIÓN: PREGUNTAS FRECUENTES ========================================== */ /* Darle más aire al mini cuadro de "¿Tienes dudas?" para separarlo de la sección de abajo (!Empieza Ahora!) */ .more-questions { margin-bottom: 40px !important; } /* ========================================== AJUSTES GLOBALES PARA PÁGINAS SECUNDARIAS ========================================== */ /* El header de PC es flotante, por lo que las páginas secundarias (Nosotros, Facturación, etc.) tienen un padding-top forzado de 180px. En móviles el header también flota, así que bajamos esos 180px a 100px: lo suficiente para esquivar la barra y dejar un respiro elegante. */ #page > section:not(.hero-section):first-of-type { padding-top: 100px !important; } } /* Solo Teléfonos (hasta 767px) */ @media (max-width: 767px) { /* Ajustes extra para teléfonos */ } /* ========================================================================== AJUSTES EXCLUSIVOS PARA ESCRITORIO (PC) - HEADER ========================================================================== */ @media (min-width: 992px) { /* 1. Prohibir estrictamente que los textos salten a una segunda línea y encoger más */ .wsmenu-list > li > a { white-space: nowrap !important; font-size: 14px !important; /* Reducción extra para un look más compacto/alejado */ padding-left: 12px !important; /* Aún menos aire muerto */ padding-right: 12px !important; } /* 2. Mantener el botón de Iniciar Sesión compacto y en una sola línea */ .wsmenu-list .btn, .wsmenu-list li > a.btn { white-space: nowrap !important; padding: 6px 18px !important; /* Más delgado */ font-size: 14px !important; } /* 3. Reducir ligeramente el logo para acompañar la escala compacta de las letras */ .desktoplogo img { max-height: 38px !important; margin-top: 8px !important; /* Lo bajamos ligeramente para centrarlo perfecto */ } /* ========================================================================== AJUSTES EXCLUSIVOS PARA ESCRITORIO (PC) - FOOTER ========================================================================== */ /* 1. Reducir el gigantesco logo del footer para ganar balance visual */ #footer-3 .footer-logo { max-height: 90px !important; /* Ajustado para que resalte más y se asemeje a la presencia del header */ } /* 2. Reducir los títulos de las columnas (Plataforma, Recursos) */ #footer-3 h6 { font-size: 15px !important; margin-bottom: 15px !important; } /* 3. Encoger ligeramente el texto de los enlaces y apretar el interlineado */ #footer-3 .foo-links li p, #footer-3 .foo-links li a { font-size: 14px !important; /* Un look más delicado y compacto */ } #footer-3 .foo-links li { margin-bottom: 8px !important; /* Menos aire entre cada enlace */ } /* 4. Reducir el enorme espacio vacío de arriba del footer */ #footer-3.pt-100 { padding-top: 60px !important; } } /* ========================================================================== PROTECCIÓN DE IMÁGENES (Global) ========================================================================== Evita que los usuarios promedio descarguen o arrastren las imágenes. */ img { pointer-events: none; user-select: none; -webkit-user-drag: none; }