/* Encabezado, migas y pie ÚNICOS de advsysa.com (revisión de advsysa.com, paso 14: #9 #11 #47 #48 y las partes de encabezado y pie de #54 #82 #84). paso14-poner.mjs pone el menú entre y , las migas entre y y el pie entre y , y enlaza esta hoja UNA vez, al final del de cada página pública. Un cambio acá se ve en todo el sitio. Cada página trae sus propias reglas sueltas para «nav», «footer», «ul», «li», «a», «h2», «p», «img»…, y diez páginas cargan styles.css, que pinta el texto del pie con !important. Por eso TODO va con «html .adv-…» (gana por peso sin importar cuál hoja se carga primero) y con !important solo donde la regla de la página lo trae. Las clases propias son adv-cab*, adv-migas* y adv-pie*. Las de contacto-advsysa (la franja de arriba, la barra del teléfono y el renglón «Soporte 24/7» del menú plegado) las dibuja y las borra contacto-advsysa.js: acá solo se les da aspecto y nunca se escriben en el HTML. El menú sigue el mismo plegado que dejó el paso 4: por debajo de 1300 px se pliega en «Menú» (panel de 360 px entre 900 y 1300 px, ancho completo hasta 900 px) y en el teléfono es UNA fila de 64 px: logo, «EN» y «Menú» (#66). */ html{scroll-padding-top:84px} .adv-cab,.adv-migas,.adv-pie{--adv-fuente:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif} /* ── Encabezado ─────────────────────────────────────────────────────────────────────────────────── */ /* Azul del sitio (#0d2137); el borde de abajo es sombra para que la fila de 64 px del teléfono mida 64. */ html .adv-cab{position:sticky;top:0;z-index:1000;display:block;box-sizing:border-box;width:100%;height:auto; min-height:0!important;margin:0;padding:0!important;border:0;background:#0d2137;box-shadow:0 1px 0 rgba(255,255,255,.14); color:#fff;font:500 15px/1.3 var(--adv-fuente);letter-spacing:0;text-align:left;text-transform:none} /* flex-wrap: por si en algún ancho justo el menú no cupiera (medido: a 1300 px sobran ~60 px), baja a una segunda línea en vez de sacar una barra de desplazamiento horizontal. Con el menú plegado la lista no ocupa lugar en la fila. */ html .adv-cab .adv-cab-fila{position:static;display:flex;flex-wrap:wrap;align-items:center;gap:0 16px;box-sizing:border-box; width:100%;max-width:1280px;min-height:76px;margin:0 auto;padding:8px 32px} /* El logo oficial, sin redibujar: la legibilidad sale del tamaño (54 px de alto) y del fondo azul oscuro. */ /* «order» explícito en los cuatro hijos de la fila (logo 0, EN 1, Menú 2, lista 3): el orden que se ve es el del HTML y del teclado. Sin esto, el «.lang-btn{order:2}» de las páginas copiadas de /cctv/ ponía «EN» después del menú. */ html .adv-cab .adv-cab-logo{order:0;display:flex;flex:0 0 auto;align-items:center;min-height:44px;margin:0 auto 0 0;padding:0; border:0;border-radius:6px;background:none;color:#fff;text-decoration:none} html .adv-cab .adv-cab-logo img{display:block;width:auto;max-width:none;height:54px;margin:0;padding:0;border:0; background:none;object-fit:contain} /* «EN»: lo trae cada página que tiene inglés (#langBtn o .lang-btn, el paso 21 lo deja donde corresponde). */ html .adv-cab :is([id="langBtn"],.lang-btn){order:1;position:static;display:inline-flex;align-items:center;justify-content:center; flex:0 0 auto;box-sizing:border-box;min-width:44px;min-height:44px;margin:0;padding:0 12px;border:1.5px solid rgba(255,255,255,.6); border-radius:8px;background:transparent;color:#fff;font:700 14px/1 var(--adv-fuente);letter-spacing:.02em; text-decoration:none;text-transform:none;cursor:pointer;transform:none;opacity:1} html .adv-cab :is([id="langBtn"],.lang-btn):hover{background:rgba(255,255,255,.12);color:#fff} /* Botón «Menú»: solo se ve donde el menú está plegado (abajo, por debajo de 1300 px). */ html .adv-cab .atg-menu-toggle{display:none;flex:0 0 auto;align-items:center;justify-content:center;gap:8px; box-sizing:border-box;min-width:76px;min-height:44px;margin:0;padding:0 14px;border:0;border-radius:8px; background:#fff;color:#00566b;font:700 15px/1 var(--adv-fuente);letter-spacing:0;text-transform:none;cursor:pointer;order:2} html .adv-cab .atg-menu-toggle svg{display:block;width:20px;height:20px;flex:none} html .adv-cab .atg-menu-toggle[aria-expanded="true"]{background:#dff0f5} /* Menú en una fila (1300 px o más): pocos destinos, el botón de cotizar al final. */ html .adv-cab .adv-cab-lista{order:3;position:static;display:flex;flex:0 0 auto;align-items:center;gap:4px;box-sizing:border-box; width:auto;margin:0;padding:0;list-style:none;background:none;box-shadow:none;transform:none;overflow:visible} html .adv-cab .adv-cab-lista li{margin:0;padding:0;list-style:none;font:inherit;color:inherit} html .adv-cab .adv-cab-lista a{display:inline-flex;align-items:center;box-sizing:border-box;min-height:44px;margin:0; padding:0 14px;border:0;border-bottom:3px solid transparent;border-radius:6px 6px 0 0;background:none;color:#fff; font:500 15px/1.2 var(--adv-fuente);letter-spacing:0;text-decoration:none;text-transform:none;white-space:nowrap; transition:background-color .14s,border-color .14s} html .adv-cab .adv-cab-lista a:hover{background:rgba(255,255,255,.1);color:#fff} /* «Marcas que instalamos»: en la fila de una línea se ve solo «Marcas» (así cabe aunque la aplicación sume su enlace «Noticias»); « que instalamos» sigue ahí para quien usa lector de pantalla o dice el nombre por voz, y el panel plegado lo muestra completo. */ html .adv-cab .adv-cab-lista .adv-cab-mas{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap} /* La página donde estás: texto en negrita Y raya cian (no solo color). aria-current="page" = esta página; "true" = una página de esta sección (por ejemplo CCTV dentro de «Ver soluciones»). */ html .adv-cab .adv-cab-lista a[aria-current]{border-bottom-color:#009fc8;font-weight:700} html .adv-cab .adv-cab-lista a.adv-cab-cta{min-height:46px;margin-left:12px;padding:0 20px;border:0;border-radius:8px; background:#00566b;box-shadow:inset 0 0 0 1px rgba(255,255,255,.32);color:#fff;font-weight:700} html .adv-cab .adv-cab-lista a.adv-cab-cta:hover{background:#006f8a;color:#fff} /* Foco del teclado sobre el azul oscuro: aro blanco, sin el halo blanco de styles.css. */ html .adv-cab :is(a,button):focus-visible{outline:3px solid #fff!important;outline-offset:3px!important;box-shadow:none!important} /* ── Menú plegado en «Menú» (por debajo de 1300 px) ───────────────────────────────────────────────── */ @media (max-width:1299.98px){ html .adv-cab .adv-cab-fila{min-height:72px;padding:8px 20px;gap:0 12px;flex-wrap:nowrap} html .adv-cab .adv-cab-logo img{height:50px} html .adv-cab .atg-menu-toggle{display:inline-flex!important;margin:0} /* El panel cuelga del encabezado: 360 px pegado a la derecha; con !important donde la página y contacto-advsysa.css lo traen (mismo conjunto de propiedades, más peso). */ html .adv-cab .adv-cab-lista{position:absolute!important;top:100%;right:0;left:auto;z-index:2;display:none!important; flex-direction:column;align-items:stretch;gap:2px!important;width:360px;max-width:100%; max-height:calc(100dvh - 84px - var(--adv-arriba,0px) - var(--adv-abajo,0px));margin:0!important; padding:10px 12px 14px!important;overflow-y:auto;background:#fff;color:#18283a;border-radius:0 0 12px 12px; box-shadow:0 12px 24px rgba(9,25,47,.28);transform:none!important;visibility:visible!important} html .adv-cab .adv-cab-lista.atg-menu-open{display:flex!important} html .adv-cab .adv-cab-lista li{width:100%;margin:0!important} html .adv-cab .adv-cab-lista a{display:flex!important;align-items:center;width:100%;min-height:48px;margin:0; padding:12px 14px!important;border:0;border-left:4px solid transparent;border-radius:8px;background:none; color:#18283a;font-size:16px;font-weight:600;white-space:normal} /* «Marcas que instalamos» cuelga de «Ver soluciones»: en el panel va sangrada y con el nombre completo (la lista sigue siendo plana, sin submenú: la aplicación necesita una sola