/* ═══════════════════════════════════════════════════════════════════════ * cabecera.css · LA NAVEGACIÓN DE LAS 56 PÁGINAS · B139 (21 sep 2026) * ─────────────────────────────────────────────────────────────────────── * POR QUÉ ESTE FICHERO EXISTE Y NO ES UN BLOQUE DE `sistema.css` * * Había CUATRO dialectos de cabecera a la vez, y por eso «Origen no está en * la home»: * · la home → `.v98-nav` con desplegable, hamburguesa y un cajón * APARTE (`#mobileMenu`) cuyos destinos no eran los * del desplegable; * · planes + las 4 soluciones → `.v98-nav` con tres enlaces, SIN hamburguesa * y SIN cajón: a 390px se llegaba a 5 destinos y no * había forma de llegar a ningún otro; * · las 12 de módulo/origen/metodología/agentes → `.nav` con su propio CSS, * su propia hamburguesa por checkbox y seis enlaces; * · las 24 de INNsights → `.vh-nav` con EN · Volver · Solicitar acceso, y a * cualquier ancho los mismos 5 destinos. * * `sistema.css` no lo puede arreglar solo porque INNsights NO lo enlaza (y no * lo va a enlazar: son 24 páginas con su propio CSS y treinta selectores que * se pisarían). Un bloque copiado allí serían DOS implementaciones, y la que * se quede atrás no da error: deja de tener una entrada y nadie lo mira. * Por eso la cabecera vive en SU fichero y lo enlazan las 56. * * ─────────────────────────────────────────────────────────────────────── * UN MARCADO, DOS FORMAS * * No hay cajón. `#mobileMenu` era un SEGUNDO marcado con los mismos rótulos * y otros destinos —el desplegable llevaba a `soluciones/engineering/` y el * cajón a `ingenieria/`, que son dos páginas distintas— y esa es exactamente * la avería que se viene a arreglar. Aquí `.v98-nav-links` es el mismo nodo * en los dos sitios: a lo ancho es una fila con desplegables, y por debajo de * 1000px se pliega a un panel. Los destinos no pueden divergir porque son los * mismos elementos. * * El botón de acceso y la hamburguesa quedan FUERA de ese grupo: son lo único * que tiene que seguir en la barra cuando el resto se pliega. * * ─────────────────────────────────────────────────────────────────────── * EL PANEL SE COLOCA SOLO · nada de `top:57px` * * `.v98-nav` es `position:sticky`, o sea un elemento POSICIONADO, así que es * el bloque contenedor de sus descendientes absolutos: `top:100%` cae justo * debajo de la barra, mida lo que mida. Las tres versiones anteriores tenían * un `top:56px` o `57px` escrito a mano y la barra no mide lo mismo en las * tres familias — es la constante que se desajusta sola (B148). * * ─────────────────────────────────────────────────────────────────────── * CADA TOKEN CON RESPALDO, y no es cautela de más * * INNsights define `--paper --ink --ink-dim --line --red --radius --ease` y * NO define `--soft --faint --rule --accent --accent-ink --pad --f-display * --f-mono --surface`. Una variable inexistente invalida la declaración * ENTERA y el navegador la descarta sin decir nada: así se quedó la cabecera * del índice transparente sobre la foto del hero (B141), y así se quedó sin * fondo la tarjeta de proyecto de la app (B262). Los tokens propios se * resuelven UNA vez aquí, con respaldo, y el resto del fichero los consume. * * `--pad` se HEREDA a propósito: la barra tiene que alinear con el contenido * de SU página, y ese margen es 56px en el sistema y 40px en INNsights. Lo * que tiene que ser igual en las 56 no es el número, es que el logotipo caiga * sobre el borde del texto de debajo. * ═══════════════════════════════════════════════════════════════════════ */ .v98-nav, .vi-legal, .lang-pick{ --c-paper: var(--paper, #FBFBFA); --c-ink: var(--ink, #14171A); --c-soft: var(--soft, var(--ink-dim, #4B5563)); --c-faint: var(--faint, #9CA3AF); --c-line: var(--line, rgba(20,23,26,.14)); --c-rule: var(--rule, var(--ink, #14171A)); --c-acc: var(--accent, var(--red, #E1341A)); --c-accink: var(--accent-ink, var(--red-ink, #C22C12)); --c-surf: var(--surface, #F2F2F0); --c-pad: var(--pad, 40px); --c-disp: var(--f-display, 'Archivo', system-ui, sans-serif); --c-body: var(--f-body, 'DM Sans', system-ui, sans-serif); --c-mono: var(--f-mono, 'JetBrains Mono', ui-monospace, monospace); --c-ease: var(--ease, cubic-bezier(.4,0,.2,1)); } /* ═══ LA BARRA · una REGLA, no una barra flotante ════════════════════════ */ .v98-nav{position:sticky;top:0;z-index:100;display:flex;align-items:baseline;gap:26px; padding:20px var(--c-pad) 15px;background:var(--c-paper); border-bottom:1px solid var(--c-rule);font-family:var(--c-body)} .v98-nav a{text-decoration:none} .vitaminn-logo{display:inline-flex;align-items:center;gap:.4em;font-size:18px; line-height:1;color:var(--c-ink);flex:0 0 auto} .vitaminn-logo .mark{height:1.15em;width:auto;flex:0 0 auto} .vitaminn-logo .mark .b{fill:currentColor} .vitaminn-logo .word{font-family:var(--c-disp);font-weight:800;letter-spacing:-.035em} .vitaminn-logo .word .accent{color:var(--c-acc)} .v98-nav-links{display:flex;align-items:baseline;gap:22px;margin-left:auto} .v98-nav-links > a, .navdrop-t{font-size:13.5px;color:var(--c-soft); font-family:inherit;background:none;border:0;padding:0;cursor:pointer;line-height:inherit} .v98-nav-links > a:hover, .navdrop-t:hover{color:var(--c-ink)} .v98-cta{font-size:13.5px;font-weight:500;color:var(--c-ink) !important; border-bottom:2px solid var(--c-acc);padding-bottom:1px;flex:0 0 auto; white-space:nowrap;align-self:baseline} .v98-cta:hover{border-bottom-color:var(--c-ink)} /* ═══ DESPLEGABLES · papel con filo, sin caja flotante con sombra ════════ Se abren con el ratón (`:hover`), con el teclado (`:focus-within`) y con el dedo (`[data-open]`, que pone `cabecera.js`). Los tres hacen falta: en un portátil táctil no hay hover, y sin `focus-within` el menú es inalcanzable con el tabulador. */ .navdrop{position:relative} .navdrop-t{display:inline-flex;align-items:baseline;gap:5px} .navdrop-t::after{content:"";width:0;height:0;border-left:3.5px solid transparent; border-right:3.5px solid transparent;border-top:4px solid currentColor;opacity:.55; transition:transform .18s var(--c-ease);align-self:center} .navdrop:hover > .navdrop-t::after, .navdrop:focus-within > .navdrop-t::after, .navdrop[data-open] > .navdrop-t::after{transform:rotate(180deg)} .navdrop-menu{position:absolute;top:100%;left:-16px;margin-top:14px;min-width:460px; background:var(--c-paper);border:1px solid var(--c-rule);padding:0; display:grid;grid-template-columns:1fr 1fr;opacity:0;visibility:hidden; transition:opacity .14s var(--c-ease),visibility .14s;z-index:130} .navdrop-menu--1{grid-template-columns:1fr;min-width:250px} .navdrop:hover .navdrop-menu, .navdrop:focus-within .navdrop-menu, .navdrop[data-open] .navdrop-menu{opacity:1;visibility:visible} .navdrop-menu > div{padding:16px 18px} .navdrop-menu > div + div{border-left:1px solid var(--c-line)} .navdrop-menu h5{font-family:var(--c-mono);font-size:10.5px;letter-spacing:.09em; text-transform:uppercase;color:var(--c-faint);font-weight:500;margin-bottom:10px} .navdrop-menu a{display:block;padding:6px 0;font-size:13.5px; font-weight:500;color:var(--c-ink);line-height:1.3} .navdrop-menu a:hover{color:var(--c-accink)} .navdrop-menu a small{display:block;font-size:11.5px;font-weight:400; color:var(--c-soft);margin-top:1px} /* ═══ SELECTOR DE IDIOMA · el mismo control en las 56 ════════════════════ */ .lang-pick{position:relative} .lang-pick > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center; gap:5px;font-size:12.5px;color:var(--c-soft);font-family:var(--c-mono);letter-spacing:.02em} .lang-pick > summary::-webkit-details-marker{display:none} .lang-pick > summary:hover{color:var(--c-ink)} .lang-pick summary svg{width:13px;height:13px;flex:none;opacity:.7} .lang-menu{position:absolute;top:100%;right:0;margin-top:6px;background:var(--c-paper); border:1px solid var(--c-rule);min-width:132px;z-index:130} .lang-menu a{display:block;padding:7px 11px;font-size:13px; font-family:var(--c-body);color:var(--c-ink)} .lang-menu a:hover{background:var(--c-surf)} .lang-menu a[aria-current="true"]{color:var(--c-accink);font-weight:600} /* ═══ LA HAMBURGUESA ═════════════════════════════════════════════════════ */ .v98-burger{display:none;align-items:center;justify-content:center;background:none; border:0;cursor:pointer;padding:5px;color:var(--c-ink);align-self:center; margin-left:14px;flex:0 0 auto} .v98-burger svg{display:block} .v98-burger .ic-close{display:none} .v98-burger[aria-expanded="true"] .ic-open{display:none} .v98-burger[aria-expanded="true"] .ic-close{display:block} /* ═══ POR DEBAJO DE 1000px · el MISMO grupo, plegado ═════════════════════ */ @media(max-width:1000px){ .v98-nav-links{ position:absolute;top:100%;left:0;right:0; display:none;flex-direction:column;align-items:stretch;gap:0;margin:0; background:var(--c-paper);border-bottom:1px solid var(--c-rule); max-height:min(78dvh,78svh);overflow-y:auto;z-index:99; /* Sin esto el panel hereda el `align-items:baseline` de la barra y cada fila se alinea con la de al lado en vez de ocupar su ancho. */ } .v98-nav-links.open{display:flex} .v98-nav-links > a{padding:14px var(--c-pad);font-size:15px;font-weight:500; color:var(--c-ink);border-bottom:1px solid var(--c-line)} /* El desplegable deja de ser desplegable: dentro del panel no hay sitio para un segundo nivel que se abre, y esconder siete enlaces detrás de un toque es lo que hacía que nadie encontrara las páginas de tema. */ .navdrop{position:static} .navdrop-t{width:100%;padding:13px var(--c-pad) 7px;font-family:var(--c-mono); font-size:10.5px;letter-spacing:.09em;text-transform:uppercase; color:var(--c-faint);cursor:default;border-top:1px solid var(--c-line)} .navdrop-t::after{display:none} .navdrop-menu{position:static;opacity:1;visibility:visible;display:block; min-width:0;margin:0;border:0;background:transparent;transition:none} .navdrop-menu > div{padding:0} .navdrop-menu > div + div{border-left:0} .navdrop-menu h5{padding:11px var(--c-pad) 3px;margin:0} .navdrop-menu a{padding:11px var(--c-pad) 11px calc(var(--c-pad) + 14px); font-size:14px;color:var(--c-soft);border-bottom:1px solid var(--c-line)} .navdrop-menu a small{display:inline;margin-left:6px;color:var(--c-faint)} .lang-pick{padding:12px var(--c-pad)} .lang-menu{position:static;border:0;margin:6px 0 0;min-width:0;display:flex;gap:6px} .lang-menu a{border:1px solid var(--c-line);padding:6px 12px} .v98-burger{display:inline-flex} } /* EL LOGOTIPO SE VE ENTERO TAMBIÉN EN UN TELÉFONO, y el grupo de la derecha se va al borde (decisión de Miguel, 21 sep 2026 · B143). B287 escondía la palabra por debajo de 480px con una medida de 336px sobre 320 — y ESA MEDIDA ERA DE OTRA BARRA: la de INNsights, con su lista de enlaces entera en la fila. Aquí los enlaces van plegados en el panel desde B139, así que lo único que compite con el logotipo son el botón y la hamburguesa. Vuelto a medir con el logotipo puesto: la fila pide 295,1px sobre 320 en español y 296,1 en inglés, o sea **sobran 25**. La lección no es el número: es que una constante heredada de otra anatomía sigue pareciendo medida y ya no lo está. `margin-left:auto` va en el BOTÓN y no en la hamburguesa: así el hueco se abre ANTES del par, que viaja junto al borde — que es lo que se pidió («la hamburguesa a la derecha, junto a solicitar acceso»). Puesto en la hamburguesa, el botón se quedaría pegado al logotipo y el menú solo en la esquina: dos controles sueltos en vez de un grupo. No se pone en `.v98-nav-links` porque por debajo de 1000px ese grupo es `position:absolute` y no consume hueco: su `margin-left:auto` de la barra ancha ahí no empuja nada, y por eso hoy los tres salen apelotonados a la izquierda. */ /* Con los enlaces plegados la fila de la marca sigue pidiendo aire. La regla vivía en `sistema.css`, que ya no tiene reglas de cabecera, y con ella un `.navdrop{display:none}` que en la barra tenía sentido —el desplegable no cabía— y aquí borraba ONCE destinos del panel: por debajo de 1000px el desplegable ya no está en la barra, está dentro del panel. */ @media(max-width:1000px){ .v98-cta{margin-left:auto} } @media(max-width:600px){ .v98-nav{gap:14px;padding-top:16px;padding-bottom:12px} } @media(max-width:480px){ .v98-nav{padding-left:16px;padding-right:16px;gap:10px} .v98-cta{font-size:13px} .v98-nav-links{--c-pad:16px} } /* ═══ LA TIRA LEGAL · la otra mitad de «tiene que estar en las 56» ═══════ Medido antes de escribir nada: de las 56 páginas publicadas, los enlaces legales estaban en DOS (la home en sus dos idiomas). Las otras 54 —planes, las cuatro soluciones, las nueve de módulo, origen, metodología, agentes y las 24 de INNsights— no tenían ni aviso legal, ni privacidad, ni cookies. No es un descuido de navegación: es obligatorio. Va como ÚLTIMO elemento del `` y no dentro del pie de cada página a propósito: hay cuatro pies distintos y meterla en cada uno serían cuatro encajes que mantener. Aquí es la misma tira en las 56 y no depende de nada de lo que tenga encima. No lleva copyright: los cuatro pies ya lo imprimen y un segundo © sería duplicarlo. */ .vi-legal{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:baseline; padding:14px var(--c-pad);border-top:1px solid var(--c-line); background:var(--c-paper);font-family:var(--c-body);font-size:12px; color:var(--c-soft);line-height:1.4} .vi-legal a{color:var(--c-soft);text-decoration:none} .vi-legal a:hover{color:var(--c-ink);text-decoration:underline}