/* Cabecera interna canónica NormaPymes 2026. Compartida por las páginas orgánicas. */ :root{--np-header-navy:#102947;--np-header-deep:#0a1c31;--np-header-gold:#c5a33f;--np-header-line:#d8d5cb;--np-header-white:#fffefb;--np-header-muted:#5f6872} .utility-bar{color:#53606c;font:600 10px/1.2 Arial,sans-serif;letter-spacing:.055em;background:#f1f2ef;border-bottom:1px solid #dfe1dc} .utility-bar .utility-inner{width:min(1180px,100% - 48px);min-height:34px;margin-inline:auto;display:flex;align-items:center;justify-content:space-between} .utility-bar .utility-inner div{display:flex;align-items:center;gap:32px}.utility-bar a{color:var(--np-header-navy);text-decoration:none} .site-header{box-sizing:border-box;z-index:1000;width:100%;height:96px;color:var(--np-header-navy);border-bottom:1px solid var(--np-header-line);background:rgba(255,254,251,.98);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:24px;padding-inline:max(24px,calc((100vw - 1180px)/2));position:relative;font-family:Arial,sans-serif} .site-header *{box-sizing:border-box}.site-header a{text-decoration:none}.site-header .logo{width:168px;display:block;flex:none}.site-header .logo img{display:block;width:100%;height:auto;max-width:100%;filter:none} .site-header .main-nav{background:#f3f4f1;border:1px solid #dcddd8;border-radius:999px;justify-content:center;justify-self:center;align-items:center;gap:4px;min-width:0;padding:5px;font-size:11px;display:flex;box-shadow:inset 0 1px rgba(255,255,255,.85)} .site-header .main-nav>a,.site-header .nav-services>summary,.site-header .nav-company>summary{color:#34485e;white-space:nowrap;border-radius:999px;align-items:center;min-height:36px;padding:0 13px;font-weight:700;transition:color .2s,background .2s,box-shadow .2s;display:flex;position:relative} .site-header .main-nav>a:hover,.site-header .nav-services[open]>summary,.site-header .nav-services>summary:hover,.site-header .nav-company[open]>summary,.site-header .nav-company>summary:hover{color:var(--np-header-navy);background:#fff;box-shadow:0 4px 14px rgba(16,41,71,.08)} .site-header .nav-services{position:static}.site-header .nav-company{position:relative}.site-header .nav-services>summary,.site-header .nav-company>summary{cursor:pointer;gap:6px;list-style:none}.site-header summary::-webkit-details-marker{display:none} .site-header .nav-services>summary span,.site-header .nav-company>summary span{color:#917728;font-size:13px;transition:transform .2s}.site-header .nav-services[open]>summary span,.site-header .nav-company[open]>summary span{transform:rotate(180deg)} .site-header .service-mega{z-index:1100;border:1px solid var(--np-header-line);border-top:3px solid var(--np-header-gold);background:var(--np-header-white);grid-template-columns:repeat(5,minmax(0,1fr));gap:30px;width:min(1120px,calc(100vw - 48px));max-height:min(720px,calc(100vh - 130px));padding:34px 36px 38px;display:grid;position:absolute;top:calc(100% - 1px);left:50%;overflow-y:auto;transform:translateX(-50%);box-shadow:0 24px 60px rgba(10,28,49,.18)} .site-header .service-group{display:flex;flex-direction:column;gap:9px;min-width:0}.site-header .service-group>strong{color:#806b27;min-height:34px;font:750 10px/1.35 Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase}.site-header .service-group>a{color:#52606d;font-size:11px;line-height:1.35}.site-header .service-group>a:hover{color:var(--np-header-navy);text-decoration:underline;text-underline-offset:3px} .site-header .company-menu{z-index:1101;border:1px solid var(--np-header-line);border-top:3px solid var(--np-header-gold);background:var(--np-header-white);border-radius:14px;width:265px;padding:10px;position:absolute;top:calc(100% + 13px);right:0;box-shadow:0 18px 48px rgba(10,28,49,.18)} .site-header .company-menu a{border-radius:9px;gap:3px;padding:12px 13px;display:grid}.site-header .company-menu a:hover{background:#f3f4f1}.site-header .company-menu strong{color:var(--np-header-navy);font-size:12px}.site-header .company-menu small{color:var(--np-header-muted);font-size:10px} .site-header .header-cta{background:var(--np-header-navy);color:#fff;white-space:nowrap;border-radius:999px;justify-self:end;align-items:center;gap:14px;min-height:46px;padding:0 9px 0 17px;font-size:11px;font-weight:750;display:inline-flex;box-shadow:0 8px 22px rgba(16,41,71,.16)} .site-header .header-cta b{background:var(--np-header-gold);width:30px;height:30px;color:var(--np-header-deep);border-radius:50%;place-items:center;font-size:15px;display:grid} @media(max-width:980px){.site-header{grid-template-columns:auto minmax(0,1fr) auto;gap:18px;height:88px}.site-header .logo{width:154px}.site-header .main-nav{gap:3px;padding:4px}.site-header .main-nav>a,.site-header .nav-services>summary,.site-header .nav-company>summary{min-height:34px;padding-inline:10px}.site-header .service-mega{grid-template-columns:repeat(3,minmax(0,1fr));max-height:70vh}.site-header .header-cta{min-height:42px;padding-left:14px}.site-header .header-cta b{width:27px;height:27px}} @media(max-width:720px){.utility-bar .utility-inner{width:min(100% - 32px,620px);justify-content:center}.utility-bar .utility-inner>span{display:none}.utility-bar .utility-inner div{width:100%;justify-content:space-between;gap:12px;font-size:9px}.site-header{height:auto;min-height:0;grid-template-columns:1fr auto;gap:12px 16px;padding:13px 16px 0}.site-header .logo{width:142px}.site-header .header-cta{min-height:40px;font-size:10px}.site-header .main-nav{grid-area:2/1/auto/-1;justify-content:center;flex-wrap:wrap;width:100%;padding:4px;overflow:visible}.site-header .main-nav>a,.site-header .nav-services>summary,.site-header .nav-company>summary{min-height:32px;padding-inline:8px;font-size:9px}.site-header .nav-services,.site-header .nav-company{position:static}.site-header .service-mega{grid-template-columns:1fr 1fr;gap:25px 22px;width:auto;padding:27px 23px 30px;top:100%;left:16px;right:16px;transform:none}.site-header .company-menu{width:auto;top:100%;left:16px;right:16px}} @media(prefers-reduced-motion:reduce){.site-header *{transition-duration:.01ms!important}} .np-landing-header{box-sizing:border-box;min-height:96px;border-bottom:1px solid var(--np-header-line);background:rgba(255,254,251,.98);display:flex;align-items:center;font-family:Arial,sans-serif;color:var(--np-header-navy)} .np-landing-header *{box-sizing:border-box}.np-landing-header-inner{width:min(1180px,100% - 48px);margin-inline:auto;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:32px}.np-landing-header img{display:block;width:168px;height:auto}.np-landing-header-trust{justify-self:center;color:#5c6975;font-size:12px}.np-landing-header-trust strong{color:var(--np-header-navy)} .np-landing-header-cta{min-height:46px;padding:0 20px;border-radius:999px;background:var(--np-header-navy);color:#fff!important;display:inline-flex;align-items:center;gap:14px;font-size:11px;font-weight:750;text-decoration:none!important;box-shadow:0 8px 22px rgba(16,41,71,.16)}.np-landing-header-cta b{width:28px;height:28px;border-radius:50%;background:var(--np-header-gold);color:var(--np-header-deep);display:grid;place-items:center;font-size:15px} @media(max-width:720px){.np-landing-header{min-height:82px}.np-landing-header-inner{width:calc(100% - 32px);grid-template-columns:1fr auto;gap:14px}.np-landing-header img{width:142px}.np-landing-header-trust{display:none}.np-landing-header-cta{min-height:40px;padding:0 12px;font-size:10px}.np-landing-header-cta b{display:none}} /* El globo de WhatsApp tapaba el mega-menu en movil (verificado el 29-ago-2026 en produccion, 375x812, en 9 paginas). El dock de conversion es fixed con z-index 9990; la cabecera es position:relative con z-index 1000, y al tener z-index CREA CONTEXTO DE APILAMIENTO, asi que subir solo .service-mega (1100) no servia de nada: el panel quedaba atrapado dentro de la cabecera. Consecuencia medida en iso-9001.html: 4 entradas inalcanzables y, peor, el centro de "UNE 19601 - Compliance penal" caia sobre el enlace del globo, de modo que quien intentaba ir a esa pagina abria WhatsApp. Se sube la CABECERA por encima del dock, y SOLO mientras hay un menu abierto: con el menu cerrado vuelve a 1000 y no puede tapar cookies ni pop-ups. Verificado tras el cambio: 0 entradas tapadas con el menu abierto; con el menu cerrado, dock 4/4 clicable y globo clicable. */ .site-header:has(details[open]){z-index:9995} /* Segundo tapado, este PREEXISTENTE y solo en la PRIMERA VISITA: el banner de cookies (aside.cookie-banner, fixed, z-index 11000, 251 px de alto) se come la franja baja del mega-menu. Medido en /ens.html a 375x812 con el consentimiento borrado: de 26 entradas visibles del panel, 5 quedaban bajo el banner, y el centro de "ISO 37001" caia sobre el enlace "Consultar la Politica de Cookies". Subir mas la cabecera NO es la solucion: el banner debe seguir por encima de todo (es consentimiento legal) y por eso esta a 11000. La solucion es que no compitan por el mismo espacio: mientras el banner esta en el DOM, el panel se acorta y se desplaza por dentro, asi que todas las entradas siguen siendo alcanzables. Al aceptar o rechazar, el banner SE ELIMINA del DOM (verificado), :has() deja de casar y el panel recupera su altura completa: el visitante recurrente no nota nada. Verificado: 0 entradas tapadas, 52 px de margen al banner, panel scrollable. */ body:has(aside.cookie-banner) .site-header .service-mega, body:has(aside.cookie-banner) .site-header .company-menu{max-height:calc(100dvh - 460px)} /* SATURACION DE OVERLAYS EN MOVIL — primera visita. El usuario lo vio en /ens.html a 375 px: banner de cookies (251 px) + globo de WhatsApp (157 px) + barra "Pedir presupuesto" + boton flotante, todo a la vez, con el H1 y el primer parrafo enterrados. Medido: 37 % del viewport solo con banner+barra; con el globo pasa del 50 %. CRITERIO (no es opinion, es norma aplicada): - Google exime de la politica de intersticiales intrusivos lo que responde a una OBLIGACION LEGAL, como el consentimiento de cookies. Esa exencion cubre el banner, NO lo que se apile encima: el globo, la barra y el boton no son obligatorios, asi que se evaluan por la regla general "no cubras el contenido principal". La politica menciona expresamente los overlays que aparecen "while they are looking through the page", que es justo cuando sale el globo (con el scroll). - Coalition for Better Ads, "Large Sticky Ads [Mobile]": un elemento fijo que ocupa mas del 30 % de la altura de pantalla esta por debajo del umbral de aceptabilidad. Chrome aplica ese estandar. REGLA: mientras el consentimiento este por resolver, NADA promocional. Al aceptar o rechazar, el banner desaparece y todo vuelve. El :not([hidden]) es imprescindible: en index/formacion el