/* ========================================================= SYNERGY ECUADOR CSS GENERAL CORREGIDO ========================================================= */ /* ========================================================= CSS ORIGINAL DE LA PLANTILLA ZOHO ========================================================= */ @media only screen and (min-width: 992px) { .zphero-boxed { width: 95%; padding-top: 0; margin: 0 auto; } .zphero { min-height: 85vh !important; box-shadow: 0 0 20px rgba(0, 0, 0, 0.05); } .zphero h1, .zphero h2, .zphero h3, .zphero h4, .zphero h5, .zphero h6 { line-height: normal; } .zphero h2.zpheading { font-size: 11em; text-shadow: -9px 6px 0 rgba(0, 0, 0, 0.1); } } /* ========================================================= FOOTER SYNERGY ========================================================= */ html body .theme-footer-area, html body .theme-footer-area [data-footer-type="site_footer"], html body .theme-footer-area .footer-container, html body .theme-footer-area .zpsection, html body .theme-footer-area .zpcontainer-fluid, html body .theme-footer-area .zprow, html body .theme-footer-area .zpelem-col, html body .theme-footer-area .zpelem-codesnippet, html body .theme-footer-area .zpsnippet-container { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } html body .theme-footer-area, html body .theme-footer-area [data-footer-type="site_footer"] { background: #0d1722 !important; } html body .theme-footer-area .syn-footer { width: 100% !important; max-width: 100% !important; margin: 0 !important; } /* ========================================================= CERTIFICACIONES DEL FOOTER ========================================================= */ html body .syn-footer-cert img { display: block !important; width: 280px !important; max-width: 100% !important; height: auto !important; filter: none !important; opacity: 1 !important; } /* ========================================================= CONTENIDO DE LAS PÁGINAS A ANCHO COMPLETO ========================================================= */ html body .theme-content-area, html body .theme-content-container, html body .theme-content-area-inner { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } html body #thememaincontent { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } html body #thememaincontent > .zpsection { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } html body #thememaincontent .zpcontainer-fluid, html body #thememaincontent .zpcontainer { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } html body #thememaincontent .zprow, html body #thememaincontent .zprow-container { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } html body #thememaincontent .zpelem-col { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; margin: 0 !important; padding: 0 !important; } html body #thememaincontent .zpelem-codesnippet, html body #thememaincontent .zpsnippet-container { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } /* ========================================================= CONTENIDO SYNERGY ========================================================= */ html body #thememaincontent .synergy-home { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } /* ========================================================= EVITAR SCROLL HORIZONTAL ========================================================= */ html, body { max-width: 100% !important; overflow-x: hidden !important; } /* ========================================================= HEADER SYNERGY TRANSPARENTE Y SUPERPUESTO SOBRE EL HERO ========================================================= */ html body .theme-header { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; margin: 0 !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important; z-index: 9999 !important; overflow: visible !important; } /* ========================================================= HEADER TRANSPARENTE NATIVO DE ZOHO ========================================================= */ html body .theme-header[data-header="zptheme-data-header-transparent"] { background: transparent !important; background-color: transparent !important; background-image: none !important; } /* ========================================================= CONTENEDOR DEL HEADER IMPORTANTE: NO CAMBIAR DISPLAY NATIVO ========================================================= */ html body .theme-header > .zpcontainer { background: transparent !important; background-color: transparent !important; overflow: visible !important; } /* ========================================================= TOP BAR DATOS / REDES SOCIALES ========================================================= */ html body .theme-header-topbar { background: transparent !important; background-color: transparent !important; border-bottom: 1px solid rgba(255,255,255,0.25) !important; min-height: 48px !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* Redes a la derecha */ html body .theme-header-topbar .theme-socialicon-parent { margin-left: auto !important; } /* Iconos blancos */ html body .theme-header-topbar svg { fill: #ffffff !important; color: #ffffff !important; } /* Links/textos del topbar */ html body .theme-header-topbar a, html body .theme-header-topbar span { color: #ffffff !important; } /* ========================================================= ÁREA PRINCIPAL DEL HEADER ========================================================= */ html body .theme-header-main { background: transparent !important; background-color: transparent !important; border-bottom: 1px solid rgba(255,255,255,0.18) !important; overflow: visible !important; } /* ========================================================= BRANDING / LOGO ========================================================= */ html body .theme-header .theme-branding-info { flex-shrink: 0 !important; background: transparent !important; } html body .theme-header .theme-logo-parent { width: 210px !important; max-width: 210px !important; background: transparent !important; } html body .theme-header .theme-logo-parent a { display: block !important; width: 100% !important; } html body .theme-header .theme-logo-parent picture { display: block !important; width: 100% !important; } html body .theme-header .theme-logo-parent img[data-zs-logo] { display: block !important; width: 200px !important; max-width: none !important; height: auto !important; object-fit: contain !important; } /* ========================================================= NAVEGACIÓN ========================================================= */ html body .theme-header .theme-navigation-and-icons, html body .theme-header .theme-menu-area, html body .theme-header .theme-menu { background: transparent !important; background-color: transparent !important; overflow: visible !important; } /* ========================================================= LINKS PRINCIPALES DEL MENÚ ========================================================= */ html body .theme-header .theme-menu > ul > li > a { background: transparent !important; background-color: transparent !important; color: #ffffff !important; border: 1px solid transparent !important; border-radius: 14px !important; box-shadow: none !important; text-decoration: none !important; transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease !important; } /* ========================================================= TEXTO DEL MENÚ ========================================================= */ html body .theme-header .theme-menu > ul > li > a .theme-menu-name { color: #ffffff !important; font-size: 16px !important; font-weight: 400 !important; } /* ========================================================= HOVER DEL MENÚ ========================================================= */ html body .theme-header .theme-menu > ul > li > a:hover { background: transparent !important; border: 1px solid rgba(255,255,255,0.90) !important; border-radius: 14px !important; color: #ffffff !important; text-decoration: none !important; } html body .theme-header .theme-menu > ul > li > a:hover .theme-menu-name { color: #ffffff !important; } /* ========================================================= PÁGINA ACTIVA ========================================================= */ html body .theme-header .theme-menu > ul > li.theme-menu-selected > a { background: transparent !important; border: 1px solid rgba(255,255,255,0.90) !important; border-radius: 14px !important; color: #ffffff !important; box-shadow: none !important; } html body .theme-header .theme-menu > ul > li.theme-menu-selected > a .theme-menu-name { color: #ffffff !important; } /* ========================================================= FLECHAS DEL SUBMENÚ ========================================================= */ html body .theme-header .theme-menu .theme-sub-li-menu { color: #ffffff !important; } /* ========================================================= SUBMENÚ ESTILO ORIGINAL SYNERGY ========================================================= */ html body .theme-header .theme-sub-menu { min-width: 270px !important; padding: 20px 0 !important; background: #101010 !important; border: none !important; border-radius: 6px !important; box-shadow: 0 10px 30px rgba(0,0,0,0.25) !important; z-index: 99999 !important; } /* ========================================================= ITEMS DEL SUBMENÚ ========================================================= */ html body .theme-header .theme-sub-menu li { margin: 0 !important; padding: 0 !important; background: transparent !important; } html body .theme-header .theme-sub-menu li > a { padding: 10px 28px !important; background: transparent !important; border: none !important; text-decoration: none !important; } /* ========================================================= TEXTO DEL SUBMENÚ ========================================================= */ html body .theme-header .theme-sub-menu li > a .theme-menu-name { color: #ffffff !important; font-size: 15px !important; font-weight: 500 !important; line-height: 1.45 !important; } /* ========================================================= HOVER DEL SUBMENÚ ========================================================= */ html body .theme-header .theme-sub-menu li > a:hover { background: rgba(255,255,255,0.06) !important; } html body .theme-header .theme-sub-menu li > a:hover .theme-menu-name { color: #ed1c24 !important; } /* ========================================================= HEROES PERSONALIZADOS SYNERGY ========================================================= */ html body .syn-home-hero, html body .syn-about-hero, html body .syn-services-hero, html body .syn-products-hero, html body .syn-support-hero, html body .syn-blog-hero, html body .syn-contact-hero { margin-top: 0 !important; } /* ========================================================= SEGURIDAD CONTRA RECORTES DEL SUBMENÚ ========================================================= */ html body .theme-header, html body .theme-header > .zpcontainer, html body .theme-header-main, html body .theme-header .theme-navigation-and-icons, html body .theme-header .theme-menu-area, html body .theme-header .theme-menu { overflow: visible !important; } /* ========================================================= RESPONSIVE NO ALTERAR EL MENÚ MÓVIL NATIVO DE ZOHO ========================================================= */ @media only screen and (max-width: 991px) { html body .theme-header .theme-logo-parent { width: 170px !important; max-width: 170px !important; } html body .theme-header .theme-logo-parent img[data-zs-logo] { width: 165px !important; max-width: 165px !important; } } /* ========================================================= CORRECCIÓN FINAL HEADER REAL DE ZOHO 100% TRANSPARENTE ========================================================= */ /* Header real */ html body div.theme-header, html body div.theme-header[data-header], html body div.theme-header[data-header="zptheme-data-header-transparent"], html body div.theme-header[data-banner-base-header="theme-banner-base-header"] { background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; } /* Contenedor directo del header */ html body div.theme-header > div.zpcontainer { background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; } /* Branding */ html body div.theme-header .theme-branding-info, html body div.theme-header .theme-logo-parent { background: transparent !important; background-color: transparent !important; background-image: none !important; } /* Navegación */ html body div.theme-header .theme-navigation-and-icons, html body div.theme-header .theme-menu-area, html body div.theme-header .theme-menu { background: transparent !important; background-color: transparent !important; background-image: none !important; } /* UL principal */ html body div.theme-header .theme-menu > ul { background: transparent !important; background-color: transparent !important; background-image: none !important; } /* LI principales */ html body div.theme-header .theme-menu > ul > li { background: transparent !important; background-color: transparent !important; } /* Links principales */ html body div.theme-header .theme-menu > ul > li > a { background: transparent !important; background-color: transparent !important; } /* ========================================================= IMPORTANTE: NO HACER TRANSPARENTE EL SUBMENÚ ========================================================= */ html body div.theme-header .theme-sub-menu { background: #101010 !important; background-color: #101010 !important; } /* ========================================================= HEADER ENCIMA DEL HERO ========================================================= */ html body div.theme-header { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 9999 !important; } /* ========================================================= EVITAR ESPACIO RESERVADO POR ZOHO ========================================================= */ html body .theme-header-space, html body [data-header-space] { height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; } /* ========================================================= FIX DEFINITIVO HEADER + TOPBAR SOBRE EL HERO Estructura real de Zoho Sites ========================================================= */ @media only screen and (min-width: 992px) { /* ----------------------------------------------------- 1. CONTENEDOR COMPLETO DEL HEADER Este contiene TOPBAR + MENÚ ----------------------------------------------------- */ html body [data-headercontainer="zptheme-data-headercontainer"] { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; z-index: 9999 !important; } /* ----------------------------------------------------- 2. TOPBAR ----------------------------------------------------- */ html body [data-headercontainer="zptheme-data-headercontainer"] .theme-header-topbar { position: relative !important; width: 100% !important; margin: 0 !important; background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; border-bottom: 1px solid rgba(255,255,255,0.25) !important; } /* Contenedor interior del topbar */ html body [data-headercontainer="zptheme-data-headercontainer"] .theme-header-topbar > .zpcontainer { background: transparent !important; background-color: transparent !important; background-image: none !important; } /* ----------------------------------------------------- 3. HEADER / MENÚ ----------------------------------------------------- */ html body [data-headercontainer="zptheme-data-headercontainer"] .theme-header { position: relative !important; top: auto !important; left: auto !important; right: auto !important; width: 100% !important; margin: 0 !important; background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; border: 0 !important; } /* ----------------------------------------------------- 4. CONTENEDOR INTERIOR DEL HEADER ----------------------------------------------------- */ html body [data-headercontainer="zptheme-data-headercontainer"] .theme-header > .zpcontainer { background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; } /* ----------------------------------------------------- 5. BRANDING / LOGO ----------------------------------------------------- */ html body [data-headercontainer="zptheme-data-headercontainer"] .theme-branding-info, html body [data-headercontainer="zptheme-data-headercontainer"] .theme-logo-parent { background: transparent !important; background-color: transparent !important; background-image: none !important; } /* ----------------------------------------------------- 6. NAVEGACIÓN ----------------------------------------------------- */ html body [data-headercontainer="zptheme-data-headercontainer"] .theme-navigation-and-icons, html body [data-headercontainer="zptheme-data-headercontainer"] .theme-menu-area, html body [data-headercontainer="zptheme-data-headercontainer"] .theme-menu { background: transparent !important; background-color: transparent !important; background-image: none !important; } /* ----------------------------------------------------- 7. LISTA PRINCIPAL ----------------------------------------------------- */ html body [data-headercontainer="zptheme-data-headercontainer"] .theme-menu > ul, html body [data-headercontainer="zptheme-data-headercontainer"] .theme-menu > ul > li { background: transparent !important; background-color: transparent !important; background-image: none !important; } /* ----------------------------------------------------- 8. LINKS PRINCIPALES ----------------------------------------------------- */ html body [data-headercontainer="zptheme-data-headercontainer"] .theme-menu > ul > li > a { background: transparent !important; background-color: transparent !important; background-image: none !important; } /* ----------------------------------------------------- 9. SUBMENÚ ESTE SÍ DEBE CONSERVAR FONDO OSCURO ----------------------------------------------------- */ html body [data-headercontainer="zptheme-data-headercontainer"] .theme-menu .theme-sub-menu { background: #101010 !important; background-color: #101010 !important; background-image: none !important; } html body [data-headercontainer="zptheme-data-headercontainer"] .theme-menu .theme-sub-menu li, html body [data-headercontainer="zptheme-data-headercontainer"] .theme-menu .theme-sub-menu li a { background-color: transparent !important; } /* ----------------------------------------------------- 10. COLORES DEL MENÚ ----------------------------------------------------- */ html body [data-headercontainer="zptheme-data-headercontainer"] .theme-menu > ul > li > a, html body [data-headercontainer="zptheme-data-headercontainer"] .theme-menu > ul > li > a .theme-menu-name { color: #ffffff !important; } /* ----------------------------------------------------- 11. ICONOS DEL TOPBAR ----------------------------------------------------- */ html body [data-headercontainer="zptheme-data-headercontainer"] .theme-header-topbar svg { fill: #ffffff !important; color: #ffffff !important; } /* ----------------------------------------------------- 12. EVITAR QUE ZOHO RESERVE ESPACIO ARRIBA ----------------------------------------------------- */ html body .theme-header-space, html body [data-header-space] { display: none !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; } } /* ========================================================= TOPBAR MÁS DELGADO REDES SOCIALES ========================================================= */ @media only screen and (min-width: 992px) { /* Barra superior */ html body [data-headercontainer="zptheme-data-headercontainer"] .theme-header-topbar { height: 38px !important; min-height: 38px !important; padding: 0 !important; margin: 0 !important; display: flex !important; align-items: center !important; } /* Contenedor interno */ html body [data-headercontainer="zptheme-data-headercontainer"] .theme-header-topbar > .zpcontainer { height: 38px !important; min-height: 38px !important; padding-top: 0 !important; padding-bottom: 0 !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; } /* Contenedor de redes */ html body [data-headercontainer="zptheme-data-headercontainer"] .theme-socialicon-parent { height: 38px !important; min-height: 38px !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; } /* Lista de redes */ html body [data-headercontainer="zptheme-data-headercontainer"] .theme-scoialicon-inner-parent { height: 38px !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; } /* Cada icono */ html body [data-headercontainer="zptheme-data-headercontainer"] .theme-socialicon-list { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* Tamaño de los SVG */ html body [data-headercontainer="zptheme-data-headercontainer"] .theme-socialicon-list svg { width: 11px !important; height: 11px !important; } } /* ========================================================= SUBMENÚS - TEXTO COMPLETO EN UNA SOLA LÍNEA ========================================================= */ @media only screen and (min-width: 992px) { /* Ancho automático para los submenús */ .theme-header .theme-menu > ul > li > .theme-sub-menu { width: max-content !important; min-width: 480px !important; max-width: none !important; padding: 22px 0 !important; background: #0b0b0b !important; border-radius: 5px !important; } /* Cada opción */ .theme-header .theme-menu .theme-sub-menu > li { width: 100% !important; min-width: max-content !important; display: block !important; } /* Enlaces */ .theme-header .theme-menu .theme-sub-menu > li > a { display: block !important; width: 100% !important; padding: 10px 32px !important; white-space: nowrap !important; color: #ffffff !important; font-family: "Raleway", Arial, sans-serif !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1.4 !important; text-decoration: none !important; } /* El span interno de Zoho tampoco puede cortar el texto */ .theme-header .theme-menu .theme-sub-menu .theme-menu-content, .theme-header .theme-menu .theme-sub-menu .theme-menu-name { display: inline-block !important; width: auto !important; max-width: none !important; white-space: nowrap !important; word-break: normal !important; overflow-wrap: normal !important; } /* Hover */ .theme-header .theme-menu .theme-sub-menu > li > a:hover { color: #ed1c24 !important; background: transparent !important; } } /* ========================================================= MENÚ RESPONSIVE SYNERGY TABLET / MÓVIL AGREGAR AL FINAL DEL CSS ========================================================= */ @media only screen and (max-width: 991px) { /* ===================================================== 1. HEADER RESPONSIVE Mantener transparente sobre el hero ====================================================== */ html body [data-headercontainer="zptheme-data-headercontainer"] { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; background: transparent !important; background-color: transparent !important; background-image: none !important; z-index: 99999 !important; } html body [data-headercontainer="zptheme-data-headercontainer"] .theme-header { position: relative !important; top: auto !important; left: auto !important; right: auto !important; width: 100% !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; } html body [data-headercontainer="zptheme-data-headercontainer"] .theme-header > .zpcontainer { background: transparent !important; background-color: transparent !important; background-image: none !important; } /* ===================================================== 2. TOPBAR NO ocultamos las redes globalmente. Se conserva la estructura transparente del header. ====================================================== */ html body [data-headercontainer="zptheme-data-headercontainer"] .theme-header-topbar { background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; } /* ===================================================== 3. ÁREA RESPONSIVE DE ZOHO Logo + hamburguesa / X ====================================================== */ html body .theme-header .theme-responsive-menu-area { position: relative !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; width: 100% !important; min-height: 64px !important; padding: 0 18px !important; background: transparent !important; background-color: transparent !important; z-index: 100001 !important; } /* ===================================================== 4. BOTÓN HAMBURGUESA / X ====================================================== */ html body .theme-responsive-menu-container { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-left: auto !important; z-index: 100003 !important; } html body .theme-responsive-menu-container .theme-burger-icon { color: #ffffff !important; } /* ===================================================== 5. CONTENEDOR DEL MENÚ RESPONSIVE CORRECCIÓN DE POSICIÓN Y ANCHO ===================================================== */ html body .theme-header .theme-responsive-menu-area { position: static !important; } /* CONTENEDOR DONDE ZOHO INSERTA EL MENÚ */ html body .theme-header div[data-zp-responsive-container="mymenu1"] { position: absolute !important; top: 64px !important; /* MUY IMPORTANTE: anulamos cualquier posicionamiento heredado */ left: 18px !important; right: 18px !important; width: auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; display: block; background: #0b0b0b !important; background-color: #0b0b0b !important; background-image: none !important; border: none !important; border-radius: 6px !important; box-shadow: 0 12px 30px rgba(0,0,0,.32) !important; overflow: visible !important; transform: none !important; z-index: 100002 !important; } /* ===================================================== MENÚ QUE ZOHO MUEVE DENTRO DEL CONTENEDOR RESPONSIVE ===================================================== */ html body .theme-header div[data-zp-responsive-container="mymenu1"] .theme-menu { position: static !important; top: auto !important; left: auto !important; right: auto !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 5px 0 !important; background: #0b0b0b !important; background-color: #0b0b0b !important; border: none !important; border-radius: 6px !important; box-shadow: none !important; transform: none !important; overflow: visible !important; } /* UL PRINCIPAL */ html body .theme-header div[data-zp-responsive-container="mymenu1"] .theme-menu > ul { position: static !important; display: block !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; background: #0b0b0b !important; list-style: none !important; transform: none !important; } /* CADA OPCIÓN PRINCIPAL */ html body .theme-header div[data-zp-responsive-container="mymenu1"] .theme-menu > ul > li { position: relative !important; display: block !important; float: none !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; transform: none !important; } /* ENLACES */ html body .theme-header div[data-zp-responsive-container="mymenu1"] .theme-menu > ul > li > a { position: relative !important; display: flex !important; align-items: center !important; float: none !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; white-space: normal !important; transform: none !important; } /* TEXTO DEL MENÚ */ html body .theme-header div[data-zp-responsive-container="mymenu1"] .theme-menu-name { display: block !important; width: auto !important; max-width: 100% !important; white-space: normal !important; writing-mode: horizontal-tb !important; text-orientation: mixed !important; word-break: normal !important; overflow-wrap: normal !important; } /* ===================================================== 6. MENÚ INTERNO ====================================================== */ html body div[data-zp-responsive-container="mymenu1"] .theme-menu { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 5px 0 !important; background: #0b0b0b !important; background-color: #0b0b0b !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; } html body div[data-zp-responsive-container="mymenu1"] .theme-menu > ul { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: #0b0b0b !important; list-style: none !important; } /* ===================================================== 7. OPCIONES PRINCIPALES ====================================================== */ html body div[data-zp-responsive-container="mymenu1"] .theme-menu > ul > li { position: relative !important; display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; } html body div[data-zp-responsive-container="mymenu1"] .theme-menu > ul > li > a { position: relative !important; display: flex !important; align-items: center !important; width: 100% !important; min-height: 42px !important; margin: 0 !important; padding: 9px 14px !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid rgba(255,255,255,.055) !important; border-radius: 0 !important; color: #ffffff !important; text-decoration: none !important; box-shadow: none !important; } /* Texto principal */ html body div[data-zp-responsive-container="mymenu1"] .theme-menu > ul > li > a .theme-menu-content { display: block !important; margin: 0 !important; padding: 0 !important; } html body div[data-zp-responsive-container="mymenu1"] .theme-menu > ul > li > a .theme-menu-name { color: #ffffff !important; font-family: "Raleway", Arial, sans-serif !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.35 !important; } /* ===================================================== 8. PÁGINA ACTIVA Borde blanco como el diseño de escritorio ====================================================== */ html body div[data-zp-responsive-container="mymenu1"] .theme-menu > ul > li.theme-menu-selected > a { width: calc(100% - 12px) !important; min-height: 36px !important; margin: 4px 6px !important; padding: 7px 10px !important; border: 1px solid rgba(255,255,255,.88) !important; border-radius: 12px !important; background: transparent !important; } /* ===================================================== 9. SERVICIOS / PRODUCTOS Reservar espacio para nuestra flecha ====================================================== */ html body div[data-zp-responsive-container="mymenu1"] .theme-menu > ul > li > a[data-theme-accessible-submenu] { position: relative !important; padding-right: 45px !important; } /* ===================================================== 10. OCULTAR LAS DOS FLECHAS NATIVAS DE ZOHO Zoho genera: .theme-non-responsive-menu .theme-responsive-menu Ocultamos AMBAS. ====================================================== */ html body div[data-zp-responsive-container="mymenu1"] .theme-menu > ul > li > a[data-theme-accessible-submenu] > span.theme-sub-li-menu { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } /* ===================================================== 11. NUESTRA ÚNICA FLECHA ====================================================== */ html body div[data-zp-responsive-container="mymenu1"] .theme-menu > ul > li > a[data-theme-accessible-submenu]::after { content: "" !important; position: absolute !important; top: 50% !important; right: 17px !important; width: 7px !important; height: 7px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-right: 1px solid rgba(255,255,255,.85) !important; border-bottom: 1px solid rgba(255,255,255,.85) !important; background: transparent !important; transform: translateY(-65%) rotate(45deg) !important; transition: transform .2s ease !important; pointer-events: none !important; } /* ===================================================== 12. FLECHA ARRIBA CUANDO ZOHO ABRE EL SUBMENÚ Zoho cambia uno de sus spans a: .theme-submenu-up-arrow ====================================================== */ html body div[data-zp-responsive-container="mymenu1"] .theme-menu > ul > li > a[data-theme-accessible-submenu]:has( > span.theme-submenu-up-arrow )::after { transform: translateY(-25%) rotate(225deg) !important; } /* ===================================================== 13. SUBMENÚ NO forzamos display:block. Zoho sigue controlando abrir/cerrar. ====================================================== */ html body div[data-zp-responsive-container="mymenu1"] .theme-menu ul.theme-sub-menu { position: static !important; top: auto !important; left: auto !important; right: auto !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; padding: 5px 0 7px !important; background: #151515 !important; background-color: #151515 !important; border: 0 !important; border-top: 1px solid rgba(255,255,255,.05) !important; border-bottom: 1px solid rgba(255,255,255,.05) !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; } /* ===================================================== 14. ITEMS DEL SUBMENÚ ====================================================== */ html body div[data-zp-responsive-container="mymenu1"] .theme-menu ul.theme-sub-menu > li { display: block !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; } html body div[data-zp-responsive-container="mymenu1"] .theme-menu ul.theme-sub-menu > li > a { position: relative !important; display: flex !important; align-items: center !important; width: 100% !important; min-width: 0 !important; min-height: 34px !important; margin: 0 !important; padding: 7px 18px 7px 32px !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; color: #eeeeee !important; text-decoration: none !important; white-space: normal !important; } /* ===================================================== 15. TEXTO DEL SUBMENÚ ====================================================== */ html body div[data-zp-responsive-container="mymenu1"] .theme-menu ul.theme-sub-menu .theme-menu-content, html body div[data-zp-responsive-container="mymenu1"] .theme-menu ul.theme-sub-menu .theme-menu-name { display: block !important; width: auto !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; } html body div[data-zp-responsive-container="mymenu1"] .theme-menu ul.theme-sub-menu .theme-menu-name { color: #eeeeee !important; font-family: "Raleway", Arial, sans-serif !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.4 !important; } /* ===================================================== 16. PUNTO ROJO DE CADA SUBOPCIÓN ====================================================== */ html body div[data-zp-responsive-container="mymenu1"] .theme-menu ul.theme-sub-menu > li > a::before { content: "" !important; position: absolute !important; top: 50% !important; left: 20px !important; width: 3px !important; height: 3px !important; margin: 0 !important; background: #ed1c24 !important; border: 0 !important; border-radius: 50% !important; transform: translateY(-50%) !important; } /* ===================================================== 17. HOVER / TAP DEL SUBMENÚ ====================================================== */ html body div[data-zp-responsive-container="mymenu1"] .theme-menu ul.theme-sub-menu > li > a:hover { background: rgba(255,255,255,.045) !important; } html body div[data-zp-responsive-container="mymenu1"] .theme-menu ul.theme-sub-menu > li > a:hover .theme-menu-name { color: #ed1c24 !important; } /* ===================================================== 18. EVITAR ANCHOS DE ESCRITORIO EN MÓVIL ====================================================== */ html body div[data-zp-responsive-container="mymenu1"] .theme-sub-menu, html body div[data-zp-responsive-container="mymenu1"] .theme-sub-menu > li, html body div[data-zp-responsive-container="mymenu1"] .theme-sub-menu > li > a { max-width: 100% !important; } /* ===================================================== 19. NO RESERVAR ESPACIO ARRIBA ====================================================== */ html body .theme-header-space, html body [data-header-space] { height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; } } /* ========================================================= FIX FINAL - SUBMENÚS RESPONSIVE Servicios / Productos ========================================================= */ @media only screen and (max-width: 991px) { /* ----------------------------------------------------- SUBMENÚ CERRADO Zoho controla el display mediante style="" ----------------------------------------------------- */ html body div[data-zp-responsive-container="mymenu1"] ul.theme-sub-menu { position: static !important; top: auto !important; left: auto !important; right: auto !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; padding: 6px 0 8px !important; background: #151515 !important; background-color: #151515 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; float: none !important; overflow: visible !important; } /* ----------------------------------------------------- CUANDO ZOHO ABRE EL SUBMENÚ Zoho modifica el style inline: display: block Esta regla garantiza que se muestre correctamente. ----------------------------------------------------- */ html body div[data-zp-responsive-container="mymenu1"] ul.theme-sub-menu[style*="display: block"], html body div[data-zp-responsive-container="mymenu1"] ul.theme-sub-menu[style*="display:block"] { display: block !important; visibility: visible !important; opacity: 1 !important; height: auto !important; max-height: none !important; } /* ----------------------------------------------------- ITEMS ----------------------------------------------------- */ html body div[data-zp-responsive-container="mymenu1"] ul.theme-sub-menu > li { position: relative !important; display: block !important; float: none !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; } /* ----------------------------------------------------- ENLACES DEL SUBMENÚ ----------------------------------------------------- */ html body div[data-zp-responsive-container="mymenu1"] ul.theme-sub-menu > li > a { position: relative !important; display: flex !important; align-items: center !important; float: none !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; min-height: 38px !important; margin: 0 !important; padding: 9px 20px 9px 34px !important; background: transparent !important; border: 0 !important; color: #eeeeee !important; white-space: normal !important; text-decoration: none !important; transform: none !important; } /* ----------------------------------------------------- PUNTO ROJO ----------------------------------------------------- */ html body div[data-zp-responsive-container="mymenu1"] ul.theme-sub-menu > li > a::before { content: "" !important; position: absolute !important; left: 21px !important; top: 50% !important; width: 4px !important; height: 4px !important; background: #ed1c24 !important; border-radius: 50% !important; transform: translateY(-50%) !important; } /* ----------------------------------------------------- TEXTO ----------------------------------------------------- */ html body div[data-zp-responsive-container="mymenu1"] ul.theme-sub-menu .theme-menu-content { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } html body div[data-zp-responsive-container="mymenu1"] ul.theme-sub-menu .theme-menu-name { display: block !important; width: 100% !important; color: #eeeeee !important; font-family: "Raleway", Arial, sans-serif !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.45 !important; white-space: normal !important; writing-mode: horizontal-tb !important; word-break: normal !important; overflow-wrap: normal !important; } /* ----------------------------------------------------- HOVER ----------------------------------------------------- */ html body div[data-zp-responsive-container="mymenu1"] ul.theme-sub-menu > li > a:hover { background: rgba(255,255,255,.04) !important; } html body div[data-zp-responsive-container="mymenu1"] ul.theme-sub-menu > li > a:hover .theme-menu-name { color: #ed1c24 !important; } } /* ========================================================= AJUSTES FINALES MENÚ RESPONSIVE ========================================================= */ @media only screen and (max-width: 991px) { /* ----------------------------------------------------- OCULTAR REDES SOLO DENTRO DEL MENÚ RESPONSIVE NO afecta el topbar de escritorio ----------------------------------------------------- */ div[data-zp-responsive-container="mymenu1"] > ul.theme-scoialicon-inner-parent, div[data-zp-responsive-container="mymenu1"] ul.theme-scoialicon-inner-parent { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } /* ----------------------------------------------------- AL ABRIR EL MENÚ NO MARCAR NINGUNA OPCIÓN ----------------------------------------------------- */ div[data-zp-responsive-container="mymenu1"] .theme-menu > ul > li.theme-menu-selected > a { width: 100% !important; margin: 0 !important; padding: 9px 14px !important; border: 0 !important; border-bottom: 1px solid rgba(255,255,255,.055) !important; border-radius: 0 !important; background: transparent !important; } /* ----------------------------------------------------- SERVICIOS / PRODUCTOS ----------------------------------------------------- */ div[data-zp-responsive-container="mymenu1"] .theme-menu > ul > li > a[data-theme-accessible-submenu] { cursor: pointer !important; position: relative !important; padding-right: 45px !important; } /* Ocultar las 2 flechas nativas de Zoho */ div[data-zp-responsive-container="mymenu1"] .theme-menu > ul > li > a[data-theme-accessible-submenu] > span.theme-sub-li-menu { display: none !important; } /* Una sola flecha nuestra */ div[data-zp-responsive-container="mymenu1"] .theme-menu > ul > li > a[data-theme-accessible-submenu]::after { content: ""; position: absolute; top: 50%; right: 17px; width: 7px; height: 7px; border-right: 1px solid #fff; border-bottom: 1px solid #fff; transform: translateY(-65%) rotate(45deg); transition: transform .2s ease; pointer-events: none; } div[data-zp-responsive-container="mymenu1"] .theme-menu > ul > li > a[data-theme-accessible-submenu][aria-expanded="true"]::after { transform: translateY(-25%) rotate(225deg); } /* ----------------------------------------------------- SUBMENÚ ----------------------------------------------------- */ div[data-zp-responsive-container="mymenu1"] ul.theme-sub-menu { position: static !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; padding: 5px 0 7px !important; background: #151515 !important; border: 0 !important; box-shadow: none !important; transform: none !important; } div[data-zp-responsive-container="mymenu1"] ul.theme-sub-menu > li > a { position: relative !important; display: block !important; width: 100% !important; padding: 9px 20px 9px 34px !important; color: #eeeeee !important; white-space: normal !important; } /* Punto rojo */ div[data-zp-responsive-container="mymenu1"] ul.theme-sub-menu > li > a::before { content: ""; position: absolute; left: 21px; top: 50%; width: 4px; height: 4px; background: #ed1c24; border-radius: 50%; transform: translateY(-50%); } } /* ========================================================= FIX - OCULTAR COMPLETAMENTE MENÚ RESPONSIVE CERRADO Mantiene intacto desktop ========================================================= */ @media only screen and (max-width: 991px) { /* ===================================================== 1. CONTENEDOR RESPONSIVE Cuando está cerrado NO debe ocupar espacio visual ===================================================== */ div[data-zp-responsive-container="mymenu1"] { background: transparent !important; border: 0 !important; box-shadow: none !important; } /* ===================================================== 2. MENÚ CERRADO Zoho deja .theme-menu en el DOM aunque esté cerrado. Lo hacemos completamente invisible. ===================================================== */ div[data-zp-responsive-container="mymenu1"] > .theme-menu:not(.theme-toggle-animate) { display: none !important; width: 0 !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: hidden !important; opacity: 0 !important; visibility: hidden !important; } /* ===================================================== 3. MENÚ ABIERTO Solo aquí aparece el panel negro ===================================================== */ div[data-zp-responsive-container="mymenu1"] > .theme-menu.theme-toggle-animate { display: block !important; width: 100% !important; height: auto !important; max-height: none !important; margin: 0 !important; background: #080808 !important; opacity: 1 !important; visibility: visible !important; overflow: visible !important; } /* ===================================================== 4. EL UL PRINCIPAL TAMPOCO DEBE GENERAR BARRAS CUANDO EL MENÚ ESTÁ CERRADO ===================================================== */ div[data-zp-responsive-container="mymenu1"] > .theme-menu:not(.theme-toggle-animate) > ul[data-zs-menu-container] { display: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; } /* ===================================================== 5. REDES SOCIALES SOLO RESPONSIVE ===================================================== */ div[data-zp-responsive-container="mymenu1"] ul.theme-scoialicon-inner-parent { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } } /* ========================================================= FIX REAL SUBMENUS RESPONSIVE - ZOHO SITES ========================================================= */ @media only screen and (max-width: 991px) { /* ===================================================== 1. QUITAR SELECCION VISUAL POR DEFECTO Zoho coloca theme-menu-selected según la página actual, pero en móvil no queremos mostrar ese borde. ===================================================== */ html body div[data-zp-responsive-container="mymenu1"] .theme-menu > ul > li.theme-menu-selected > a { width: 100% !important; margin: 0 !important; padding: 9px 14px !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid rgba(255,255,255,.055) !important; border-radius: 0 !important; box-shadow: none !important; outline: none !important; } /* ===================================================== 2. PADRES CON SUBMENU Servicios / Productos ===================================================== */ html body div[data-zp-responsive-container="mymenu1"] .theme-menu > ul > li > a[data-theme-accessible-submenu] { position: relative !important; display: flex !important; align-items: center !important; width: 100% !important; padding-right: 45px !important; cursor: pointer !important; background: transparent !important; } /* ===================================================== 3. OCULTAR FLECHAS DUPLICADAS DE ZOHO ===================================================== */ html body div[data-zp-responsive-container="mymenu1"] .theme-menu > ul > li > a[data-theme-accessible-submenu] > .theme-non-responsive-menu { display: none !important; } /* ===================================================== 4. DEJAR SOLO LA FLECHA RESPONSIVE DE ZOHO ===================================================== */ html body div[data-zp-responsive-container="mymenu1"] .theme-menu > ul > li > a[data-theme-accessible-submenu] > .theme-responsive-menu { display: block !important; position: absolute !important; right: 15px !important; top: 50% !important; transform: translateY(-50%) !important; margin: 0 !important; } /* ===================================================== 5. SUBMENU IMPORTANTE: NO ponemos display:none !important porque Zoho controla display:none/display:block directamente en style="" ===================================================== */ html body div[data-zp-responsive-container="mymenu1"] ul.theme-sub-menu { position: static !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; padding: 7px 0 !important; background: #151515 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; opacity: 1 !important; visibility: visible !important; } /* ===================================================== 6. CUANDO ZOHO LO ABRE ===================================================== */ html body div[data-zp-responsive-container="mymenu1"] ul.theme-sub-menu[style*="display: block"], html body div[data-zp-responsive-container="mymenu1"] ul.theme-sub-menu[style*="display:block"] { display: block !important; height: auto !important; max-height: none !important; opacity: 1 !important; visibility: visible !important; } /* ===================================================== 7. OPCIONES DEL SUBMENU ===================================================== */ html body div[data-zp-responsive-container="mymenu1"] ul.theme-sub-menu > li { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; } html body div[data-zp-responsive-container="mymenu1"] ul.theme-sub-menu > li > a { position: relative !important; display: block !important; width: 100% !important; margin: 0 !important; padding: 10px 20px 10px 34px !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; color: #eeeeee !important; font-size: 12px !important; line-height: 1.4 !important; white-space: normal !important; box-shadow: none !important; } /* ===================================================== 8. PUNTO ROJO ===================================================== */ html body div[data-zp-responsive-container="mymenu1"] ul.theme-sub-menu > li > a::before { content: "" !important; position: absolute !important; left: 21px !important; top: 50% !important; width: 4px !important; height: 4px !important; background: #ed1c24 !important; border-radius: 50% !important; transform: translateY(-50%) !important; } /* ===================================================== 9. REDES SOCIALES OCULTAS EN RESPONSIVE ===================================================== */ html body div[data-zp-responsive-container="mymenu1"] ul.theme-scoialicon-inner-parent { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } } /* ========================================================= COOKIE BANNER - SYNERGY DISEÑO TIPO POLÍTICA DE PRIVACIDAD ========================================================= */ /* CONTENEDOR GENERAL */ #zcb-banner { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: #ffffff !important; color: #111111 !important; border: none !important; border-top: 1px solid #e5e5e5 !important; box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08) !important; font-family: Arial, Helvetica, sans-serif !important; z-index: 99999 !important; } /* ========================================================= TÍTULO ========================================================= */ #zcb-banner .syn-cookie-title { width: auto !important; max-width: none !important; margin-left: 56px !important; margin-right: 56px !important; padding: 20px 0 17px; box-sizing: border-box; font-family: Arial, Helvetica, sans-serif !important; font-size: 18px !important; font-weight: 400 !important; line-height: 1.4 !important; color: #222222 !important; border-bottom: 1px solid #e5e5e5; } /* ========================================================= FILA PRINCIPAL ========================================================= */ #zcb-info.zcb-message-bar { width: auto !important; max-width: none !important; margin-left: 56px !important; margin-right: 56px !important; padding: 16px 0 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 40px !important; box-sizing: border-box !important; background: transparent !important; } /* ========================================================= MENSAJE ========================================================= */ #zcb-banner .zcb-msg { display: block !important; flex: 1 1 auto !important; width: auto !important; max-width: 760px !important; margin: 0 !important; padding: 0 !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.55 !important; color: #111111 !important; } /* ENLACE COOKIE POLICY */ #zcb-banner .zcb-msg .zcb-links { color: #111111 !important; text-decoration: underline !important; font-weight: 400 !important; } #zcb-banner .zcb-msg .zcb-links:hover { color: #ed2121 !important; } /* ========================================================= CONTENEDOR DE BOTONES ========================================================= */ #zcb-banner .zcb-btn { flex: 0 0 auto !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 10px !important; margin: 0 !important; padding: 0 !important; } /* ========================================================= BOTONES ========================================================= */ #zcb-banner .zcb-btn button, #zcb-banner #zc-decline, #zcb-banner #zc-manage { display: flex !important; align-items: center !important; justify-content: center !important; width: 164px !important; min-width: 164px !important; height: 48px !important; margin: 0 !important; padding: 0 20px !important; box-sizing: border-box !important; border: none !important; border-radius: 5px !important; background: #d82e31 !important; color: #ffffff !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: normal !important; text-align: center !important; box-shadow: none !important; outline: none !important; cursor: pointer !important; transition: background-color .2s ease, transform .2s ease !important; } /* HOVER */ #zcb-banner .zcb-btn button:hover, #zcb-banner #zc-decline:hover, #zcb-banner #zc-manage:hover { background: #ed2121 !important; color: #ffffff !important; } /* ========================================================= FILA INFERIOR ========================================================= */ #zcb-banner .syn-cookie-footer { width: 100%; border-top: 1px solid #e5e5e5; background: #ffffff; } #zcb-banner .syn-cookie-footer-inner { width: auto !important; max-width: none !important; margin-left: 56px !important; margin-right: 56px !important; padding: 14px 0; box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.4; color: #777777; } #zcb-banner .syn-cookie-footer a { color: #777777 !important; text-decoration: underline !important; transition: color .2s ease; } #zcb-banner .syn-cookie-footer a:hover { color: #ed2121 !important; } #zcb-banner .syn-cookie-separator { display: inline-block; margin: 0 9px; color: #777777; } /* ========================================================= ELIMINAR ESTILOS OSCUROS DE ZOHO ========================================================= */ #zcb-banner.zpdark-section, #zcb-banner.zpdark-section-bg, #zcb-banner .zpdark-section, #zcb-banner .zpdark-section-bg { background: #ffffff !important; color: #111111 !important; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 900px) { #zcb-banner .syn-cookie-title { width: auto !important; max-width: none !important; margin-left: 20px !important; margin-right: 20px !important; } #zcb-info.zcb-message-bar { width: auto !important; max-width: none !important; margin-left: 20px !important; margin-right: 20px !important; flex-direction: column !important; align-items: stretch !important; gap: 18px !important; } #zcb-banner .zcb-msg { max-width: none !important; } #zcb-banner .zcb-btn { justify-content: flex-start !important; } #zcb-banner .syn-cookie-footer-inner { width: auto !important; max-width: none !important; margin-left: 20px !important; margin-right: 20px !important; } } @media (max-width: 520px) { #zcb-banner .syn-cookie-title { width: auto !important; margin-left: 15px !important; margin-right: 15px !important; padding-top: 15px; padding-bottom: 13px; font-size: 16px !important; } #zcb-info.zcb-message-bar { width: auto !important; margin-left: 15px !important; margin-right: 15px !important; padding: 14px 0 !important; } #zcb-banner .zcb-msg { font-size: 13px !important; } #zcb-banner .zcb-btn { width: 100% !important; display: flex !important; gap: 8px !important; } #zcb-banner #zc-decline, #zcb-banner #zc-manage { flex: 1 1 50% !important; width: auto !important; min-width: 0 !important; height: 44px !important; padding: 0 12px !important; font-size: 13px !important; line-height: normal !important; } #zcb-banner .syn-cookie-footer-inner { width: auto !important; margin-left: 15px !important; margin-right: 15px !important; font-size: 12px; } } /* ========================================================= CORRECCIÓN CENTRADO DE BOTONES - COOKIE BANNER Mantiene tamaño original y centra el texto ========================================================= */ #zcb-banner #zc-decline, #zcb-banner #zc-manage { display: flex !important; align-items: center !important; justify-content: center !important; width: 164px !important; min-width: 164px !important; height: 48px !important; padding: 0 20px !important; margin: 0 !important; box-sizing: border-box !important; background: #d82e31 !important; color: #ffffff !important; border: none !important; border-radius: 5px !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 14px !important; font-weight: 400 !important; /* IMPORTANTE: evita que Zoho desplace el texto */ line-height: normal !important; text-align: center !important; box-shadow: none !important; outline: none !important; cursor: pointer !important; } /* ========================================================= FIX FINAL ESTRUCTURA COOKIE BANNER FORZAR LAS 3 FILAS VERTICALMENTE ========================================================= */ #zcb-banner { display: block !important; flex-direction: unset !important; } /* ========================================================= FILA 1 - TÍTULO ========================================================= */ #zcb-banner .syn-cookie-title { display: block !important; width: auto !important; max-width: none !important; margin: 0 56px !important; padding: 20px 0 17px !important; box-sizing: border-box !important; float: none !important; position: relative !important; border-bottom: 1px solid #e5e5e5 !important; } /* ========================================================= FILA 2 - MENSAJE + BOTONES ========================================================= */ #zcb-banner #zcb-info.zcb-message-bar { display: flex !important; width: auto !important; max-width: none !important; margin: 0 56px !important; padding: 16px 0 !important; box-sizing: border-box !important; float: none !important; position: relative !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 40px !important; } /* TEXTO */ #zcb-banner #zcb-info .zcb-msg { display: block !important; flex: 1 1 auto !important; width: auto !important; max-width: 760px !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; float: none !important; } /* BOTONES */ #zcb-banner #zcb-info .zcb-btn { display: flex !important; flex: 0 0 auto !important; width: auto !important; margin: 0 !important; padding: 0 !important; align-items: center !important; justify-content: flex-end !important; gap: 10px !important; float: none !important; } /* ========================================================= FILA 3 - ENLACES ========================================================= */ #zcb-banner .syn-cookie-footer { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; float: none !important; position: relative !important; clear: both !important; border-top: 1px solid #e5e5e5 !important; } #zcb-banner .syn-cookie-footer-inner { display: block !important; width: auto !important; max-width: none !important; margin: 0 56px !important; padding: 14px 0 !important; box-sizing: border-box !important; float: none !important; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 900px) { #zcb-banner .syn-cookie-title, #zcb-banner #zcb-info.zcb-message-bar, #zcb-banner .syn-cookie-footer-inner { margin-left: 20px !important; margin-right: 20px !important; } #zcb-banner #zcb-info.zcb-message-bar { flex-direction: column !important; align-items: stretch !important; gap: 18px !important; } #zcb-banner #zcb-info .zcb-msg { width: 100% !important; max-width: none !important; } #zcb-banner #zcb-info .zcb-btn { justify-content: flex-start !important; } } /* ========================================================= MÓVIL ========================================================= */ @media (max-width: 520px) { #zcb-banner .syn-cookie-title, #zcb-banner #zcb-info.zcb-message-bar, #zcb-banner .syn-cookie-footer-inner { margin-left: 15px !important; margin-right: 15px !important; } #zcb-banner #zcb-info .zcb-btn { width: 100% !important; } #zcb-banner #zc-decline, #zcb-banner #zc-manage { flex: 1 1 50% !important; width: auto !important; min-width: 0 !important; } } /* ========================================================= COOKIE BANNER - AJUSTE FINAL ESTILO VIRTUALIKA ========================================================= */ #zcb-banner { display: block !important; width: 100% !important; background: #ffffff !important; color: #222222 !important; font-family: Arial, Helvetica, sans-serif !important; } /* ========================================================= CONTENEDOR GENERAL MISMO ANCHO VISUAL QUE VIRTUALIKA ========================================================= */ #zcb-banner .syn-cookie-title, #zcb-banner #zcb-info.zcb-message-bar, #zcb-banner .syn-cookie-footer-inner { width: calc(100% - 40px) !important; max-width: 1160px !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } /* ========================================================= TÍTULO ========================================================= */ #zcb-banner .syn-cookie-title { display: block !important; padding: 18px 0 !important; border-bottom: 1px solid #e5e5e5 !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1.4 !important; color: #222222 !important; text-align: left !important; } /* ========================================================= FILA PRINCIPAL ========================================================= */ #zcb-banner #zcb-info.zcb-message-bar { display: flex !important; padding: 16px 0 !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 35px !important; background: transparent !important; } /* ========================================================= MENSAJE ========================================================= */ #zcb-banner #zcb-info .zcb-msg { display: block !important; flex: 1 1 auto !important; width: auto !important; max-width: 760px !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.55 !important; color: #222222 !important; text-align: left !important; } /* LINKS DEL MENSAJE */ #zcb-banner #zcb-info .zcb-msg a, #zcb-banner .zcb-links { font-family: Arial, Helvetica, sans-serif !important; font-size: inherit !important; font-weight: 400 !important; color: #555555 !important; text-decoration: underline !important; } /* ========================================================= CONTENEDOR BOTONES ========================================================= */ #zcb-banner #zcb-info .zcb-btn { display: flex !important; flex: 0 0 auto !important; width: auto !important; margin: 0 !important; padding: 0 !important; align-items: center !important; justify-content: flex-end !important; gap: 10px !important; } /* ========================================================= BOTONES ========================================================= */ #zcb-banner #zc-decline, #zcb-banner #zc-manage { display: flex !important; align-items: center !important; justify-content: center !important; flex: none !important; width: 164px !important; min-width: 164px !important; height: 47px !important; margin: 0 !important; padding: 0 15px !important; box-sizing: border-box !important; border: none !important; border-radius: 5px !important; background: #d82e31 !important; color: #ffffff !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1 !important; text-align: center !important; box-shadow: none !important; } /* ========================================================= FOOTER ========================================================= */ #zcb-banner .syn-cookie-footer { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border-top: 1px solid #e5e5e5 !important; background: #ffffff !important; } #zcb-banner .syn-cookie-footer-inner { display: flex !important; padding: 13px 0 !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.4 !important; text-align: left !important; } #zcb-banner .syn-cookie-footer-inner a { color: #777777 !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 12px !important; font-weight: 400 !important; text-decoration: underline !important; } #zcb-banner .syn-cookie-separator { color: #777777 !important; font-size: 12px !important; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 900px) { #zcb-banner .syn-cookie-title, #zcb-banner #zcb-info.zcb-message-bar, #zcb-banner .syn-cookie-footer-inner { width: calc(100% - 40px) !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important; } #zcb-banner #zcb-info.zcb-message-bar { flex-direction: column !important; align-items: stretch !important; gap: 18px !important; } #zcb-banner #zcb-info .zcb-msg { width: 100% !important; max-width: none !important; } #zcb-banner #zcb-info .zcb-btn { justify-content: flex-start !important; } } /* ========================================================= MÓVIL ========================================================= */ @media (max-width: 520px) { #zcb-banner .syn-cookie-title, #zcb-banner #zcb-info.zcb-message-bar, #zcb-banner .syn-cookie-footer-inner { width: calc(100% - 30px) !important; } #zcb-banner .syn-cookie-title { padding: 15px 0 !important; font-size: 15px !important; } #zcb-banner #zcb-info.zcb-message-bar { padding: 14px 0 !important; } #zcb-banner #zcb-info .zcb-msg { font-size: 12px !important; } #zcb-banner #zcb-info .zcb-btn { width: 100% !important; gap: 8px !important; } #zcb-banner #zc-decline, #zcb-banner #zc-manage { flex: 1 1 50% !important; width: auto !important; min-width: 0 !important; height: 44px !important; font-size: 13px !important; } #zcb-banner .syn-cookie-footer-inner { flex-wrap: wrap !important; font-size: 11px !important; } #zcb-banner .syn-cookie-footer-inner a { font-size: 11px !important; } } /* ========================================================= AJUSTE FINAL DE ESCALA - IGUALAR VIRTUALIKA ========================================================= */ /* TÍTULO */ #zcb-banner .syn-cookie-title { font-size: 14px !important; font-weight: 400 !important; line-height: 20px !important; padding-top: 16px !important; padding-bottom: 16px !important; } /* TEXTO PRINCIPAL */ #zcb-banner #zcb-info .zcb-msg { font-size: 11px !important; font-weight: 400 !important; line-height: 17px !important; } /* LINK POLÍTICA DE COOKIES */ #zcb-banner #zcb-info .zcb-msg a, #zcb-banner .zcb-links { font-size: 11px !important; line-height: 17px !important; } /* BOTONES */ #zcb-banner #zc-decline, #zcb-banner #zc-manage { width: 164px !important; min-width: 164px !important; height: 47px !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1 !important; padding: 0 15px !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* ENLACES INFERIORES */ #zcb-banner .syn-cookie-footer-inner, #zcb-banner .syn-cookie-footer-inner a, #zcb-banner .syn-cookie-separator { font-size: 11px !important; font-weight: 400 !important; line-height: 16px !important; } /* Cuando nuestro JS cierre el banner, no debe quedar ningún espacio residual */ #zcb-banner[aria-hidden="true"] { display: none !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; overflow: hidden !important; } /* ========================================================= BANNER YA PROCESADO POR ZOHO ========================================================= */ #zcb-banner[style*="display: none"] { display: none !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; } #zcb-banner[style*="display: none"] .syn-cookie-title, #zcb-banner[style*="display: none"] .syn-cookie-footer, #zcb-banner[style*="display: none"] #zcb-info { display: none !important; } /* ========================================================= OCULTAR PERSONALIZACIÓN CUANDO ZOHO CIERRA EL BANNER ========================================================= */ /* Cuando Zoho oculta su contenido de consentimiento, también ocultamos nuestros elementos personalizados. */ #zcb-banner:has(#zcb-info[style*="display: none"]) .syn-cookie-title, #zcb-banner:has(#zcb-info[style*="display: none"]) .syn-cookie-footer { display: none !important; } /* Si Zoho oculta directamente todo el banner */ #zcb-banner[style*="display: none"] { display: none !important; } /* Si nuestro JS lo marca como cerrado */ #zcb-banner[aria-hidden="true"] { display: none !important; } /* ========================================================= COOKIE BANNER SYNERGY ESTILO SOBRE EL CONTENEDOR NATIVO DE ZOHO ========================================================= */ #zcb-banner { background: #ffffff !important; color: #222222 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; } /* ========================================================= TÍTULO ========================================================= */ #zcb-banner .syn-cookie-title { width: calc(100% - 80px) !important; max-width: 1180px !important; margin: 0 auto !important; padding: 20px 0 18px !important; font-family: Arial, sans-serif !important; font-size: 18px !important; line-height: 1.3 !important; font-weight: 400 !important; color: #222222 !important; border-bottom: 1px solid #e3e3e3 !important; } /* ========================================================= FILA CENTRAL TEXTO + BOTONES ========================================================= */ #zcb-info.zcb-message-bar { width: calc(100% - 80px) !important; max-width: 1180px !important; margin: 0 auto !important; padding: 16px 0 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 35px !important; background: #ffffff !important; color: #222222 !important; } /* ========================================================= TEXTO ========================================================= */ #zcb-info .zcb-msg { flex: 1 1 auto !important; margin: 0 !important; padding: 0 !important; font-family: Arial, sans-serif !important; font-size: 13px !important; line-height: 1.55 !important; font-weight: 400 !important; color: #222222 !important; } /* LINKS DEL TEXTO */ #zcb-info .zcb-msg a, #zcb-info .zcb-msg .zcb-links { color: #222222 !important; text-decoration: underline !important; } /* ========================================================= CONTENEDOR BOTONES ========================================================= */ #zcb-info .zcb-btn { flex: 0 0 auto !important; display: flex !important; align-items: center !important; gap: 12px !important; margin: 0 !important; padding: 0 !important; } /* ========================================================= BOTONES SOLO ESTILO - NO TOCAMOS FUNCIONALIDAD ========================================================= */ #zcb-info #zc-decline, #zcb-info #zc-manage { width: 164px !important; min-width: 164px !important; height: 47px !important; margin: 0 !important; padding: 0 20px !important; border: none !important; border-radius: 6px !important; background: #d92d31 !important; color: #ffffff !important; font-family: Arial, sans-serif !important; font-size: 15px !important; font-weight: 400 !important; cursor: pointer !important; } /* ========================================================= FOOTER ========================================================= */ #zcb-banner .syn-cookie-footer { width: 100% !important; border-top: 1px solid #e3e3e3 !important; background: #ffffff !important; } #zcb-banner .syn-cookie-footer-inner { width: calc(100% - 80px) !important; max-width: 1180px !important; margin: 0 auto !important; padding: 13px 0 16px !important; display: flex !important; align-items: center !important; gap: 12px !important; font-family: Arial, sans-serif !important; font-size: 13px !important; line-height: 1.4 !important; } #zcb-banner .syn-cookie-footer-inner a { color: #777777 !important; text-decoration: underline !important; } #zcb-banner .syn-cookie-separator { color: #777777 !important; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 900px) { #zcb-banner .syn-cookie-title, #zcb-info.zcb-message-bar, #zcb-banner .syn-cookie-footer-inner { width: calc(100% - 40px) !important; } #zcb-info.zcb-message-bar { flex-direction: column !important; align-items: stretch !important; gap: 15px !important; } #zcb-info .zcb-btn { width: 100% !important; } #zcb-info #zc-decline, #zcb-info #zc-manage { flex: 1 1 50% !important; width: auto !important; min-width: 0 !important; } #zcb-banner .syn-cookie-footer-inner { flex-wrap: wrap !important; } } /* ========================================================= TOP BAR - SEPARACIÓN EMAIL Y TELÉFONO ========================================================= */ .theme-topbar-contact-info ul { display: flex !important; align-items: center !important; } /* Cada dato */ .theme-topbar-contact-info .theme-topbar-info { display: flex !important; align-items: center !important; margin: 0 !important; } /* Espacio interno de cada enlace */ .theme-topbar-contact-info .theme-topbar-info > a { display: flex !important; align-items: center !important; gap: 10px !important; padding: 0 28px !important; } /* Línea divisoria SOLO entre correo y teléfono */ .theme-topbar-contact-info .theme-topbar-info + .theme-topbar-info { border-left: 1px solid rgba(255,255,255,0.35) !important; } /* ========================================================= TOPBAR - SEPARADOR ENTRE TELÉFONO Y REDES SOCIALES ========================================================= */ .theme-header-topbar .theme-socialicon-parent { position: relative !important; margin-left: 22px !important; padding-left: 0 !important; } /* Línea divisoria */ .theme-header-topbar .theme-socialicon-parent::before { content: "" !important; position: absolute !important; left: 0 !important; top: 50% !important; width: 1px !important; height: 30px !important; background: rgba(255, 255, 255, 0.35) !important; transform: translateY(-50%) !important; } /* Espacio REAL entre la línea y LinkedIn */ .theme-header-topbar .theme-socialicon-parent .theme-scoialicon-inner-parent { margin-left: 28px !important; padding-left: 0 !important; } /* ========================================================= OCULTAR MARCA ZOHO SITES ========================================================= */ a[id^="zspow-"] { display: none !important; } /* ========================================================= OCULTAR BRANDING ZOHO SITES ========================================================= */ a[id^="zspow-"], #zcb-banner, #zcb-info, .zcb-bar, .zcb-message-bar { display: none !important; } #zcb-banner { height: 0 !important; min-height: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; }